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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
(function(Gallery) {
var galleryTimer, galleryMode;
Gallery.step = function (items, iterations) {
var length = items.length,
ptr = 0,
loops = 0;
return function () {
if (iterations > 0 && loops === iterations) {
return;
}
items[ptr].className = "inactive";
if (ptr === length - 1) {
loops++;
if (iterations === 0 || loops < iterations) {
ptr = 0;
}
} else {
ptr++;
}
items[ptr].className = "active";
};
};
Gallery.start = function (galleryNode, contextNode) {
contextNode = contextNode || document.body.firstChild;
galleryMode = galleryNode.dataset.mode || 'normal';
if (galleryMode === 'full-screen') {
// FIXME remove depenency on Reveal, have a callback? function
// that will get a root node to move full screen slides to (ie. slidesNode)
// for full screen mode we need to:
// - take the gallery out of the flow and insert it before "slides"
// - hide slides
// - make it full screen
var placeholder = document.createElement("div");
placeholder.id = "gallery-placeholder";
galleryNode.parentNode.replaceChild(placeholder, galleryNode);
if (contextNode.parentNode) {
contextNode.parentNode.insertBefore(galleryNode, contextNode);
}
}
var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
items.forEach(function (item, index) {
if (index === 0) {
item.className = "active";
} else {
item.className = "inactive";
}
var label = item.querySelector("label");
var img = item.querySelector("img");
if (galleryMode === 'full-screen') {
img.style.display = "none";
item.style.backgroundImage = "url(" + img.src + ")";
} else {
img.style.display = "";
}
if (!label && img.attributes.alt) {
label = document.createElement("label");
label.innerHTML = img.attributes.alt.value;
item.appendChild(label);
}
});
var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
var interval = (galleryNode.dataset.interval || 1) * 1000;
galleryTimer = setInterval(Gallery.step(items, iterations), interval);
};
// FIXME Gallery.stop should take elem and root nodes as well
Gallery.stop = function (galleryNode, contextNode) {
clearInterval(galleryTimer);
if (galleryMode === "full-screen") {
// - put the gallery back where it was
var placeholder = document.getElementById("gallery-placeholder");
placeholder.parentNode.replaceChild(galleryNode, placeholder);
var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
items.forEach(function (item, index) {
var img = item.querySelector("img");
item.style.backgroundImage = "";
img.style.display = "";
});
}
};
})(window.Gallery = window.Gallery || {});(function() {
if( typeof window.addEventListener === 'function' ) {
var slidesNode = document.querySelector(".slides");
Reveal.addEventListener("slidechanged", function (event) {
console.log(event)
var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
if (galleryNode) {
Gallery.stop(galleryNode, slidesNode);
}
galleryNode = event.currentSlide.querySelector('.gallery');
if (galleryNode) {
Gallery.start(galleryNode, slidesNode);
}
});
// during initial load
if (Reveal.getCurrentSlide()) {
var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
if (galleryNode) {
Gallery.start(galleryNode, slidesNode);
}
}
}
})();
|
