123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- (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);
- }
- }
- }
- })();
|