-
Notifications
You must be signed in to change notification settings - Fork 3
/
revealVizScroll.js
87 lines (73 loc) · 2.23 KB
/
revealVizScroll.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/*global Reveal, d3 */
var revealVizScroll = (function(){
var
scrollables = {};
function makeScrollable(name, scrollFn, initFn, stopFn) {
console.log("makeScrollable");
var slides = d3.select(".slides");
var s = slides
.selectAll(".scrollable-"+name)
.data([{}]);
// If the div doesn't exist create it;
s = s.enter()
.append("div")
.attr("class", "scrollable scrollable-" + name)
.merge(s);
// Default initFn
initFn = initFn || function () {
console.log("Init" + name);
s
.append("svg")
.attr("width", 400)
.attr("height", 400)
.append("text")
.attr("x", 100)
.attr("y", 200);
};
// Default scrollFn
scrollFn = scrollFn || function (step) {
console.log("Scroll" + step);
s.select("text")
.transition()
.duration(1000)
.text("Step=" + step);
};
stopFn = stopFn || function (a) {
console.log("Stop" + a);
};
// Bind the this element
initFn = initFn.bind(s.node());
scrollFn = scrollFn.bind(s.node());
stopFn = stopFn.bind(s.node());
// Run the init code
initFn();
// Add the scrollable to the list
scrollables[name] = {
"scroll": scrollFn,
"stop": stopFn
};
}
Reveal.addEventListener( "slidechanged", function( event ) {
var scrollable;
if (d3.select(event.currentSlide).classed("scroll")) {
if (d3.select(event.currentSlide).attr("step") && d3.select(event.currentSlide).attr("scrollable")) {
scrollable = d3.select(event.currentSlide).attr("scrollable");
console.log("Scrollable = " + scrollable + " step "+ d3.select(event.currentSlide).attr("step"));
d3.select(".scrollable-"+scrollable).style("display", "block");
d3.select(".reveal").classed("scrolling", true);
scrollables[scrollable].scroll(d3.select(event.currentSlide).attr("step"));
}
} else {
// Not scrolling
// Stop all scrollables
for (var s in scrollables) {
scrollables[s].stop();
}
d3.selectAll(".scrollable").style("display", "none");
d3.select(".reveal").classed("scrolling", false);
}
} );
return {
makeScrollable: makeScrollable,
};
})();