add progress bars

1 files changed, 24 insertions, 2 deletions

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 -->