Finish the help menu

Added a "Controls" page. It's even different on desktop and mobile.

.gitignore

@@ -6,3 +6,5 @@ libraries/*
 .fuse_hidden*
 # Don't include .DS_Store files
 *.DS_Store
+# Don't include textastic iCloud stuff
+*.icloud

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
 

index.html

@@ -51,32 +51,32 @@
       <!-- About -->
       <div class="menu menu-page" id="menu-about">
         <div class="menu-content markdown-body">
-        
+
           <h1>Wikipedia Mapper</h1>
-          
-          <p>A web app for visualizing the connection of wikipedia pages. </p>          
-          <p>Wikipedia Mapper works based on a concept of <b>nodes</b>, which are dots on the screen.</p>          
-          <p>Start by entering a topic into the text box at the top, and pressing <b>Go</b>. Let&#39;s say you entered <em>Cats</em>, a single node will be generated, labeled <em>Cat</em>. This is called the <b>central node</b></p>          
-          <p>Nodes can be <b>expanded</b>. On most platforms, this is a single click. If you&#39;re on a touch device, press and hold on the node. (See &ldquo;Controls&rdquo;)</p>          
-          <p>Expanding a node creates a new node for <b>each page</b> that  is linked to from the <b>first paragraph</b> of the article. These nodes will be <b>connected</b> to the node from which they were expanded. For example, expanding <em>Cat</em> will create eight nodes, including <em>Fur</em>, <em>Mammal</em>, <em>Carnivore</em>, and <em>Domestication</em>, and these will each be connected to <em>Cat</em>. </p>          
-          <p>Each new node can be expanded in the same way. This is how complex networks emerge.</p>          
-          <p>Other features include:</p>          
+
+          <p>A web app for visualizing the connection of wikipedia pages. </p>
+          <p>Wikipedia Mapper works based on a concept of <b>nodes</b>, which are dots on the screen.</p>
+          <p>Start by entering a topic into the text box at the top, and pressing <b>Go</b>. Let&#39;s say you entered <em>Cats</em>, a single node will be generated, labeled <em>Cat</em>. This is called the <b>central node</b></p>
+          <p>Nodes can be <b>expanded</b>. On most platforms, this is a single click. If you&#39;re on a touch device, press and hold on the node. (See &ldquo;Controls&rdquo;)</p>
+          <p>Expanding a node creates a new node for <b>each page</b> that  is linked to from the <b>first paragraph</b> of the article. These nodes will be <b>connected</b> to the node from which they were expanded. For example, expanding <em>Cat</em> will create eight nodes, including <em>Fur</em>, <em>Mammal</em>, <em>Carnivore</em>, and <em>Domestication</em>, and these will each be connected to <em>Cat</em>. </p>
+          <p>Each new node can be expanded in the same way. This is how complex networks emerge.</p>
+          <p>Other features include:</p>
           <ul>
           <li>A &ldquo;Random Article&rdquo; button</li>
           <li>Hover over a node to see the path that you took to get there</li>
           <li>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. </li>
-          </ul>          
+          </ul>
           <p>For more details, see the GitHub README in the Help menu.</p>
-          
+
         </div>
         <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
       </div>
       <!-- Controls -->
       <div class="menu menu-page" id="menu-controls">
-        <h1>Controls</h1>
+        <div id="controls" class="menu-content markdown-body"></div>
         <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
       </div>
-      
+
       <!-- README page -->
       <div class="menu menu-page" id="menu-readme">
         <div id="readme" class="menu-content"></div>

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;
 

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<backButtons.length;i++) {
   backButtons[i].onclick=animateReturn;
 }
+
+
+// Load controls page for different devices
+var controlspage = document.getElementById("controls");
+
+var desktopControls = "\
+<h1> Controls </h1> \
+<p> You're on a desktop device, so the desktop controls are active. This page \
+describes the desktop controls, which may be different on mobile touch devices.</p>\
+\
+<h3> Navigation </h3> \
+<p> Click and drag to pan, and scroll to zoom. </p>\
+\
+<h3> Expanding nodes </h3> \
+<p>To expand a node, just click on the node. The node might take a while to \
+expand, depending on the speed of my server, Wikipedia's servers, and your \
+internet connection. </p> \
+\
+<h3> Tracebacks </h3> \
+<p> You can see the path you took to get to a node by mousing-over the node.</p> \
+\
+<h3> Opening pages </h3> \
+<p> You can open the Wikipedia page for a node at any time, simply by \
+double-clicking it. Double-clicking the node <em>Cat</em> will open the wikipedia \
+page for <em>Cat</em>. In most browsers, the page will open in a new tab. Pop-up \
+blockers might stop this. </p>\
+"
+var touchControls = "\
+<h1> Controls </h1> \
+<p> You're on a touch device, so the touch controls are active. This page \
+describes the touch controls, controls may be different on desktop devices \
+without touchscreens. </p> \
+\
+<h3> Navigation </h3> \
+<p> You can use the classic and natural touch controls of pinch to zoom and \
+drag to pan. </p>\
+\
+<h3> Expanding nodes </h3> \
+<p>To expand a node, long-press on the node. You won't have to press for more than \
+half a second, but the node might take slightly longer than that to expand.</p> \
+\
+<h3> Tracebacks </h3> \
+<p> You can see the path you took to get to a node by lightly tapping the node. \
+Tap anywhere else to stop highlighting the traceback. </p> \
+\
+<h3> Opening pages </h3> \
+<p> You can open the Wikipedia page for a node at any time, simply by \
+double-tapping on it. Double-tapping the node <em>Cat</em> will open the wikipedia \
+page for <em>Cat</em>. The page will open in a new tab.</p> \
+"
+
+
+if (isTouchDevice) {
+  controlspage.innerHTML=touchControls;
+} else {
+  controlspage.innerHTML=desktopControls;
+}

js/main.js

@@ -4,6 +4,10 @@
 
 var nodes, edges, startpage, network //Global variables
 
+
+// Is the user on a touch device?
+var isTouchDevice = 'ontouchstart' in document.documentElement;
+
 var container = document.getElementById('container');
 //Global options
 var options = {