From a91c4670de5516750a482860c73ca8ac835e6831 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sat, 2 Apr 2016 10:58:55 +0200
Subject: that was close - add weightsVisWrapperWrapper and fix reloading page
 inits

---
 code/weightviswrapper.js | 39 +++++++++++++++++++++++++++++++++------
 index.html               | 44 +++++++++++++++++---------------------------
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/code/weightviswrapper.js b/code/weightviswrapper.js
index 74ae622..aa18ae1 100644
--- a/code/weightviswrapper.js
+++ b/code/weightviswrapper.js
@@ -9,6 +9,7 @@ var WeightVisWrapper = (function() {
         this.svg = this.svgContainer.append("svg");
         this.netVisualizer = new NetVisualizer(this.svg);
         this.resizeHooks = [];
+        this.readyHooks = [];
         this.ready = false;
 
         this.svgContainer
@@ -18,7 +19,7 @@ var WeightVisWrapper = (function() {
             .style("width", "100%");
 
         this.spinner = this.container.append("div")
-            .attr("class", "mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active visContainer")
+            .attr("class", "mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active spinner")
             .style("position", "absolute")
             .style("left", "50%")
             .style("top", "50%");
@@ -96,10 +97,19 @@ var WeightVisWrapper = (function() {
             });
             self.ready = true;
             callback();
+            self.readyHooks.forEach(function(hook) { hook(); });
             console.log("ready"); // DEBUG
         });
     };
 
+    WeightVisWrapper.prototype.afterLoad = function(cb) {
+        if (!this.ready) {
+            this.readyHooks.push(cb);
+        } else {
+            cb();
+        }
+    };
+
     var attrFontSize = 20;
     WeightVisWrapper.prototype.placeAttributes = function() {
         var inputNodes = this.svg.selectAll(".layer-1")[0];
@@ -113,14 +123,13 @@ var WeightVisWrapper = (function() {
     };
 
     WeightVisWrapper.prototype.addPlaceholder = function(el) {
-        el.node().parentNode.appendChild(this.spinner.node().cloneNode(true));
-        el.remove();
+        el.appendChild(this.spinner.node().cloneNode(true));
     };
 
     WeightVisWrapper.prototype.openIn = function(el) {
-        el.node().parentNode.appendChild(this.svgContainer.node());
-        el.node().parentNode.appendChild(this.controlContainer.node());
-        el.remove();
+        d3.select(el).select(".spinner").remove();
+        el.appendChild(this.svgContainer.node());
+        el.appendChild(this.controlContainer.node());
         this.reposition();
     };
 
@@ -151,3 +160,21 @@ var WeightVisWrapper = (function() {
 
     return WeightVisWrapper;
 })();
+
+/* helps with impress.js' stepenter/stepleave events */
+var VisIntegrater = (function() {
+    function VisIntegrater(enterCb, leaveCb) {
+        var self = this;
+        this.slide = document.currentScript.parentElement;
+        this.container = d3.select(this.slide).select(".visContainer");
+        console.log(this.slide);
+        this.slide.addEventListener("impress:stepenter", function() {
+            enterCb(self.slide);
+        });
+        this.slide.addEventListener("impress:stepleave", function() {
+            leaveCb(self.slide);
+        });
+    }
+
+    return VisIntegrater;
+})();
diff --git a/index.html b/index.html
index c750c2b..8f6bb35 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
             impress().init();
 
             d3.selectAll(".visContainer")[0].forEach(function(el) {
-                weightsWrapper.addPlaceholder(d3.select(el));
+                weightsWrapper.addPlaceholder(el.parentNode);
             });
             weightsWrapper.load("data/weights.json", function() {
                 weightsWrapper.reposition();
@@ -30,12 +30,12 @@
             sizeSlides();
         }, false);
 
+        /* responsive deck */
         function sizeSlides() {
             d3.selectAll(".slide")
                 .style("width", parseInt(window.innerWidth) * 0.9 + "px")
                 .style("height", parseInt(window.innerHeight) * 0.9 + "px");
         };
-
         window.addEventListener("resize", sizeSlides);
     </script>
 
@@ -52,22 +52,17 @@
                 <h2>Die Gewichte im Verlauf</h2>
             </div>
 
-            <div class="visContainer" style="width: 100%; height: 100%">
-            </div>
+            <div class="visContainer"></div>
 
             <script type="text/javascript">
-                (function() {
-                    var thisStep = document.currentScript.parentElement;
-                    document.addEventListener("impress:stepenter", function(e) {
-                        if (!weightsWrapper.ready || e.target != thisStep) return;
-                        weightsWrapper.openIn(d3.select(thisStep).select(".visContainer"));
+                new VisIntegrater(function(c) {
+                    weightsWrapper.afterLoad(function() {
+                        weightsWrapper.openIn(c);
                         weightsWrapper.animate(10, 10);
                     });
-                    document.addEventListener("impress:stepleave", function(e) {
-                        if (e.target != thisStep) return;
-                        weightsWrapper.remove(d3.select(thisStep).select(".visContainer"));
-                    });
-                }());
+                }, function(c) {
+                    weightsWrapper.remove(c);
+                });
             </script>
         </div>
 
@@ -76,22 +71,17 @@
                 <h2>Gewichte und Fehler</h2>
             </div>
 
-            <div class="visContainer" style="width: 100%; height: 100%">
-            </div>
+            <div class="visContainer"></div>
 
             <script type="text/javascript">
-                (function() {
-                    var thisStep = document.currentScript.parentElement;
-                    document.addEventListener("impress:stepenter", function(e) {
-                        if (!weightsWrapper.ready || e.target != thisStep) return;
-                        weightsWrapper.openIn(d3.select(thisStep).select(".visContainer"));
-                        weightsWrapper.animate(60, 1);
-                    });
-                    document.addEventListener("impress:stepleave", function(e) {
-                        if (e.target != thisStep) return;
-                        weightsWrapper.remove(d3.select(thisStep).select(".visContainer"));
+                new VisIntegrater(function(c) {
+                    weightsWrapper.afterLoad(function() {
+                        weightsWrapper.openIn(c);
+                        weightsWrapper.animate(10, 10);
                     });
-                }());
+                }, function(c) {
+                    weightsWrapper.remove(c);
+                });
             </script>
         </div>
     </div>
-- 
cgit v1.3.1