Site generated at 2019-06-27 20:14:44 UTC

aarongustafson · Jun 27, 2019 · 821e193 · 821e193
1 parent d18979c
commit 821e193
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/_includes/lightbox.html b/_includes/lightbox.html
@@ -7,4 +7,4 @@
   <button class="lightbox__control lightbox__control--next">Next</button>
   <button class="lightbox__control lightbox__control--close" aria-label="Close">✖️</button>
 </dialog>
-<script src="/j/lightbox.js" async></script>
+<script src="/j/lightbox.js" defer></script>
diff --git a/_javascript/lightbox/lightbox.js b/_javascript/lightbox/lightbox.js
@@ -5,7 +5,9 @@
 
   polyfill();
 
-  var $triggering_element,
+  var built = false,
+      enabled = false,
+      $triggering_element,
       $lightbox = document.getElementById("lightbox"),
       $img = $lightbox.querySelector(".lightbox__image"),
       $title = $lightbox.querySelector(".lightbox__caption"),
@@ -21,12 +23,34 @@
       img_prefix = "https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_1080/";
 
 
-  setupGallery();
+  window.watchResize(function(){
+    var MQ = window.getActiveMQ(),
+        show = ( MQ == "medium" || MQ == "full" );
+    if ( show ) {
+      if ( ! built )
+      {
+        setupGallery();
+        built = true;
+      }
+
+      // event listeners
+      $prev.addEventListener("click", prev, false);
+      $next.addEventListener("click", next, false);
+      $close.addEventListener("click", close, false);
+
+      enabled = true;
+    }
+    else if ( ! show && enabled )
+    {
+      // event listeners
+      $prev.removeEventListener("click", prev, false);
+      $next.removeEventListener("click", next, false);
+      $close.removeEventListener("click", close, false);
 
-  // event listeners
-  $prev.addEventListener("click", prev, false);
-  $next.addEventListener("click", next, false);
-  $close.addEventListener("click", close, false);
+      enabled = false;
+    }
+  });
+
 
   function setupGallery()
   {
@@ -85,10 +109,12 @@
   }
   function open( e )
   {
+    if ( ! enabled ) { return; }
+
     e.preventDefault();
     $triggering_element = e.target;
     current_position = $triggering_element.closest( item_selector ).dataset.lightboxIndex;
-    console.log(current_position);
+
     fadeOut(function(){
       updateLightbox();
       $lightbox.showModal();

diff --git a/j/lightbox.js b/j/lightbox.js
@@ -5,7 +5,9 @@
 
   polyfill();
 
-  var $triggering_element,
+  var built = false,
+      enabled = false,
+      $triggering_element,
       $lightbox = document.getElementById("lightbox"),
       $img = $lightbox.querySelector(".lightbox__image"),
       $title = $lightbox.querySelector(".lightbox__caption"),
@@ -21,12 +23,34 @@
       img_prefix = "https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_1080/";
 
 
-  setupGallery();
+  window.watchResize(function(){
+    var MQ = window.getActiveMQ(),
+        show = ( MQ == "medium" || MQ == "full" );
+    if ( show ) {
+      if ( ! built )
+      {
+        setupGallery();
+        built = true;
+      }
+
+      // event listeners
+      $prev.addEventListener("click", prev, false);
+      $next.addEventListener("click", next, false);
+      $close.addEventListener("click", close, false);
+
+      enabled = true;
+    }
+    else if ( ! show && enabled )
+    {
+      // event listeners
+      $prev.removeEventListener("click", prev, false);
+      $next.removeEventListener("click", next, false);
+      $close.removeEventListener("click", close, false);
 
-  // event listeners
-  $prev.addEventListener("click", prev, false);
-  $next.addEventListener("click", next, false);
-  $close.addEventListener("click", close, false);
+      enabled = false;
+    }
+  });
+
 
   function setupGallery()
   {
@@ -85,10 +109,12 @@
   }
   function open( e )
   {
+    if ( ! enabled ) { return; }
+
     e.preventDefault();
     $triggering_element = e.target;
     current_position = $triggering_element.closest( item_selector ).dataset.lightboxIndex;
-    console.log(current_position);
+
     fadeOut(function(){
       updateLightbox();
       $lightbox.showModal();

diff --git a/j/lightbox.min.js b/j/lightbox.min.js