diff options
| -rw-r--r-- | code/weightviswrapper.js | 39 | ||||
| -rw-r--r-- | 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; +})(); @@ -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> |