lib/servel/templates/gallery.js in servel-0.2.0 vs lib/servel/templates/gallery.js in servel-0.3.0

@@ -1,112 +1,132 @@
-var pages = null;
-var currentPage = 1;
+var Gallery = (function() {
+  var urls = [];
+  var types = [];
+  var currentIndex = 0;
 
-function loadPages() {
-  pages = [];
+  function initItems() {
+    var links = document.querySelectorAll("#listing a.default.media");
+    for(var i = 0; i < links.length; i++) {
+      var link = links[i];
 
-  var links = document.querySelectorAll("#listing a.viewable");
-  for(var i = 0; i < links.length; i++) {
-    var link = links[i];
-    var type = link.classList.contains("image") ? "image" : "video";
-    pages.push({ url: link.href, type: type });
+      urls.push(link.href);
+      types.push(link.dataset.type);
+    }
   }
-}
 
-function page(index) {
-  if(arguments.length == 1) {
-    if(isNaN(index) || index < 1) index = 1;
-    if(index > pages.length) index = pages.length;
-    
-    currentPage = index;
-    showCurrentPage();
+  function render() {
+    var url = urls[currentIndex];
+    var type = types[currentIndex];
+
+    var galleryElement = document.querySelector("#gallery");
+    galleryElement.classList.remove("image", "video", "audio");
+    galleryElement.classList.add(type);
+
+    document.getElementById(type).src = url;
+
+    window.scrollTo(0, 0);
+
+    //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
   }
-  else {
-    var index = currentPage;
-    if(isNaN(index) || index < 1) index = 1;
+
+  function clamp(index) {
+    if(index == null || isNaN(index) || index < 0) return 0;
+    if(index >= urls.length) return urls.length - 1;
     return index;
   }
-}
 
-function atBottom() {
-  return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
-}
+  function go(index) {
+    currentIndex = clamp(index);
+    render();
+  }
 
-function initPaginator() {
-  document.querySelector("#page-back").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() - 1);
-  });
-  document.querySelector("#page-back-10").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() - 10);
-  });
-  document.querySelector("#page-next").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() + 1);
-  });
-  document.querySelector("#page-next-10").addEventListener("click", function(e) {
-    e.stopPropagation();
-    page(page() + 10);
-  });
-  document.querySelector("#page-toggle-size").addEventListener("click", function(e) {
-    e.stopPropagation();
-    document.body.classList.toggle("split-screen");
-  });
+  function prev() {
+    go(currentIndex - 1);
+  }
 
-  window.addEventListener("keydown", function(event) {
-    if(event.keyCode == 39 || ((event.keyCode == 32 || event.keyCode == 13) && atBottom())) {
-      event.preventDefault();
-      page(page() + 1);
-    }
-    else if(event.keyCode == 8 || event.keyCode == 37) {
-      event.preventDefault();
-      page(page() - 1);
-    }
-  });
-}
+  function next() {
+    go(currentIndex + 1);
+  }
 
-function showCurrentPage() {
-  window.scrollTo(0, 0);
-  var page = pages[currentPage - 1];
-  if(!page) return;
-  
-  if(page.type == "image") {
-    document.querySelector("#gallery #video").classList.add("hidden");
-    document.querySelector("#gallery #image").classList.remove("hidden");
-    document.querySelector("#gallery #image").src = page.url;
+  function rewind() {
+    go(currentIndex - 10);
   }
-  else {
-    document.querySelector("#gallery #image").classList.add("hidden");
-    document.querySelector("#gallery #video").classList.remove("hidden");
-    document.querySelector("#gallery #video").src = page.url;
+
+  function fastForward() {
+    go(currentIndex + 10);
   }
 
-  //if(currentPage < imageUrls.length) (new Image()).src = imageUrls[currentPage];
-}
+  function jump(url) {
+    go(urls.indexOf(url));
+  }
 
-function openLink(event) {
-  event.preventDefault();
-
-  for(var i = 0; i < pages.length; i++) {
-    if(pages[i].url == this.href) {
-      page(i + 1);
-      return;
-    }
+  function atBottom() {
+    return (window.scrollY + window.innerHeight) == document.body.scrollHeight;
   }
-}
 
-function initGallery() {
-  if(!document.querySelector("#gallery")) return;
+  function initEvents() {
+    document.body.addEventListener("click", function(e) {
+      if(!e.target) return;
 
-  initPaginator();
-  loadPages();
+      if(e.target.matches("a.media")) {
+        e.preventDefault();
+        jump(e.target.href);
+      }
+      else if(e.target.matches("#page-back")) {
+        e.stopPropagation();
+        prev();
+      }
+      else if(e.target.matches("#page-back-10")) {
+        e.stopPropagation();
+        rewind();
+      }
+      else if(e.target.matches("#page-next")) {
+        e.stopPropagation();
+        next();
+      }
+      else if(e.target.matches("#page-next-10")) {
+        e.stopPropagation();
+        fastForward();
+      }
+      else if(e.target.matches("#page-toggle-size")) {
+        e.stopPropagation();
+        document.body.classList.toggle("split-screen");
+      }
+    });
 
-  document.body.addEventListener("click", function(e) {
-    console.log("clicked, e: ", e);
-    if(e.target && e.target.matches("a.viewable")) openLink.call(e.target, e);
-  });
+    window.addEventListener("keydown", function(e) {
+      if(e.keyCode == 39 || ((e.keyCode == 32 || e.keyCode == 13) && atBottom())) {
+        e.preventDefault();
+        next();
+      }
+      else if(e.keyCode == 8 || e.keyCode == 37) {
+        e.preventDefault();
+        prev();
+      }
+    });
+  }
 
-  page(1);
+  function init() {
+    initItems();
+    initEvents();
+    render();
+  }
+
+  return {
+    init: init,
+    render: render,
+    clamp: clamp,
+    go: go,
+    prev: prev,
+    next: next,
+    rewind: rewind,
+    fastForward: fastForward,
+    jump: jump
+  };
+})();
+
+function initGallery() {
+  if(!document.querySelector("#gallery")) return;
+  Gallery.init();
 }
 
 window.addEventListener("DOMContentLoaded", initGallery);
\ No newline at end of file