add progress bars

3 files changed, 48 insertions, 3 deletions

diff --git a/dep/impress.js b/dep/impress.js
index 8115af1..0673295 100644
--- a/dep/impress.js
+++ b/dep/impress.js
@@ -399,7 +399,7 @@
             
             initialized = true;
             
-            triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
+            triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ], steps: steps });
         };
         
         // `getStep` is a helper function that returns a step element defined by parameter.
diff --git a/index.css b/index.css
index 1e9256c..527a0af 100644
--- a/index.css
+++ b/index.css
@@ -90,3 +90,26 @@ table.center {
 #io h3 {
     padding-bottom: 1em;
 }
+
+.bar {
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+.bar div {
+    width: 0;
+    height: 2px;
+}
+#progressBar {
+    bottom: 0;
+}
+#progressBar div {
+    background: rgba(209, 196, 233, 1);
+    transition: width 1s;
+}
+#timeBar {
+    top: 0;
+}
+#timeBar div {
+    background: rgba(209, 196, 233, 1);
+}
diff --git a/index.html b/index.html
index da8f4c5..7e749bb 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,8 @@
             MathJax.Hub.Config({
                 SVG: {
                     scale: 150
-                }
+                },
+                messageStyle: "none"
             });
 
             emojione.imageType = 'svg';
@@ -60,6 +61,15 @@
             sizeSlides();
         }, false);
 
+        var stepIds = [];
+        document.addEventListener("impress:init", function(event) {
+            for (c=0; c<event.detail.steps.length; c++) stepIds[c+1] = event.detail.steps[c].id;
+        });
+        function progressBar(slide) {
+            d3.select("#progressBar div").style("width", (100 / (stepIds.length-1) * stepIds.indexOf(slide)).toFixed(2) + "%");
+        }
+        document.addEventListener("impress:stepenter", function(e) { progressBar(e.target.id); });
+
         /* responsive deck */
         function sizeSlides() {
             d3.selectAll(".slide")
@@ -100,11 +110,23 @@
         });
     </script>
 
+    <div class="bar" id="progressBar"><div></div></div>
+    <div class="bar" id="timeBar"><div></div></div>
     <div id="impress" data-width="800" data-height="600">
-        <!-- TODO Fortschrittsbalken unten? -->
         <div id="title" class="step slide" data-x="0" data-y="0" data-z="1000">
             <h1>Künstliche neuronale Netze</h1>
             <h2>38 Gewichte in 19 Minuten</h2>
+            <script type="text/javascript">
+                document.currentScript.parentElement.addEventListener("impress:stepleave", function(e) {
+                    d3.select("#timeBar div")
+                        .interrupt()
+                        .style("width", "0%")
+                            .transition()
+                            .duration(19*60*1000)
+                            .ease("linear")
+                        .style("width", "100%");
+                });
+            </script>
         </div>
 
         <!-- TODO Inhaltsübersicht -->