From f7c572e0a64227c2e57e8ea3292875f9eedc614d Mon Sep 17 00:00:00 2001 From: The-Penultimate-Defenestrator Date: Mon, 15 Feb 2016 21:01:10 -0500 Subject: [PATCH 1/9] Foundation for a sliding help menu --- css/helpdialog.css | 63 +++++++++++++++++++++++++++++++++++++++++++++- css/style.css | 4 ++- index.html | 26 ++++++++++++++----- js/help.js | 58 +++++++++++++++++++++++++++++++++++++++++- 4 files changed, 142 insertions(+), 9 deletions(-) diff --git a/css/helpdialog.css b/css/helpdialog.css index 793da33..73dd4b5 100644 --- a/css/helpdialog.css +++ b/css/helpdialog.css @@ -19,9 +19,70 @@ bottom:0;top:0;left:0;right:0; margin: 10vh; /* Allow scrolling */ - overflow: scroll; + overflow-y:auto; + overflow-x:hidden; /* Appearance */ background-color: #fff; border: 1px solid #ccc; border-radius: 15px; } +/* Less margin for small screens */ +@media screen and (max-width: 750px) { + .modal-content { + margin: 5vh; + } +} + + +.menu { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + padding:20px; +} +.menu-main { + background-color:#abcdef; +} +.menu-page { + display:none; + background-color:#fedcba; +} + + +/* Styles for animation */ +.toLeft { + -webkit-animation: moveToLeft .6s ease both; + animation: moveToLeft .6s ease both; +} +@keyframes moveToLeft { + from { } + to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } +} + +.fromLeft { + -webkit-animation: moveFromLeft .6s ease both; + animation: moveFromLeft .6s ease both; +} +@keyframes moveFromLeft { + from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } +} + + +.toRight { + -webkit-animation: moveToRight .6s ease both; + animation: moveToRight .6s ease both; +} +@keyframes moveToRight { + from {} + to {-webkit-transform: translateX(100%); transform: translateX(100%);} +} + +.fromRight { + -webkit-animation: moveFromRight .6s ease both; + animation: moveFromRight .6s ease both; +} +@keyframes moveFromRight { + from { -webkit-transform: translateX(100%); transform: translateX(100%); } +} diff --git a/css/style.css b/css/style.css index 33bbb1c..e70e59d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,7 @@ /* == GLOBAL STYLES == */ -* { +*, *:before, *:after{ overflow:hidden; /* Nothing should scroll unless specified otherwise */ + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -72,6 +73,7 @@ button[type=button]:active { background: #fff url(../assets/random.png); background-size: 31px 31px; } + #random:active { background: #f5f5f5 url(../assets/random.png); background-size: 31px 31px; diff --git a/index.html b/index.html index c9c00b2..d92596e 100644 --- a/index.html +++ b/index.html @@ -24,18 +24,32 @@ +
- - +
+ - + @@ -68,10 +82,10 @@

Wikipedia Mapper

