Build latest plugin

Author: Marcin Szczepanski

gallery.plugin.js

@@ -1,5 +1,5 @@
 (function(Gallery) {
-	var galleryTimer;
+	var galleryTimer, galleryMode;
 
 	Gallery.step = function (items, iterations) {
 		var length = items.length,
@@ -23,9 +23,27 @@
 		};
 	};
 
-	Gallery.start = function (elem) {
-		var galleryNode = elem.querySelector('.gallery');
-		if (!galleryNode) return; // early exit if no gallery
+	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) {
@@ -35,8 +53,16 @@
 				item.className = "inactive";
 			}
 			var label = item.querySelector("label");
-			if (!label) {
-				var img = item.querySelector("img");
+			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);
@@ -48,22 +74,45 @@
 		galleryTimer = setInterval(Gallery.step(items, iterations), interval);
 	};
 
-	Gallery.stop = function () {
+	// 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) {
-			if (event.previousSlide.querySelector('.gallery')) {
-				Gallery.stop();
+			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);
 			}
 
-			Gallery.start(event.currentSlide);
 		});
 
 		// during initial load
 		if (Reveal.getCurrentSlide()) {
-			Gallery.start(Reveal.getCurrentSlide());
+			var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
+			if (galleryNode) {
+				Gallery.start(galleryNode, slidesNode);
+			}
 		}
 	}
 })();