parvus - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

dist/js/parvus.esm.js

@@ -5,3 +5,3 @@ /**
  * @author Benjamin de Oostfrees
- * @version 2.0.2
+ * @version 2.0.3
  * @url https://github.com/deoostfrees/parvus
@@ -231,3 +231,5 @@ *
         createSlide(el, groups[newGroup].gallery.indexOf(el));
-        loadImage(groups[newGroup].gallery.indexOf(el));
+        createImage(el, groups[newGroup].gallery.indexOf(el), function () {
+          loadImage(groups[newGroup].gallery.indexOf(el));
+        });
         updateConfig();
@@ -364,4 +366,3 @@ updateFocus();
 
-      SLIDER_ELEMENT.setAttribute('aria-hidden', 'true');
-      createImage(index, el, SLIDER_ELEMENT_CONTENT); // Add slide content container to slider element
+      SLIDER_ELEMENT.setAttribute('aria-hidden', 'true'); // Add slide content container to slider element
 
@@ -429,16 +430,18 @@ SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT);
     loadSlide(currentIndex);
-    loadImage(currentIndex);
-    requestAnimationFrame(() => {
-      lightbox.classList.remove('parvus--is-opening');
-      lightboxOverlay.style.opacity = 1;
-      lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`;
-      lightboxOverlay.style.willChange = 'opacity';
-    });
-    lightboxOverlay.addEventListener('transitionend', () => {
-      // Preload previous and next slide
-      preload(currentIndex + 1);
-      preload(currentIndex - 1);
-    }); // Add class for slider animation
+    createImage(el, currentIndex, function () {
+      loadImage(currentIndex);
+      requestAnimationFrame(() => {
+        lightbox.classList.remove('parvus--is-opening');
+        lightboxOverlay.style.opacity = 1;
+        lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`;
+        lightboxOverlay.style.willChange = 'opacity';
+      });
+      lightboxOverlay.addEventListener('transitionend', () => {
+        // Preload previous and next slide
+        preload(currentIndex + 1);
+        preload(currentIndex - 1);
+      }); // Add class for slider animation
 
-    groups[activeGroup].slider.classList.add('parvus__slider--animate'); // Create and dispatch a new event
+      groups[activeGroup].slider.classList.add('parvus__slider--animate');
+    }); // Create and dispatch a new event
 
@@ -506,3 +509,4 @@ const OPEN_EVENT = new CustomEvent('open', {
       lightbox.classList.remove('parvus--is-closing');
-      lightbox.classList.remove('parvus--is-vertical-closing'); // Reset groups
+      lightbox.classList.remove('parvus--is-vertical-closing');
+      IMAGE.style.transform = ''; // Reset groups
 
@@ -512,3 +516,3 @@ groups[activeGroup].slider.remove();
       groups[activeGroup].sliderElements = [];
-      IMAGE.style.transform = '';
+      groups[activeGroup].images = [];
     }, {
@@ -538,3 +542,5 @@ once: true
     createSlide(groups[activeGroup].gallery[index], index);
-    loadImage(index);
+    createImage(groups[activeGroup].gallery[index], index, function () {
+      loadImage(index);
+    });
   };
@@ -561,69 +567,77 @@ /**
 
-  const createImage = function createImage(index, el, container) {
-    const IMAGE = document.createElement('img');
-    const IMAGE_CONTAINER = document.createElement('div');
-    const CAPTION_CONTAINER = document.createElement('div');
-    const THUMBNAIL = el.querySelector('img');
-    const LOADING_INDICATOR = document.createElement('div');
-    IMAGE_CONTAINER.className = 'parvus__content';
-    CAPTION_CONTAINER.className = 'parvus__caption'; // Create loading indicator
+  const createImage = function createImage(el, index, callback) {
+    if (groups[activeGroup].images[index] !== undefined) ; else {
+      const container = groups[activeGroup].sliderElements[index].querySelector('div');
+      const IMAGE = document.createElement('img');
+      const IMAGE_CONTAINER = document.createElement('div');
+      const CAPTION_CONTAINER = document.createElement('div');
+      const THUMBNAIL = el.querySelector('img');
+      const LOADING_INDICATOR = document.createElement('div');
+      IMAGE_CONTAINER.className = 'parvus__content';
+      CAPTION_CONTAINER.className = 'parvus__caption'; // Create loading indicator
 
-    LOADING_INDICATOR.className = 'parvus__loader';
-    LOADING_INDICATOR.setAttribute('role', 'progressbar');
-    LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel); // Add loading indicator to container
+      LOADING_INDICATOR.className = 'parvus__loader';
+      LOADING_INDICATOR.setAttribute('role', 'progressbar');
+      LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel); // Add loading indicator to container
 
-    container.appendChild(LOADING_INDICATOR);
+      container.appendChild(LOADING_INDICATOR);
 
-    IMAGE.onload = () => {
-      container.removeChild(LOADING_INDICATOR); // Set image width and height
+      IMAGE.onload = () => {
+        container.removeChild(LOADING_INDICATOR); // Set image width and height
 
-      IMAGE.setAttribute('width', IMAGE.naturalWidth);
-      IMAGE.setAttribute('height', IMAGE.naturalHeight);
-    };
+        IMAGE.setAttribute('width', IMAGE.naturalWidth);
+        IMAGE.setAttribute('height', IMAGE.naturalHeight);
+        setImageDimension(groups[activeGroup].sliderElements[index], IMAGE);
 
-    if (el.tagName === 'A') {
-      IMAGE.setAttribute('src', el.href);
+        if (callback && typeof callback === 'function') {
+          callback();
+        }
+      };
 
-      if (THUMBNAIL) {
-        IMAGE.alt = THUMBNAIL.alt || '';
+      if (el.tagName === 'A') {
+        IMAGE.setAttribute('src', el.href);
+
+        if (THUMBNAIL) {
+          IMAGE.alt = THUMBNAIL.alt || '';
+        } else {
+          IMAGE.alt = el.getAttribute('data-alt') || '';
+        }
       } else {
         IMAGE.alt = el.getAttribute('data-alt') || '';
-      }
-    } else {
-      IMAGE.alt = el.getAttribute('data-alt') || '';
-      IMAGE.setAttribute('src', el.getAttribute('data-target'));
-    } // Add srcset if available
+        IMAGE.setAttribute('src', el.getAttribute('data-target'));
+      } // Add srcset if available
 
 
-    if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
-      IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
-    }
+      if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
+        IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
+      }
 
-    IMAGE.style.opacity = 0;
-    IMAGE_CONTAINER.appendChild(IMAGE);
-    groups[activeGroup].images[index] = IMAGE;
-    container.appendChild(IMAGE_CONTAINER); // Add caption if available
+      IMAGE.style.opacity = 0;
+      IMAGE_CONTAINER.appendChild(IMAGE);
+      groups[activeGroup].images[index] = IMAGE;
+      container.appendChild(IMAGE_CONTAINER); // Add caption if available
 
-    if (config.captions) {
-      let captionData = null;
+      if (config.captions) {
+        let captionData = null;
 
-      if (config.captionsSelector === 'self') {
-        if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
-          captionData = el.getAttribute(config.captionsAttribute);
-        }
-      } else {
-        if (el.querySelector(config.captionsSelector) !== null) {
-          const CAPTION_SELECTOR = el.querySelector(config.captionsSelector);
+        if (config.captionsSelector === 'self') {
+          if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
+            captionData = el.getAttribute(config.captionsAttribute);
+          }
+        } else {
+          if (el.querySelector(config.captionsSelector) !== null) {
+            const CAPTION_SELECTOR = el.querySelector(config.captionsSelector);
 
-          if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
-            captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute);
-          } else {
-            captionData = CAPTION_SELECTOR.innerHTML;
+            if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
+              captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute);
+            } else {
+              captionData = CAPTION_SELECTOR.innerHTML;
+            }
           }
         }
-      }
 
-      if (captionData !== null) {
-        CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`;
-        container.appendChild(CAPTION_CONTAINER);
+        if (captionData !== null) {
+          CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`;
+          container.appendChild(CAPTION_CONTAINER);
+        }
       }
@@ -640,3 +654,2 @@ }
   const loadImage = function loadImage(index) {
-    setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index]);
     const IMAGE = groups[activeGroup].images[index];
@@ -920,2 +933,8 @@ const IMAGE_SIZE = IMAGE.getBoundingClientRect();
     maxWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+
+    if (imageEl.naturalHeight < maxHeight && imageEl.naturalWidth < maxWidth) {
+      maxHeight = imageEl.naturalHeight;
+      maxWidth = imageEl.naturalWidth;
+    }
+
     const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight);
@@ -922,0 +941,0 @@ imageEl.style.width = `${srcWidth * ratio || 0}px`;

dist/js/parvus.esm.min.js

@@ -5,3 +5,3 @@ /**
  * @author Benjamin de Oostfrees
- * @version 2.0.2
+ * @version 2.0.3
  * @url https://github.com/deoostfrees/parvus
@@ -12,2 +12,2 @@ *
 
-var e={lightboxLabel:"This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.",lightboxLoadingIndicatorLabel:"Image loading",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window"};function t(n){const i=window,s=["button:not([disabled]):not([inert])",'[tabindex]:not([tabindex^="-"]):not([inert])'],a={gallery:[],slider:null,sliderElements:[],images:[]};let r={},l=null,o=null,d=0,u={},c=null,p=null,g=1,h=null,m=null,v=null,f=null,b=null,y=null,w=null,E=0,A=0,L=0,_=0,C={},x=!1,$=!1,S=!1,B=null,T=null,M=null,q=!1,F=null,I=!0;const N=window.matchMedia("(prefers-reduced-motion)"),X=function(){N.matches?(I=!0,F=u.reducedTransitionDuration):(I=!1,F=u.transitionDuration)};N.addEventListener("change",X);const Y=function(t){u=function(t){return{selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,scrollClose:!1,swipeClose:!0,threshold:50,backFocus:!0,transitionDuration:300,reducedTransitionDuration:.1,transitionTimingFunction:"cubic-bezier(0.4, 0, 0.22, 1)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,fileTypes:/\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i,...t}}(t);if(document.querySelectorAll(u.selector).length)if(X(),c||O(),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const n=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${n}`),D(e)}))}));document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach((e=>{D(e)}))}else{document.querySelectorAll(u.selector).forEach((e=>{D(e)}))}},k=function(e){const t=Math.floor(1e4*Math.random());return e.hasAttribute("data-group")&&""!==e.getAttribute("data-group")||e.setAttribute("data-group",`default-${t}`),e.getAttribute("data-group")},D=function(e){if(!("A"===e.tagName&&e.hasAttribute("href")&&e.href.match(u.fileTypes)||"BUTTON"===e.tagName&&e.hasAttribute("data-target")&&e.getAttribute("data-target").match(u.fileTypes)))throw new Error(e,`Use a link with the 'href' attribute or a button with the 'data-target' attribute. Both attributes must have a path to the image file. Supported image file types: ${u.fileTypes}.`);var t;if(l=k(e),Object.prototype.hasOwnProperty.call(r,l)||(r[l]=(t=a,JSON.parse(JSON.stringify(t)))),r[l].gallery.includes(e))throw new Error("Ups, element already added.");if(r[l].gallery.push(e),null!==e.querySelector("img")){const t=document.createElement("div");e.classList.add("parvus-zoom"),t.className="parvus-zoom__indicator",t.innerHTML=u.lightboxIndicatorIcon,e.appendChild(t)}e.classList.add("parvus-trigger"),e.addEventListener("click",le),Ae()&&l===o&&(z(e,r[l].gallery.indexOf(e)),J(r[l].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ae()||!c||!e||!e.hasAttribute("data-group"))return;const t=k(e);if(!r[t].gallery.includes(e))throw new Error("Ups, I can't find the element.");if(r[t].gallery.splice(r[t].gallery.indexOf(e),1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}e.removeEventListener("click",le),e.classList.remove("parvus-trigger")},O=function(){c=document.createElement("div"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-hidden","true"),c.setAttribute("tabindex","-1"),c.setAttribute("aria-label",u.l10n.lightboxLabel),c.classList.add("parvus"),p=document.createElement("div"),p.classList.add("parvus__overlay"),p.style.opacity=0,c.appendChild(p),h=document.createElement("div"),h.className="parvus__toolbar",m=document.createElement("div"),v=document.createElement("div"),y=document.createElement("button"),y.className="parvus__btn parvus__btn--close",y.setAttribute("type","button"),y.setAttribute("aria-label",u.l10n.closeButtonLabel),y.innerHTML=u.closeButtonIcon,v.appendChild(y),f=document.createElement("button"),f.className="parvus__btn parvus__btn--previous",f.setAttribute("type","button"),f.setAttribute("aria-label",u.l10n.previousButtonLabel),f.innerHTML=u.previousButtonIcon,c.appendChild(f),b=document.createElement("button"),b.className="parvus__btn parvus__btn--next",b.setAttribute("type","button"),b.setAttribute("aria-label",u.l10n.nextButtonLabel),b.innerHTML=u.nextButtonIcon,c.appendChild(b),w=document.createElement("div"),w.className="parvus__counter",m.appendChild(w),h.appendChild(m),h.appendChild(v),c.appendChild(h),document.body.appendChild(c)},z=function(e,t){if(void 0!==r[o].sliderElements[t]);else{const n=document.createElement("div"),i=document.createElement("div");n.className="parvus__slide",n.style.position="absolute",n.style.left=100*t+"%",n.setAttribute("aria-hidden","true"),j(t,e,i),n.appendChild(i),r[o].sliderElements[t]=n,t===d&&r[o].slider.appendChild(n),t>d?r[o].sliderElements[d].after(n):r[o].sliderElements[d].before(n)}},R=function(e){if(!c||!e||!e.classList.contains("parvus-trigger")||Ae())return;if(o=k(e),!r[o].gallery.includes(e))throw new Error("Ups, I can't find the element.");d=r[o].gallery.indexOf(e),B=document.activeElement;const t=window.location.href;history.pushState({parvus:"close"},"Image",t),we();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),r[o].slider=document.createElement("div"),r[o].slider.className="parvus__slider",r[o].slider.setAttribute("aria-hidden","true"),c.appendChild(r[o].slider),z(e,d),r[o].slider.setAttribute("aria-hidden","false"),Z(),se(),te(),ue(),W(d),J(d),requestAnimationFrame((()=>{c.classList.remove("parvus--is-opening"),p.style.opacity=1,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="opacity"})),p.addEventListener("transitionend",(()=>{P(d+1),P(d-1)})),r[o].slider.classList.add("parvus__slider--animate");const n=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(n)},U=function(){if(!Ae())throw new Error("Ups, I'm already closed.");const e=r[o].images[d],t=e.getBoundingClientRect(),n=(u.backFocus?r[o].gallery[d]:B).getBoundingClientRect();Ee(),ne(),null!==history.state&&"close"===history.state.parvus&&history.back();document.querySelectorAll(".parvus-hidden").forEach((e=>{e.removeAttribute("aria-hidden"),e.classList.remove("parvus-hidden")})),c.classList.add("parvus--is-closing"),requestAnimationFrame((()=>{E=n.width/t.width,A=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,e.style.opacity=0,e.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F}ms ${u.transitionTimingFunction} ${F/2}ms`,p.style.opacity=0,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="auto"})),p.addEventListener("transitionend",(()=>{Q(d),B=u.backFocus?r[o].gallery[d]:B,B.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),r[o].slider.remove(),r[o].slider=null,r[o].sliderElements=[],e.style.transform=""}),{once:!0});const i=new CustomEvent("close",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(i)},P=function(e){void 0!==r[o].gallery[e]&&(z(r[o].gallery[e],e),J(e))},W=function(e){r[o].sliderElements[e].classList.add("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","false")},j=function(e,t,n){const i=document.createElement("img"),s=document.createElement("div"),a=document.createElement("div"),l=t.querySelector("img"),d=document.createElement("div");if(s.className="parvus__content",a.className="parvus__caption",d.className="parvus__loader",d.setAttribute("role","progressbar"),d.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),n.appendChild(d),i.onload=()=>{n.removeChild(d),i.setAttribute("width",i.naturalWidth),i.setAttribute("height",i.naturalHeight)},"A"===t.tagName?(i.setAttribute("src",t.href),i.alt=l?l.alt||"":t.getAttribute("data-alt")||""):(i.alt=t.getAttribute("data-alt")||"",i.setAttribute("src",t.getAttribute("data-target"))),t.hasAttribute("data-srcset")&&""!==t.getAttribute("data-srcset")&&i.setAttribute("srcset",t.getAttribute("data-srcset")),i.style.opacity=0,s.appendChild(i),r[o].images[e]=i,n.appendChild(s),u.captions){let e=null;if("self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(e=t.getAttribute(u.captionsAttribute));else if(null!==t.querySelector(u.captionsSelector)){const n=t.querySelector(u.captionsSelector);e=n.hasAttribute(u.captionsAttribute)&&""!==n.getAttribute(u.captionsAttribute)?n.getAttribute(u.captionsAttribute):n.innerHTML}null!==e&&(a.innerHTML=`<p>${e}</p>`,n.appendChild(a))}},J=function(e){re(r[o].sliderElements[e],r[o].images[e]);const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(E=i.width/n.width,A=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,t.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{t.style.transform="",t.style.opacity=1,t.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F/2}ms ${u.transitionTimingFunction}`}))}))):t.style.opacity=1},K=function(e){const t=d;if(!Ae())throw new Error("Ups, I'm closed.");if(!e&&0!==e)throw new Error("Ups, no slide specified.");if(e===d)throw new Error(`Ups, slide ${e} is already selected.`);if(-1===e||e>=r[o].gallery.length)throw new Error(`Ups, I can't find slide ${e}.`);Q(t),W(e),J(e),e<t&&(d--,Z(),se(),ee("left"),P(e-1)),e>t&&(d++,Z(),se(),ee("right"),P(e+1)),te();const n=new CustomEvent("select",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(n)},V=function(){d>0&&K(d-1)},G=function(){d<r[o].gallery.length-1&&K(d+1)},Q=function(e){r[o].sliderElements[e].classList.remove("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","true")},Z=function(){o=null!==o?o:l,T=d*c.offsetWidth*-1,r[o].slider.style.transform=`translate3d(${T}px, 0, 0)`,M=T},ee=function(e){1===r[o].gallery.length?y.focus():0===d?b.focus():d===r[o].gallery.length-1||"left"===e?f.focus():b.focus()},te=function(){w.textContent=`${d+1}/${r[o].gallery.length}`},ne=function(){C={startX:0,endX:0,startY:0,endY:0}},ie=function(){const e=C.endX-C.startX,t=C.endY-C.startY,n=Math.abs(e),i=Math.abs(t);x&&e>0&&n>=u.threshold&&d>0?V():x&&e<0&&n>=u.threshold&&d!==r[o].gallery.length-1?G():$&&i>0?i>=u.threshold&&u.swipeClose?U():(p.style.opacity=1,c.classList.remove("parvus--is-vertical-closing"),Z()):Z()},se=function(){(u.swipeClose&&!r[o].slider.classList.contains("parvus__slider--is-draggable")||r[o].gallery.length>1&&!r[o].slider.classList.contains("parvus__slider--is-draggable"))&&r[o].slider.classList.add("parvus__slider--is-draggable"),1===r[o].gallery.length?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","true"),b.disabled=!0):0===d?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","false"),b.disabled=!1):d===r[o].gallery.length-1?(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","true"),b.disabled=!0):(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","false"),b.disabled=!1),1===r[o].gallery.length?w.setAttribute("aria-hidden","true"):w.setAttribute("aria-hidden","false")},ae=function(){q||(q=!0,i.requestAnimationFrame((()=>{re(r[o].sliderElements[d],r[o].images[d]),Z(),q=!1})))},re=function(e,t){const n=getComputedStyle(e),i=null!==e.querySelector(".parvus__caption")?e.querySelector(".parvus__caption").getBoundingClientRect().height:0,s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i),l-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight);const o=Math.min(l/a||0,r/s);t.style.width=`${a*o||0}px`,t.style.height=`${s*o||0}px`},le=function(e){e.preventDefault(),R(this)},oe=function(e){e.target===f?V():e.target===b?G():(e.target===y||!$&&!x&&e.target.classList.contains("parvus__slide")&&u.docClose)&&U(),e.stopPropagation()},de=function(){return Array.prototype.slice.call(c.querySelectorAll(`${s.join(", ")}`)).filter((function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}))},ue=function(){de()[0].focus()},ce=function(e){const t=de(),n=t.indexOf(document.activeElement);"Tab"===e.code?e.shiftKey&&0===n?(t[t.length-1].focus(),e.preventDefault()):e.shiftKey||n!==t.length-1||(t[0].focus(),e.preventDefault()):"Escape"===e.code?(e.preventDefault(),U()):"ArrowLeft"===e.code?(e.preventDefault(),V()):"ArrowRight"===e.code&&(e.preventDefault(),G())},pe=function(){U()},ge=function(e){e.preventDefault(),e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.pageX,C.startY=e.pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},he=function(e){e.preventDefault(),S&&(C.endX=e.pageX,C.endY=e.pageY,ye())},me=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ve=function(e){e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.touches[0].pageX,C.startY=e.touches[0].pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},fe=function(e){e.stopPropagation(),S&&(e.preventDefault(),C.endX=e.touches[0].pageX,C.endY=e.touches[0].pageY,ye())},be=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ye=function(){const e=C.startX-C.endX,t=C.endY-C.startY,n=Math.abs(t);Math.abs(e)>0&&!$&&r[o].gallery.length>1?(r[o].slider.style.transform=`translate3d(${M-Math.round(e)}px, 0, 0)`,x=!0,$=!1):Math.abs(t)>0&&!x&&u.swipeClose&&(n<=96&&!I&&(g=1-n/100),c.classList.add("parvus--is-vertical-closing"),p.style.opacity=g,r[o].slider.style.transform=`translate3d(${M}px, ${Math.round(t)}px, 0)`,x=!1,$=!0)},we=function(){i.addEventListener("keydown",ce),i.addEventListener("resize",ae),u.scrollClose&&i.addEventListener("wheel",pe),i.addEventListener("popstate",U),c.addEventListener("click",oe),Le()&&(c.addEventListener("touchstart",ve),c.addEventListener("touchmove",fe),c.addEventListener("touchend",be)),c.addEventListener("mousedown",ge),c.addEventListener("mouseup",me),c.addEventListener("mousemove",he)},Ee=function(){i.removeEventListener("keydown",ce),i.removeEventListener("resize",ae),u.scrollClose&&i.removeEventListener("wheel",pe),i.removeEventListener("popstate",U),c.removeEventListener("click",oe),Le()&&(c.removeEventListener("touchstart",ve),c.removeEventListener("touchmove",fe),c.removeEventListener("touchend",be)),c.removeEventListener("mousedown",ge),c.removeEventListener("mouseup",me),c.removeEventListener("mousemove",he)},Ae=function(){return"false"===c.getAttribute("aria-hidden")},Le=function(){return"ontouchstart"in window};return Y(n),t.init=Y,t.open=R,t.close=U,t.select=K,t.previous=V,t.next=G,t.currentIndex=function(){return d},t.add=D,t.remove=H,t.destroy=function(){if(!c)return;Ae()&&U(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ae,t.on=function(e,t){c&&c.addEventListener(e,t)},t.off=function(e,t){c&&c.removeEventListener(e,t)},t}export{t as default};
+var e={lightboxLabel:"This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.",lightboxLoadingIndicatorLabel:"Image loading",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window"};function t(n){const i=window,a=["button:not([disabled]):not([inert])",'[tabindex]:not([tabindex^="-"]):not([inert])'],s={gallery:[],slider:null,sliderElements:[],images:[]};let r={},l=null,o=null,d=0,u={},c=null,p=null,g=1,h=null,m=null,v=null,f=null,b=null,y=null,w=null,E=0,A=0,L=0,_=0,C={},x=!1,$=!1,S=!1,B=null,T=null,M=null,q=!1,F=null,I=!0;const N=window.matchMedia("(prefers-reduced-motion)"),X=function(){N.matches?(I=!0,F=u.reducedTransitionDuration):(I=!1,F=u.transitionDuration)};N.addEventListener("change",X);const Y=function(t){u=function(t){return{selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,scrollClose:!1,swipeClose:!0,threshold:50,backFocus:!0,transitionDuration:300,reducedTransitionDuration:.1,transitionTimingFunction:"cubic-bezier(0.4, 0, 0.22, 1)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,fileTypes:/\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i,...t}}(t);if(document.querySelectorAll(u.selector).length)if(X(),c||O(),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const n=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${n}`),H(e)}))}));document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach((e=>{H(e)}))}else{document.querySelectorAll(u.selector).forEach((e=>{H(e)}))}},k=function(e){const t=Math.floor(1e4*Math.random());return e.hasAttribute("data-group")&&""!==e.getAttribute("data-group")||e.setAttribute("data-group",`default-${t}`),e.getAttribute("data-group")},H=function(e){if(!("A"===e.tagName&&e.hasAttribute("href")&&e.href.match(u.fileTypes)||"BUTTON"===e.tagName&&e.hasAttribute("data-target")&&e.getAttribute("data-target").match(u.fileTypes)))throw new Error(e,`Use a link with the 'href' attribute or a button with the 'data-target' attribute. Both attributes must have a path to the image file. Supported image file types: ${u.fileTypes}.`);var t;if(l=k(e),Object.prototype.hasOwnProperty.call(r,l)||(r[l]=(t=s,JSON.parse(JSON.stringify(t)))),r[l].gallery.includes(e))throw new Error("Ups, element already added.");if(r[l].gallery.push(e),null!==e.querySelector("img")){const t=document.createElement("div");e.classList.add("parvus-zoom"),t.className="parvus-zoom__indicator",t.innerHTML=u.lightboxIndicatorIcon,e.appendChild(t)}e.classList.add("parvus-trigger"),e.addEventListener("click",le),Ae()&&l===o&&(z(e,r[l].gallery.indexOf(e)),j(e,r[l].gallery.indexOf(e),(function(){J(r[l].gallery.indexOf(e))})),ae(),ee(),te())},D=function(e){if(Ae()||!c||!e||!e.hasAttribute("data-group"))return;const t=k(e);if(!r[t].gallery.includes(e))throw new Error("Ups, I can't find the element.");if(r[t].gallery.splice(r[t].gallery.indexOf(e),1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}e.removeEventListener("click",le),e.classList.remove("parvus-trigger")},O=function(){c=document.createElement("div"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-hidden","true"),c.setAttribute("tabindex","-1"),c.setAttribute("aria-label",u.l10n.lightboxLabel),c.classList.add("parvus"),p=document.createElement("div"),p.classList.add("parvus__overlay"),p.style.opacity=0,c.appendChild(p),h=document.createElement("div"),h.className="parvus__toolbar",m=document.createElement("div"),v=document.createElement("div"),y=document.createElement("button"),y.className="parvus__btn parvus__btn--close",y.setAttribute("type","button"),y.setAttribute("aria-label",u.l10n.closeButtonLabel),y.innerHTML=u.closeButtonIcon,v.appendChild(y),f=document.createElement("button"),f.className="parvus__btn parvus__btn--previous",f.setAttribute("type","button"),f.setAttribute("aria-label",u.l10n.previousButtonLabel),f.innerHTML=u.previousButtonIcon,c.appendChild(f),b=document.createElement("button"),b.className="parvus__btn parvus__btn--next",b.setAttribute("type","button"),b.setAttribute("aria-label",u.l10n.nextButtonLabel),b.innerHTML=u.nextButtonIcon,c.appendChild(b),w=document.createElement("div"),w.className="parvus__counter",m.appendChild(w),h.appendChild(m),h.appendChild(v),c.appendChild(h),document.body.appendChild(c)},z=function(e,t){if(void 0!==r[o].sliderElements[t]);else{const e=document.createElement("div"),n=document.createElement("div");e.className="parvus__slide",e.style.position="absolute",e.style.left=100*t+"%",e.setAttribute("aria-hidden","true"),e.appendChild(n),r[o].sliderElements[t]=e,t===d&&r[o].slider.appendChild(e),t>d?r[o].sliderElements[d].after(e):r[o].sliderElements[d].before(e)}},R=function(e){if(!c||!e||!e.classList.contains("parvus-trigger")||Ae())return;if(o=k(e),!r[o].gallery.includes(e))throw new Error("Ups, I can't find the element.");d=r[o].gallery.indexOf(e),B=document.activeElement;const t=window.location.href;history.pushState({parvus:"close"},"Image",t),we();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),r[o].slider=document.createElement("div"),r[o].slider.className="parvus__slider",r[o].slider.setAttribute("aria-hidden","true"),c.appendChild(r[o].slider),z(e,d),r[o].slider.setAttribute("aria-hidden","false"),Z(),ae(),te(),ue(),W(d),j(e,d,(function(){J(d),requestAnimationFrame((()=>{c.classList.remove("parvus--is-opening"),p.style.opacity=1,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="opacity"})),p.addEventListener("transitionend",(()=>{P(d+1),P(d-1)})),r[o].slider.classList.add("parvus__slider--animate")}));const n=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(n)},U=function(){if(!Ae())throw new Error("Ups, I'm already closed.");const e=r[o].images[d],t=e.getBoundingClientRect(),n=(u.backFocus?r[o].gallery[d]:B).getBoundingClientRect();Ee(),ne(),null!==history.state&&"close"===history.state.parvus&&history.back();document.querySelectorAll(".parvus-hidden").forEach((e=>{e.removeAttribute("aria-hidden"),e.classList.remove("parvus-hidden")})),c.classList.add("parvus--is-closing"),requestAnimationFrame((()=>{E=n.width/t.width,A=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,e.style.opacity=0,e.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F}ms ${u.transitionTimingFunction} ${F/2}ms`,p.style.opacity=0,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="auto"})),p.addEventListener("transitionend",(()=>{Q(d),B=u.backFocus?r[o].gallery[d]:B,B.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",r[o].slider.remove(),r[o].slider=null,r[o].sliderElements=[],r[o].images=[]}),{once:!0});const i=new CustomEvent("close",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(i)},P=function(e){void 0!==r[o].gallery[e]&&(z(r[o].gallery[e],e),j(r[o].gallery[e],e,(function(){J(e)})))},W=function(e){r[o].sliderElements[e].classList.add("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","false")},j=function(e,t,n){if(void 0!==r[o].images[t]);else{const i=r[o].sliderElements[t].querySelector("div"),a=document.createElement("img"),s=document.createElement("div"),l=document.createElement("div"),d=e.querySelector("img"),c=document.createElement("div");if(s.className="parvus__content",l.className="parvus__caption",c.className="parvus__loader",c.setAttribute("role","progressbar"),c.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),i.appendChild(c),a.onload=()=>{i.removeChild(c),a.setAttribute("width",a.naturalWidth),a.setAttribute("height",a.naturalHeight),re(r[o].sliderElements[t],a),n&&"function"==typeof n&&n()},"A"===e.tagName?(a.setAttribute("src",e.href),a.alt=d?d.alt||"":e.getAttribute("data-alt")||""):(a.alt=e.getAttribute("data-alt")||"",a.setAttribute("src",e.getAttribute("data-target"))),e.hasAttribute("data-srcset")&&""!==e.getAttribute("data-srcset")&&a.setAttribute("srcset",e.getAttribute("data-srcset")),a.style.opacity=0,s.appendChild(a),r[o].images[t]=a,i.appendChild(s),u.captions){let t=null;if("self"===u.captionsSelector)e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)&&(t=e.getAttribute(u.captionsAttribute));else if(null!==e.querySelector(u.captionsSelector)){const n=e.querySelector(u.captionsSelector);t=n.hasAttribute(u.captionsAttribute)&&""!==n.getAttribute(u.captionsAttribute)?n.getAttribute(u.captionsAttribute):n.innerHTML}null!==t&&(l.innerHTML=`<p>${t}</p>`,i.appendChild(l))}}},J=function(e){const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(E=i.width/n.width,A=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,t.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{t.style.transform="",t.style.opacity=1,t.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F/2}ms ${u.transitionTimingFunction}`}))}))):t.style.opacity=1},K=function(e){const t=d;if(!Ae())throw new Error("Ups, I'm closed.");if(!e&&0!==e)throw new Error("Ups, no slide specified.");if(e===d)throw new Error(`Ups, slide ${e} is already selected.`);if(-1===e||e>=r[o].gallery.length)throw new Error(`Ups, I can't find slide ${e}.`);Q(t),W(e),J(e),e<t&&(d--,Z(),ae(),ee("left"),P(e-1)),e>t&&(d++,Z(),ae(),ee("right"),P(e+1)),te();const n=new CustomEvent("select",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(n)},V=function(){d>0&&K(d-1)},G=function(){d<r[o].gallery.length-1&&K(d+1)},Q=function(e){r[o].sliderElements[e].classList.remove("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","true")},Z=function(){o=null!==o?o:l,T=d*c.offsetWidth*-1,r[o].slider.style.transform=`translate3d(${T}px, 0, 0)`,M=T},ee=function(e){1===r[o].gallery.length?y.focus():0===d?b.focus():d===r[o].gallery.length-1||"left"===e?f.focus():b.focus()},te=function(){w.textContent=`${d+1}/${r[o].gallery.length}`},ne=function(){C={startX:0,endX:0,startY:0,endY:0}},ie=function(){const e=C.endX-C.startX,t=C.endY-C.startY,n=Math.abs(e),i=Math.abs(t);x&&e>0&&n>=u.threshold&&d>0?V():x&&e<0&&n>=u.threshold&&d!==r[o].gallery.length-1?G():$&&i>0?i>=u.threshold&&u.swipeClose?U():(p.style.opacity=1,c.classList.remove("parvus--is-vertical-closing"),Z()):Z()},ae=function(){(u.swipeClose&&!r[o].slider.classList.contains("parvus__slider--is-draggable")||r[o].gallery.length>1&&!r[o].slider.classList.contains("parvus__slider--is-draggable"))&&r[o].slider.classList.add("parvus__slider--is-draggable"),1===r[o].gallery.length?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","true"),b.disabled=!0):0===d?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","false"),b.disabled=!1):d===r[o].gallery.length-1?(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","true"),b.disabled=!0):(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","false"),b.disabled=!1),1===r[o].gallery.length?w.setAttribute("aria-hidden","true"):w.setAttribute("aria-hidden","false")},se=function(){q||(q=!0,i.requestAnimationFrame((()=>{re(r[o].sliderElements[d],r[o].images[d]),Z(),q=!1})))},re=function(e,t){const n=getComputedStyle(e),i=null!==e.querySelector(".parvus__caption")?e.querySelector(".parvus__caption").getBoundingClientRect().height:0,a=t.naturalHeight,s=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i),l-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight),t.naturalHeight<r&&t.naturalWidth<l&&(r=t.naturalHeight,l=t.naturalWidth);const o=Math.min(l/s||0,r/a);t.style.width=`${s*o||0}px`,t.style.height=`${a*o||0}px`},le=function(e){e.preventDefault(),R(this)},oe=function(e){e.target===f?V():e.target===b?G():(e.target===y||!$&&!x&&e.target.classList.contains("parvus__slide")&&u.docClose)&&U(),e.stopPropagation()},de=function(){return Array.prototype.slice.call(c.querySelectorAll(`${a.join(", ")}`)).filter((function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}))},ue=function(){de()[0].focus()},ce=function(e){const t=de(),n=t.indexOf(document.activeElement);"Tab"===e.code?e.shiftKey&&0===n?(t[t.length-1].focus(),e.preventDefault()):e.shiftKey||n!==t.length-1||(t[0].focus(),e.preventDefault()):"Escape"===e.code?(e.preventDefault(),U()):"ArrowLeft"===e.code?(e.preventDefault(),V()):"ArrowRight"===e.code&&(e.preventDefault(),G())},pe=function(){U()},ge=function(e){e.preventDefault(),e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.pageX,C.startY=e.pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},he=function(e){e.preventDefault(),S&&(C.endX=e.pageX,C.endY=e.pageY,ye())},me=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ve=function(e){e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.touches[0].pageX,C.startY=e.touches[0].pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},fe=function(e){e.stopPropagation(),S&&(e.preventDefault(),C.endX=e.touches[0].pageX,C.endY=e.touches[0].pageY,ye())},be=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ye=function(){const e=C.startX-C.endX,t=C.endY-C.startY,n=Math.abs(t);Math.abs(e)>0&&!$&&r[o].gallery.length>1?(r[o].slider.style.transform=`translate3d(${M-Math.round(e)}px, 0, 0)`,x=!0,$=!1):Math.abs(t)>0&&!x&&u.swipeClose&&(n<=96&&!I&&(g=1-n/100),c.classList.add("parvus--is-vertical-closing"),p.style.opacity=g,r[o].slider.style.transform=`translate3d(${M}px, ${Math.round(t)}px, 0)`,x=!1,$=!0)},we=function(){i.addEventListener("keydown",ce),i.addEventListener("resize",se),u.scrollClose&&i.addEventListener("wheel",pe),i.addEventListener("popstate",U),c.addEventListener("click",oe),Le()&&(c.addEventListener("touchstart",ve),c.addEventListener("touchmove",fe),c.addEventListener("touchend",be)),c.addEventListener("mousedown",ge),c.addEventListener("mouseup",me),c.addEventListener("mousemove",he)},Ee=function(){i.removeEventListener("keydown",ce),i.removeEventListener("resize",se),u.scrollClose&&i.removeEventListener("wheel",pe),i.removeEventListener("popstate",U),c.removeEventListener("click",oe),Le()&&(c.removeEventListener("touchstart",ve),c.removeEventListener("touchmove",fe),c.removeEventListener("touchend",be)),c.removeEventListener("mousedown",ge),c.removeEventListener("mouseup",me),c.removeEventListener("mousemove",he)},Ae=function(){return"false"===c.getAttribute("aria-hidden")},Le=function(){return"ontouchstart"in window};return Y(n),t.init=Y,t.open=R,t.close=U,t.select=K,t.previous=V,t.next=G,t.currentIndex=function(){return d},t.add=H,t.remove=D,t.destroy=function(){if(!c)return;Ae()&&U(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{D(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ae,t.on=function(e,t){c&&c.addEventListener(e,t)},t.off=function(e,t){c&&c.removeEventListener(e,t)},t}export{t as default};

dist/js/parvus.js

@@ -5,3 +5,3 @@ /**
  * @author Benjamin de Oostfrees
- * @version 2.0.2
+ * @version 2.0.3
  * @url https://github.com/deoostfrees/parvus
@@ -237,3 +237,5 @@ *
           createSlide(el, groups[newGroup].gallery.indexOf(el));
-          loadImage(groups[newGroup].gallery.indexOf(el));
+          createImage(el, groups[newGroup].gallery.indexOf(el), function () {
+            loadImage(groups[newGroup].gallery.indexOf(el));
+          });
           updateConfig();
@@ -370,4 +372,3 @@ updateFocus();
 
-        SLIDER_ELEMENT.setAttribute('aria-hidden', 'true');
-        createImage(index, el, SLIDER_ELEMENT_CONTENT); // Add slide content container to slider element
+        SLIDER_ELEMENT.setAttribute('aria-hidden', 'true'); // Add slide content container to slider element
 
@@ -435,16 +436,18 @@ SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT);
       loadSlide(currentIndex);
-      loadImage(currentIndex);
-      requestAnimationFrame(() => {
-        lightbox.classList.remove('parvus--is-opening');
-        lightboxOverlay.style.opacity = 1;
-        lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`;
-        lightboxOverlay.style.willChange = 'opacity';
-      });
-      lightboxOverlay.addEventListener('transitionend', () => {
-        // Preload previous and next slide
-        preload(currentIndex + 1);
-        preload(currentIndex - 1);
-      }); // Add class for slider animation
+      createImage(el, currentIndex, function () {
+        loadImage(currentIndex);
+        requestAnimationFrame(() => {
+          lightbox.classList.remove('parvus--is-opening');
+          lightboxOverlay.style.opacity = 1;
+          lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`;
+          lightboxOverlay.style.willChange = 'opacity';
+        });
+        lightboxOverlay.addEventListener('transitionend', () => {
+          // Preload previous and next slide
+          preload(currentIndex + 1);
+          preload(currentIndex - 1);
+        }); // Add class for slider animation
 
-      groups[activeGroup].slider.classList.add('parvus__slider--animate'); // Create and dispatch a new event
+        groups[activeGroup].slider.classList.add('parvus__slider--animate');
+      }); // Create and dispatch a new event
 
@@ -512,3 +515,4 @@ const OPEN_EVENT = new CustomEvent('open', {
         lightbox.classList.remove('parvus--is-closing');
-        lightbox.classList.remove('parvus--is-vertical-closing'); // Reset groups
+        lightbox.classList.remove('parvus--is-vertical-closing');
+        IMAGE.style.transform = ''; // Reset groups
 
@@ -518,3 +522,3 @@ groups[activeGroup].slider.remove();
         groups[activeGroup].sliderElements = [];
-        IMAGE.style.transform = '';
+        groups[activeGroup].images = [];
       }, {
@@ -544,3 +548,5 @@ once: true
       createSlide(groups[activeGroup].gallery[index], index);
-      loadImage(index);
+      createImage(groups[activeGroup].gallery[index], index, function () {
+        loadImage(index);
+      });
     };
@@ -567,69 +573,77 @@ /**
 
-    const createImage = function createImage(index, el, container) {
-      const IMAGE = document.createElement('img');
-      const IMAGE_CONTAINER = document.createElement('div');
-      const CAPTION_CONTAINER = document.createElement('div');
-      const THUMBNAIL = el.querySelector('img');
-      const LOADING_INDICATOR = document.createElement('div');
-      IMAGE_CONTAINER.className = 'parvus__content';
-      CAPTION_CONTAINER.className = 'parvus__caption'; // Create loading indicator
+    const createImage = function createImage(el, index, callback) {
+      if (groups[activeGroup].images[index] !== undefined) ; else {
+        const container = groups[activeGroup].sliderElements[index].querySelector('div');
+        const IMAGE = document.createElement('img');
+        const IMAGE_CONTAINER = document.createElement('div');
+        const CAPTION_CONTAINER = document.createElement('div');
+        const THUMBNAIL = el.querySelector('img');
+        const LOADING_INDICATOR = document.createElement('div');
+        IMAGE_CONTAINER.className = 'parvus__content';
+        CAPTION_CONTAINER.className = 'parvus__caption'; // Create loading indicator
 
-      LOADING_INDICATOR.className = 'parvus__loader';
-      LOADING_INDICATOR.setAttribute('role', 'progressbar');
-      LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel); // Add loading indicator to container
+        LOADING_INDICATOR.className = 'parvus__loader';
+        LOADING_INDICATOR.setAttribute('role', 'progressbar');
+        LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel); // Add loading indicator to container
 
-      container.appendChild(LOADING_INDICATOR);
+        container.appendChild(LOADING_INDICATOR);
 
-      IMAGE.onload = () => {
-        container.removeChild(LOADING_INDICATOR); // Set image width and height
+        IMAGE.onload = () => {
+          container.removeChild(LOADING_INDICATOR); // Set image width and height
 
-        IMAGE.setAttribute('width', IMAGE.naturalWidth);
-        IMAGE.setAttribute('height', IMAGE.naturalHeight);
-      };
+          IMAGE.setAttribute('width', IMAGE.naturalWidth);
+          IMAGE.setAttribute('height', IMAGE.naturalHeight);
+          setImageDimension(groups[activeGroup].sliderElements[index], IMAGE);
 
-      if (el.tagName === 'A') {
-        IMAGE.setAttribute('src', el.href);
+          if (callback && typeof callback === 'function') {
+            callback();
+          }
+        };
 
-        if (THUMBNAIL) {
-          IMAGE.alt = THUMBNAIL.alt || '';
+        if (el.tagName === 'A') {
+          IMAGE.setAttribute('src', el.href);
+
+          if (THUMBNAIL) {
+            IMAGE.alt = THUMBNAIL.alt || '';
+          } else {
+            IMAGE.alt = el.getAttribute('data-alt') || '';
+          }
         } else {
           IMAGE.alt = el.getAttribute('data-alt') || '';
-        }
-      } else {
-        IMAGE.alt = el.getAttribute('data-alt') || '';
-        IMAGE.setAttribute('src', el.getAttribute('data-target'));
-      } // Add srcset if available
+          IMAGE.setAttribute('src', el.getAttribute('data-target'));
+        } // Add srcset if available
 
 
-      if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
-        IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
-      }
+        if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
+          IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
+        }
 
-      IMAGE.style.opacity = 0;
-      IMAGE_CONTAINER.appendChild(IMAGE);
-      groups[activeGroup].images[index] = IMAGE;
-      container.appendChild(IMAGE_CONTAINER); // Add caption if available
+        IMAGE.style.opacity = 0;
+        IMAGE_CONTAINER.appendChild(IMAGE);
+        groups[activeGroup].images[index] = IMAGE;
+        container.appendChild(IMAGE_CONTAINER); // Add caption if available
 
-      if (config.captions) {
-        let captionData = null;
+        if (config.captions) {
+          let captionData = null;
 
-        if (config.captionsSelector === 'self') {
-          if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
-            captionData = el.getAttribute(config.captionsAttribute);
-          }
-        } else {
-          if (el.querySelector(config.captionsSelector) !== null) {
-            const CAPTION_SELECTOR = el.querySelector(config.captionsSelector);
+          if (config.captionsSelector === 'self') {
+            if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
+              captionData = el.getAttribute(config.captionsAttribute);
+            }
+          } else {
+            if (el.querySelector(config.captionsSelector) !== null) {
+              const CAPTION_SELECTOR = el.querySelector(config.captionsSelector);
 
-            if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
-              captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute);
-            } else {
-              captionData = CAPTION_SELECTOR.innerHTML;
+              if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
+                captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute);
+              } else {
+                captionData = CAPTION_SELECTOR.innerHTML;
+              }
             }
           }
-        }
 
-        if (captionData !== null) {
-          CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`;
-          container.appendChild(CAPTION_CONTAINER);
+          if (captionData !== null) {
+            CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`;
+            container.appendChild(CAPTION_CONTAINER);
+          }
         }
@@ -646,3 +660,2 @@ }
     const loadImage = function loadImage(index) {
-      setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index]);
       const IMAGE = groups[activeGroup].images[index];
@@ -926,2 +939,8 @@ const IMAGE_SIZE = IMAGE.getBoundingClientRect();
       maxWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
+
+      if (imageEl.naturalHeight < maxHeight && imageEl.naturalWidth < maxWidth) {
+        maxHeight = imageEl.naturalHeight;
+        maxWidth = imageEl.naturalWidth;
+      }
+
       const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight);
@@ -928,0 +947,0 @@ imageEl.style.width = `${srcWidth * ratio || 0}px`;

dist/js/parvus.min.js

@@ -5,3 +5,3 @@ /**
  * @author Benjamin de Oostfrees
- * @version 2.0.2
+ * @version 2.0.3
  * @url https://github.com/deoostfrees/parvus
@@ -12,2 +12,2 @@ *
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Parvus=t()}(this,(function(){"use strict";var e={lightboxLabel:"This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.",lightboxLoadingIndicatorLabel:"Image loading",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window"};return function t(n){const i=window,s=["button:not([disabled]):not([inert])",'[tabindex]:not([tabindex^="-"]):not([inert])'],a={gallery:[],slider:null,sliderElements:[],images:[]};let r={},l=null,o=null,d=0,u={},c=null,p=null,g=1,h=null,m=null,v=null,f=null,b=null,y=null,w=null,E=0,A=0,L=0,_=0,C={},x=!1,$=!1,S=!1,T=null,B=null,M=null,q=!1,F=null,I=!0;const N=window.matchMedia("(prefers-reduced-motion)"),X=function(){N.matches?(I=!0,F=u.reducedTransitionDuration):(I=!1,F=u.transitionDuration)};N.addEventListener("change",X);const Y=function(t){u=function(t){return{selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,scrollClose:!1,swipeClose:!0,threshold:50,backFocus:!0,transitionDuration:300,reducedTransitionDuration:.1,transitionTimingFunction:"cubic-bezier(0.4, 0, 0.22, 1)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,fileTypes:/\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i,...t}}(t);if(document.querySelectorAll(u.selector).length)if(X(),c||O(),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const n=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${n}`),D(e)}))}));document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach((e=>{D(e)}))}else{document.querySelectorAll(u.selector).forEach((e=>{D(e)}))}},k=function(e){const t=Math.floor(1e4*Math.random());return e.hasAttribute("data-group")&&""!==e.getAttribute("data-group")||e.setAttribute("data-group",`default-${t}`),e.getAttribute("data-group")},D=function(e){if(!("A"===e.tagName&&e.hasAttribute("href")&&e.href.match(u.fileTypes)||"BUTTON"===e.tagName&&e.hasAttribute("data-target")&&e.getAttribute("data-target").match(u.fileTypes)))throw new Error(e,`Use a link with the 'href' attribute or a button with the 'data-target' attribute. Both attributes must have a path to the image file. Supported image file types: ${u.fileTypes}.`);var t;if(l=k(e),Object.prototype.hasOwnProperty.call(r,l)||(r[l]=(t=a,JSON.parse(JSON.stringify(t)))),r[l].gallery.includes(e))throw new Error("Ups, element already added.");if(r[l].gallery.push(e),null!==e.querySelector("img")){const t=document.createElement("div");e.classList.add("parvus-zoom"),t.className="parvus-zoom__indicator",t.innerHTML=u.lightboxIndicatorIcon,e.appendChild(t)}e.classList.add("parvus-trigger"),e.addEventListener("click",le),Ae()&&l===o&&(z(e,r[l].gallery.indexOf(e)),J(r[l].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ae()||!c||!e||!e.hasAttribute("data-group"))return;const t=k(e);if(!r[t].gallery.includes(e))throw new Error("Ups, I can't find the element.");if(r[t].gallery.splice(r[t].gallery.indexOf(e),1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}e.removeEventListener("click",le),e.classList.remove("parvus-trigger")},O=function(){c=document.createElement("div"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-hidden","true"),c.setAttribute("tabindex","-1"),c.setAttribute("aria-label",u.l10n.lightboxLabel),c.classList.add("parvus"),p=document.createElement("div"),p.classList.add("parvus__overlay"),p.style.opacity=0,c.appendChild(p),h=document.createElement("div"),h.className="parvus__toolbar",m=document.createElement("div"),v=document.createElement("div"),y=document.createElement("button"),y.className="parvus__btn parvus__btn--close",y.setAttribute("type","button"),y.setAttribute("aria-label",u.l10n.closeButtonLabel),y.innerHTML=u.closeButtonIcon,v.appendChild(y),f=document.createElement("button"),f.className="parvus__btn parvus__btn--previous",f.setAttribute("type","button"),f.setAttribute("aria-label",u.l10n.previousButtonLabel),f.innerHTML=u.previousButtonIcon,c.appendChild(f),b=document.createElement("button"),b.className="parvus__btn parvus__btn--next",b.setAttribute("type","button"),b.setAttribute("aria-label",u.l10n.nextButtonLabel),b.innerHTML=u.nextButtonIcon,c.appendChild(b),w=document.createElement("div"),w.className="parvus__counter",m.appendChild(w),h.appendChild(m),h.appendChild(v),c.appendChild(h),document.body.appendChild(c)},z=function(e,t){if(void 0!==r[o].sliderElements[t]);else{const n=document.createElement("div"),i=document.createElement("div");n.className="parvus__slide",n.style.position="absolute",n.style.left=100*t+"%",n.setAttribute("aria-hidden","true"),W(t,e,i),n.appendChild(i),r[o].sliderElements[t]=n,t===d&&r[o].slider.appendChild(n),t>d?r[o].sliderElements[d].after(n):r[o].sliderElements[d].before(n)}},P=function(e){if(!c||!e||!e.classList.contains("parvus-trigger")||Ae())return;if(o=k(e),!r[o].gallery.includes(e))throw new Error("Ups, I can't find the element.");d=r[o].gallery.indexOf(e),T=document.activeElement;const t=window.location.href;history.pushState({parvus:"close"},"Image",t),we();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),r[o].slider=document.createElement("div"),r[o].slider.className="parvus__slider",r[o].slider.setAttribute("aria-hidden","true"),c.appendChild(r[o].slider),z(e,d),r[o].slider.setAttribute("aria-hidden","false"),Z(),se(),te(),ue(),j(d),J(d),requestAnimationFrame((()=>{c.classList.remove("parvus--is-opening"),p.style.opacity=1,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="opacity"})),p.addEventListener("transitionend",(()=>{U(d+1),U(d-1)})),r[o].slider.classList.add("parvus__slider--animate");const n=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(n)},R=function(){if(!Ae())throw new Error("Ups, I'm already closed.");const e=r[o].images[d],t=e.getBoundingClientRect(),n=(u.backFocus?r[o].gallery[d]:T).getBoundingClientRect();Ee(),ne(),null!==history.state&&"close"===history.state.parvus&&history.back();document.querySelectorAll(".parvus-hidden").forEach((e=>{e.removeAttribute("aria-hidden"),e.classList.remove("parvus-hidden")})),c.classList.add("parvus--is-closing"),requestAnimationFrame((()=>{E=n.width/t.width,A=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,e.style.opacity=0,e.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F}ms ${u.transitionTimingFunction} ${F/2}ms`,p.style.opacity=0,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="auto"})),p.addEventListener("transitionend",(()=>{Q(d),T=u.backFocus?r[o].gallery[d]:T,T.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),r[o].slider.remove(),r[o].slider=null,r[o].sliderElements=[],e.style.transform=""}),{once:!0});const i=new CustomEvent("close",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(i)},U=function(e){void 0!==r[o].gallery[e]&&(z(r[o].gallery[e],e),J(e))},j=function(e){r[o].sliderElements[e].classList.add("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","false")},W=function(e,t,n){const i=document.createElement("img"),s=document.createElement("div"),a=document.createElement("div"),l=t.querySelector("img"),d=document.createElement("div");if(s.className="parvus__content",a.className="parvus__caption",d.className="parvus__loader",d.setAttribute("role","progressbar"),d.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),n.appendChild(d),i.onload=()=>{n.removeChild(d),i.setAttribute("width",i.naturalWidth),i.setAttribute("height",i.naturalHeight)},"A"===t.tagName?(i.setAttribute("src",t.href),i.alt=l?l.alt||"":t.getAttribute("data-alt")||""):(i.alt=t.getAttribute("data-alt")||"",i.setAttribute("src",t.getAttribute("data-target"))),t.hasAttribute("data-srcset")&&""!==t.getAttribute("data-srcset")&&i.setAttribute("srcset",t.getAttribute("data-srcset")),i.style.opacity=0,s.appendChild(i),r[o].images[e]=i,n.appendChild(s),u.captions){let e=null;if("self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(e=t.getAttribute(u.captionsAttribute));else if(null!==t.querySelector(u.captionsSelector)){const n=t.querySelector(u.captionsSelector);e=n.hasAttribute(u.captionsAttribute)&&""!==n.getAttribute(u.captionsAttribute)?n.getAttribute(u.captionsAttribute):n.innerHTML}null!==e&&(a.innerHTML=`<p>${e}</p>`,n.appendChild(a))}},J=function(e){re(r[o].sliderElements[e],r[o].images[e]);const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(E=i.width/n.width,A=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,t.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{t.style.transform="",t.style.opacity=1,t.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F/2}ms ${u.transitionTimingFunction}`}))}))):t.style.opacity=1},K=function(e){const t=d;if(!Ae())throw new Error("Ups, I'm closed.");if(!e&&0!==e)throw new Error("Ups, no slide specified.");if(e===d)throw new Error(`Ups, slide ${e} is already selected.`);if(-1===e||e>=r[o].gallery.length)throw new Error(`Ups, I can't find slide ${e}.`);Q(t),j(e),J(e),e<t&&(d--,Z(),se(),ee("left"),U(e-1)),e>t&&(d++,Z(),se(),ee("right"),U(e+1)),te();const n=new CustomEvent("select",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(n)},V=function(){d>0&&K(d-1)},G=function(){d<r[o].gallery.length-1&&K(d+1)},Q=function(e){r[o].sliderElements[e].classList.remove("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","true")},Z=function(){o=null!==o?o:l,B=d*c.offsetWidth*-1,r[o].slider.style.transform=`translate3d(${B}px, 0, 0)`,M=B},ee=function(e){1===r[o].gallery.length?y.focus():0===d?b.focus():d===r[o].gallery.length-1||"left"===e?f.focus():b.focus()},te=function(){w.textContent=`${d+1}/${r[o].gallery.length}`},ne=function(){C={startX:0,endX:0,startY:0,endY:0}},ie=function(){const e=C.endX-C.startX,t=C.endY-C.startY,n=Math.abs(e),i=Math.abs(t);x&&e>0&&n>=u.threshold&&d>0?V():x&&e<0&&n>=u.threshold&&d!==r[o].gallery.length-1?G():$&&i>0?i>=u.threshold&&u.swipeClose?R():(p.style.opacity=1,c.classList.remove("parvus--is-vertical-closing"),Z()):Z()},se=function(){(u.swipeClose&&!r[o].slider.classList.contains("parvus__slider--is-draggable")||r[o].gallery.length>1&&!r[o].slider.classList.contains("parvus__slider--is-draggable"))&&r[o].slider.classList.add("parvus__slider--is-draggable"),1===r[o].gallery.length?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","true"),b.disabled=!0):0===d?(f.setAttribute("aria-hidden","true"),f.disabled=!0,b.setAttribute("aria-hidden","false"),b.disabled=!1):d===r[o].gallery.length-1?(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","true"),b.disabled=!0):(f.setAttribute("aria-hidden","false"),f.disabled=!1,b.setAttribute("aria-hidden","false"),b.disabled=!1),1===r[o].gallery.length?w.setAttribute("aria-hidden","true"):w.setAttribute("aria-hidden","false")},ae=function(){q||(q=!0,i.requestAnimationFrame((()=>{re(r[o].sliderElements[d],r[o].images[d]),Z(),q=!1})))},re=function(e,t){const n=getComputedStyle(e),i=null!==e.querySelector(".parvus__caption")?e.querySelector(".parvus__caption").getBoundingClientRect().height:0,s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i),l-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight);const o=Math.min(l/a||0,r/s);t.style.width=`${a*o||0}px`,t.style.height=`${s*o||0}px`},le=function(e){e.preventDefault(),P(this)},oe=function(e){e.target===f?V():e.target===b?G():(e.target===y||!$&&!x&&e.target.classList.contains("parvus__slide")&&u.docClose)&&R(),e.stopPropagation()},de=function(){return Array.prototype.slice.call(c.querySelectorAll(`${s.join(", ")}`)).filter((function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}))},ue=function(){de()[0].focus()},ce=function(e){const t=de(),n=t.indexOf(document.activeElement);"Tab"===e.code?e.shiftKey&&0===n?(t[t.length-1].focus(),e.preventDefault()):e.shiftKey||n!==t.length-1||(t[0].focus(),e.preventDefault()):"Escape"===e.code?(e.preventDefault(),R()):"ArrowLeft"===e.code?(e.preventDefault(),V()):"ArrowRight"===e.code&&(e.preventDefault(),G())},pe=function(){R()},ge=function(e){e.preventDefault(),e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.pageX,C.startY=e.pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},he=function(e){e.preventDefault(),S&&(C.endX=e.pageX,C.endY=e.pageY,ye())},me=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ve=function(e){e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.touches[0].pageX,C.startY=e.touches[0].pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},fe=function(e){e.stopPropagation(),S&&(e.preventDefault(),C.endX=e.touches[0].pageX,C.endY=e.touches[0].pageY,ye())},be=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ye=function(){const e=C.startX-C.endX,t=C.endY-C.startY,n=Math.abs(t);Math.abs(e)>0&&!$&&r[o].gallery.length>1?(r[o].slider.style.transform=`translate3d(${M-Math.round(e)}px, 0, 0)`,x=!0,$=!1):Math.abs(t)>0&&!x&&u.swipeClose&&(n<=96&&!I&&(g=1-n/100),c.classList.add("parvus--is-vertical-closing"),p.style.opacity=g,r[o].slider.style.transform=`translate3d(${M}px, ${Math.round(t)}px, 0)`,x=!1,$=!0)},we=function(){i.addEventListener("keydown",ce),i.addEventListener("resize",ae),u.scrollClose&&i.addEventListener("wheel",pe),i.addEventListener("popstate",R),c.addEventListener("click",oe),Le()&&(c.addEventListener("touchstart",ve),c.addEventListener("touchmove",fe),c.addEventListener("touchend",be)),c.addEventListener("mousedown",ge),c.addEventListener("mouseup",me),c.addEventListener("mousemove",he)},Ee=function(){i.removeEventListener("keydown",ce),i.removeEventListener("resize",ae),u.scrollClose&&i.removeEventListener("wheel",pe),i.removeEventListener("popstate",R),c.removeEventListener("click",oe),Le()&&(c.removeEventListener("touchstart",ve),c.removeEventListener("touchmove",fe),c.removeEventListener("touchend",be)),c.removeEventListener("mousedown",ge),c.removeEventListener("mouseup",me),c.removeEventListener("mousemove",he)},Ae=function(){return"false"===c.getAttribute("aria-hidden")},Le=function(){return"ontouchstart"in window};return Y(n),t.init=Y,t.open=P,t.close=R,t.select=K,t.previous=V,t.next=G,t.currentIndex=function(){return d},t.add=D,t.remove=H,t.destroy=function(){if(!c)return;Ae()&&R(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ae,t.on=function(e,t){c&&c.addEventListener(e,t)},t.off=function(e,t){c&&c.removeEventListener(e,t)},t}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Parvus=t()}(this,(function(){"use strict";var e={lightboxLabel:"This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.",lightboxLoadingIndicatorLabel:"Image loading",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window"};return function t(n){const i=window,s=["button:not([disabled]):not([inert])",'[tabindex]:not([tabindex^="-"]):not([inert])'],a={gallery:[],slider:null,sliderElements:[],images:[]};let r={},l=null,o=null,d=0,u={},c=null,p=null,g=1,h=null,m=null,f=null,v=null,b=null,y=null,w=null,E=0,A=0,L=0,_=0,C={},x=!1,$=!1,S=!1,T=null,B=null,M=null,q=!1,F=null,I=!0;const N=window.matchMedia("(prefers-reduced-motion)"),X=function(){N.matches?(I=!0,F=u.reducedTransitionDuration):(I=!1,F=u.transitionDuration)};N.addEventListener("change",X);const Y=function(t){u=function(t){return{selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,scrollClose:!1,swipeClose:!0,threshold:50,backFocus:!0,transitionDuration:300,reducedTransitionDuration:.1,transitionTimingFunction:"cubic-bezier(0.4, 0, 0.22, 1)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,fileTypes:/\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i,...t}}(t);if(document.querySelectorAll(u.selector).length)if(X(),c||O(),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const n=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${n}`),H(e)}))}));document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach((e=>{H(e)}))}else{document.querySelectorAll(u.selector).forEach((e=>{H(e)}))}},k=function(e){const t=Math.floor(1e4*Math.random());return e.hasAttribute("data-group")&&""!==e.getAttribute("data-group")||e.setAttribute("data-group",`default-${t}`),e.getAttribute("data-group")},H=function(e){if(!("A"===e.tagName&&e.hasAttribute("href")&&e.href.match(u.fileTypes)||"BUTTON"===e.tagName&&e.hasAttribute("data-target")&&e.getAttribute("data-target").match(u.fileTypes)))throw new Error(e,`Use a link with the 'href' attribute or a button with the 'data-target' attribute. Both attributes must have a path to the image file. Supported image file types: ${u.fileTypes}.`);var t;if(l=k(e),Object.prototype.hasOwnProperty.call(r,l)||(r[l]=(t=a,JSON.parse(JSON.stringify(t)))),r[l].gallery.includes(e))throw new Error("Ups, element already added.");if(r[l].gallery.push(e),null!==e.querySelector("img")){const t=document.createElement("div");e.classList.add("parvus-zoom"),t.className="parvus-zoom__indicator",t.innerHTML=u.lightboxIndicatorIcon,e.appendChild(t)}e.classList.add("parvus-trigger"),e.addEventListener("click",le),Ae()&&l===o&&(z(e,r[l].gallery.indexOf(e)),j(e,r[l].gallery.indexOf(e),(function(){J(r[l].gallery.indexOf(e))})),se(),ee(),te())},D=function(e){if(Ae()||!c||!e||!e.hasAttribute("data-group"))return;const t=k(e);if(!r[t].gallery.includes(e))throw new Error("Ups, I can't find the element.");if(r[t].gallery.splice(r[t].gallery.indexOf(e),1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}e.removeEventListener("click",le),e.classList.remove("parvus-trigger")},O=function(){c=document.createElement("div"),c.setAttribute("role","dialog"),c.setAttribute("aria-modal","true"),c.setAttribute("aria-hidden","true"),c.setAttribute("tabindex","-1"),c.setAttribute("aria-label",u.l10n.lightboxLabel),c.classList.add("parvus"),p=document.createElement("div"),p.classList.add("parvus__overlay"),p.style.opacity=0,c.appendChild(p),h=document.createElement("div"),h.className="parvus__toolbar",m=document.createElement("div"),f=document.createElement("div"),y=document.createElement("button"),y.className="parvus__btn parvus__btn--close",y.setAttribute("type","button"),y.setAttribute("aria-label",u.l10n.closeButtonLabel),y.innerHTML=u.closeButtonIcon,f.appendChild(y),v=document.createElement("button"),v.className="parvus__btn parvus__btn--previous",v.setAttribute("type","button"),v.setAttribute("aria-label",u.l10n.previousButtonLabel),v.innerHTML=u.previousButtonIcon,c.appendChild(v),b=document.createElement("button"),b.className="parvus__btn parvus__btn--next",b.setAttribute("type","button"),b.setAttribute("aria-label",u.l10n.nextButtonLabel),b.innerHTML=u.nextButtonIcon,c.appendChild(b),w=document.createElement("div"),w.className="parvus__counter",m.appendChild(w),h.appendChild(m),h.appendChild(f),c.appendChild(h),document.body.appendChild(c)},z=function(e,t){if(void 0!==r[o].sliderElements[t]);else{const e=document.createElement("div"),n=document.createElement("div");e.className="parvus__slide",e.style.position="absolute",e.style.left=100*t+"%",e.setAttribute("aria-hidden","true"),e.appendChild(n),r[o].sliderElements[t]=e,t===d&&r[o].slider.appendChild(e),t>d?r[o].sliderElements[d].after(e):r[o].sliderElements[d].before(e)}},P=function(e){if(!c||!e||!e.classList.contains("parvus-trigger")||Ae())return;if(o=k(e),!r[o].gallery.includes(e))throw new Error("Ups, I can't find the element.");d=r[o].gallery.indexOf(e),T=document.activeElement;const t=window.location.href;history.pushState({parvus:"close"},"Image",t),we();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),r[o].slider=document.createElement("div"),r[o].slider.className="parvus__slider",r[o].slider.setAttribute("aria-hidden","true"),c.appendChild(r[o].slider),z(e,d),r[o].slider.setAttribute("aria-hidden","false"),Z(),se(),te(),ue(),W(d),j(e,d,(function(){J(d),requestAnimationFrame((()=>{c.classList.remove("parvus--is-opening"),p.style.opacity=1,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="opacity"})),p.addEventListener("transitionend",(()=>{U(d+1),U(d-1)})),r[o].slider.classList.add("parvus__slider--animate")}));const n=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(n)},R=function(){if(!Ae())throw new Error("Ups, I'm already closed.");const e=r[o].images[d],t=e.getBoundingClientRect(),n=(u.backFocus?r[o].gallery[d]:T).getBoundingClientRect();Ee(),ne(),null!==history.state&&"close"===history.state.parvus&&history.back();document.querySelectorAll(".parvus-hidden").forEach((e=>{e.removeAttribute("aria-hidden"),e.classList.remove("parvus-hidden")})),c.classList.add("parvus--is-closing"),requestAnimationFrame((()=>{E=n.width/t.width,A=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,e.style.opacity=0,e.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F}ms ${u.transitionTimingFunction} ${F/2}ms`,p.style.opacity=0,p.style.transition=`opacity ${F}ms ${u.transitionTimingFunction}`,p.style.willChange="auto"})),p.addEventListener("transitionend",(()=>{Q(d),T=u.backFocus?r[o].gallery[d]:T,T.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",r[o].slider.remove(),r[o].slider=null,r[o].sliderElements=[],r[o].images=[]}),{once:!0});const i=new CustomEvent("close",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(i)},U=function(e){void 0!==r[o].gallery[e]&&(z(r[o].gallery[e],e),j(r[o].gallery[e],e,(function(){J(e)})))},W=function(e){r[o].sliderElements[e].classList.add("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","false")},j=function(e,t,n){if(void 0!==r[o].images[t]);else{const i=r[o].sliderElements[t].querySelector("div"),s=document.createElement("img"),a=document.createElement("div"),l=document.createElement("div"),d=e.querySelector("img"),c=document.createElement("div");if(a.className="parvus__content",l.className="parvus__caption",c.className="parvus__loader",c.setAttribute("role","progressbar"),c.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),i.appendChild(c),s.onload=()=>{i.removeChild(c),s.setAttribute("width",s.naturalWidth),s.setAttribute("height",s.naturalHeight),re(r[o].sliderElements[t],s),n&&"function"==typeof n&&n()},"A"===e.tagName?(s.setAttribute("src",e.href),s.alt=d?d.alt||"":e.getAttribute("data-alt")||""):(s.alt=e.getAttribute("data-alt")||"",s.setAttribute("src",e.getAttribute("data-target"))),e.hasAttribute("data-srcset")&&""!==e.getAttribute("data-srcset")&&s.setAttribute("srcset",e.getAttribute("data-srcset")),s.style.opacity=0,a.appendChild(s),r[o].images[t]=s,i.appendChild(a),u.captions){let t=null;if("self"===u.captionsSelector)e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)&&(t=e.getAttribute(u.captionsAttribute));else if(null!==e.querySelector(u.captionsSelector)){const n=e.querySelector(u.captionsSelector);t=n.hasAttribute(u.captionsAttribute)&&""!==n.getAttribute(u.captionsAttribute)?n.getAttribute(u.captionsAttribute):n.innerHTML}null!==t&&(l.innerHTML=`<p>${t}</p>`,i.appendChild(l))}}},J=function(e){const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(E=i.width/n.width,A=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${E}, ${A})`,t.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{t.style.transform="",t.style.opacity=1,t.style.transition=`transform ${F}ms ${u.transitionTimingFunction}, opacity ${F/2}ms ${u.transitionTimingFunction}`}))}))):t.style.opacity=1},K=function(e){const t=d;if(!Ae())throw new Error("Ups, I'm closed.");if(!e&&0!==e)throw new Error("Ups, no slide specified.");if(e===d)throw new Error(`Ups, slide ${e} is already selected.`);if(-1===e||e>=r[o].gallery.length)throw new Error(`Ups, I can't find slide ${e}.`);Q(t),W(e),J(e),e<t&&(d--,Z(),se(),ee("left"),U(e-1)),e>t&&(d++,Z(),se(),ee("right"),U(e+1)),te();const n=new CustomEvent("select",{detail:{source:r[o].gallery[d]}});c.dispatchEvent(n)},V=function(){d>0&&K(d-1)},G=function(){d<r[o].gallery.length-1&&K(d+1)},Q=function(e){r[o].sliderElements[e].classList.remove("parvus__slide--is-active"),r[o].sliderElements[e].setAttribute("aria-hidden","true")},Z=function(){o=null!==o?o:l,B=d*c.offsetWidth*-1,r[o].slider.style.transform=`translate3d(${B}px, 0, 0)`,M=B},ee=function(e){1===r[o].gallery.length?y.focus():0===d?b.focus():d===r[o].gallery.length-1||"left"===e?v.focus():b.focus()},te=function(){w.textContent=`${d+1}/${r[o].gallery.length}`},ne=function(){C={startX:0,endX:0,startY:0,endY:0}},ie=function(){const e=C.endX-C.startX,t=C.endY-C.startY,n=Math.abs(e),i=Math.abs(t);x&&e>0&&n>=u.threshold&&d>0?V():x&&e<0&&n>=u.threshold&&d!==r[o].gallery.length-1?G():$&&i>0?i>=u.threshold&&u.swipeClose?R():(p.style.opacity=1,c.classList.remove("parvus--is-vertical-closing"),Z()):Z()},se=function(){(u.swipeClose&&!r[o].slider.classList.contains("parvus__slider--is-draggable")||r[o].gallery.length>1&&!r[o].slider.classList.contains("parvus__slider--is-draggable"))&&r[o].slider.classList.add("parvus__slider--is-draggable"),1===r[o].gallery.length?(v.setAttribute("aria-hidden","true"),v.disabled=!0,b.setAttribute("aria-hidden","true"),b.disabled=!0):0===d?(v.setAttribute("aria-hidden","true"),v.disabled=!0,b.setAttribute("aria-hidden","false"),b.disabled=!1):d===r[o].gallery.length-1?(v.setAttribute("aria-hidden","false"),v.disabled=!1,b.setAttribute("aria-hidden","true"),b.disabled=!0):(v.setAttribute("aria-hidden","false"),v.disabled=!1,b.setAttribute("aria-hidden","false"),b.disabled=!1),1===r[o].gallery.length?w.setAttribute("aria-hidden","true"):w.setAttribute("aria-hidden","false")},ae=function(){q||(q=!0,i.requestAnimationFrame((()=>{re(r[o].sliderElements[d],r[o].images[d]),Z(),q=!1})))},re=function(e,t){const n=getComputedStyle(e),i=null!==e.querySelector(".parvus__caption")?e.querySelector(".parvus__caption").getBoundingClientRect().height:0,s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i),l-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight),t.naturalHeight<r&&t.naturalWidth<l&&(r=t.naturalHeight,l=t.naturalWidth);const o=Math.min(l/a||0,r/s);t.style.width=`${a*o||0}px`,t.style.height=`${s*o||0}px`},le=function(e){e.preventDefault(),P(this)},oe=function(e){e.target===v?V():e.target===b?G():(e.target===y||!$&&!x&&e.target.classList.contains("parvus__slide")&&u.docClose)&&R(),e.stopPropagation()},de=function(){return Array.prototype.slice.call(c.querySelectorAll(`${s.join(", ")}`)).filter((function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}))},ue=function(){de()[0].focus()},ce=function(e){const t=de(),n=t.indexOf(document.activeElement);"Tab"===e.code?e.shiftKey&&0===n?(t[t.length-1].focus(),e.preventDefault()):e.shiftKey||n!==t.length-1||(t[0].focus(),e.preventDefault()):"Escape"===e.code?(e.preventDefault(),R()):"ArrowLeft"===e.code?(e.preventDefault(),V()):"ArrowRight"===e.code&&(e.preventDefault(),G())},pe=function(){R()},ge=function(e){e.preventDefault(),e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.pageX,C.startY=e.pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},he=function(e){e.preventDefault(),S&&(C.endX=e.pageX,C.endY=e.pageY,ye())},me=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},fe=function(e){e.stopPropagation(),x=!1,$=!1,S=!0,C.startX=e.touches[0].pageX,C.startY=e.touches[0].pageY,r[o].slider.classList.add("parvus__slider--is-dragging"),r[o].slider.style.willChange="transform"},ve=function(e){e.stopPropagation(),S&&(e.preventDefault(),C.endX=e.touches[0].pageX,C.endY=e.touches[0].pageY,ye())},be=function(e){e.stopPropagation(),S=!1,r[o].slider.classList.remove("parvus__slider--is-dragging"),r[o].slider.style.willChange="auto",(C.endX||C.endY)&&ie(),ne()},ye=function(){const e=C.startX-C.endX,t=C.endY-C.startY,n=Math.abs(t);Math.abs(e)>0&&!$&&r[o].gallery.length>1?(r[o].slider.style.transform=`translate3d(${M-Math.round(e)}px, 0, 0)`,x=!0,$=!1):Math.abs(t)>0&&!x&&u.swipeClose&&(n<=96&&!I&&(g=1-n/100),c.classList.add("parvus--is-vertical-closing"),p.style.opacity=g,r[o].slider.style.transform=`translate3d(${M}px, ${Math.round(t)}px, 0)`,x=!1,$=!0)},we=function(){i.addEventListener("keydown",ce),i.addEventListener("resize",ae),u.scrollClose&&i.addEventListener("wheel",pe),i.addEventListener("popstate",R),c.addEventListener("click",oe),Le()&&(c.addEventListener("touchstart",fe),c.addEventListener("touchmove",ve),c.addEventListener("touchend",be)),c.addEventListener("mousedown",ge),c.addEventListener("mouseup",me),c.addEventListener("mousemove",he)},Ee=function(){i.removeEventListener("keydown",ce),i.removeEventListener("resize",ae),u.scrollClose&&i.removeEventListener("wheel",pe),i.removeEventListener("popstate",R),c.removeEventListener("click",oe),Le()&&(c.removeEventListener("touchstart",fe),c.removeEventListener("touchmove",ve),c.removeEventListener("touchend",be)),c.removeEventListener("mousedown",ge),c.removeEventListener("mouseup",me),c.removeEventListener("mousemove",he)},Ae=function(){return"false"===c.getAttribute("aria-hidden")},Le=function(){return"ontouchstart"in window};return Y(n),t.init=Y,t.open=P,t.close=R,t.select=K,t.previous=V,t.next=G,t.currentIndex=function(){return d},t.add=H,t.remove=D,t.destroy=function(){if(!c)return;Ae()&&R(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{D(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ae,t.on=function(e,t){c&&c.addEventListener(e,t)},t.off=function(e,t){c&&c.removeEventListener(e,t)},t}}));

package.json

 {
   "name": "parvus",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "An accessible, open-source image lightbox with no dependencies.",
@@ -5,0 +5,0 @@ "main": "dist/js/parvus.js",

src/js/parvus.js

@@ -226,3 +226,5 @@ // Default language
         createSlide(el, groups[newGroup].gallery.indexOf(el))
-        loadImage(groups[newGroup].gallery.indexOf(el))
+        createImage(el, groups[newGroup].gallery.indexOf(el), function () {
+          loadImage(groups[newGroup].gallery.indexOf(el))
+        })
         updateConfig()
@@ -385,4 +387,2 @@ updateFocus()
 
-      createImage(index, el, SLIDER_ELEMENT_CONTENT)
-
       // Add slide content container to slider element
@@ -466,21 +466,24 @@ SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT)
     loadSlide(currentIndex)
-    loadImage(currentIndex)
 
-    requestAnimationFrame(() => {
-      lightbox.classList.remove('parvus--is-opening')
+    createImage(el, currentIndex, function () {
+      loadImage(currentIndex)
 
-      lightboxOverlay.style.opacity = 1
-      lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`
-      lightboxOverlay.style.willChange = 'opacity'
-    })
+      requestAnimationFrame(() => {
+        lightbox.classList.remove('parvus--is-opening')
 
-    lightboxOverlay.addEventListener('transitionend', () => {
-      // Preload previous and next slide
-      preload(currentIndex + 1)
-      preload(currentIndex - 1)
+        lightboxOverlay.style.opacity = 1
+        lightboxOverlay.style.transition = `opacity ${transitionDuration}ms ${config.transitionTimingFunction}`
+        lightboxOverlay.style.willChange = 'opacity'
+      })
+
+      lightboxOverlay.addEventListener('transitionend', () => {
+        // Preload previous and next slide
+        preload(currentIndex + 1)
+        preload(currentIndex - 1)
+      })
+
+      // Add class for slider animation
+      groups[activeGroup].slider.classList.add('parvus__slider--animate')
     })
 
-    // Add class for slider animation
-    groups[activeGroup].slider.classList.add('parvus__slider--animate')
-
     // Create and dispatch a new event
@@ -563,2 +566,4 @@ const OPEN_EVENT = new CustomEvent('open', {
 
+      IMAGE.style.transform = ''
+
       // Reset groups
@@ -569,4 +574,3 @@ groups[activeGroup].slider.remove()
       groups[activeGroup].sliderElements = []
-
-      IMAGE.style.transform = ''
+      groups[activeGroup].images = []
     },
@@ -598,3 +602,5 @@ {
     createSlide(groups[activeGroup].gallery[index], index)
-    loadImage(index)
+    createImage(groups[activeGroup].gallery[index], index, function () {
+      loadImage(index)
+    })
   }
@@ -619,78 +625,89 @@
    */
