From 821e1930898eddc8b0f4549e183caf743e93c030 Mon Sep 17 00:00:00 2001 From: Aaron Gustafson Date: Thu, 27 Jun 2019 13:14:44 -0700 Subject: [PATCH] Site generated at 2019-06-27 20:14:44 UTC --- _includes/lightbox.html | 2 +- _javascript/lightbox/lightbox.js | 40 ++++++++++++++++++++++++++------ j/lightbox.js | 40 ++++++++++++++++++++++++++------ j/lightbox.min.js | 2 +- 4 files changed, 68 insertions(+), 16 deletions(-) diff --git a/_includes/lightbox.html b/_includes/lightbox.html index 083653f897..9c2fd6fa00 100644 --- a/_includes/lightbox.html +++ b/_includes/lightbox.html @@ -7,4 +7,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_javascript/lightbox/lightbox.js b/_javascript/lightbox/lightbox.js index 08ef7c23cd..0da6cd2444 100644 --- 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 index 08ef7c23cd..0da6cd2444 100644 --- 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 index 51c8370da1..260cb460c7 100644 --- a/j/lightbox.min.js +++ b/j/lightbox.min.js @@ -1 +1 @@ -!function(e){if("querySelector"in e&&"closest"in e.body){var t,n,o;t=e.createElement("dialog"),n=e.createElement("script"),o=e.createElement("link"),"[object HTMLUnknownElement]"==={}.toString.call(t)&&(n.src="/j/dialog-polyfill.js",n.async=!0,e.head.appendChild(n),o.rel="stylesheet",o.href="/c/dialog-polyfill.css",e.head.appendChild(o));var c,l,r=e.getElementById("lightbox"),a=r.querySelector(".lightbox__image"),u=r.querySelector(".lightbox__caption"),s=r.querySelector("button[class$=prev]"),f=r.querySelector("button[class$=next]"),d=r.querySelector("button[class$=close]"),g=[],h=0,y="[data-lightbox-item]",m="lightbox--fade",p=500,b="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_1080/";!function(){var t=e.querySelectorAll(y),n=t.length;l=t.length-1;for(;n--;)o=t[n],g.unshift({img:o.querySelector("a").href,title:o.querySelector("figcaption").innerHTML}),q(t[n]),v(t[n],n);var o}(),s.addEventListener("click",function(){--h<0&&(h=l);_()},!1),f.addEventListener("click",function(){++h>l&&(h=0);_()},!1),d.addEventListener("click",function(){S(function(){current_index=null,r.close(),c.focus()})},!1)}function q(e){e.querySelector("a").addEventListener("click",L,!1)}function v(e,t){e.dataset.lightboxIndex=t}function x(){E(function(){a.style.backgroundImage="url("+b+g[h].img+")",u.innerHTML=g[i].title})}function S(e){r.classList.add(m),"function"==typeof e&&setTimeout(e,p)}function E(e){setTimeout(function(){"function"==typeof e&&e(),r.classList.remove(m)},p)}function L(e){e.preventDefault(),c=e.target,h=c.closest(y).dataset.lightboxIndex,console.log(h),S(function(){x(),r.showModal(),E(function(){r.focus()})})}function _(){S(function(){x()})}}(this.document); \ No newline at end of file +!function(e){if("querySelector"in e&&"closest"in e.body){var t,n,o;t=e.createElement("dialog"),n=e.createElement("script"),o=e.createElement("link"),"[object HTMLUnknownElement]"==={}.toString.call(t)&&(n.src="/j/dialog-polyfill.js",n.async=!0,e.head.appendChild(n),o.rel="stylesheet",o.href="/c/dialog-polyfill.css",e.head.appendChild(o));var c,l,r=!1,a=!1,u=e.getElementById("lightbox"),s=u.querySelector(".lightbox__image"),f=u.querySelector(".lightbox__caption"),d=u.querySelector("button[class$=prev]"),g=u.querySelector("button[class$=next]"),h=u.querySelector("button[class$=close]"),m=[],y=0,v="[data-lightbox-item]",p="lightbox--fade",b=500,E="https://res.cloudinary.com/aarongustafson/image/fetch/c_fill,f_auto,q_auto,w_1080/";window.watchResize(function(){var t=window.getActiveMQ(),n="medium"==t||"full"==t;n?(r||(!function(){var t=e.querySelectorAll(v),n=t.length;l=t.length-1;for(;n--;)i=t[n],m.unshift({img:i.querySelector("a").href,title:i.querySelector("figcaption").innerHTML}),L(t[n]),q(t[n],n);var i}(),r=!0),d.addEventListener("click",M,!1),g.addEventListener("click",w,!1),h.addEventListener("click",I,!1),a=!0):!n&&a&&(d.removeEventListener("click",M,!1),g.removeEventListener("click",w,!1),h.removeEventListener("click",I,!1),a=!1)})}function L(e){e.querySelector("a").addEventListener("click",_,!1)}function q(e,t){e.dataset.lightboxIndex=t}function x(){k(function(){s.style.backgroundImage="url("+E+m[y].img+")",f.innerHTML=m[i].title})}function S(e){u.classList.add(p),"function"==typeof e&&setTimeout(e,b)}function k(e){setTimeout(function(){"function"==typeof e&&e(),u.classList.remove(p)},b)}function _(e){a&&(e.preventDefault(),c=e.target,y=c.closest(v).dataset.lightboxIndex,S(function(){x(),u.showModal(),k(function(){u.focus()})}))}function w(){++y>l&&(y=0),T()}function M(){--y<0&&(y=l),T()}function T(){S(function(){x()})}function I(){S(function(){current_index=null,u.close(),c.focus()})}}(this.document); \ No newline at end of file