From fa4091509012930f8975c62627eee8c4c088964a Mon Sep 17 00:00:00 2001 From: Benjamin de Oostfrees <68224180+deoostfrees@users.noreply.github.com> Date: Sun, 16 Jan 2022 22:53:30 +0100 Subject: [PATCH] Fix image dimension, use `let` instead `const` for the `groups` variable --- dist/js/parvus.esm.js | 135 ++++++++++++++++++------------------ dist/js/parvus.esm.min.js | 2 +- dist/js/parvus.js | 135 ++++++++++++++++++------------------ dist/js/parvus.min.js | 2 +- src/js/parvus.js | 141 ++++++++++++++++++++------------------ 5 files changed, 217 insertions(+), 198 deletions(-) diff --git a/dist/js/parvus.esm.js b/dist/js/parvus.esm.js index c2131a1..66996d0 100644 --- a/dist/js/parvus.esm.js +++ b/dist/js/parvus.esm.js @@ -30,7 +30,7 @@ function Parvus(userOptions) { sliderElements: [], images: [] }; - const GROUPS = {}; + let groups = {}; let newGroup = null; let activeGroup = null; let currentIndex = 0; @@ -205,13 +205,13 @@ function Parvus(userOptions) { newGroup = getGroup(el); - if (!Object.prototype.hasOwnProperty.call(GROUPS, newGroup)) { - GROUPS[newGroup] = copyObject(GROUP_ATTS); + if (!Object.prototype.hasOwnProperty.call(groups, newGroup)) { + groups[newGroup] = copyObject(GROUP_ATTS); } // Check if element already exists - if (!GROUPS[newGroup].gallery.includes(el)) { - GROUPS[newGroup].gallery.push(el); + if (!groups[newGroup].gallery.includes(el)) { + groups[newGroup].gallery.push(el); if (el.querySelector('img') !== null) { const LIGHTBOX_INDICATOR_ICON = document.createElement('div'); @@ -226,8 +226,8 @@ function Parvus(userOptions) { el.addEventListener('click', triggerParvus); if (isOpen() && newGroup === activeGroup) { - createSlide(el, GROUPS[newGroup].gallery.indexOf(el)); - loadImage(GROUPS[newGroup].gallery.indexOf(el)); + createSlide(el, groups[newGroup].gallery.indexOf(el)); + loadImage(groups[newGroup].gallery.indexOf(el)); updateConfig(); updateFocus(); updateCounter(); @@ -250,12 +250,12 @@ function Parvus(userOptions) { const GROUP = getGroup(el); // Check if element exists - if (!GROUPS[GROUP].gallery.includes(el)) { + if (!groups[GROUP].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.'); } // TODO: Remove elements dynamically - GROUPS[GROUP].gallery.splice(GROUPS[GROUP].gallery.indexOf(el), 1); // Remove lightbox indicator icon if necessary + groups[GROUP].gallery.splice(groups[GROUP].gallery.indexOf(el), 1); // Remove lightbox indicator icon if necessary if (el.classList.contains('parvus-zoom')) { const LIGHTBOX_INDICATOR_ICON = el.querySelector('.parvus-zoom__indicator'); @@ -337,11 +337,11 @@ function Parvus(userOptions) { const createSlider = function createSlider() { - GROUPS[activeGroup].slider = document.createElement('div'); - GROUPS[activeGroup].slider.className = 'parvus__slider'; // Hide slider + groups[activeGroup].slider = document.createElement('div'); + groups[activeGroup].slider.className = 'parvus__slider'; // Hide slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'true'); - lightbox.appendChild(GROUPS[activeGroup].slider); + groups[activeGroup].slider.setAttribute('aria-hidden', 'true'); + lightbox.appendChild(groups[activeGroup].slider); }; /** * Create a slide @@ -362,16 +362,16 @@ function Parvus(userOptions) { createImage(index, el, SLIDER_ELEMENT_CONTENT); // Add slide content container to slider element SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT); - GROUPS[activeGroup].sliderElements[index] = SLIDER_ELEMENT; // Add slider element to slider + groups[activeGroup].sliderElements[index] = SLIDER_ELEMENT; // Add slider element to slider if (index === currentIndex) { - GROUPS[activeGroup].slider.appendChild(SLIDER_ELEMENT); + groups[activeGroup].slider.appendChild(SLIDER_ELEMENT); } if (index > currentIndex) { - GROUPS[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT); + groups[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT); } else { - GROUPS[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT); + groups[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT); } }; /** @@ -388,11 +388,11 @@ function Parvus(userOptions) { activeGroup = getGroup(el); // Check if element exists - if (!GROUPS[activeGroup].gallery.includes(el)) { + if (!groups[activeGroup].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.'); } - currentIndex = GROUPS[activeGroup].gallery.indexOf(el); // Save user’s focus + currentIndex = groups[activeGroup].gallery.indexOf(el); // Save user’s focus lastFocus = document.activeElement; // Use `history.pushState()` to make sure the 'Back' button behavior // that aligns with the user's expectations @@ -415,7 +415,7 @@ function Parvus(userOptions) { createSlider(); createSlide(el, currentIndex); // Show slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false'); + groups[activeGroup].slider.setAttribute('aria-hidden', 'false'); updateOffset(); updateConfig(); updateCounter(); @@ -434,7 +434,7 @@ function Parvus(userOptions) { 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 const OPEN_EVENT = new CustomEvent('open', { detail: { @@ -454,9 +454,9 @@ function Parvus(userOptions) { throw new Error('Ups, I\'m already closed.'); } - const IMAGE = GROUPS[activeGroup].images[currentIndex]; + const IMAGE = groups[activeGroup].images[currentIndex]; const IMAGE_SIZE = IMAGE.getBoundingClientRect(); - const THUMBNAIL = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus; + const THUMBNAIL = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus; const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect(); unbindEvents(); clearDrag(); // Remove entry in browser history @@ -490,16 +490,16 @@ function Parvus(userOptions) { // Don't forget to cleanup our current element leaveSlide(currentIndex); // Reenable the user’s focus - lastFocus = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus; + lastFocus = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus; lastFocus.focus({ preventScroll: true }); // Hide lightbox lightbox.setAttribute('aria-hidden', 'true'); lightbox.classList.remove('parvus--is-closing'); - lightbox.classList.remove('parvus--is-vertical-closing'); // Remove slider + lightbox.classList.remove('parvus--is-vertical-closing'); // Reset groups - GROUPS[activeGroup].slider.remove(); + groups = {}; IMAGE.style.transform = ''; }, { once: true @@ -507,7 +507,7 @@ function Parvus(userOptions) { const CLOSE_EVENT = new CustomEvent('close', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }); lightbox.dispatchEvent(CLOSE_EVENT); @@ -520,11 +520,11 @@ function Parvus(userOptions) { const preload = function preload(index) { - if (GROUPS[activeGroup].gallery[index] === undefined) { + if (groups[activeGroup].gallery[index] === undefined) { return; } - createSlide(GROUPS[activeGroup].gallery[index], index); + createSlide(groups[activeGroup].gallery[index], index); loadImage(index); }; /** @@ -535,8 +535,8 @@ function Parvus(userOptions) { const loadSlide = function loadSlide(index) { - GROUPS[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active'); - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false'); + groups[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active'); + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false'); }; /** * Create Image @@ -567,7 +567,6 @@ function Parvus(userOptions) { IMAGE.setAttribute('width', IMAGE.naturalWidth); IMAGE.setAttribute('height', IMAGE.naturalHeight); - setImageDimension(GROUPS[activeGroup].sliderElements[index], GROUPS[activeGroup].images[index]); }; if (el.tagName === 'A') { @@ -590,7 +589,8 @@ function Parvus(userOptions) { IMAGE.style.opacity = 0; IMAGE_CONTAINER.appendChild(IMAGE); - GROUPS[activeGroup].images[index] = IMAGE; // Add caption if available + groups[activeGroup].images[index] = IMAGE; + container.appendChild(IMAGE_CONTAINER); // Add caption if available if (config.captions) { let captionData = null; @@ -613,11 +613,9 @@ function Parvus(userOptions) { if (captionData !== null) { CAPTION_CONTAINER.innerHTML = `

${captionData}

`; + container.appendChild(CAPTION_CONTAINER); } } - - container.appendChild(IMAGE_CONTAINER); - container.appendChild(CAPTION_CONTAINER); }; /** * Load Image @@ -627,9 +625,10 @@ function Parvus(userOptions) { const loadImage = function loadImage(index) { - const IMAGE = GROUPS[activeGroup].images[index]; + setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index]); + const IMAGE = groups[activeGroup].images[index]; const IMAGE_SIZE = IMAGE.getBoundingClientRect(); - const THUMBNAIL = GROUPS[activeGroup].gallery[index]; + const THUMBNAIL = groups[activeGroup].gallery[index]; const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect(); if (lightbox.classList.contains('parvus--is-opening')) { @@ -637,6 +636,10 @@ function Parvus(userOptions) { heightDifference = THUMBNAIL_SIZE.height / IMAGE_SIZE.height; xDifference = THUMBNAIL_SIZE.left - IMAGE_SIZE.left; yDifference = THUMBNAIL_SIZE.top - IMAGE_SIZE.top; + console.log(THUMBNAIL_SIZE.width); + console.log(THUMBNAIL_SIZE.height); + console.log(IMAGE_SIZE.width); + console.log(IMAGE_SIZE.height); requestAnimationFrame(() => { IMAGE.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})`; IMAGE.style.transition = 'transform 0s, opacity 0s'; // Animate the difference reversal on the next tick @@ -672,7 +675,7 @@ function Parvus(userOptions) { throw new Error(`Ups, slide ${newIndex} is already selected.`); } - if (newIndex === -1 || newIndex >= GROUPS[activeGroup].gallery.length) { + if (newIndex === -1 || newIndex >= groups[activeGroup].gallery.length) { throw new Error(`Ups, I can't find slide ${newIndex}.`); } } @@ -701,7 +704,7 @@ function Parvus(userOptions) { const SELECT_EVENT = new CustomEvent('select', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }); lightbox.dispatchEvent(SELECT_EVENT); @@ -724,7 +727,7 @@ function Parvus(userOptions) { const next = function next() { - if (currentIndex < GROUPS[activeGroup].gallery.length - 1) { + if (currentIndex < groups[activeGroup].gallery.length - 1) { select(currentIndex + 1); } }; @@ -737,8 +740,8 @@ function Parvus(userOptions) { const leaveSlide = function leaveSlide(index) { - GROUPS[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active'); - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true'); + groups[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active'); + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true'); }; /** * Update offset @@ -749,7 +752,7 @@ function Parvus(userOptions) { const updateOffset = function updateOffset() { activeGroup = activeGroup !== null ? activeGroup : newGroup; offset = currentIndex * lightbox.offsetWidth * -1; - GROUPS[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)`; offsetTmp = offset; }; /** @@ -760,13 +763,13 @@ function Parvus(userOptions) { const updateFocus = function updateFocus(dir) { - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { closeButton.focus(); } else { // If the first slide is displayed if (currentIndex === 0) { nextButton.focus(); // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.focus(); } else { if (dir === 'left') { @@ -784,7 +787,7 @@ function Parvus(userOptions) { const updateCounter = function updateCounter() { - counter.textContent = `${currentIndex + 1}/${GROUPS[activeGroup].gallery.length}`; + counter.textContent = `${currentIndex + 1}/${groups[activeGroup].gallery.length}`; }; /** * Clear drag after touchend event @@ -814,7 +817,7 @@ function Parvus(userOptions) { if (isDraggingX && MOVEMENT_X > 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex > 0) { previous(); - } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== GROUPS[activeGroup].gallery.length - 1) { + } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== groups[activeGroup].gallery.length - 1) { next(); } else if (isDraggingY && MOVEMENT_Y_DISTANCE > 0) { if (MOVEMENT_Y_DISTANCE >= config.threshold && config.swipeClose) { @@ -835,12 +838,12 @@ function Parvus(userOptions) { const updateConfig = function updateConfig() { - if (config.swipeClose && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable') || GROUPS[activeGroup].gallery.length > 1 && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) { - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-draggable'); + if (config.swipeClose && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable') || groups[activeGroup].gallery.length > 1 && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) { + groups[activeGroup].slider.classList.add('parvus__slider--is-draggable'); } // Hide buttons if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { previousButton.setAttribute('aria-hidden', 'true'); previousButton.disabled = true; nextButton.setAttribute('aria-hidden', 'true'); @@ -852,7 +855,7 @@ function Parvus(userOptions) { previousButton.disabled = true; nextButton.setAttribute('aria-hidden', 'false'); nextButton.disabled = false; // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.setAttribute('aria-hidden', 'false'); previousButton.disabled = false; nextButton.setAttribute('aria-hidden', 'true'); @@ -866,7 +869,7 @@ function Parvus(userOptions) { } // Hide counter if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { counter.setAttribute('aria-hidden', 'true'); } else { counter.setAttribute('aria-hidden', 'false'); @@ -882,7 +885,7 @@ function Parvus(userOptions) { if (!resizeTicking) { resizeTicking = true; BROWSER_WINDOW.requestAnimationFrame(() => { - setImageDimension(GROUPS[activeGroup].sliderElements[currentIndex], GROUPS[activeGroup].images[currentIndex]); + setImageDimension(groups[activeGroup].sliderElements[currentIndex], groups[activeGroup].images[currentIndex]); updateOffset(); resizeTicking = false; }); @@ -908,6 +911,8 @@ function Parvus(userOptions) { const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight); imageEl.style.width = `${srcWidth * ratio || 0}px`; imageEl.style.height = `${srcHeight * ratio || 0}px`; + console.log(srcWidth * ratio || 0); + console.log(srcHeight * ratio || 0); }; /** * Click event handler to trigger Parvus @@ -1017,8 +1022,8 @@ function Parvus(userOptions) { pointerDown = true; drag.startX = event.pageX; drag.startY = event.pageY; - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'transform'; + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'transform'; }; /** * Mousemove event handler @@ -1044,8 +1049,8 @@ function Parvus(userOptions) { const mouseupHandler = function mouseupHandler(event) { event.stopPropagation(); pointerDown = false; - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'auto'; + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'auto'; if (drag.endX || drag.endY) { updateAfterDrag(); @@ -1066,8 +1071,8 @@ function Parvus(userOptions) { pointerDown = true; drag.startX = event.touches[0].pageX; drag.startY = event.touches[0].pageY; - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'transform'; + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'transform'; }; /** * Touchmove event handler @@ -1094,8 +1099,8 @@ function Parvus(userOptions) { const touchendHandler = function touchendHandler(event) { event.stopPropagation(); pointerDown = false; - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'auto'; + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'auto'; if (drag.endX || drag.endY) { updateAfterDrag(); @@ -1114,9 +1119,9 @@ function Parvus(userOptions) { const MOVEMENT_Y = drag.endY - drag.startY; const MOVEMENT_Y_DISTANCE = Math.abs(MOVEMENT_Y); - if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && GROUPS[activeGroup].gallery.length > 1) { + if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && groups[activeGroup].gallery.length > 1) { // Horizontal swipe - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)`; isDraggingX = true; isDraggingY = false; } else if (Math.abs(MOVEMENT_Y) > 0 && !isDraggingX && config.swipeClose) { @@ -1128,7 +1133,7 @@ function Parvus(userOptions) { lightbox.classList.add('parvus--is-vertical-closing'); lightboxOverlay.style.opacity = lightboxOverlayOpacity; - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)`; isDraggingX = false; isDraggingY = true; } diff --git a/dist/js/parvus.esm.min.js b/dist/js/parvus.esm.min.js index afd8943..f9d4efa 100644 --- a/dist/js/parvus.esm.min.js +++ b/dist/js/parvus.esm.min.js @@ -8,4 +8,4 @@ * MIT license */ -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:[]},r={};let 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,A=0,E=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:'',previousButtonIcon:'',nextButtonIcon:'',closeButtonIcon:'',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),Ee()&&l===o&&(z(e,r[l].gallery.indexOf(e)),J(r[l].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ee()||!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){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")||Ee())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(!Ee())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();Ae(),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((()=>{A=n.width/t.width,E=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(),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),re(r[o].sliderElements[e],r[o].images[e])},"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,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=`

${e}

`)}n.appendChild(s),n.appendChild(a)},J=function(e){const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(A=i.width/n.width,E=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(!Ee())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),et&&(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(){d0&&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=e.querySelector(".parvus__caption").getBoundingClientRect(),s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i.height),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)},Ae=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)},Ee=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;Ee()&&U(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ee,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,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,A=0,E=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:'',previousButtonIcon:'',nextButtonIcon:'',closeButtonIcon:'',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),Ee()&&l===o&&(z(e,r[l].gallery.indexOf(e)),J(r[l].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ee()||!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){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")||Ee())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(!Ee())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();Ae(),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((()=>{A=n.width/t.width,E=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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={},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=`

${e}

`,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")?(A=i.width/n.width,E=i.height/n.height,L=i.left-n.left,_=i.top-n.top,console.log(i.width),console.log(i.height),console.log(n.width),console.log(n.height),requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(!Ee())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),et&&(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(){d0&&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=e.querySelector(".parvus__caption").getBoundingClientRect(),s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i.height),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`,console.log(a*o||0),console.log(s*o||0)},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)},Ae=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)},Ee=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;Ee()&&U(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ee,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}; diff --git a/dist/js/parvus.js b/dist/js/parvus.js index bc62c1a..01f9791 100644 --- a/dist/js/parvus.js +++ b/dist/js/parvus.js @@ -36,7 +36,7 @@ sliderElements: [], images: [] }; - const GROUPS = {}; + let groups = {}; let newGroup = null; let activeGroup = null; let currentIndex = 0; @@ -211,13 +211,13 @@ newGroup = getGroup(el); - if (!Object.prototype.hasOwnProperty.call(GROUPS, newGroup)) { - GROUPS[newGroup] = copyObject(GROUP_ATTS); + if (!Object.prototype.hasOwnProperty.call(groups, newGroup)) { + groups[newGroup] = copyObject(GROUP_ATTS); } // Check if element already exists - if (!GROUPS[newGroup].gallery.includes(el)) { - GROUPS[newGroup].gallery.push(el); + if (!groups[newGroup].gallery.includes(el)) { + groups[newGroup].gallery.push(el); if (el.querySelector('img') !== null) { const LIGHTBOX_INDICATOR_ICON = document.createElement('div'); @@ -232,8 +232,8 @@ el.addEventListener('click', triggerParvus); if (isOpen() && newGroup === activeGroup) { - createSlide(el, GROUPS[newGroup].gallery.indexOf(el)); - loadImage(GROUPS[newGroup].gallery.indexOf(el)); + createSlide(el, groups[newGroup].gallery.indexOf(el)); + loadImage(groups[newGroup].gallery.indexOf(el)); updateConfig(); updateFocus(); updateCounter(); @@ -256,12 +256,12 @@ const GROUP = getGroup(el); // Check if element exists - if (!GROUPS[GROUP].gallery.includes(el)) { + if (!groups[GROUP].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.'); } // TODO: Remove elements dynamically - GROUPS[GROUP].gallery.splice(GROUPS[GROUP].gallery.indexOf(el), 1); // Remove lightbox indicator icon if necessary + groups[GROUP].gallery.splice(groups[GROUP].gallery.indexOf(el), 1); // Remove lightbox indicator icon if necessary if (el.classList.contains('parvus-zoom')) { const LIGHTBOX_INDICATOR_ICON = el.querySelector('.parvus-zoom__indicator'); @@ -343,11 +343,11 @@ const createSlider = function createSlider() { - GROUPS[activeGroup].slider = document.createElement('div'); - GROUPS[activeGroup].slider.className = 'parvus__slider'; // Hide slider + groups[activeGroup].slider = document.createElement('div'); + groups[activeGroup].slider.className = 'parvus__slider'; // Hide slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'true'); - lightbox.appendChild(GROUPS[activeGroup].slider); + groups[activeGroup].slider.setAttribute('aria-hidden', 'true'); + lightbox.appendChild(groups[activeGroup].slider); }; /** * Create a slide @@ -368,16 +368,16 @@ createImage(index, el, SLIDER_ELEMENT_CONTENT); // Add slide content container to slider element SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT); - GROUPS[activeGroup].sliderElements[index] = SLIDER_ELEMENT; // Add slider element to slider + groups[activeGroup].sliderElements[index] = SLIDER_ELEMENT; // Add slider element to slider if (index === currentIndex) { - GROUPS[activeGroup].slider.appendChild(SLIDER_ELEMENT); + groups[activeGroup].slider.appendChild(SLIDER_ELEMENT); } if (index > currentIndex) { - GROUPS[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT); + groups[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT); } else { - GROUPS[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT); + groups[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT); } }; /** @@ -394,11 +394,11 @@ activeGroup = getGroup(el); // Check if element exists - if (!GROUPS[activeGroup].gallery.includes(el)) { + if (!groups[activeGroup].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.'); } - currentIndex = GROUPS[activeGroup].gallery.indexOf(el); // Save user’s focus + currentIndex = groups[activeGroup].gallery.indexOf(el); // Save user’s focus lastFocus = document.activeElement; // Use `history.pushState()` to make sure the 'Back' button behavior // that aligns with the user's expectations @@ -421,7 +421,7 @@ createSlider(); createSlide(el, currentIndex); // Show slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false'); + groups[activeGroup].slider.setAttribute('aria-hidden', 'false'); updateOffset(); updateConfig(); updateCounter(); @@ -440,7 +440,7 @@ 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 const OPEN_EVENT = new CustomEvent('open', { detail: { @@ -460,9 +460,9 @@ throw new Error('Ups, I\'m already closed.'); } - const IMAGE = GROUPS[activeGroup].images[currentIndex]; + const IMAGE = groups[activeGroup].images[currentIndex]; const IMAGE_SIZE = IMAGE.getBoundingClientRect(); - const THUMBNAIL = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus; + const THUMBNAIL = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus; const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect(); unbindEvents(); clearDrag(); // Remove entry in browser history @@ -496,16 +496,16 @@ // Don't forget to cleanup our current element leaveSlide(currentIndex); // Reenable the user’s focus - lastFocus = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus; + lastFocus = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus; lastFocus.focus({ preventScroll: true }); // Hide lightbox lightbox.setAttribute('aria-hidden', 'true'); lightbox.classList.remove('parvus--is-closing'); - lightbox.classList.remove('parvus--is-vertical-closing'); // Remove slider + lightbox.classList.remove('parvus--is-vertical-closing'); // Reset groups - GROUPS[activeGroup].slider.remove(); + groups = {}; IMAGE.style.transform = ''; }, { once: true @@ -513,7 +513,7 @@ const CLOSE_EVENT = new CustomEvent('close', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }); lightbox.dispatchEvent(CLOSE_EVENT); @@ -526,11 +526,11 @@ const preload = function preload(index) { - if (GROUPS[activeGroup].gallery[index] === undefined) { + if (groups[activeGroup].gallery[index] === undefined) { return; } - createSlide(GROUPS[activeGroup].gallery[index], index); + createSlide(groups[activeGroup].gallery[index], index); loadImage(index); }; /** @@ -541,8 +541,8 @@ const loadSlide = function loadSlide(index) { - GROUPS[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active'); - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false'); + groups[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active'); + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false'); }; /** * Create Image @@ -573,7 +573,6 @@ IMAGE.setAttribute('width', IMAGE.naturalWidth); IMAGE.setAttribute('height', IMAGE.naturalHeight); - setImageDimension(GROUPS[activeGroup].sliderElements[index], GROUPS[activeGroup].images[index]); }; if (el.tagName === 'A') { @@ -596,7 +595,8 @@ IMAGE.style.opacity = 0; IMAGE_CONTAINER.appendChild(IMAGE); - GROUPS[activeGroup].images[index] = IMAGE; // Add caption if available + groups[activeGroup].images[index] = IMAGE; + container.appendChild(IMAGE_CONTAINER); // Add caption if available if (config.captions) { let captionData = null; @@ -619,11 +619,9 @@ if (captionData !== null) { CAPTION_CONTAINER.innerHTML = `

${captionData}

`; + container.appendChild(CAPTION_CONTAINER); } } - - container.appendChild(IMAGE_CONTAINER); - container.appendChild(CAPTION_CONTAINER); }; /** * Load Image @@ -633,9 +631,10 @@ const loadImage = function loadImage(index) { - const IMAGE = GROUPS[activeGroup].images[index]; + setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index]); + const IMAGE = groups[activeGroup].images[index]; const IMAGE_SIZE = IMAGE.getBoundingClientRect(); - const THUMBNAIL = GROUPS[activeGroup].gallery[index]; + const THUMBNAIL = groups[activeGroup].gallery[index]; const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect(); if (lightbox.classList.contains('parvus--is-opening')) { @@ -643,6 +642,10 @@ heightDifference = THUMBNAIL_SIZE.height / IMAGE_SIZE.height; xDifference = THUMBNAIL_SIZE.left - IMAGE_SIZE.left; yDifference = THUMBNAIL_SIZE.top - IMAGE_SIZE.top; + console.log(THUMBNAIL_SIZE.width); + console.log(THUMBNAIL_SIZE.height); + console.log(IMAGE_SIZE.width); + console.log(IMAGE_SIZE.height); requestAnimationFrame(() => { IMAGE.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})`; IMAGE.style.transition = 'transform 0s, opacity 0s'; // Animate the difference reversal on the next tick @@ -678,7 +681,7 @@ throw new Error(`Ups, slide ${newIndex} is already selected.`); } - if (newIndex === -1 || newIndex >= GROUPS[activeGroup].gallery.length) { + if (newIndex === -1 || newIndex >= groups[activeGroup].gallery.length) { throw new Error(`Ups, I can't find slide ${newIndex}.`); } } @@ -707,7 +710,7 @@ const SELECT_EVENT = new CustomEvent('select', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }); lightbox.dispatchEvent(SELECT_EVENT); @@ -730,7 +733,7 @@ const next = function next() { - if (currentIndex < GROUPS[activeGroup].gallery.length - 1) { + if (currentIndex < groups[activeGroup].gallery.length - 1) { select(currentIndex + 1); } }; @@ -743,8 +746,8 @@ const leaveSlide = function leaveSlide(index) { - GROUPS[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active'); - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true'); + groups[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active'); + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true'); }; /** * Update offset @@ -755,7 +758,7 @@ const updateOffset = function updateOffset() { activeGroup = activeGroup !== null ? activeGroup : newGroup; offset = currentIndex * lightbox.offsetWidth * -1; - GROUPS[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)`; offsetTmp = offset; }; /** @@ -766,13 +769,13 @@ const updateFocus = function updateFocus(dir) { - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { closeButton.focus(); } else { // If the first slide is displayed if (currentIndex === 0) { nextButton.focus(); // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.focus(); } else { if (dir === 'left') { @@ -790,7 +793,7 @@ const updateCounter = function updateCounter() { - counter.textContent = `${currentIndex + 1}/${GROUPS[activeGroup].gallery.length}`; + counter.textContent = `${currentIndex + 1}/${groups[activeGroup].gallery.length}`; }; /** * Clear drag after touchend event @@ -820,7 +823,7 @@ if (isDraggingX && MOVEMENT_X > 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex > 0) { previous(); - } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== GROUPS[activeGroup].gallery.length - 1) { + } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== groups[activeGroup].gallery.length - 1) { next(); } else if (isDraggingY && MOVEMENT_Y_DISTANCE > 0) { if (MOVEMENT_Y_DISTANCE >= config.threshold && config.swipeClose) { @@ -841,12 +844,12 @@ const updateConfig = function updateConfig() { - if (config.swipeClose && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable') || GROUPS[activeGroup].gallery.length > 1 && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) { - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-draggable'); + if (config.swipeClose && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable') || groups[activeGroup].gallery.length > 1 && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) { + groups[activeGroup].slider.classList.add('parvus__slider--is-draggable'); } // Hide buttons if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { previousButton.setAttribute('aria-hidden', 'true'); previousButton.disabled = true; nextButton.setAttribute('aria-hidden', 'true'); @@ -858,7 +861,7 @@ previousButton.disabled = true; nextButton.setAttribute('aria-hidden', 'false'); nextButton.disabled = false; // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.setAttribute('aria-hidden', 'false'); previousButton.disabled = false; nextButton.setAttribute('aria-hidden', 'true'); @@ -872,7 +875,7 @@ } // Hide counter if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { counter.setAttribute('aria-hidden', 'true'); } else { counter.setAttribute('aria-hidden', 'false'); @@ -888,7 +891,7 @@ if (!resizeTicking) { resizeTicking = true; BROWSER_WINDOW.requestAnimationFrame(() => { - setImageDimension(GROUPS[activeGroup].sliderElements[currentIndex], GROUPS[activeGroup].images[currentIndex]); + setImageDimension(groups[activeGroup].sliderElements[currentIndex], groups[activeGroup].images[currentIndex]); updateOffset(); resizeTicking = false; }); @@ -914,6 +917,8 @@ const ratio = Math.min(maxWidth / srcWidth || 0, maxHeight / srcHeight); imageEl.style.width = `${srcWidth * ratio || 0}px`; imageEl.style.height = `${srcHeight * ratio || 0}px`; + console.log(srcWidth * ratio || 0); + console.log(srcHeight * ratio || 0); }; /** * Click event handler to trigger Parvus @@ -1023,8 +1028,8 @@ pointerDown = true; drag.startX = event.pageX; drag.startY = event.pageY; - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'transform'; + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'transform'; }; /** * Mousemove event handler @@ -1050,8 +1055,8 @@ const mouseupHandler = function mouseupHandler(event) { event.stopPropagation(); pointerDown = false; - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'auto'; + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'auto'; if (drag.endX || drag.endY) { updateAfterDrag(); @@ -1072,8 +1077,8 @@ pointerDown = true; drag.startX = event.touches[0].pageX; drag.startY = event.touches[0].pageY; - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'transform'; + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'transform'; }; /** * Touchmove event handler @@ -1100,8 +1105,8 @@ const touchendHandler = function touchendHandler(event) { event.stopPropagation(); pointerDown = false; - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); - GROUPS[activeGroup].slider.style.willChange = 'auto'; + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging'); + groups[activeGroup].slider.style.willChange = 'auto'; if (drag.endX || drag.endY) { updateAfterDrag(); @@ -1120,9 +1125,9 @@ const MOVEMENT_Y = drag.endY - drag.startY; const MOVEMENT_Y_DISTANCE = Math.abs(MOVEMENT_Y); - if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && GROUPS[activeGroup].gallery.length > 1) { + if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && groups[activeGroup].gallery.length > 1) { // Horizontal swipe - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)`; isDraggingX = true; isDraggingY = false; } else if (Math.abs(MOVEMENT_Y) > 0 && !isDraggingX && config.swipeClose) { @@ -1134,7 +1139,7 @@ lightbox.classList.add('parvus--is-vertical-closing'); lightboxOverlay.style.opacity = lightboxOverlayOpacity; - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)`; + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)`; isDraggingX = false; isDraggingY = true; } diff --git a/dist/js/parvus.min.js b/dist/js/parvus.min.js index ed6d9e4..4337603 100644 --- a/dist/js/parvus.min.js +++ b/dist/js/parvus.min.js @@ -8,4 +8,4 @@ * MIT license */ -!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:[]},r={};let 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,A=0,E=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:'',previousButtonIcon:'',nextButtonIcon:'',closeButtonIcon:'',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),Ee()&&l===o&&(z(e,r[l].gallery.indexOf(e)),J(r[l].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ee()||!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){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")||Ee())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(!Ee())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();Ae(),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((()=>{A=n.width/t.width,E=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(),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),re(r[o].sliderElements[e],r[o].images[e])},"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,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=`

${e}

`)}n.appendChild(s),n.appendChild(a)},J=function(e){const t=r[o].images[e],n=t.getBoundingClientRect(),i=r[o].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(A=i.width/n.width,E=i.height/n.height,L=i.left-n.left,_=i.top-n.top,requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(!Ee())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),et&&(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(){d0&&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=e.querySelector(".parvus__caption").getBoundingClientRect(),s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,l=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i.height),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)},Ae=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)},Ee=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;Ee()&&R(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ee,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={},o=null,l=null,d=0,u={},c=null,p=null,g=1,h=null,m=null,v=null,f=null,b=null,y=null,w=null,A=0,E=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:'',previousButtonIcon:'',nextButtonIcon:'',closeButtonIcon:'',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(o=k(e),Object.prototype.hasOwnProperty.call(r,o)||(r[o]=(t=a,JSON.parse(JSON.stringify(t)))),r[o].gallery.includes(e))throw new Error("Ups, element already added.");if(r[o].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",oe),Ee()&&o===l&&(z(e,r[o].gallery.indexOf(e)),J(r[o].gallery.indexOf(e)),se(),ee(),te())},H=function(e){if(Ee()||!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",oe),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){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[l].sliderElements[t]=n,t===d&&r[l].slider.appendChild(n),t>d?r[l].sliderElements[d].after(n):r[l].sliderElements[d].before(n)},P=function(e){if(!c||!e||!e.classList.contains("parvus-trigger")||Ee())return;if(l=k(e),!r[l].gallery.includes(e))throw new Error("Ups, I can't find the element.");d=r[l].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[l].slider=document.createElement("div"),r[l].slider.className="parvus__slider",r[l].slider.setAttribute("aria-hidden","true"),c.appendChild(r[l].slider),z(e,d),r[l].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[l].slider.classList.add("parvus__slider--animate");const n=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(n)},R=function(){if(!Ee())throw new Error("Ups, I'm already closed.");const e=r[l].images[d],t=e.getBoundingClientRect(),n=(u.backFocus?r[l].gallery[d]:T).getBoundingClientRect();Ae(),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((()=>{A=n.width/t.width,E=n.height/t.height,L=n.left-t.left,_=n.top-t.top,e.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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[l].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={},e.style.transform=""}),{once:!0});const i=new CustomEvent("close",{detail:{source:r[l].gallery[d]}});c.dispatchEvent(i)},U=function(e){void 0!==r[l].gallery[e]&&(z(r[l].gallery[e],e),J(e))},j=function(e){r[l].sliderElements[e].classList.add("parvus__slide--is-active"),r[l].sliderElements[e].setAttribute("aria-hidden","false")},W=function(e,t,n){const i=document.createElement("img"),s=document.createElement("div"),a=document.createElement("div"),o=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=o?o.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[l].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=`

${e}

`,n.appendChild(a))}},J=function(e){re(r[l].sliderElements[e],r[l].images[e]);const t=r[l].images[e],n=t.getBoundingClientRect(),i=r[l].gallery[e].getBoundingClientRect();c.classList.contains("parvus--is-opening")?(A=i.width/n.width,E=i.height/n.height,L=i.left-n.left,_=i.top-n.top,console.log(i.width),console.log(i.height),console.log(n.width),console.log(n.height),requestAnimationFrame((()=>{t.style.transform=`translate(${L}px, ${_}px) scale(${A}, ${E})`,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(!Ee())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[l].gallery.length)throw new Error(`Ups, I can't find slide ${e}.`);Q(t),j(e),J(e),et&&(d++,Z(),se(),ee("right"),U(e+1)),te();const n=new CustomEvent("select",{detail:{source:r[l].gallery[d]}});c.dispatchEvent(n)},V=function(){d>0&&K(d-1)},G=function(){d0&&n>=u.threshold&&d>0?V():x&&e<0&&n>=u.threshold&&d!==r[l].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[l].slider.classList.contains("parvus__slider--is-draggable")||r[l].gallery.length>1&&!r[l].slider.classList.contains("parvus__slider--is-draggable"))&&r[l].slider.classList.add("parvus__slider--is-draggable"),1===r[l].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[l].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[l].gallery.length?w.setAttribute("aria-hidden","true"):w.setAttribute("aria-hidden","false")},ae=function(){q||(q=!0,i.requestAnimationFrame((()=>{re(r[l].sliderElements[d],r[l].images[d]),Z(),q=!1})))},re=function(e,t){const n=getComputedStyle(e),i=e.querySelector(".parvus__caption").getBoundingClientRect(),s=t.naturalHeight,a=t.naturalWidth;let r=e.getBoundingClientRect().height,o=e.getBoundingClientRect().width;r-=parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)+parseFloat(i.height),o-=parseFloat(n.paddingLeft)+parseFloat(n.paddingRight);const l=Math.min(o/a||0,r/s);t.style.width=`${a*l||0}px`,t.style.height=`${s*l||0}px`,console.log(a*l||0),console.log(s*l||0)},oe=function(e){e.preventDefault(),P(this)},le=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[l].slider.classList.add("parvus__slider--is-dragging"),r[l].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[l].slider.classList.remove("parvus__slider--is-dragging"),r[l].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[l].slider.classList.add("parvus__slider--is-dragging"),r[l].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[l].slider.classList.remove("parvus__slider--is-dragging"),r[l].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[l].gallery.length>1?(r[l].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[l].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",le),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)},Ae=function(){i.removeEventListener("keydown",ce),i.removeEventListener("resize",ae),u.scrollClose&&i.removeEventListener("wheel",pe),i.removeEventListener("popstate",R),c.removeEventListener("click",le),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)},Ee=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;Ee()&&R(),c.remove();document.querySelectorAll(".parvus-trigger").forEach((e=>{H(e)}));const e=new CustomEvent("destroy");c.dispatchEvent(e)},t.isOpen=Ee,t.on=function(e,t){c&&c.addEventListener(e,t)},t.off=function(e,t){c&&c.removeEventListener(e,t)},t}})); diff --git a/src/js/parvus.js b/src/js/parvus.js index 97e8cdd..bcc7eb2 100644 --- a/src/js/parvus.js +++ b/src/js/parvus.js @@ -17,7 +17,7 @@ export default function Parvus (userOptions) { sliderElements: [], images: [] } - const GROUPS = {} + let groups = {} let newGroup = null let activeGroup = null let currentIndex = 0 @@ -197,13 +197,13 @@ export default function Parvus (userOptions) { newGroup = getGroup(el) - if (!Object.prototype.hasOwnProperty.call(GROUPS, newGroup)) { - GROUPS[newGroup] = copyObject(GROUP_ATTS) + if (!Object.prototype.hasOwnProperty.call(groups, newGroup)) { + groups[newGroup] = copyObject(GROUP_ATTS) } // Check if element already exists - if (!GROUPS[newGroup].gallery.includes(el)) { - GROUPS[newGroup].gallery.push(el) + if (!groups[newGroup].gallery.includes(el)) { + groups[newGroup].gallery.push(el) if (el.querySelector('img') !== null) { const LIGHTBOX_INDICATOR_ICON = document.createElement('div') @@ -222,8 +222,8 @@ export default function Parvus (userOptions) { el.addEventListener('click', triggerParvus) if (isOpen() && newGroup === activeGroup) { - createSlide(el, GROUPS[newGroup].gallery.indexOf(el)) - loadImage(GROUPS[newGroup].gallery.indexOf(el)) + createSlide(el, groups[newGroup].gallery.indexOf(el)) + loadImage(groups[newGroup].gallery.indexOf(el)) updateConfig() updateFocus() updateCounter() @@ -246,13 +246,13 @@ export default function Parvus (userOptions) { const GROUP = getGroup(el) // Check if element exists - if (!GROUPS[GROUP].gallery.includes(el)) { + if (!groups[GROUP].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.') } // TODO: Remove elements dynamically - GROUPS[GROUP].gallery.splice(GROUPS[GROUP].gallery.indexOf(el), 1) + groups[GROUP].gallery.splice(groups[GROUP].gallery.indexOf(el), 1) // Remove lightbox indicator icon if necessary if (el.classList.contains('parvus-zoom')) { @@ -352,13 +352,13 @@ export default function Parvus (userOptions) { * */ const createSlider = function createSlider () { - GROUPS[activeGroup].slider = document.createElement('div') - GROUPS[activeGroup].slider.className = 'parvus__slider' + groups[activeGroup].slider = document.createElement('div') + groups[activeGroup].slider.className = 'parvus__slider' // Hide slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'true') + groups[activeGroup].slider.setAttribute('aria-hidden', 'true') - lightbox.appendChild(GROUPS[activeGroup].slider) + lightbox.appendChild(groups[activeGroup].slider) } /** @@ -383,17 +383,17 @@ export default function Parvus (userOptions) { // Add slide content container to slider element SLIDER_ELEMENT.appendChild(SLIDER_ELEMENT_CONTENT) - GROUPS[activeGroup].sliderElements[index] = SLIDER_ELEMENT + groups[activeGroup].sliderElements[index] = SLIDER_ELEMENT // Add slider element to slider if (index === currentIndex) { - GROUPS[activeGroup].slider.appendChild(SLIDER_ELEMENT) + groups[activeGroup].slider.appendChild(SLIDER_ELEMENT) } if (index > currentIndex) { - GROUPS[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT) + groups[activeGroup].sliderElements[currentIndex].after(SLIDER_ELEMENT) } else { - GROUPS[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT) + groups[activeGroup].sliderElements[currentIndex].before(SLIDER_ELEMENT) } } @@ -410,11 +410,11 @@ export default function Parvus (userOptions) { activeGroup = getGroup(el) // Check if element exists - if (!GROUPS[activeGroup].gallery.includes(el)) { + if (!groups[activeGroup].gallery.includes(el)) { throw new Error('Ups, I can\'t find the element.') } - currentIndex = GROUPS[activeGroup].gallery.indexOf(el) + currentIndex = groups[activeGroup].gallery.indexOf(el) // Save user’s focus lastFocus = document.activeElement @@ -448,7 +448,7 @@ export default function Parvus (userOptions) { createSlide(el, currentIndex) // Show slider - GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false') + groups[activeGroup].slider.setAttribute('aria-hidden', 'false') updateOffset() updateConfig() @@ -474,7 +474,7 @@ export default function Parvus (userOptions) { }) // Add class for slider animation - GROUPS[activeGroup].slider.classList.add('parvus__slider--animate') + groups[activeGroup].slider.classList.add('parvus__slider--animate') // Create and dispatch a new event const OPEN_EVENT = new CustomEvent('open', { @@ -495,9 +495,9 @@ export default function Parvus (userOptions) { throw new Error('Ups, I\'m already closed.') } - const IMAGE = GROUPS[activeGroup].images[currentIndex] + const IMAGE = groups[activeGroup].images[currentIndex] const IMAGE_SIZE = IMAGE.getBoundingClientRect() - const THUMBNAIL = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus + const THUMBNAIL = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect() unbindEvents() @@ -541,7 +541,7 @@ export default function Parvus (userOptions) { leaveSlide(currentIndex) // Reenable the user’s focus - lastFocus = config.backFocus ? GROUPS[activeGroup].gallery[currentIndex] : lastFocus + lastFocus = config.backFocus ? groups[activeGroup].gallery[currentIndex] : lastFocus lastFocus.focus({ preventScroll: true @@ -553,8 +553,8 @@ export default function Parvus (userOptions) { lightbox.classList.remove('parvus--is-closing') lightbox.classList.remove('parvus--is-vertical-closing') - // Remove slider - GROUPS[activeGroup].slider.remove() + // Reset groups + groups = {} IMAGE.style.transform = '' }, @@ -565,7 +565,7 @@ export default function Parvus (userOptions) { // Create and dispatch a new event const CLOSE_EVENT = new CustomEvent('close', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }) @@ -578,11 +578,11 @@ export default function Parvus (userOptions) { * @param {Number} index */ const preload = function preload (index) { - if (GROUPS[activeGroup].gallery[index] === undefined) { + if (groups[activeGroup].gallery[index] === undefined) { return } - createSlide(GROUPS[activeGroup].gallery[index], index) + createSlide(groups[activeGroup].gallery[index], index) loadImage(index) } @@ -592,8 +592,8 @@ export default function Parvus (userOptions) { * @param {Number} index */ const loadSlide = function loadSlide (index) { - GROUPS[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active') - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false') + groups[activeGroup].sliderElements[index].classList.add('parvus__slide--is-active') + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'false') } /** @@ -627,8 +627,6 @@ export default function Parvus (userOptions) { // Set image width and height IMAGE.setAttribute('width', IMAGE.naturalWidth) IMAGE.setAttribute('height', IMAGE.naturalHeight) - - setImageDimension(GROUPS[activeGroup].sliderElements[index], GROUPS[activeGroup].images[index]) } if (el.tagName === 'A') { @@ -653,7 +651,9 @@ export default function Parvus (userOptions) { IMAGE_CONTAINER.appendChild(IMAGE) - GROUPS[activeGroup].images[index] = IMAGE + groups[activeGroup].images[index] = IMAGE + + container.appendChild(IMAGE_CONTAINER) // Add caption if available if (config.captions) { @@ -677,11 +677,10 @@ export default function Parvus (userOptions) { if (captionData !== null) { CAPTION_CONTAINER.innerHTML = `

