Merge pull request #14 from mobilityhouse/presentation-mode

ongardie-sfdc · web-flow · commit 23b59df03961 · 2016-08-18T09:57:12.000-07:00
Presentation mode
diff --git a/dist/index.html b/dist/index.html
@@ -12,7 +12,6 @@
   </head>
   <body>
     <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
-
     <nav class="navbar navbar-default">
       <div class="container-fluid">
         <!-- This remains in place on narrow screens -->
@@ -64,11 +63,23 @@
       </div>
 
       <div>
-        <div>
-          Playback
-          <input type="checkbox" id="playback" />
-          <button id="slower" class="btn btn-default">-</button>
-          <button id="faster" class="btn btn-default">+</button>
+        <div class="control">
+          <div class="btn-group" role="group" aria-label="playbackgroup">
+            <button id="slower" class="btn btn-default">
+              <span class="glyphicon glyphicon-minus"></span>&nbsp;
+            </button>
+            <button id="playbutton" class="btn btn-default">
+              <span class="glyphicon glyphicon-play play"></span>&nbsp;
+              <span class="glyphicon glyphicon-pause pause" style="display: none"></span>&nbsp;
+            </button>
+            <button id="faster" class="btn btn-default">
+              <span class="glyphicon glyphicon-plus"></span>&nbsp;
+            </button>
+          </div>
+          <button id="details" class="btn btn-default">
+            <span class="glyphicon glyphicon-blackboard"></span>
+            Details
+          </button>
         </div>
         <div>
           Simulate (background)
diff --git a/lib/web.js b/lib/web.js
@@ -313,23 +313,38 @@ class Playback {
     jQuery('body > div')
       .addClass('paused');
 
-    jQuery('#playback').change(() => {
-      if (jQuery('#playback')[0].checked) {
-        this.start();
+    jQuery('#playbutton .play').show();
+    jQuery('#playbutton .pause').hide();
+
+    jQuery('#playbutton').click(_ => {
+      this.toggle(playing => {
+        if (playing == true) {
+          jQuery('#playbutton .play').show();
+          jQuery('#playbutton .pause').hide();
+        } else {
+          jQuery('#playbutton .pause').show();
+          jQuery('#playbutton .play').hide();
+        }
+      });
+    });
+
+    jQuery('#details').click(() => {
+      if (jQuery('#tabs').is(':visible')) {
+        jQuery('#tabs').hide();
       } else {
-        this.stop();
+        jQuery('#tabs').show();
       }
-    });
+    })
   }
 
   stop() {
     window.cancelAnimationFrame(this.animationId);
     this.animationId = undefined;
     pageLoaded.then(() => {
-      jQuery('#playback')[0].checked = false;
       jQuery('body > div')
         .addClass('paused')
         .removeClass('playback');
+      this.isPlaying = false;
     });
   }
 
@@ -348,17 +363,26 @@ class Playback {
       when => this.onAnimationFrame(when));
   }
 
+  toggle(cb) {
+    if(this.isPlaying == true) {
+      this.stop();
+    } else {
+      this.start();
+    }
+    cb(this.isPlaying);
+  }
+
   start() {
     if (this.animationId !== undefined) {
       return;
     }
     this.animationId = window.requestAnimationFrame(
       when => this.onAnimationFrame(when));
     pageLoaded.then(() => {
-      jQuery('#playback')[0].checked = true;
       jQuery('body > div')
         .addClass('playback')
         .removeClass('paused');
+      this.isPlaying = true;
     });
   }
 