-  const createImage = function createImage (index, el, container) {
-    const IMAGE = document.createElement('img')
-    const IMAGE_CONTAINER = document.createElement('div')
-    const CAPTION_CONTAINER = document.createElement('div')
-    const THUMBNAIL = el.querySelector('img')
-    const LOADING_INDICATOR = document.createElement('div')
+  const createImage = function createImage (el, index, callback) {
+    if (groups[activeGroup].images[index] !== undefined) {
+      // Nothing
+    } else {
+      const container = groups[activeGroup].sliderElements[index].querySelector('div')
+      const IMAGE = document.createElement('img')
+      const IMAGE_CONTAINER = document.createElement('div')
+      const CAPTION_CONTAINER = document.createElement('div')
+      const THUMBNAIL = el.querySelector('img')
+      const LOADING_INDICATOR = document.createElement('div')
 
-    IMAGE_CONTAINER.className = 'parvus__content'
-    CAPTION_CONTAINER.className = 'parvus__caption'
+      IMAGE_CONTAINER.className = 'parvus__content'
+      CAPTION_CONTAINER.className = 'parvus__caption'
 
-    // Create loading indicator
-    LOADING_INDICATOR.className = 'parvus__loader'
-    LOADING_INDICATOR.setAttribute('role', 'progressbar')
-    LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel)
+      // Create loading indicator
+      LOADING_INDICATOR.className = 'parvus__loader'
+      LOADING_INDICATOR.setAttribute('role', 'progressbar')
+      LOADING_INDICATOR.setAttribute('aria-label', config.l10n.lightboxLoadingIndicatorLabel)
 
-    // Add loading indicator to container
-    container.appendChild(LOADING_INDICATOR)
+      // Add loading indicator to container
+      container.appendChild(LOADING_INDICATOR)
 
-    IMAGE.onload = () => {
-      container.removeChild(LOADING_INDICATOR)
+      IMAGE.onload = () => {
+        container.removeChild(LOADING_INDICATOR)
 
-      // Set image width and height
-      IMAGE.setAttribute('width', IMAGE.naturalWidth)
-      IMAGE.setAttribute('height', IMAGE.naturalHeight)
-    }
+        // Set image width and height
+        IMAGE.setAttribute('width', IMAGE.naturalWidth)
+        IMAGE.setAttribute('height', IMAGE.naturalHeight)
 
-    if (el.tagName === 'A') {
-      IMAGE.setAttribute('src', el.href)
+        setImageDimension(groups[activeGroup].sliderElements[index], IMAGE)
 
-      if (THUMBNAIL) {
-        IMAGE.alt = THUMBNAIL.alt || ''
+        if (callback && typeof callback === 'function') {
+          callback()
+        }
+      }
+
+      if (el.tagName === 'A') {
+        IMAGE.setAttribute('src', el.href)
+
+        if (THUMBNAIL) {
+          IMAGE.alt = THUMBNAIL.alt || ''
+        } else {
+          IMAGE.alt = el.getAttribute('data-alt') || ''
+        }
       } else {
         IMAGE.alt = el.getAttribute('data-alt') || ''
+        IMAGE.setAttribute('src', el.getAttribute('data-target'))
       }
-    } else {
-      IMAGE.alt = el.getAttribute('data-alt') || ''
-      IMAGE.setAttribute('src', el.getAttribute('data-target'))
-    }
 
-    // Add srcset if available
-    if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
-      IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'))
-    }
+      // Add srcset if available
+      if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
+        IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'))
+      }
 
-    IMAGE.style.opacity = 0
+      IMAGE.style.opacity = 0
 
-    IMAGE_CONTAINER.appendChild(IMAGE)
+      IMAGE_CONTAINER.appendChild(IMAGE)
 
-    groups[activeGroup].images[index] = IMAGE
+      groups[activeGroup].images[index] = IMAGE
 
-    container.appendChild(IMAGE_CONTAINER)
+      container.appendChild(IMAGE_CONTAINER)
 
-    // Add caption if available
-    if (config.captions) {
-      let captionData = null
+      // Add caption if available
+      if (config.captions) {
+        let captionData = null
 
-      if (config.captionsSelector === 'self') {
-        if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
-          captionData = el.getAttribute(config.captionsAttribute)
-        }
-      } else {
-        if (el.querySelector(config.captionsSelector) !== null) {
-          const CAPTION_SELECTOR = el.querySelector(config.captionsSelector)
+        if (config.captionsSelector === 'self') {
+          if (el.hasAttribute(config.captionsAttribute) && el.getAttribute(config.captionsAttribute) !== '') {
+            captionData = el.getAttribute(config.captionsAttribute)
+          }
+        } else {
+          if (el.querySelector(config.captionsSelector) !== null) {
+            const CAPTION_SELECTOR = el.querySelector(config.captionsSelector)
 
-          if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
-            captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute)
-          } else {
-            captionData = CAPTION_SELECTOR.innerHTML
+            if (CAPTION_SELECTOR.hasAttribute(config.captionsAttribute) && CAPTION_SELECTOR.getAttribute(config.captionsAttribute) !== '') {
+              captionData = CAPTION_SELECTOR.getAttribute(config.captionsAttribute)
+            } else {
+              captionData = CAPTION_SELECTOR.innerHTML
+            }
           }
         }
-      }
 
-      if (captionData !== null) {
-        CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`
+        if (captionData !== null) {
+          CAPTION_CONTAINER.innerHTML = `<p>${captionData}</p>`
 
-        container.appendChild(CAPTION_CONTAINER)
+          container.appendChild(CAPTION_CONTAINER)
+        }
       }
@@ -706,4 +723,2 @@ }
   const loadImage = function loadImage (index) {
-    setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index])
-
     const IMAGE = groups[activeGroup].images[index]
@@ -993,2 +1008,7 @@ const IMAGE_SIZE = IMAGE.getBoundingClientRect()
 
+    if (imageEl.naturalHeight < maxHeight && imageEl.naturalWidth < maxWidth) {
+      maxHeight = imageEl.naturalHeight
+      maxWidth = imageEl.naturalWidth
+    }
+
     const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight)
@@ -995,0 +1015,0 @@

No alert changes

Improved metrics

Total package byte prevSize

191689

increased by1.53%

Lines of code

3852

increased by1.37%

No dependency changes