${captionData}

` + + container.appendChild(CAPTION_CONTAINER) } } - - container.appendChild(IMAGE_CONTAINER) - container.appendChild(CAPTION_CONTAINER) } /** @@ -690,9 +689,11 @@ export default function Parvus (userOptions) { * @param {Number} index */ const loadImage = function loadImage (index) { - const IMAGE = GROUPS[activeGroup].images[index] + setImageDimension(groups[activeGroup].sliderElements[index], groups[activeGroup].images[index]) + + const IMAGE = groups[activeGroup].images[index] const IMAGE_SIZE = IMAGE.getBoundingClientRect() - const THUMBNAIL = GROUPS[activeGroup].gallery[index] + const THUMBNAIL = groups[activeGroup].gallery[index] const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect() if (lightbox.classList.contains('parvus--is-opening')) { @@ -701,6 +702,11 @@ export default function Parvus (userOptions) { xDifference = THUMBNAIL_SIZE.left - IMAGE_SIZE.left yDifference = THUMBNAIL_SIZE.top - IMAGE_SIZE.top + console.log(THUMBNAIL_SIZE.width) + console.log(THUMBNAIL_SIZE.height) + console.log(IMAGE_SIZE.width) + console.log(IMAGE_SIZE.height) + requestAnimationFrame(() => { IMAGE.style.transform = `translate(${xDifference}px, ${yDifference}px) scale(${widthDifference}, ${heightDifference})` IMAGE.style.transition = 'transform 0s, opacity 0s' @@ -736,7 +742,7 @@ export default function Parvus (userOptions) { throw new Error(`Ups, slide ${newIndex} is already selected.`) } - if (newIndex === -1 || newIndex >= GROUPS[activeGroup].gallery.length) { + if (newIndex === -1 || newIndex >= groups[activeGroup].gallery.length) { throw new Error(`Ups, I can't find slide ${newIndex}.`) } } @@ -769,7 +775,7 @@ export default function Parvus (userOptions) { // Create and dispatch a new event const SELECT_EVENT = new CustomEvent('select', { detail: { - source: GROUPS[activeGroup].gallery[currentIndex] + source: groups[activeGroup].gallery[currentIndex] } }) @@ -791,7 +797,7 @@ export default function Parvus (userOptions) { * */ const next = function next () { - if (currentIndex < GROUPS[activeGroup].gallery.length - 1) { + if (currentIndex < groups[activeGroup].gallery.length - 1) { select(currentIndex + 1) } } @@ -803,8 +809,8 @@ export default function Parvus (userOptions) { * @param {Number} index */ const leaveSlide = function leaveSlide (index) { - GROUPS[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active') - GROUPS[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true') + groups[activeGroup].sliderElements[index].classList.remove('parvus__slide--is-active') + groups[activeGroup].sliderElements[index].setAttribute('aria-hidden', 'true') } /** @@ -816,7 +822,7 @@ export default function Parvus (userOptions) { offset = (currentIndex * lightbox.offsetWidth) * -1 - GROUPS[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)` + groups[activeGroup].slider.style.transform = `translate3d(${offset}px, 0, 0)` offsetTmp = offset } @@ -826,14 +832,14 @@ export default function Parvus (userOptions) { * @param {String} dir */ const updateFocus = function updateFocus (dir) { - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { closeButton.focus() } else { // If the first slide is displayed if (currentIndex === 0) { nextButton.focus() // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.focus() } else { if (dir === 'left') { @@ -850,7 +856,7 @@ export default function Parvus (userOptions) { * */ const updateCounter = function updateCounter () { - counter.textContent = `${currentIndex + 1}/${GROUPS[activeGroup].gallery.length}` + counter.textContent = `${currentIndex + 1}/${groups[activeGroup].gallery.length}` } /** @@ -878,7 +884,7 @@ export default function Parvus (userOptions) { if (isDraggingX && MOVEMENT_X > 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex > 0) { previous() - } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== GROUPS[activeGroup].gallery.length - 1) { + } else if (isDraggingX && MOVEMENT_X < 0 && MOVEMENT_X_DISTANCE >= config.threshold && currentIndex !== groups[activeGroup].gallery.length - 1) { next() } else if (isDraggingY && MOVEMENT_Y_DISTANCE > 0) { if (MOVEMENT_Y_DISTANCE >= config.threshold && config.swipeClose) { @@ -900,12 +906,12 @@ export default function Parvus (userOptions) { * */ const updateConfig = function updateConfig () { - if ((config.swipeClose && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) || (GROUPS[activeGroup].gallery.length > 1 && !GROUPS[activeGroup].slider.classList.contains('parvus__slider--is-draggable'))) { - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-draggable') + if ((config.swipeClose && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable')) || (groups[activeGroup].gallery.length > 1 && !groups[activeGroup].slider.classList.contains('parvus__slider--is-draggable'))) { + groups[activeGroup].slider.classList.add('parvus__slider--is-draggable') } // Hide buttons if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { previousButton.setAttribute('aria-hidden', 'true') previousButton.disabled = true nextButton.setAttribute('aria-hidden', 'true') @@ -918,7 +924,7 @@ export default function Parvus (userOptions) { nextButton.setAttribute('aria-hidden', 'false') nextButton.disabled = false // If the last slide is displayed - } else if (currentIndex === GROUPS[activeGroup].gallery.length - 1) { + } else if (currentIndex === groups[activeGroup].gallery.length - 1) { previousButton.setAttribute('aria-hidden', 'false') previousButton.disabled = false nextButton.setAttribute('aria-hidden', 'true') @@ -932,7 +938,7 @@ export default function Parvus (userOptions) { } // Hide counter if necessary - if (GROUPS[activeGroup].gallery.length === 1) { + if (groups[activeGroup].gallery.length === 1) { counter.setAttribute('aria-hidden', 'true') } else { counter.setAttribute('aria-hidden', 'false') @@ -948,7 +954,7 @@ export default function Parvus (userOptions) { resizeTicking = true BROWSER_WINDOW.requestAnimationFrame(() => { - setImageDimension(GROUPS[activeGroup].sliderElements[currentIndex], GROUPS[activeGroup].images[currentIndex]) + setImageDimension(groups[activeGroup].sliderElements[currentIndex], groups[activeGroup].images[currentIndex]) updateOffset() resizeTicking = false @@ -978,6 +984,9 @@ export default function Parvus (userOptions) { imageEl.style.width = `${srcWidth * ratio || 0}px` imageEl.style.height = `${srcHeight * ratio || 0}px` + + console.log(srcWidth * ratio || 0) + console.log(srcHeight * ratio || 0) } /** @@ -1091,8 +1100,8 @@ export default function Parvus (userOptions) { drag.startX = event.pageX drag.startY = event.pageY - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging') - GROUPS[activeGroup].slider.style.willChange = 'transform' + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging') + groups[activeGroup].slider.style.willChange = 'transform' } /** @@ -1119,8 +1128,8 @@ export default function Parvus (userOptions) { pointerDown = false - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging') - GROUPS[activeGroup].slider.style.willChange = 'auto' + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging') + groups[activeGroup].slider.style.willChange = 'auto' if (drag.endX || drag.endY) { updateAfterDrag() @@ -1144,8 +1153,8 @@ export default function Parvus (userOptions) { drag.startX = event.touches[0].pageX drag.startY = event.touches[0].pageY - GROUPS[activeGroup].slider.classList.add('parvus__slider--is-dragging') - GROUPS[activeGroup].slider.style.willChange = 'transform' + groups[activeGroup].slider.classList.add('parvus__slider--is-dragging') + groups[activeGroup].slider.style.willChange = 'transform' } /** @@ -1174,8 +1183,8 @@ export default function Parvus (userOptions) { pointerDown = false - GROUPS[activeGroup].slider.classList.remove('parvus__slider--is-dragging') - GROUPS[activeGroup].slider.style.willChange = 'auto' + groups[activeGroup].slider.classList.remove('parvus__slider--is-dragging') + groups[activeGroup].slider.style.willChange = 'auto' if (drag.endX || drag.endY) { updateAfterDrag() @@ -1193,9 +1202,9 @@ export default function Parvus (userOptions) { const MOVEMENT_Y = drag.endY - drag.startY const MOVEMENT_Y_DISTANCE = Math.abs(MOVEMENT_Y) - if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && GROUPS[activeGroup].gallery.length > 1) { + if (Math.abs(MOVEMENT_X) > 0 && !isDraggingY && groups[activeGroup].gallery.length > 1) { // Horizontal swipe - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)` + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp - Math.round(MOVEMENT_X)}px, 0, 0)` isDraggingX = true isDraggingY = false @@ -1208,7 +1217,7 @@ export default function Parvus (userOptions) { lightbox.classList.add('parvus--is-vertical-closing') lightboxOverlay.style.opacity = lightboxOverlayOpacity - GROUPS[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)` + groups[activeGroup].slider.style.transform = `translate3d(${offsetTmp}px, ${Math.round(MOVEMENT_Y)}px, 0)` isDraggingX = false isDraggingY = true