+ + - - diff --git a/js/help.js b/js/help.js index e35db68..2e82d02 100644 --- a/js/help.js +++ b/js/help.js @@ -8,4 +8,60 @@ function loadHTML(data) { modalContent.innerHTML = readmeHTML; } -requestPage("README.md",loadHTML); //Read README.md +//requestPage("README.md",loadHTML); //Read README.md + +//Menu items +var menuMain = document.getElementById("menu-main"); +var menuControls = document.getElementById("menu-controls"); +var menuReadme = document.getElementById("menu-readme"); + +var selectedPage=menuMain; + +function removeAnimClasses(elem) { //Remove all animation classes from elem + var cn = elem.className; + var ac = [" toLeft"," toRight"," fromLeft"," fromRight"]; //Animation classes + for (var i=0;i=0) { + cn = cn.replace(ac[i],""); + } + } + elem.className=cn; +} + +function animatePage(newPage) { //Move to `page` + selectedPage.className += " toLeft"; + newPage.className += " fromRight"; + newPage.style.display = "block"; + + setTimeout(function() { + //Reset the scene + removeAnimClasses(selectedPage); + removeAnimClasses(newPage); + selectedPage.style.display = "none"; + selectedPage = newPage; + },600); + +} + +function animateReturn() { //Return to menu + selectedPage.className += " toRight"; + menuMain.className += " fromLeft"; + menuMain.style.display = "block"; + + setTimeout(function() { + //Reset the scene + removeAnimClasses(selectedPage); + removeAnimClasses(menuMain); + selectedPage.style.display = "none"; + selectedPage = menuMain; + },600); +} + +var button=document.getElementById("movetest"); +button.onclick=function(){ + animatePage(menuControls); +} +var button2=document.getElementById("goHome"); +button2.onclick=function(){ + animateReturn() +} From ed071b99eff430ccff3e495ada375604331ef656 Mon Sep 17 00:00:00 2001 From: The-Penultimate-Defenestrator Date: Mon, 15 Feb 2016 21:16:11 -0500 Subject: [PATCH 2/9] Fix bug where both sliding views could become hidden if you were spam-clicking the buttons --- js/help.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/help.js b/js/help.js index 2e82d02..c813799 100644 --- a/js/help.js +++ b/js/help.js @@ -38,6 +38,7 @@ function animatePage(newPage) { //Move to `page` removeAnimClasses(selectedPage); removeAnimClasses(newPage); selectedPage.style.display = "none"; + newPage.style.display = "block"; //In case of rapid button-pressing selectedPage = newPage; },600); @@ -47,12 +48,13 @@ function animateReturn() { //Return to menu selectedPage.className += " toRight"; menuMain.className += " fromLeft"; menuMain.style.display = "block"; - + setTimeout(function() { //Reset the scene removeAnimClasses(selectedPage); removeAnimClasses(menuMain); selectedPage.style.display = "none"; + menuMain.style.display = "block"; //In case of rapid button-pressing selectedPage = menuMain; },600); } From bf175bf5ce5894dab45dce2b8a8483a5f175c82f Mon Sep 17 00:00:00 2001 From: The-Penultimate-Defenestrator Date: Mon, 15 Feb 2016 21:25:28 -0500 Subject: [PATCH 3/9] Two different pages Now all that's left is putting in the content and styling the whole thing. All the technical stuff is done. --- index.html | 9 +++++---- js/help.js | 20 ++++++++++++++------ 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index d92596e..d7c4a19 100644 --- a/index.html +++ b/index.html @@ -39,15 +39,16 @@
- +
-
- +
+
diff --git a/js/help.js b/js/help.js index c813799..cf5361b 100644 --- a/js/help.js +++ b/js/help.js @@ -57,13 +57,21 @@ function animateReturn() { //Return to menu menuMain.style.display = "block"; //In case of rapid button-pressing selectedPage = menuMain; },600); + } -var button=document.getElementById("movetest"); -button.onclick=function(){ +var button1=document.getElementById("button1"); +button1.onclick=function(){ animatePage(menuControls); -} -var button2=document.getElementById("goHome"); +}; + +var button2=document.getElementById("button2"); button2.onclick=function(){ - animateReturn() -} + animatePage(menuReadme); +}; + +var button3=document.getElementById("button3"); +button3.onclick=animateReturn; + +var button4=document.getElementById("button4"); +button4.onclick=animateReturn; From c29b802212f380d5e0ad9eaa5cc2178f1414f0b4 Mon Sep 17 00:00:00 2001 From: The-Penultimate-Defenestrator Date: Tue, 16 Feb 2016 19:05:55 -0500 Subject: [PATCH 4/9] Implement style and restore README Now most of the style for the menu is in place. It is intentionally styled to look similar to the iOS UINavigationController, as is seen in the iOS "Settings" app. Also restore the README to the menu so that it is useful again. If you open the "help" menu and press "README", you will see the README along with a floating "back" button. The "About" and "Controls" pages have a heading that says "Not yet implemented" and a button that goes back to the main menu page. --- css/helpdialog.css | 47 +++++++++++++++++++++++++++++++++++++++++++--- js/bindings.js | 2 ++ js/help.js | 31 ++++++++++++++++-------------- js/main.js | 11 ++++++----- 4 files changed, 69 insertions(+), 22 deletions(-) diff --git a/css/helpdialog.css b/css/helpdialog.css index 73dd4b5..3ea42f2 100644 --- a/css/helpdialog.css +++ b/css/helpdialog.css @@ -40,14 +40,55 @@ left:0; width:100%; height:100%; - padding:20px; + padding-top:20px; + background-color:#f1f0f7; +} + +.menu > ul { + width:100%; + padding:0 !important; +} + +.menu > ul > li { /* Items in help menu list */ + font-size: 18px; + background-color: #fff; + border-top: 1px solid #e2e2e2; + line-height: 40px; + padding-left: 20px; } +.menu-spacer { /* Spacers in help menu list */ + height:32px; + background-color:#f1f0f7 !important; + border-top: 1px solid #e2e2e2; +} +.menu > ul > li:last-child { /* Only bottom element needs bottom border */ + border-bottom: 1px solid #e2e2e2; +} + .menu-main { - background-color:#abcdef; + } .menu-page { display:none; - background-color:#fedcba; + +} + +#readme { + position:absolute; + width:100%; + height:100%; + top:0; + left:0; + padding:20px; + background-color: #fff; + overflow-y:auto; +} + +#menu-readme { + padding:20px; +} +.menu button { + position:absolute; } diff --git a/js/bindings.js b/js/bindings.js index 6401d80..c2e8cec 100644 --- a/js/bindings.js +++ b/js/bindings.js @@ -4,6 +4,8 @@ // Is the user on a touch device? var isTouchDevice = 'ontouchstart' in document.documentElement; +// Have changes been made +var changesmade = false; //Functions that will be used as bindings function expandEvent (params) { // Expand a node (with event handler) diff --git a/js/help.js b/js/help.js index cf5361b..70b638f 100644 --- a/js/help.js +++ b/js/help.js @@ -4,11 +4,11 @@ //Render `data` and load it into the modal function loadHTML(data) { var readmeHTML = marked(data); //Render README from markdown to HTML - var modalContent = document.getElementById("modal-content"); - modalContent.innerHTML = readmeHTML; + var target = document.getElementById("readme"); + target.innerHTML = readmeHTML; } -//requestPage("README.md",loadHTML); //Read README.md +requestPage("README.md",loadHTML); //Read README.md //Menu items var menuMain = document.getElementById("menu-main"); @@ -17,7 +17,8 @@ var menuReadme = document.getElementById("menu-readme"); var selectedPage=menuMain; -function removeAnimClasses(elem) { //Remove all animation classes from elem +//Remove all animation classes from elem +function removeAnimClasses(elem) { var cn = elem.className; var ac = [" toLeft"," toRight"," fromLeft"," fromRight"]; //Animation classes for (var i=0;i Date: Tue, 16 Feb 2016 19:07:18 -0500 Subject: [PATCH 5/9] Whoops. Forgot to include this in the last commit Disregard that one :) --- index.html | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d7c4a19..45b2313 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,8 @@ + + @@ -37,18 +39,26 @@ - +
-

Not yet implemented.

+

Not yet implemented.

- +
From 9ab12deba9f8907606d867ed6b7d79e66a1611a2 Mon Sep 17 00:00:00 2001 From: Luke Taylor Date: Sat, 20 Feb 2016 08:34:37 -0500 Subject: [PATCH 8/9] Add stuff to the "About" menu --- css/helpdialog.css | 10 ++++------ index.html | 41 ++++++++++++++++++++++++++++++++--------- js/help.js | 12 ++++++------ 3 files changed, 42 insertions(+), 21 deletions(-) diff --git a/css/helpdialog.css b/css/helpdialog.css index 103dd00..f32ef84 100644 --- a/css/helpdialog.css +++ b/css/helpdialog.css @@ -79,6 +79,7 @@ .menu button { height:33px; line-height:33px; + opacity:0.75; } .menu button > img { height:20px; @@ -88,23 +89,20 @@ .menu-page { display:none; - + padding:20px; } -#readme { +.menu-content { position:absolute; width:100%; height:100%; top:0; left:0; padding:20px; - background-color: #fff; + background-color: #fff !important; overflow-y:auto; } -#menu-readme { - padding:20px; -} .menu button { position:absolute; } diff --git a/index.html b/index.html index 2268c7b..643f525 100644 --- a/index.html +++ b/index.html @@ -41,24 +41,46 @@
- -
- -

Not yet implemented.

+ +
+
+ +

Wikipedia Mapper

+ +

A web app for visualizing the connection of wikipedia pages.

+

Wikipedia Mapper works based on a concept of nodes, which are dots on the screen.

+

Start by entering a topic into the text box at the top, and pressing Go. Let's say you entered Cats, a single node will be generated, labeled Cat. This is called the central node

+

Nodes can be expanded. On most platforms, this is a single click. If you're on a touch device, press and hold on the node. (See “Controls”)

+

Expanding a node creates a new node for each page that is linked to from the first paragraph of the article. These nodes will be connected to the node from which they were expanded. For example, expanding Cat will create eight nodes, including Fur, Mammal, Carnivore, and Domestication, and these will each be connected to Cat.

+

Each new node can be expanded in the same way. This is how complex networks emerge.

+

Other features include:

+
    +
  • A “Random Article” button
    • +
  • Hover over a node to see the path that you took to get there
    • +
  • The color of a node indicates how bly it is connected to the central topic. Lighter colored nodes have looser connections to the central topic.
    • +
+

For more details, see the GitHub README in the Help menu.

+ +
+ +
+ +
+

Controls

+
+ -
-
- +
+
+
@@ -66,6 +88,7 @@

Not yet implemented.

+

Wikipedia Mapper

A tool for visualizing the connections between wikipedia pages.
diff --git a/js/help.js b/js/help.js index 70b638f..74912c8 100644 --- a/js/help.js +++ b/js/help.js @@ -12,6 +12,7 @@ requestPage("README.md",loadHTML); //Read README.md //Menu items var menuMain = document.getElementById("menu-main"); +var menuAbout = document.getElementById("menu-about"); var menuControls = document.getElementById("menu-controls"); var menuReadme = document.getElementById("menu-readme"); @@ -61,7 +62,7 @@ function animateReturn() { document.getElementById("aboutActivator").onclick=function(){ - animatePage(menuControls); + animatePage(menuAbout); }; document.getElementById("controlsActivator").onclick=function(){ @@ -73,8 +74,7 @@ document.getElementById("readmeActivator").onclick=function(){ }; -var button3=document.getElementById("button3"); -button3.onclick=animateReturn; - -var button4=document.getElementById("button4"); -button4.onclick=animateReturn; +backButtons=document.getElementsByClassName("backbutton") +for (var i=0;i Date: Sat, 20 Feb 2016 21:40:07 -0500 Subject: [PATCH 9/9] Finish the help menu Added a "Controls" page. It's even different on desktop and mobile. --- .gitignore | 2 ++ README.md | 2 +- index.html | 26 +++++++-------- js/bindings.js | 2 -- js/help.js | 90 +++++++++++++++++++++++++++++++++++++++----------- js/main.js | 4 +++ 6 files changed, 91 insertions(+), 35 deletions(-) diff --git a/.gitignore b/.gitignore index 3a01937..15c575c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ libraries/* .fuse_hidden* # Don't include .DS_Store files *.DS_Store +# Don't include textastic iCloud stuff +*.icloud diff --git a/README.md b/README.md index 2a07fa5..a9b0750 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ I suck at JavaScript, which is why I wrote a lot of the underlying code in Pytho - [x] Create small info button that explains the project, controls, etc. - [x] Render this README into the help dialog - [x] The area with the network should contain instructions when it is blank - - [ ] Create a more thorough help dialog explaining controls, etc. which also includes the README + - [x] Create a more thorough help dialog explaining controls, etc. which also includes the README - [x] Add a "Random Article" button - [ ] While waiting for a node to expand, show a spinner on it to indicate progress is happening diff --git a/index.html b/index.html index 643f525..36c3750 100644 --- a/index.html +++ b/index.html @@ -51,32 +51,32 @@

- +

Wikipedia Mapper

- -

A web app for visualizing the connection of wikipedia pages.

-

Wikipedia Mapper works based on a concept of nodes, which are dots on the screen.

-

Start by entering a topic into the text box at the top, and pressing Go. Let's say you entered Cats, a single node will be generated, labeled Cat. This is called the central node

-

Nodes can be expanded. On most platforms, this is a single click. If you're on a touch device, press and hold on the node. (See “Controls”)

-

Expanding a node creates a new node for each page that is linked to from the first paragraph of the article. These nodes will be connected to the node from which they were expanded. For example, expanding Cat will create eight nodes, including Fur, Mammal, Carnivore, and Domestication, and these will each be connected to Cat.

-

Each new node can be expanded in the same way. This is how complex networks emerge.

-

Other features include:

+ +

A web app for visualizing the connection of wikipedia pages.

+

Wikipedia Mapper works based on a concept of nodes, which are dots on the screen.

+

Start by entering a topic into the text box at the top, and pressing Go. Let's say you entered Cats, a single node will be generated, labeled Cat. This is called the central node

+

Nodes can be expanded. On most platforms, this is a single click. If you're on a touch device, press and hold on the node. (See “Controls”)

+

Expanding a node creates a new node for each page that is linked to from the first paragraph of the article. These nodes will be connected to the node from which they were expanded. For example, expanding Cat will create eight nodes, including Fur, Mammal, Carnivore, and Domestication, and these will each be connected to Cat.

+

Each new node can be expanded in the same way. This is how complex networks emerge.

+

Other features include:

  • A “Random Article” button
  • Hover over a node to see the path that you took to get there
  • The color of a node indicates how bly it is connected to the central topic. Lighter colored nodes have looser connections to the central topic.
    • -
+

For more details, see the GitHub README in the Help menu.

- +
-

Controls

+
- +
diff --git a/js/bindings.js b/js/bindings.js index c2e8cec..2f50486 100644 --- a/js/bindings.js +++ b/js/bindings.js @@ -2,8 +2,6 @@ // network, in the search bar, and for the modal popup. -// Is the user on a touch device? -var isTouchDevice = 'ontouchstart' in document.documentElement; // Have changes been made var changesmade = false; diff --git a/js/help.js b/js/help.js index 74912c8..fde6b6b 100644 --- a/js/help.js +++ b/js/help.js @@ -8,16 +8,15 @@ function loadHTML(data) { target.innerHTML = readmeHTML; } -requestPage("README.md",loadHTML); //Read README.md +requestPage("README.md",loadHTML); //Read README.md and load it into the appropriate menu //Menu items var menuMain = document.getElementById("menu-main"); -var menuAbout = document.getElementById("menu-about"); -var menuControls = document.getElementById("menu-controls"); -var menuReadme = document.getElementById("menu-readme"); - +// The currently selected page var selectedPage=menuMain; + +//== EASY ANIMATION FUNCTIONS ==// //Remove all animation classes from elem function removeAnimClasses(elem) { var cn = elem.className; @@ -30,8 +29,7 @@ function removeAnimClasses(elem) { elem.className=cn; } -//Move to `page` -function animatePage(newPage) { +function animatePage(newPage) { //Move to `page` selectedPage.className += " toLeft"; newPage.className += " fromRight"; newPage.style.display = "block"; @@ -45,8 +43,7 @@ function animatePage(newPage) { },600); } -//Return to menu -function animateReturn() { +function animateReturn() { //Return to menu selectedPage.className += " toRight"; menuMain.className += " fromLeft"; menuMain.style.display = "block"; @@ -61,20 +58,75 @@ function animateReturn() { } -document.getElementById("aboutActivator").onclick=function(){ - animatePage(menuAbout); +// Bind opening the help pages +document.getElementById("aboutActivator").onclick=function(){ //Open about page + animatePage(document.getElementById("menu-about")); }; - -document.getElementById("controlsActivator").onclick=function(){ - animatePage(menuControls); +document.getElementById("controlsActivator").onclick=function(){ // Open controls page + animatePage(document.getElementById("menu-controls")); }; - -document.getElementById("readmeActivator").onclick=function(){ - animatePage(menuReadme); +document.getElementById("readmeActivator").onclick=function(){ //Open README page + animatePage(document.getElementById("menu-readme")); }; - - +// Bind all the back buttons to return to main menu page backButtons=document.getElementsByClassName("backbutton") for (var i=0;i