Merge pull request #11 from The-Penultimate-Defenestrator/Help-Menu

Help menu

.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
 

css/helpdialog.css

@@ -19,9 +19,127 @@
   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-top:20px;
+  background-color:#f1f0f7;
+}
+
+/* Styles for UINavigationController-like menu*/
+.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;
+  height:40px;
+  padding-left: 20px;
+}
+.menu > ul > li > img {
+  margin-top:3px;
+  margin-bottom:8px;
+  margin-right:20px;
+  height:30px;
+  vertical-align: middle;
+  width:auto;
+  border: 1px solid #ccc;
+  border-radius:50%;
+}
+.menu > ul > li:last-child { /* Only bottom element needs bottom border */
+  border-bottom: 1px solid #e2e2e2;
+}
+.menu-spacer { /* Spacers in help menu list */
+  height:32px;
+  background-color:#f1f0f7 !important;
+  border-top: 1px solid #e2e2e2;
+}
+
+.menu button {
+  height:33px;
+  line-height:33px;
+  opacity:0.75;
+}
+.menu button > img {
+  height:20px;
+  width:auto;
+  vertical-align: center;
+}
+
+.menu-page {
+  display:none;
+  padding:20px;
+}
+
+.menu-content {
+  position:absolute;
+  width:100%;
+  height:100%;
+  top:0;
+  left:0;
+  padding:20px;
+  background-color: #fff !important;
+  overflow-y:auto;
+}
+
+.menu button {
+  position:absolute;
+}
+
+
+/* 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%); }
+}

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;

index.html

@@ -20,27 +20,75 @@
   <!-- Load my CSS-->
   <link rel="stylesheet" href="./css/style.css" type="text/css"/>
   <link rel="stylesheet" href="./css/helpdialog.css" type="text/css"/>
+  <!-- Load css for the github README -->
+  <link rel="stylesheet" href="./css/github-markdown.css" type="text/css"/>
 
 </head>
 
 <body>
+  <!-- The top bar -->
   <div id="formbox">
     <input id="pageName" type="text" placeholder="Wikipedia" title="Enter the name of a wikipedia page, then press 'Go'"/>
     <button id="submit" type="button" title="Enter the name of a wikipedia page, then press 'Go'">Go</button>
-    <button id="random"type=button title="Random article"> &nbsp </button>
-
+    <button id="random" type=button title="Random article"> &nbsp </button>
   </div>
 
+  <!-- The about button -->
   <button id="about" type="button">?</button>
 
-  <!-- Modal about popup-->
+  <!-- Modal help popup-->
   <div id="modal" class="fullscreen modal">
-    <div id="modal-content" class="modal-content markdown-body"></div>
+    <div id="modal-content" class="modal-content markdown-body">
+      <!-- Main menu chooser (modeled after the iOS Settings app) -->
+      <div class="menu menu-main" id="menu-main" menuname="Main">
+        <ul>
+          <li id="aboutActivator"><img src="assets/information.png"/> About</li>
+          <li id="controlsActivator"><img src="assets/game-controller.png"/> Controls</li>
+          <li class="menu-spacer"></li>
+          <li id="readmeActivator"><img src="assets/GitHub.png"/>Github README</li>
+        </ul>
+      </div>
+      <!-- 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>
+          <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>
+          <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">
+        <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>
+        <button class="backbutton" type="button"><img src="assets/arrow-back.png"/> Back</button>
+      </div>
+    </div>
   </div>
 
 
   <!-- Will hold the network -->
   <div id="container" class="fullscreen">
+    <!-- Welcome message -->
     <div class="markdown-body" style="position:fixed;top:58px;padding:25px">
       <h1>Wikipedia Mapper</h1>
       <p>A tool for visualizing the connections between wikipedia pages.<br>
@@ -56,8 +104,6 @@ <h1>Wikipedia Mapper</h1>
   <link rel="stylesheet" href="./libraries/vis/vis.min.css" type="text/css" />
   <!-- Load marked for rendering README.md -->
   <script type="text/javascript" src="./libraries/marked.js"></script>
-  <!-- Load css for the github README -->
-  <link rel="stylesheet" href="./css/github-markdown.css" type="text/css"/>
 
   <!-- My Stuff -->
   <!-- Load API functions -->
@@ -68,10 +114,10 @@ <h1>Wikipedia Mapper</h1>
   <script type="text/javascript" src="./js/main_functions.js"> </script>
   <!-- Load the main script -->
   <script type="text/javascript" src="./js/main.js"> </script>
+  <!-- Build help popup -->
+  <script type="text/javascript" src="./js/help.js"> </script>
   <!-- Load bindings -->
   <script type="text/javascript" src="./js/bindings.js"> </script>
-  <!-- Render README into help popup -->
-  <script type="text/javascript" src="./js/help.js"> </script>
 
 </body>
 

js/bindings.js

@@ -2,8 +2,8 @@
 // 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;
 
 //Functions that will be used as bindings
 function expandEvent (params) { // Expand a node (with event handler)