Added video demo

cibucristi · Sep 20, 2017 · 7e1ff09 · 7e1ff09
1 parent ced48a2
commit 7e1ff09
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 24 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,9 +2,10 @@
   <div id="app">
     <canvas ref='canvas' class='absolute'></canvas>
     <div v-if='!webGLEnabled'>
-      <div class='center absolute no-webgl'>
+      <div class='absolute no-webgl'>
         <h4>WebGL is not enabled :(</h4>
         <div>While <a href='https://github.com/anvaka/ngraph.path' class='highlighted'>ngraph.path</a> does not require any webgl, this demo needs it.</div>
+        <iframe src="https://www.youtube.com/embed/hGeZuIEV6KU" frameborder="0" allowfullscreen class='video-demo'></iframe>
       </div>
     </div>
     <div v-if='webGLEnabled'>
@@ -262,7 +263,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang='stylus'>
 .absolute {
   position: absolute;
 }
@@ -291,9 +292,22 @@ canvas {
 }
 
 .no-webgl {
+  width: 100%;
   color: hsla(215, 37%, 55%, 1);
-  font-size: 24px;
   flex-direction: column;
+  text-align: center;
+  padding: 12px;
+
+  .video-demo {
+    margin-top: 20px;
+    width: 853px;
+    height: 480px;
+  }
+
+  h4 {
+    margin: 7px 0;
+    font-size: 24px;
+  }
 }
 
 .controls {
@@ -422,11 +436,31 @@ a.about-link {
     padding-bottom: 4px;
   }
 
+  .no-webgl {
+    .video-demo {
+      width: 560px;
+      height: 315px;
+    }
+  }
+
   .direction-switch {
     font-size: 14px;
   }
 }
 
+@media (max-width: 600px) {
+  .no-webgl {
+    padding: 0;
+    div {
+      padding: 7px;
+    }
+    .video-demo {
+      width: 100%;
+      height: 300px;
+    }
+  }
+}
+
 svg.svg-overlay {
   top: 0;
   left: 0;
@@ -438,12 +472,11 @@ svg.svg-overlay {
 
 .route-info-container {
   display: flex;
-  align-items: center;
 }
 
 svg.route-info {
   flex: 1;
-  height: 39px;
+  height: 40px;
   cursor: pointer;
   width: 100%;
   margin-left: 7px;
@@ -454,7 +487,10 @@ a.reset {
   font-size: small;
   padding: 0 10px;
   display: block;
-  height: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 
@@ -475,4 +511,13 @@ a.reset {
   font-family: monospace;
   text-align: left;
 }
+
+a::selection,
+h3::selection,
+h4::selection,
+div::selection,
+p::selection {
+  background: #d03094;
+  color: white;
+}
 </style>
diff --git a/src/appModel.js b/src/appModel.js
@@ -1,25 +1,32 @@
+/**
+ * This is the main application model.
+ */
 const createTree = require('yaqt');
-const npath = require('ngraph.path');
-const loadGraph = require('./lib/loadGraph')
-const Progress = require('./lib/Progress');
-const RouteHandleViewModel = require('./lib/RouteHandleViewModel')
+const npath = require('ngraph.path'); // the pathfinders
+
+const loadGraph = require('./lib/loadGraph'); // loads graph asynchronously
+const Progress = require('./lib/Progress'); // notifies UI about loading progress
+
+// This is a state for two dots A and B on the UI
+const RouteHandleViewModel = require('./lib/RouteHandleViewModel');
+
+// We use a few options in the UI (available path finders, available graphs)
 const getSettings = require('./settings.js')
 
+// Some state is shared in the query string (start/end of the route)
 const queryState = require('query-state');
+
+// And this is how the state communicates asynchronously with App.vue
 const bus = require('./bus');
 
+// Now that we are done with imports, lets initialize the state.
+
+// First of all, read what we currently have in the query string.
 const qs = queryState({
   graph: 'amsterdam-roads'
 });
 
-qs.onChange(function(appState) {
-  let searchChanged = (appState.fromId !== routeStart.pointId) || 
-                      (appState.toId !== routeEnd.pointId);
-  if (searchChanged) {
-    setCurrentSearchFromQueryState();
-    updateRoute();
-  }
-});
+qs.onChange(updateStateFromQueryString);
 
 let graph;      // current graph
 let graphBBox;  // current bounding box for a graph
@@ -71,6 +78,19 @@ const api = {
 
 module.exports = api;
 
+// The app model is ready at this point.
+
+function updateStateFromQueryString(queryState) {
+  let searchChanged = (queryState.fromId !== routeStart.pointId) || 
+                      (queryState.toId !== routeEnd.pointId);
+
+  if (searchChanged) {
+    setCurrentSearchFromQueryState();
+    updateRoute();
+  }
+}
+
+
 /**
  * This method sets a new pathfinder, according to currently selected
  * drop down option from `pathFinderSettings`
@@ -153,6 +173,10 @@ function getPathLength(path) {
 function clearRoute() {
   routeStart.clear();
   routeEnd.clear();
+  qs.set({
+    fromId: -1,
+    toId: -1
+  });
 }
 
 function handleSceneClick(e) {

diff --git a/src/components/About.vue b/src/components/About.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='about'>
-    <div class='background absolute'></div>
+    <div class='background absolute' @click.prevent='close'></div>
     <div class='content'>
       <h3>ngraph.path <a class='close bold' href='#' @click.prevent='close'>close</a></h3>
       <p>
@@ -13,11 +13,16 @@
         path finding speed <span class='bold'>34ms</span> on <span class='bold'>733,844</span> edges graph.
       </p>
       <p>I built the roads graph for this demo using amazing <a href='http://www.openstreetmap.org/' target='_blank' class='highlighted'>OpenStreetMap</a></p>
-      <p>
-        Learn more about this project <a href='https://github.com/anvaka/ngraph.path' class='highlighted'>on GitHub.</a>
-        And stay tuned for updates on <a href='https://twitter.com/anvaka' class='highlighted'>Twitter.</a>
-      </p>
-      <p>With passion, Anvaka</p>
+      <ul>
+        <li>
+          <a href='https://github.com/anvaka/ngraph.path' class='highlighted'>Learn more </a> about this project on GitHub
+        </li><li>
+        Stay tuned for updates on <a href='https://twitter.com/anvaka' class='highlighted'>Twitter.</a>
+        </li><li>
+        <a href='https://www.youtube.com/watch?v=hGeZuIEV6KU' class='highlighted'> Watch a video</a> demo.
+        </li>
+      </ul>
+      <p>With passion,<br/> Anvaka</p>
       <a href='#' @click.prevent='close' class='large-close bold'>
         close
       </a>
@@ -83,6 +88,9 @@ export default {
 }
 
 @media (max-width: 800px) {
+  .about {
+    justify-content: initial;
+  }
   .about .content {
     width: 100%;
     border: none;