New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

parvus

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

parvus - npm Package Compare versions

Comparing version 2.3.3 to 2.4.0

22

CHANGELOG.md

@@ -9,2 +9,24 @@ # Changelog

## [2.4.0] - 2023-07-20
### Added
- Option to hide the browser scrollbar (#47).
### Changed
- Added an internal function to create and dispatch a new event.
- Disabled buttons are no longer visually hidden.
- Focus is no longer moved automatically.
- CSS styles are now moved from SVG to the actual elements.
- Updated the development dependencies to the latest versions.
### Removed
- Custom typography styles.
### Fixed
- Load the srcset before the src, add sizes attribute (#49)
## [2.3.3] - 2023-05-30

@@ -11,0 +33,0 @@

193

dist/js/parvus.esm.js

@@ -5,3 +5,3 @@ /**

* @author Benjamin de Oostfrees
* @version 2.3.3
* @version 2.4.0
* @url https://github.com/deoostfrees/parvus

@@ -85,8 +85,9 @@ *

backFocus: true,
hideScrollbar: true,
transitionDuration: 300,
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>',
l10n: en

@@ -120,2 +121,11 @@ };

/**
* Get scrollbar width
*
* @return {Number} - The scrollbar width
*/
const getScrollbarWidth = () => {
return BROWSER_WINDOW.innerWidth - document.documentElement.clientWidth;
};
/**
* Get the group from element

@@ -180,3 +190,3 @@ *

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -213,3 +223,3 @@ }

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -425,2 +435,6 @@ }

});
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
document.body.style.overflow = 'hidden';
}
lightbox.classList.add('parvus--is-opening');

@@ -433,3 +447,3 @@ lightbox.setAttribute('aria-hidden', 'false');

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -445,8 +459,7 @@ setFocusToFirstItem();

preload(currentIndex - 1);
const OPEN_EVENT = new CustomEvent('open', {
detail: {
source: el
}
// Create and dispatch a new event
fire('open', {
source: el
});
lightbox.dispatchEvent(OPEN_EVENT);
document.body.classList.add('parvus-is-open');

@@ -499,2 +512,3 @@ };

IMAGE.style.transform = '';
IMAGE.removeEventListener('transitionend', transitionendHandler);
GROUPS[activeGroup].slider.remove();

@@ -504,3 +518,11 @@ GROUPS[activeGroup].slider = null;

GROUPS[activeGroup].contentElements = [];
IMAGE.removeEventListener('transitionend', transitionendHandler);
counter.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-disabled');
nextButton.removeAttribute('aria-hidden');
nextButton.removeAttribute('aria-disabled');
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = '';
document.body.style.overflow = '';
}
};

@@ -510,3 +532,5 @@ IMAGE.addEventListener('transitionend', transitionendHandler, {

});
const CLOSE_EVENT = new CustomEvent('close', {
// Create and dispatch a new event
fire('close', {
detail: {

@@ -516,3 +540,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

});
lightbox.dispatchEvent(CLOSE_EVENT);
document.body.classList.remove('parvus-is-open');

@@ -608,7 +631,2 @@ };

checkImagePromise.then(loadedImage => {
// Add srcset if available
const srcset = el.getAttribute('data-srcset');
if (srcset) {
loadedImage.setAttribute('srcset', srcset);
}
loadedImage.style.opacity = 0;

@@ -643,13 +661,28 @@ IMAGE_CONTAINER.appendChild(loadedImage);

});
// Add `sizes` attribute
if (el.hasAttribute('data-sizes') && el.getAttribute('data-sizes') !== '') {
IMAGE.setAttribute('sizes', el.getAttribute('data-sizes'));
}
// Add `srcset` attribute
if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
}
// Add `src` attribute
if (el.tagName === 'A') {
IMAGE.setAttribute('src', el.href);
if (THUMBNAIL) {
IMAGE.alt = THUMBNAIL.alt || '';
} else {
IMAGE.alt = el.getAttribute('data-alt') || '';
}
} else {
IMAGE.alt = el.getAttribute('data-alt') || '';
IMAGE.setAttribute('src', el.getAttribute('data-target'));
}
// `alt` attribute
if (THUMBNAIL && THUMBNAIL.hasAttribute('alt') && THUMBNAIL.getAttribute('alt') !== '') {
IMAGE.alt = THUMBNAIL.alt;
} else if (el.hasAttribute('data-alt') && el.getAttribute('data-alt') !== '') {
IMAGE.alt = el.getAttribute('data-alt');
} else {
IMAGE.alt = '';
}
};

@@ -719,6 +752,6 @@

if (index < OLD_INDEX) {
updateFocus('left');
updateSliderNavigationStatus();
preload(index - 1);
} else if (index > OLD_INDEX) {
updateFocus('right');
updateSliderNavigationStatus();
preload(index + 1);

@@ -730,3 +763,3 @@ }

// Create and dispatch a new event
const SELECT_EVENT = new CustomEvent('select', {
fire('select', {
detail: {

@@ -736,3 +769,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

});
lightbox.dispatchEvent(SELECT_EVENT);
};

@@ -747,2 +779,13 @@

select(currentIndex - 1);
} else {
const {
slider
} = GROUPS[activeGroup];
const offset = offsetTmp + config.threshold;
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`;
setTimeout(() => {
updateOffset();
}, 150);
});
}

@@ -757,2 +800,3 @@ };

const {
slider,
triggerElements

@@ -762,2 +806,10 @@ } = GROUPS[activeGroup];

select(currentIndex + 1);
} else {
const offset = offsetTmp - config.threshold;
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`;
setTimeout(() => {
updateOffset();
}, 150);
});
}

@@ -791,9 +843,9 @@ };

/**
* Update focus
* Update slider navigation status
*
* This function updates the focus based on the specified direction.
* This function updates the disabled status of the slider navigation buttons
* based on the current slide position.
*
* @param {String} dir - The direction of the focus update.
*/
const updateFocus = dir => {
const updateSliderNavigationStatus = () => {
const {

@@ -805,26 +857,12 @@ triggerElements

const LAST_SLIDE = currentIndex === TOTAL_TRIGGER_ELEMENTS - 1;
const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1;
if (TOTAL_TRIGGER_ELEMENTS === 1) {
closeButton.focus();
} else if (FIRST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'true');
previousButton.setAttribute('aria-disabled', 'true');
nextButton.setAttribute('aria-hidden', 'false');
nextButton.setAttribute('aria-disabled', 'false');
nextButton.focus();
} else if (LAST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'false');
previousButton.setAttribute('aria-disabled', 'false');
nextButton.setAttribute('aria-hidden', 'true');
nextButton.setAttribute('aria-disabled', 'true');
previousButton.focus();
} else {
previousButton.setAttribute('aria-hidden', 'false');
previousButton.setAttribute('aria-disabled', 'false');
nextButton.setAttribute('aria-hidden', 'false');
nextButton.setAttribute('aria-disabled', 'false');
if (dir === 'left') {
previousButton.focus();
if (TOTAL_TRIGGER_ELEMENTS > 1) {
if (FIRST_SLIDE) {
previousButton.setAttribute('aria-disabled', 'true');
nextButton.removeAttribute('aria-disabled');
} else if (LAST_SLIDE) {
previousButton.removeAttribute('aria-disabled');
nextButton.setAttribute('aria-disabled', 'true');
} else {
nextButton.focus();
previousButton.removeAttribute('aria-disabled');
nextButton.removeAttribute('aria-disabled');
}

@@ -904,3 +942,2 @@ }

const TOTAL_TRIGGER_ELEMENTS = TRIGGER_ELEMENTS.length;
const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1;
const SLIDER = GROUPS[activeGroup].slider;

@@ -937,10 +974,12 @@ const SLIDER_ELEMENTS = GROUPS[activeGroup].sliderElements;

// Show or hide counter
counter.setAttribute('aria-hidden', TOTAL_TRIGGER_ELEMENTS === 1 ? 'true' : 'false');
// Show or hide buttons
previousButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false');
previousButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false');
nextButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false');
nextButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false');
if (TOTAL_TRIGGER_ELEMENTS === 1) {
counter.setAttribute('aria-hidden', 'true');
previousButton.setAttribute('aria-hidden', 'true');
nextButton.setAttribute('aria-hidden', 'true');
} else {
counter.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-hidden');
nextButton.removeAttribute('aria-hidden');
}
};

@@ -1155,3 +1194,3 @@

slider.classList.remove('parvus__slider--is-dragging');
slider.style.willChange = 'auto';
slider.style.willChange = '';
if (drag.endX || drag.endY) {

@@ -1219,3 +1258,3 @@ updateAfterDrag();

slider.classList.remove('parvus__slider--is-dragging');
slider.style.willChange = 'auto';
slider.style.willChange = '';
if (drag.endX || drag.endY) {

@@ -1334,4 +1373,3 @@ updateAfterDrag();

// Create and dispatch a new event
const DESTROY_EVENT = new CustomEvent('destroy');
lightbox.dispatchEvent(DESTROY_EVENT);
fire('destroy');
};

@@ -1367,2 +1405,17 @@

/**
* Dispatch a custom event
*
* @param {String} type - The type of the event to dispatch
* @param {Function} event - The event object
*/
const fire = function (type) {
let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
const CUSTOM_EVENT = new CustomEvent(type, {
detail: event,
cancelable: true
});
lightbox.dispatchEvent(CUSTOM_EVENT);
};
/**
* Bind a specific event listener

@@ -1369,0 +1422,0 @@ *

4

dist/js/parvus.esm.min.js

@@ -5,3 +5,3 @@ /**

* @author Benjamin de Oostfrees
* @version 2.3.3
* @version 2.4.0
* @url https://github.com/deoostfrees/parvus

@@ -12,2 +12,2 @@ *

var e={lightboxLabel:"This is a dialog window that overlays the main content of the page. The modal displays 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",lightboxLoadingError:"The requested image cannot be loaded.",controlsLabel:"Controls",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window",sliderLabel:"Images",slideLabel:"Image"};function t(t){const s=window,r=['a:not([inert]):not([tabindex^="-"])','button:not([inert]):not([tabindex^="-"]):not(:disabled)','[tabindex]:not([inert]):not([tabindex^="-"])'],i={triggerElements:[],slider:null,sliderElements:[],contentElements:[]},n={};let a=0,l=null,o=null,d=0,u={},c=null,p=null,m=1,g=null,h=null,v=null,b=null,f=null,E=null,A=null,y=null,L={},w=!1,_=!1,C=!1,x=null,$=null,I=null,M=!1,S=null,T=!0;const B=window.matchMedia("(prefers-reduced-motion)"),N=()=>{B.matches?(T=!0,S=.1):(T=!1,S=u.transitionDuration)};B.addEventListener("change",N);const q=e=>{const t=e.dataset.group||`default-${a}`;return++a,e.hasAttribute("data-group")||e.setAttribute("data-group",t),t},k=e=>{if(!("A"===e.tagName&&e.hasAttribute("href")||"BUTTON"===e.tagName&&e.hasAttribute("data-target")))throw new Error("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.");if(l=q(e),n[l]||(n[l]=structuredClone(i)),n[l].triggerElements.includes(e))throw new Error("Ups, element already added.");if(n[l].triggerElements.push(e),(e=>{if(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),e.classList.add("parvus-trigger"),e.addEventListener("click",se),ve()&&l===o){const t=n[l].triggerElements.indexOf(e);X(t),O(e,t,(()=>{P(t)})),Z(),j(),K()}},F=e=>{if(!e||!e.hasAttribute("data-group"))return;const t=q(e);if(!n[t]||!n[t].triggerElements.includes(e))return;const s=n[t].triggerElements.indexOf(e);if(n[t].triggerElements.splice(s,1),n[t].sliderElements.splice(s,1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}ve()&&t===o&&(Z(),j(),K()),e.removeEventListener("click",se),e.classList.remove("parvus-trigger")},X=e=>{if(void 0!==n[o].sliderElements[e])return;const t=document.createElement("div"),s=document.createElement("div"),r=n[o].triggerElements.length;if(t.className="parvus__slide",t.style.position="absolute",t.style.left=100*e+"%",t.setAttribute("aria-hidden","true"),t.appendChild(s),r>1&&(t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${e+1}/${r}`)),n[o].sliderElements[e]=t,e>=d){const s=(e=>{const t=n[o].sliderElements,s=t.length;for(let r=e+1;r<s;r++)if(void 0!==t[r])return r;return-1})(e);-1!==s?n[o].sliderElements[s].before(t):n[o].slider.appendChild(t)}else{const s=(e=>{const t=n[o].sliderElements;for(let s=e-1;s>=0;s--)if(void 0!==t[s])return s;return-1})(e);-1!==s?n[o].sliderElements[s].after(t):n[o].slider.prepend(t)}},Y=e=>{if(!c||!e||!e.classList.contains("parvus-trigger")||ve())return;if(o=q(e),!n[o].triggerElements.includes(e))throw new Error("Ups, I can't find the element.");d=n[o].triggerElements.indexOf(e),x=document.activeElement,history.pushState({parvus:"close"},"Image",window.location.href),ge();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"),(()=>{const e=document.createElement("div");e.className="parvus__slider",e.setAttribute("aria-hidden","true"),n[o].slider=e,c.appendChild(e)})(),X(d),n[o].slider.setAttribute("aria-hidden","false"),V(),Z(),j(),K(),ne(),D(d),O(e,d,(()=>{P(d,!0),c.classList.remove("parvus--is-opening"),n[o].slider.classList.add("parvus__slider--animate")})),z(d+1),z(d-1);const t=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(t),document.body.classList.add("parvus-is-open")},H=()=>{if(!ve())throw new Error("Ups, I'm already closed.");const e=n[o].contentElements[d],t=n[o].triggerElements[d];he(),J(),"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((()=>{const s=t.getBoundingClientRect();if(e&&"IMG"===e.tagName){const t=e.getBoundingClientRect(),r=s.width/t.width,i=s.height/t.height,n=s.left-t.left,a=s.top-t.top;e.style.transform=`translate(${n}px, ${a}px) scale(${r}, ${i})`}e.style.opacity=0,e.style.transition=`transform ${S}ms ${u.transitionTimingFunction}, opacity ${S}ms ${u.transitionTimingFunction} ${S/2}ms`}));const s=()=>{W(d),x=u.backFocus?x:n[o].triggerElements[d],x.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",n[o].slider.remove(),n[o].slider=null,n[o].sliderElements=[],n[o].contentElements=[],e.removeEventListener("transitionend",s)};e.addEventListener("transitionend",s,{once:!0});const r=new CustomEvent("close",{detail:{source:n[o].triggerElements[d]}});c.dispatchEvent(r),document.body.classList.remove("parvus-is-open")},z=e=>{e<0||e>=n[o].triggerElements.length||void 0!==n[o].sliderElements[e]||(X(e),O(n[o].triggerElements[e],e,(()=>{P(e)})))},D=e=>{n[o].sliderElements[e].setAttribute("aria-hidden","false")},O=(e,t,s)=>{const{contentElements:r,sliderElements:i}=n[o];if(void 0!==r[t])return void(s&&"function"==typeof s&&s());const a=i[t].querySelector("div"),l=new Image,d=document.createElement("div"),c=e.querySelector("img"),p=document.createElement("div");d.className="parvus__content",p.className="parvus__loader",p.setAttribute("role","progressbar"),p.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),a.appendChild(p);new Promise(((e,t)=>{l.onload=()=>e(l),l.onerror=e=>t(e)})).then((s=>{const n=e.getAttribute("data-srcset");n&&s.setAttribute("srcset",n),s.style.opacity=0,d.appendChild(s),a.appendChild(d),u.captions&&((e,t,s)=>{const r=document.createElement("div");let i=null;if(r.className="parvus__caption","self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(i=t.getAttribute(u.captionsAttribute));else{const e=t.querySelector(u.captionsSelector);null!==e&&(i=e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)?e.getAttribute(u.captionsAttribute):e.innerHTML)}if(null!==i){const t=`parvus__caption-${s}`;r.setAttribute("aria-labelledby",t),r.id=t,r.innerHTML=`<p>${i}</p>`,e.appendChild(r)}})(a,e,t),r[t]=s,s.setAttribute("width",s.naturalWidth),s.setAttribute("height",s.naturalHeight),te(i[t],s)})).catch((()=>{const e=document.createElement("div");e.classList.add("parvus__content"),e.classList.add("parvus__content--error"),e.innerHTML=`${u.l10n.lightboxLoadingError}`,a.appendChild(e),r[t]=e})).finally((()=>{a.removeChild(p),s&&"function"==typeof s&&s()})),"A"===e.tagName?(l.setAttribute("src",e.href),l.alt=c?c.alt||"":e.getAttribute("data-alt")||""):(l.alt=e.getAttribute("data-alt")||"",l.setAttribute("src",e.getAttribute("data-target")))},P=(e,t)=>{const s=n[o].contentElements[e];if(s&&"IMG"===s.tagName){const r=n[o].triggerElements[e];if(t){const e=s.getBoundingClientRect(),t=r.getBoundingClientRect(),i=t.width/e.width,n=t.height/e.height,a=t.left-e.left,l=t.top-e.top;requestAnimationFrame((()=>{s.style.transform=`translate(${a}px, ${l}px) scale(${i}, ${n})`,s.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{s.style.transform="",s.style.opacity=1,s.style.transition=`transform ${S}ms ${u.transitionTimingFunction}, opacity ${S/2}ms ${u.transitionTimingFunction}`}))}))}else s.style.opacity=1}else s.style.opacity=1},R=e=>{const t=d;if(!ve())throw new Error("Oops, I'm closed.");{if("number"!=typeof e||isNaN(e))throw new Error("Oops, no slide specified.");const t=n[o].triggerElements;if(e===d)throw new Error(`Oops, slide ${e} is already selected.`);if(e<-1||e>=t.length)throw new Error(`Oops, I can't find slide ${e}.`)}void 0!==n[o].sliderElements[e]||(X(e),O(n[o].triggerElements[e],e,(()=>{P(e)}))),D(e),d=e,V(),e<t?(j("left"),z(e-1)):e>t&&(j("right"),z(e+1)),W(t),K();const s=new CustomEvent("select",{detail:{source:n[o].triggerElements[d]}});c.dispatchEvent(s)},U=()=>{d>0&&R(d-1)},G=()=>{const{triggerElements:e}=n[o];d<e.length-1&&R(d+1)},W=e=>{void 0!==n[o].sliderElements[e]&&n[o].sliderElements[e].setAttribute("aria-hidden","true")},V=()=>{o=null!==o?o:l,$=-d*c.offsetWidth,n[o].slider.style.transform=`translate3d(${$}px, 0, 0)`,I=$},j=e=>{const{triggerElements:t}=n[o],s=t.length,r=0===d,i=d===s-1,a=1===s;1===s?A.focus():r&&!a?(f.setAttribute("aria-hidden","true"),f.setAttribute("aria-disabled","true"),E.setAttribute("aria-hidden","false"),E.setAttribute("aria-disabled","false"),E.focus()):i&&!a?(f.setAttribute("aria-hidden","false"),f.setAttribute("aria-disabled","false"),E.setAttribute("aria-hidden","true"),E.setAttribute("aria-disabled","true"),f.focus()):(f.setAttribute("aria-hidden","false"),f.setAttribute("aria-disabled","false"),E.setAttribute("aria-hidden","false"),E.setAttribute("aria-disabled","false"),"left"===e?f.focus():E.focus())},K=()=>{y.textContent=`${d+1}/${n[o].triggerElements.length}`},J=()=>{L={startX:0,endX:0,startY:0,endY:0}},Q=()=>{const{startX:e,startY:t,endX:s,endY:r}=L,i=s-e,a=r-t,l=Math.abs(i),m=Math.abs(a),{triggerElements:g}=n[o],h=g.length;w?i>2&&l>=u.threshold&&d>0?U():i<2&&l>=u.threshold&&d!==h-1?G():V():_?(m>2&&u.swipeClose&&m>=u.threshold?H():(c.classList.remove("parvus--is-vertical-closing"),V()),p.style.opacity=""):V()},Z=()=>{const e=n[o].triggerElements.length,t=1===e,s=n[o].slider,r=n[o].sliderElements,i=u.simulateTouch||be(),a=s.classList.contains("parvus__slider--is-draggable");i&&u.swipeClose&&!a||i&&e>1&&!a?s.classList.add("parvus__slider--is-draggable"):s.classList.remove("parvus__slider--is-draggable"),e>1?(s.setAttribute("role","region"),s.setAttribute("aria-roledescription","carousel"),s.setAttribute("aria-label",u.l10n.sliderLabel),r.forEach(((t,s)=>{t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${s+1}/${e}`)}))):(s.removeAttribute("role"),s.removeAttribute("aria-roledescription"),s.removeAttribute("aria-label"),r.forEach((e=>{e.removeAttribute("role"),e.removeAttribute("aria-label")}))),y.setAttribute("aria-hidden",1===e?"true":"false"),f.setAttribute("aria-hidden",t?"true":"false"),f.setAttribute("aria-disabled",t?"true":"false"),E.setAttribute("aria-hidden",t?"true":"false"),E.setAttribute("aria-disabled",t?"true":"false")},ee=()=>{M||(M=!0,s.requestAnimationFrame((()=>{n[o].sliderElements.forEach(((e,t)=>{te(e,n[o].contentElements[t])})),V(),M=!1})))},te=(e,t)=>{if("IMG"!==t.tagName)return;const s=getComputedStyle(e),r=e.querySelector(".parvus__caption"),i=r?r.getBoundingClientRect().height:0,n=t.getAttribute("height"),a=t.getAttribute("width");let l=e.offsetHeight,o=e.offsetWidth;l-=parseFloat(s.paddingTop)+parseFloat(s.paddingBottom)+parseFloat(i),o-=parseFloat(s.paddingLeft)+parseFloat(s.paddingRight);const d=Math.min(o/a||0,l/n),u=a*d||0,c=n*d||0;n>c&&n<l&&a>u&&a<o||n<c&&n<l&&a<u&&a<o?(t.style.width="",t.style.height=""):(t.style.width=`${u}px`,t.style.height=`${c}px`)},se=function(e){e.preventDefault(),Y(this)},re=e=>{const{target:t}=e;t===f?U():t===E?G():(t===A||u.docClose&&!_&&!w&&t.classList.contains("parvus__slide"))&&H(),e.stopPropagation()},ie=()=>Array.from(c.querySelectorAll(r.join(", "))).filter((e=>null!==e.offsetParent)),ne=()=>{ie()[0].focus()},ae=e=>{const t=ie(),s=t.indexOf(document.activeElement),r=t.length-1;switch(e.code){case"Tab":e.shiftKey?0===s&&(t[r].focus(),e.preventDefault()):s===r&&(t[0].focus(),e.preventDefault());break;case"Escape":H(),e.preventDefault();break;case"ArrowLeft":U(),e.preventDefault();break;case"ArrowRight":G(),e.preventDefault()}},le=e=>{w=!1,_=!1,C=!0;const{pageX:t,pageY:s}=e;L.startX=t,L.startY=s;const{slider:r}=n[o];r.classList.add("parvus__slider--is-dragging"),r.style.willChange="transform",e.stopPropagation(),m=getComputedStyle(p).opacity},oe=e=>{if(C){const{pageX:t,pageY:s}=e;L.endX=t,L.endY=s,me()}e.preventDefault()},de=()=>{C=!1;const{slider:e}=n[o];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="auto",(L.endX||L.endY)&&Q(),J()},ue=e=>{w=!1,_=!1;const{clientX:t,clientY:s}=e.changedTouches[0];L.startX=parseInt(t),L.startY=parseInt(s);const{slider:r}=n[o];r.classList.add("parvus__slider--is-dragging"),r.style.willChange="transform",m=getComputedStyle(p).getPropertyValue("opacity"),e.stopPropagation()},ce=e=>{const{clientX:t,clientY:s}=e.changedTouches[0];L.endX=parseInt(t),L.endY=parseInt(s),me(),e.preventDefault()},pe=()=>{const{slider:e}=n[o];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="auto",(L.endX||L.endY)&&Q(),J()},me=()=>{const{startX:e,endX:t,startY:s,endY:r}=L,i=e-t,a=r-s,l=Math.abs(a);Math.abs(i)>2&&!_&&n[o].triggerElements.length>1?(n[o].slider.style.transform=`translate3d(${I-Math.round(i)}px, 0, 0)`,w=!0,_=!1):Math.abs(a)>2&&!w&&u.swipeClose&&(!T&&l<=100&&(p.style.opacity=m-l/100),c.classList.add("parvus--is-vertical-closing"),n[o].slider.style.transform=`translate3d(${I}px, ${Math.round(a)}px, 0)`,w=!1,_=!0)},ge=()=>{s.addEventListener("keydown",ae),s.addEventListener("resize",ee),s.addEventListener("popstate",H),c.addEventListener("click",re),be()&&(c.addEventListener("touchstart",ue),c.addEventListener("touchmove",ce),c.addEventListener("touchend",pe)),u.simulateTouch&&(c.addEventListener("mousedown",le),c.addEventListener("mouseup",de),c.addEventListener("mousemove",oe))},he=()=>{s.removeEventListener("keydown",ae),s.removeEventListener("resize",ee),s.removeEventListener("popstate",H),c.removeEventListener("click",re),be()&&(c.removeEventListener("touchstart",ue),c.removeEventListener("touchmove",ce),c.removeEventListener("touchend",pe)),u.simulateTouch&&(c.removeEventListener("mousedown",le),c.removeEventListener("mouseup",de),c.removeEventListener("mousemove",oe))},ve=()=>"false"===c.getAttribute("aria-hidden"),be=()=>"ontouchstart"in window,fe=()=>{if(u=(t=>({selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,swipeClose:!0,simulateTouch:!0,threshold:50,backFocus:!0,transitionDuration:300,transitionTimingFunction:"cubic-bezier(0.62, 0.16, 0.13, 1.01)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,...t}))(t),!document.querySelectorAll(u.selector).length)return;if(N(),c||(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"),c.appendChild(p),g=document.createElement("div"),g.className="parvus__toolbar",h=document.createElement("div"),v=document.createElement("div"),b=document.createElement("div"),b.className="parvus__controls",b.setAttribute("role","group"),b.setAttribute("aria-label",u.l10n.controlsLabel),v.appendChild(b),A=document.createElement("button"),A.className="parvus__btn parvus__btn--close",A.setAttribute("type","button"),A.setAttribute("aria-label",u.l10n.closeButtonLabel),A.innerHTML=u.closeButtonIcon,b.appendChild(A),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,b.appendChild(f),E=document.createElement("button"),E.className="parvus__btn parvus__btn--next",E.setAttribute("type","button"),E.setAttribute("aria-label",u.l10n.nextButtonLabel),E.innerHTML=u.nextButtonIcon,b.appendChild(E),y=document.createElement("div"),y.className="parvus__counter",h.appendChild(y),g.appendChild(h),g.appendChild(v),c.appendChild(g),document.body.appendChild(c)),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const s=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${s}`),k(e)}))}))}document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach(k)};return fe(),{init:fe,open:Y,close:H,select:R,previous:U,next:G,currentIndex:()=>d,add:k,remove:F,destroy:()=>{if(!c)return;ve()&&H(),c.remove();document.querySelectorAll(".parvus-trigger").forEach(F);const e=new CustomEvent("destroy");c.dispatchEvent(e)},isOpen:ve,on:(e,t)=>{c&&c.addEventListener(e,t)},off:(e,t)=>{c&&c.removeEventListener(e,t)}}}export{t as default};
var e={lightboxLabel:"This is a dialog window that overlays the main content of the page. The modal displays 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",lightboxLoadingError:"The requested image cannot be loaded.",controlsLabel:"Controls",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window",sliderLabel:"Images",slideLabel:"Image"};function t(t){const r=window,s=['a:not([inert]):not([tabindex^="-"])','button:not([inert]):not([tabindex^="-"]):not(:disabled)','[tabindex]:not([inert]):not([tabindex^="-"])'],i={triggerElements:[],slider:null,sliderElements:[],contentElements:[]},n={};let a=0,o=null,l=null,d=0,u={},c=null,m=null,p=1,g=null,h=null,v=null,b=null,f=null,E=null,A=null,y=null,w={},L=!1,_=!1,x=!1,C=null,$=null,k=null,I=!1,S=null,T=!0;const M=window.matchMedia("(prefers-reduced-motion)"),B=()=>{M.matches?(T=!0,S=.1):(T=!1,S=u.transitionDuration)};M.addEventListener("change",B);const N=e=>{const t=e.dataset.group||`default-${a}`;return++a,e.hasAttribute("data-group")||e.setAttribute("data-group",t),t},q=e=>{if(!("A"===e.tagName&&e.hasAttribute("href")||"BUTTON"===e.tagName&&e.hasAttribute("data-target")))throw new Error("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.");if(o=N(e),n[o]||(n[o]=structuredClone(i)),n[o].triggerElements.includes(e))throw new Error("Ups, element already added.");if(n[o].triggerElements.push(e),(e=>{if(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),e.classList.add("parvus-trigger"),e.addEventListener("click",re),ve()&&o===l){const t=n[o].triggerElements.indexOf(e);X(t),O(e,t,(()=>{P(t)})),Z(),V(),K()}},F=e=>{if(!e||!e.hasAttribute("data-group"))return;const t=N(e);if(!n[t]||!n[t].triggerElements.includes(e))return;const r=n[t].triggerElements.indexOf(e);if(n[t].triggerElements.splice(r,1),n[t].sliderElements.splice(r,1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}ve()&&t===l&&(Z(),V(),K()),e.removeEventListener("click",re),e.classList.remove("parvus-trigger")},X=e=>{if(void 0!==n[l].sliderElements[e])return;const t=document.createElement("div"),r=document.createElement("div"),s=n[l].triggerElements.length;if(t.className="parvus__slide",t.style.position="absolute",t.style.left=100*e+"%",t.setAttribute("aria-hidden","true"),t.appendChild(r),s>1&&(t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${e+1}/${s}`)),n[l].sliderElements[e]=t,e>=d){const r=(e=>{const t=n[l].sliderElements,r=t.length;for(let s=e+1;s<r;s++)if(void 0!==t[s])return s;return-1})(e);-1!==r?n[l].sliderElements[r].before(t):n[l].slider.appendChild(t)}else{const r=(e=>{const t=n[l].sliderElements;for(let r=e-1;r>=0;r--)if(void 0!==t[r])return r;return-1})(e);-1!==r?n[l].sliderElements[r].after(t):n[l].slider.prepend(t)}},Y=e=>{if(!c||!e||!e.classList.contains("parvus-trigger")||ve())return;if(l=N(e),!n[l].triggerElements.includes(e))throw new Error("Ups, I can't find the element.");d=n[l].triggerElements.indexOf(e),C=document.activeElement,history.pushState({parvus:"close"},"Image",window.location.href),ge();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),u.hideScrollbar&&(document.body.style.marginInlineEnd=r.innerWidth-document.documentElement.clientWidth+"px",document.body.style.overflow="hidden"),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),(()=>{const e=document.createElement("div");e.className="parvus__slider",e.setAttribute("aria-hidden","true"),n[l].slider=e,c.appendChild(e)})(),X(d),n[l].slider.setAttribute("aria-hidden","false"),G(),Z(),V(),K(),ne(),D(d),O(e,d,(()=>{P(d,!0),c.classList.remove("parvus--is-opening"),n[l].slider.classList.add("parvus__slider--animate")})),H(d+1),H(d-1),fe("open",{source:e}),document.body.classList.add("parvus-is-open")},z=()=>{if(!ve())throw new Error("Ups, I'm already closed.");const e=n[l].contentElements[d],t=n[l].triggerElements[d];he(),J(),"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((()=>{const r=t.getBoundingClientRect();if(e&&"IMG"===e.tagName){const t=e.getBoundingClientRect(),s=r.width/t.width,i=r.height/t.height,n=r.left-t.left,a=r.top-t.top;e.style.transform=`translate(${n}px, ${a}px) scale(${s}, ${i})`}e.style.opacity=0,e.style.transition=`transform ${S}ms ${u.transitionTimingFunction}, opacity ${S}ms ${u.transitionTimingFunction} ${S/2}ms`}));const r=()=>{W(d),C=u.backFocus?C:n[l].triggerElements[d],C.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",e.removeEventListener("transitionend",r),n[l].slider.remove(),n[l].slider=null,n[l].sliderElements=[],n[l].contentElements=[],y.removeAttribute("aria-hidden"),f.removeAttribute("aria-hidden"),f.removeAttribute("aria-disabled"),E.removeAttribute("aria-hidden"),E.removeAttribute("aria-disabled"),u.hideScrollbar&&(document.body.style.marginInlineEnd="",document.body.style.overflow="")};e.addEventListener("transitionend",r,{once:!0}),fe("close",{detail:{source:n[l].triggerElements[d]}}),document.body.classList.remove("parvus-is-open")},H=e=>{e<0||e>=n[l].triggerElements.length||void 0!==n[l].sliderElements[e]||(X(e),O(n[l].triggerElements[e],e,(()=>{P(e)})))},D=e=>{n[l].sliderElements[e].setAttribute("aria-hidden","false")},O=(e,t,r)=>{const{contentElements:s,sliderElements:i}=n[l];if(void 0!==s[t])return void(r&&"function"==typeof r&&r());const a=i[t].querySelector("div"),o=new Image,d=document.createElement("div"),c=e.querySelector("img"),m=document.createElement("div");d.className="parvus__content",m.className="parvus__loader",m.setAttribute("role","progressbar"),m.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),a.appendChild(m);new Promise(((e,t)=>{o.onload=()=>e(o),o.onerror=e=>t(e)})).then((r=>{r.style.opacity=0,d.appendChild(r),a.appendChild(d),u.captions&&((e,t,r)=>{const s=document.createElement("div");let i=null;if(s.className="parvus__caption","self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(i=t.getAttribute(u.captionsAttribute));else{const e=t.querySelector(u.captionsSelector);null!==e&&(i=e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)?e.getAttribute(u.captionsAttribute):e.innerHTML)}if(null!==i){const t=`parvus__caption-${r}`;s.setAttribute("aria-labelledby",t),s.id=t,s.innerHTML=`<p>${i}</p>`,e.appendChild(s)}})(a,e,t),s[t]=r,r.setAttribute("width",r.naturalWidth),r.setAttribute("height",r.naturalHeight),te(i[t],r)})).catch((()=>{const e=document.createElement("div");e.classList.add("parvus__content"),e.classList.add("parvus__content--error"),e.innerHTML=`${u.l10n.lightboxLoadingError}`,a.appendChild(e),s[t]=e})).finally((()=>{a.removeChild(m),r&&"function"==typeof r&&r()})),e.hasAttribute("data-sizes")&&""!==e.getAttribute("data-sizes")&&o.setAttribute("sizes",e.getAttribute("data-sizes")),e.hasAttribute("data-srcset")&&""!==e.getAttribute("data-srcset")&&o.setAttribute("srcset",e.getAttribute("data-srcset")),"A"===e.tagName?o.setAttribute("src",e.href):o.setAttribute("src",e.getAttribute("data-target")),c&&c.hasAttribute("alt")&&""!==c.getAttribute("alt")?o.alt=c.alt:e.hasAttribute("data-alt")&&""!==e.getAttribute("data-alt")?o.alt=e.getAttribute("data-alt"):o.alt=""},P=(e,t)=>{const r=n[l].contentElements[e];if(r&&"IMG"===r.tagName){const s=n[l].triggerElements[e];if(t){const e=r.getBoundingClientRect(),t=s.getBoundingClientRect(),i=t.width/e.width,n=t.height/e.height,a=t.left-e.left,o=t.top-e.top;requestAnimationFrame((()=>{r.style.transform=`translate(${a}px, ${o}px) scale(${i}, ${n})`,r.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{r.style.transform="",r.style.opacity=1,r.style.transition=`transform ${S}ms ${u.transitionTimingFunction}, opacity ${S/2}ms ${u.transitionTimingFunction}`}))}))}else r.style.opacity=1}else r.style.opacity=1},R=e=>{const t=d;if(!ve())throw new Error("Oops, I'm closed.");{if("number"!=typeof e||isNaN(e))throw new Error("Oops, no slide specified.");const t=n[l].triggerElements;if(e===d)throw new Error(`Oops, slide ${e} is already selected.`);if(e<-1||e>=t.length)throw new Error(`Oops, I can't find slide ${e}.`)}void 0!==n[l].sliderElements[e]||(X(e),O(n[l].triggerElements[e],e,(()=>{P(e)}))),D(e),d=e,G(),e<t?(V(),H(e-1)):e>t&&(V(),H(e+1)),W(t),K(),fe("select",{detail:{source:n[l].triggerElements[d]}})},j=()=>{if(d>0)R(d-1);else{const{slider:e}=n[l],t=k+u.threshold;requestAnimationFrame((()=>{e.style.transform=`translate3d(${t}px, 0, 0)`,setTimeout((()=>{G()}),150)}))}},U=()=>{const{slider:e,triggerElements:t}=n[l];if(d<t.length-1)R(d+1);else{const t=k-u.threshold;requestAnimationFrame((()=>{e.style.transform=`translate3d(${t}px, 0, 0)`,setTimeout((()=>{G()}),150)}))}},W=e=>{void 0!==n[l].sliderElements[e]&&n[l].sliderElements[e].setAttribute("aria-hidden","true")},G=()=>{l=null!==l?l:o,$=-d*c.offsetWidth,n[l].slider.style.transform=`translate3d(${$}px, 0, 0)`,k=$},V=()=>{const{triggerElements:e}=n[l],t=e.length,r=d===t-1;t>1&&(0===d?(f.setAttribute("aria-disabled","true"),E.removeAttribute("aria-disabled")):r?(f.removeAttribute("aria-disabled"),E.setAttribute("aria-disabled","true")):(f.removeAttribute("aria-disabled"),E.removeAttribute("aria-disabled")))},K=()=>{y.textContent=`${d+1}/${n[l].triggerElements.length}`},J=()=>{w={startX:0,endX:0,startY:0,endY:0}},Q=()=>{const{startX:e,startY:t,endX:r,endY:s}=w,i=r-e,a=s-t,o=Math.abs(i),p=Math.abs(a),{triggerElements:g}=n[l],h=g.length;L?i>2&&o>=u.threshold&&d>0?j():i<2&&o>=u.threshold&&d!==h-1?U():G():_?(p>2&&u.swipeClose&&p>=u.threshold?z():(c.classList.remove("parvus--is-vertical-closing"),G()),m.style.opacity=""):G()},Z=()=>{const e=n[l].triggerElements.length,t=n[l].slider,r=n[l].sliderElements,s=u.simulateTouch||be(),i=t.classList.contains("parvus__slider--is-draggable");s&&u.swipeClose&&!i||s&&e>1&&!i?t.classList.add("parvus__slider--is-draggable"):t.classList.remove("parvus__slider--is-draggable"),e>1?(t.setAttribute("role","region"),t.setAttribute("aria-roledescription","carousel"),t.setAttribute("aria-label",u.l10n.sliderLabel),r.forEach(((t,r)=>{t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${r+1}/${e}`)}))):(t.removeAttribute("role"),t.removeAttribute("aria-roledescription"),t.removeAttribute("aria-label"),r.forEach((e=>{e.removeAttribute("role"),e.removeAttribute("aria-label")}))),1===e?(y.setAttribute("aria-hidden","true"),f.setAttribute("aria-hidden","true"),E.setAttribute("aria-hidden","true")):(y.removeAttribute("aria-hidden"),f.removeAttribute("aria-hidden"),E.removeAttribute("aria-hidden"))},ee=()=>{I||(I=!0,r.requestAnimationFrame((()=>{n[l].sliderElements.forEach(((e,t)=>{te(e,n[l].contentElements[t])})),G(),I=!1})))},te=(e,t)=>{if("IMG"!==t.tagName)return;const r=getComputedStyle(e),s=e.querySelector(".parvus__caption"),i=s?s.getBoundingClientRect().height:0,n=t.getAttribute("height"),a=t.getAttribute("width");let o=e.offsetHeight,l=e.offsetWidth;o-=parseFloat(r.paddingTop)+parseFloat(r.paddingBottom)+parseFloat(i),l-=parseFloat(r.paddingLeft)+parseFloat(r.paddingRight);const d=Math.min(l/a||0,o/n),u=a*d||0,c=n*d||0;n>c&&n<o&&a>u&&a<l||n<c&&n<o&&a<u&&a<l?(t.style.width="",t.style.height=""):(t.style.width=`${u}px`,t.style.height=`${c}px`)},re=function(e){e.preventDefault(),Y(this)},se=e=>{const{target:t}=e;t===f?j():t===E?U():(t===A||u.docClose&&!_&&!L&&t.classList.contains("parvus__slide"))&&z(),e.stopPropagation()},ie=()=>Array.from(c.querySelectorAll(s.join(", "))).filter((e=>null!==e.offsetParent)),ne=()=>{ie()[0].focus()},ae=e=>{const t=ie(),r=t.indexOf(document.activeElement),s=t.length-1;switch(e.code){case"Tab":e.shiftKey?0===r&&(t[s].focus(),e.preventDefault()):r===s&&(t[0].focus(),e.preventDefault());break;case"Escape":z(),e.preventDefault();break;case"ArrowLeft":j(),e.preventDefault();break;case"ArrowRight":U(),e.preventDefault()}},oe=e=>{L=!1,_=!1,x=!0;const{pageX:t,pageY:r}=e;w.startX=t,w.startY=r;const{slider:s}=n[l];s.classList.add("parvus__slider--is-dragging"),s.style.willChange="transform",e.stopPropagation(),p=getComputedStyle(m).opacity},le=e=>{if(x){const{pageX:t,pageY:r}=e;w.endX=t,w.endY=r,pe()}e.preventDefault()},de=()=>{x=!1;const{slider:e}=n[l];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="",(w.endX||w.endY)&&Q(),J()},ue=e=>{L=!1,_=!1;const{clientX:t,clientY:r}=e.changedTouches[0];w.startX=parseInt(t),w.startY=parseInt(r);const{slider:s}=n[l];s.classList.add("parvus__slider--is-dragging"),s.style.willChange="transform",p=getComputedStyle(m).getPropertyValue("opacity"),e.stopPropagation()},ce=e=>{const{clientX:t,clientY:r}=e.changedTouches[0];w.endX=parseInt(t),w.endY=parseInt(r),pe(),e.preventDefault()},me=()=>{const{slider:e}=n[l];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="",(w.endX||w.endY)&&Q(),J()},pe=()=>{const{startX:e,endX:t,startY:r,endY:s}=w,i=e-t,a=s-r,o=Math.abs(a);Math.abs(i)>2&&!_&&n[l].triggerElements.length>1?(n[l].slider.style.transform=`translate3d(${k-Math.round(i)}px, 0, 0)`,L=!0,_=!1):Math.abs(a)>2&&!L&&u.swipeClose&&(!T&&o<=100&&(m.style.opacity=p-o/100),c.classList.add("parvus--is-vertical-closing"),n[l].slider.style.transform=`translate3d(${k}px, ${Math.round(a)}px, 0)`,L=!1,_=!0)},ge=()=>{r.addEventListener("keydown",ae),r.addEventListener("resize",ee),r.addEventListener("popstate",z),c.addEventListener("click",se),be()&&(c.addEventListener("touchstart",ue),c.addEventListener("touchmove",ce),c.addEventListener("touchend",me)),u.simulateTouch&&(c.addEventListener("mousedown",oe),c.addEventListener("mouseup",de),c.addEventListener("mousemove",le))},he=()=>{r.removeEventListener("keydown",ae),r.removeEventListener("resize",ee),r.removeEventListener("popstate",z),c.removeEventListener("click",se),be()&&(c.removeEventListener("touchstart",ue),c.removeEventListener("touchmove",ce),c.removeEventListener("touchend",me)),u.simulateTouch&&(c.removeEventListener("mousedown",oe),c.removeEventListener("mouseup",de),c.removeEventListener("mousemove",le))},ve=()=>"false"===c.getAttribute("aria-hidden"),be=()=>"ontouchstart"in window,fe=function(e){const t=new CustomEvent(e,{detail:arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},cancelable:!0});c.dispatchEvent(t)},Ee=()=>{if(u=(t=>({selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,swipeClose:!0,simulateTouch:!0,threshold:50,backFocus:!0,hideScrollbar:!0,transitionDuration:300,transitionTimingFunction:"cubic-bezier(0.62, 0.16, 0.13, 1.01)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,...t}))(t),!document.querySelectorAll(u.selector).length)return;if(B(),c||(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"),m=document.createElement("div"),m.classList.add("parvus__overlay"),c.appendChild(m),g=document.createElement("div"),g.className="parvus__toolbar",h=document.createElement("div"),v=document.createElement("div"),b=document.createElement("div"),b.className="parvus__controls",b.setAttribute("role","group"),b.setAttribute("aria-label",u.l10n.controlsLabel),v.appendChild(b),A=document.createElement("button"),A.className="parvus__btn parvus__btn--close",A.setAttribute("type","button"),A.setAttribute("aria-label",u.l10n.closeButtonLabel),A.innerHTML=u.closeButtonIcon,b.appendChild(A),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,b.appendChild(f),E=document.createElement("button"),E.className="parvus__btn parvus__btn--next",E.setAttribute("type","button"),E.setAttribute("aria-label",u.l10n.nextButtonLabel),E.innerHTML=u.nextButtonIcon,b.appendChild(E),y=document.createElement("div"),y.className="parvus__counter",h.appendChild(y),g.appendChild(h),g.appendChild(v),c.appendChild(g),document.body.appendChild(c)),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const r=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${r}`),q(e)}))}))}document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach(q)};return Ee(),{init:Ee,open:Y,close:z,select:R,previous:j,next:U,currentIndex:()=>d,add:q,remove:F,destroy:()=>{if(!c)return;ve()&&z(),c.remove();document.querySelectorAll(".parvus-trigger").forEach(F),fe("destroy")},isOpen:ve,on:(e,t)=>{c&&c.addEventListener(e,t)},off:(e,t)=>{c&&c.removeEventListener(e,t)}}}export{t as default};

193

dist/js/parvus.js

@@ -5,3 +5,3 @@ /**

* @author Benjamin de Oostfrees
* @version 2.3.3
* @version 2.4.0
* @url https://github.com/deoostfrees/parvus

@@ -91,8 +91,9 @@ *

backFocus: true,
hideScrollbar: true,
transitionDuration: 300,
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>',
l10n: en

@@ -126,2 +127,11 @@ };

/**
* Get scrollbar width
*
* @return {Number} - The scrollbar width
*/
const getScrollbarWidth = () => {
return BROWSER_WINDOW.innerWidth - document.documentElement.clientWidth;
};
/**
* Get the group from element

@@ -186,3 +196,3 @@ *

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -219,3 +229,3 @@ }

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -431,2 +441,6 @@ }

});
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
document.body.style.overflow = 'hidden';
}
lightbox.classList.add('parvus--is-opening');

@@ -439,3 +453,3 @@ lightbox.setAttribute('aria-hidden', 'false');

updateAttributes();
updateFocus();
updateSliderNavigationStatus();
updateCounter();

@@ -451,8 +465,7 @@ setFocusToFirstItem();

preload(currentIndex - 1);
const OPEN_EVENT = new CustomEvent('open', {
detail: {
source: el
}
// Create and dispatch a new event
fire('open', {
source: el
});
lightbox.dispatchEvent(OPEN_EVENT);
document.body.classList.add('parvus-is-open');

@@ -505,2 +518,3 @@ };

IMAGE.style.transform = '';
IMAGE.removeEventListener('transitionend', transitionendHandler);
GROUPS[activeGroup].slider.remove();

@@ -510,3 +524,11 @@ GROUPS[activeGroup].slider = null;

GROUPS[activeGroup].contentElements = [];
IMAGE.removeEventListener('transitionend', transitionendHandler);
counter.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-disabled');
nextButton.removeAttribute('aria-hidden');
nextButton.removeAttribute('aria-disabled');
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = '';
document.body.style.overflow = '';
}
};

@@ -516,3 +538,5 @@ IMAGE.addEventListener('transitionend', transitionendHandler, {

});
const CLOSE_EVENT = new CustomEvent('close', {
// Create and dispatch a new event
fire('close', {
detail: {

@@ -522,3 +546,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

});
lightbox.dispatchEvent(CLOSE_EVENT);
document.body.classList.remove('parvus-is-open');

@@ -614,7 +637,2 @@ };

checkImagePromise.then(loadedImage => {
// Add srcset if available
const srcset = el.getAttribute('data-srcset');
if (srcset) {
loadedImage.setAttribute('srcset', srcset);
}
loadedImage.style.opacity = 0;

@@ -649,13 +667,28 @@ IMAGE_CONTAINER.appendChild(loadedImage);

});
// Add `sizes` attribute
if (el.hasAttribute('data-sizes') && el.getAttribute('data-sizes') !== '') {
IMAGE.setAttribute('sizes', el.getAttribute('data-sizes'));
}
// Add `srcset` attribute
if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'));
}
// Add `src` attribute
if (el.tagName === 'A') {
IMAGE.setAttribute('src', el.href);
if (THUMBNAIL) {
IMAGE.alt = THUMBNAIL.alt || '';
} else {
IMAGE.alt = el.getAttribute('data-alt') || '';
}
} else {
IMAGE.alt = el.getAttribute('data-alt') || '';
IMAGE.setAttribute('src', el.getAttribute('data-target'));
}
// `alt` attribute
if (THUMBNAIL && THUMBNAIL.hasAttribute('alt') && THUMBNAIL.getAttribute('alt') !== '') {
IMAGE.alt = THUMBNAIL.alt;
} else if (el.hasAttribute('data-alt') && el.getAttribute('data-alt') !== '') {
IMAGE.alt = el.getAttribute('data-alt');
} else {
IMAGE.alt = '';
}
};

@@ -725,6 +758,6 @@

if (index < OLD_INDEX) {
updateFocus('left');
updateSliderNavigationStatus();
preload(index - 1);
} else if (index > OLD_INDEX) {
updateFocus('right');
updateSliderNavigationStatus();
preload(index + 1);

@@ -736,3 +769,3 @@ }

// Create and dispatch a new event
const SELECT_EVENT = new CustomEvent('select', {
fire('select', {
detail: {

@@ -742,3 +775,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

});
lightbox.dispatchEvent(SELECT_EVENT);
};

@@ -753,2 +785,13 @@

select(currentIndex - 1);
} else {
const {
slider
} = GROUPS[activeGroup];
const offset = offsetTmp + config.threshold;
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`;
setTimeout(() => {
updateOffset();
}, 150);
});
}

@@ -763,2 +806,3 @@ };

const {
slider,
triggerElements

@@ -768,2 +812,10 @@ } = GROUPS[activeGroup];

select(currentIndex + 1);
} else {
const offset = offsetTmp - config.threshold;
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`;
setTimeout(() => {
updateOffset();
}, 150);
});
}

@@ -797,9 +849,9 @@ };

/**
* Update focus
* Update slider navigation status
*
* This function updates the focus based on the specified direction.
* This function updates the disabled status of the slider navigation buttons
* based on the current slide position.
*
* @param {String} dir - The direction of the focus update.
*/
const updateFocus = dir => {
const updateSliderNavigationStatus = () => {
const {

@@ -811,26 +863,12 @@ triggerElements

const LAST_SLIDE = currentIndex === TOTAL_TRIGGER_ELEMENTS - 1;
const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1;
if (TOTAL_TRIGGER_ELEMENTS === 1) {
closeButton.focus();
} else if (FIRST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'true');
previousButton.setAttribute('aria-disabled', 'true');
nextButton.setAttribute('aria-hidden', 'false');
nextButton.setAttribute('aria-disabled', 'false');
nextButton.focus();
} else if (LAST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'false');
previousButton.setAttribute('aria-disabled', 'false');
nextButton.setAttribute('aria-hidden', 'true');
nextButton.setAttribute('aria-disabled', 'true');
previousButton.focus();
} else {
previousButton.setAttribute('aria-hidden', 'false');
previousButton.setAttribute('aria-disabled', 'false');
nextButton.setAttribute('aria-hidden', 'false');
nextButton.setAttribute('aria-disabled', 'false');
if (dir === 'left') {
previousButton.focus();
if (TOTAL_TRIGGER_ELEMENTS > 1) {
if (FIRST_SLIDE) {
previousButton.setAttribute('aria-disabled', 'true');
nextButton.removeAttribute('aria-disabled');
} else if (LAST_SLIDE) {
previousButton.removeAttribute('aria-disabled');
nextButton.setAttribute('aria-disabled', 'true');
} else {
nextButton.focus();
previousButton.removeAttribute('aria-disabled');
nextButton.removeAttribute('aria-disabled');
}

@@ -910,3 +948,2 @@ }

const TOTAL_TRIGGER_ELEMENTS = TRIGGER_ELEMENTS.length;
const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1;
const SLIDER = GROUPS[activeGroup].slider;

@@ -943,10 +980,12 @@ const SLIDER_ELEMENTS = GROUPS[activeGroup].sliderElements;

// Show or hide counter
counter.setAttribute('aria-hidden', TOTAL_TRIGGER_ELEMENTS === 1 ? 'true' : 'false');
// Show or hide buttons
previousButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false');
previousButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false');
nextButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false');
nextButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false');
if (TOTAL_TRIGGER_ELEMENTS === 1) {
counter.setAttribute('aria-hidden', 'true');
previousButton.setAttribute('aria-hidden', 'true');
nextButton.setAttribute('aria-hidden', 'true');
} else {
counter.removeAttribute('aria-hidden');
previousButton.removeAttribute('aria-hidden');
nextButton.removeAttribute('aria-hidden');
}
};

@@ -1161,3 +1200,3 @@

slider.classList.remove('parvus__slider--is-dragging');
slider.style.willChange = 'auto';
slider.style.willChange = '';
if (drag.endX || drag.endY) {

@@ -1225,3 +1264,3 @@ updateAfterDrag();

slider.classList.remove('parvus__slider--is-dragging');
slider.style.willChange = 'auto';
slider.style.willChange = '';
if (drag.endX || drag.endY) {

@@ -1340,4 +1379,3 @@ updateAfterDrag();

// Create and dispatch a new event
const DESTROY_EVENT = new CustomEvent('destroy');
lightbox.dispatchEvent(DESTROY_EVENT);
fire('destroy');
};

@@ -1373,2 +1411,17 @@

/**
* Dispatch a custom event
*
* @param {String} type - The type of the event to dispatch
* @param {Function} event - The event object
*/
const fire = function (type) {
let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
const CUSTOM_EVENT = new CustomEvent(type, {
detail: event,
cancelable: true
});
lightbox.dispatchEvent(CUSTOM_EVENT);
};
/**
* Bind a specific event listener

@@ -1375,0 +1428,0 @@ *

4

dist/js/parvus.min.js

@@ -5,3 +5,3 @@ /**

* @author Benjamin de Oostfrees
* @version 2.3.3
* @version 2.4.0
* @url https://github.com/deoostfrees/parvus

@@ -12,2 +12,2 @@ *

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Parvus=t()}(this,(function(){"use strict";var e={lightboxLabel:"This is a dialog window that overlays the main content of the page. The modal displays 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",lightboxLoadingError:"The requested image cannot be loaded.",controlsLabel:"Controls",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window",sliderLabel:"Images",slideLabel:"Image"};return function(t){const s=window,r=['a:not([inert]):not([tabindex^="-"])','button:not([inert]):not([tabindex^="-"]):not(:disabled)','[tabindex]:not([inert]):not([tabindex^="-"])'],n={triggerElements:[],slider:null,sliderElements:[],contentElements:[]},i={};let a=0,l=null,o=null,d=0,u={},c=null,p=null,m=1,g=null,h=null,v=null,b=null,f=null,E=null,A=null,y=null,L={},w=!1,_=!1,x=!1,C=null,$=null,I=null,T=!1,M=null,S=!0;const B=window.matchMedia("(prefers-reduced-motion)"),N=()=>{B.matches?(S=!0,M=.1):(S=!1,M=u.transitionDuration)};B.addEventListener("change",N);const q=e=>{const t=e.dataset.group||`default-${a}`;return++a,e.hasAttribute("data-group")||e.setAttribute("data-group",t),t},k=e=>{if(!("A"===e.tagName&&e.hasAttribute("href")||"BUTTON"===e.tagName&&e.hasAttribute("data-target")))throw new Error("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.");if(l=q(e),i[l]||(i[l]=structuredClone(n)),i[l].triggerElements.includes(e))throw new Error("Ups, element already added.");if(i[l].triggerElements.push(e),(e=>{if(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),e.classList.add("parvus-trigger"),e.addEventListener("click",se),ve()&&l===o){const t=i[l].triggerElements.indexOf(e);X(t),O(e,t,(()=>{P(t)})),Z(),V(),K()}},F=e=>{if(!e||!e.hasAttribute("data-group"))return;const t=q(e);if(!i[t]||!i[t].triggerElements.includes(e))return;const s=i[t].triggerElements.indexOf(e);if(i[t].triggerElements.splice(s,1),i[t].sliderElements.splice(s,1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}ve()&&t===o&&(Z(),V(),K()),e.removeEventListener("click",se),e.classList.remove("parvus-trigger")},X=e=>{if(void 0!==i[o].sliderElements[e])return;const t=document.createElement("div"),s=document.createElement("div"),r=i[o].triggerElements.length;if(t.className="parvus__slide",t.style.position="absolute",t.style.left=100*e+"%",t.setAttribute("aria-hidden","true"),t.appendChild(s),r>1&&(t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${e+1}/${r}`)),i[o].sliderElements[e]=t,e>=d){const s=(e=>{const t=i[o].sliderElements,s=t.length;for(let r=e+1;r<s;r++)if(void 0!==t[r])return r;return-1})(e);-1!==s?i[o].sliderElements[s].before(t):i[o].slider.appendChild(t)}else{const s=(e=>{const t=i[o].sliderElements;for(let s=e-1;s>=0;s--)if(void 0!==t[s])return s;return-1})(e);-1!==s?i[o].sliderElements[s].after(t):i[o].slider.prepend(t)}},Y=e=>{if(!c||!e||!e.classList.contains("parvus-trigger")||ve())return;if(o=q(e),!i[o].triggerElements.includes(e))throw new Error("Ups, I can't find the element.");d=i[o].triggerElements.indexOf(e),C=document.activeElement,history.pushState({parvus:"close"},"Image",window.location.href),ge();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"),(()=>{const e=document.createElement("div");e.className="parvus__slider",e.setAttribute("aria-hidden","true"),i[o].slider=e,c.appendChild(e)})(),X(d),i[o].slider.setAttribute("aria-hidden","false"),j(),Z(),V(),K(),ie(),D(d),O(e,d,(()=>{P(d,!0),c.classList.remove("parvus--is-opening"),i[o].slider.classList.add("parvus__slider--animate")})),z(d+1),z(d-1);const t=new CustomEvent("open",{detail:{source:e}});c.dispatchEvent(t),document.body.classList.add("parvus-is-open")},H=()=>{if(!ve())throw new Error("Ups, I'm already closed.");const e=i[o].contentElements[d],t=i[o].triggerElements[d];he(),J(),"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((()=>{const s=t.getBoundingClientRect();if(e&&"IMG"===e.tagName){const t=e.getBoundingClientRect(),r=s.width/t.width,n=s.height/t.height,i=s.left-t.left,a=s.top-t.top;e.style.transform=`translate(${i}px, ${a}px) scale(${r}, ${n})`}e.style.opacity=0,e.style.transition=`transform ${M}ms ${u.transitionTimingFunction}, opacity ${M}ms ${u.transitionTimingFunction} ${M/2}ms`}));const s=()=>{W(d),C=u.backFocus?C:i[o].triggerElements[d],C.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",i[o].slider.remove(),i[o].slider=null,i[o].sliderElements=[],i[o].contentElements=[],e.removeEventListener("transitionend",s)};e.addEventListener("transitionend",s,{once:!0});const r=new CustomEvent("close",{detail:{source:i[o].triggerElements[d]}});c.dispatchEvent(r),document.body.classList.remove("parvus-is-open")},z=e=>{e<0||e>=i[o].triggerElements.length||void 0!==i[o].sliderElements[e]||(X(e),O(i[o].triggerElements[e],e,(()=>{P(e)})))},D=e=>{i[o].sliderElements[e].setAttribute("aria-hidden","false")},O=(e,t,s)=>{const{contentElements:r,sliderElements:n}=i[o];if(void 0!==r[t])return void(s&&"function"==typeof s&&s());const a=n[t].querySelector("div"),l=new Image,d=document.createElement("div"),c=e.querySelector("img"),p=document.createElement("div");d.className="parvus__content",p.className="parvus__loader",p.setAttribute("role","progressbar"),p.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),a.appendChild(p);new Promise(((e,t)=>{l.onload=()=>e(l),l.onerror=e=>t(e)})).then((s=>{const i=e.getAttribute("data-srcset");i&&s.setAttribute("srcset",i),s.style.opacity=0,d.appendChild(s),a.appendChild(d),u.captions&&((e,t,s)=>{const r=document.createElement("div");let n=null;if(r.className="parvus__caption","self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(n=t.getAttribute(u.captionsAttribute));else{const e=t.querySelector(u.captionsSelector);null!==e&&(n=e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)?e.getAttribute(u.captionsAttribute):e.innerHTML)}if(null!==n){const t=`parvus__caption-${s}`;r.setAttribute("aria-labelledby",t),r.id=t,r.innerHTML=`<p>${n}</p>`,e.appendChild(r)}})(a,e,t),r[t]=s,s.setAttribute("width",s.naturalWidth),s.setAttribute("height",s.naturalHeight),te(n[t],s)})).catch((()=>{const e=document.createElement("div");e.classList.add("parvus__content"),e.classList.add("parvus__content--error"),e.innerHTML=`${u.l10n.lightboxLoadingError}`,a.appendChild(e),r[t]=e})).finally((()=>{a.removeChild(p),s&&"function"==typeof s&&s()})),"A"===e.tagName?(l.setAttribute("src",e.href),l.alt=c?c.alt||"":e.getAttribute("data-alt")||""):(l.alt=e.getAttribute("data-alt")||"",l.setAttribute("src",e.getAttribute("data-target")))},P=(e,t)=>{const s=i[o].contentElements[e];if(s&&"IMG"===s.tagName){const r=i[o].triggerElements[e];if(t){const e=s.getBoundingClientRect(),t=r.getBoundingClientRect(),n=t.width/e.width,i=t.height/e.height,a=t.left-e.left,l=t.top-e.top;requestAnimationFrame((()=>{s.style.transform=`translate(${a}px, ${l}px) scale(${n}, ${i})`,s.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{s.style.transform="",s.style.opacity=1,s.style.transition=`transform ${M}ms ${u.transitionTimingFunction}, opacity ${M/2}ms ${u.transitionTimingFunction}`}))}))}else s.style.opacity=1}else s.style.opacity=1},R=e=>{const t=d;if(!ve())throw new Error("Oops, I'm closed.");{if("number"!=typeof e||isNaN(e))throw new Error("Oops, no slide specified.");const t=i[o].triggerElements;if(e===d)throw new Error(`Oops, slide ${e} is already selected.`);if(e<-1||e>=t.length)throw new Error(`Oops, I can't find slide ${e}.`)}void 0!==i[o].sliderElements[e]||(X(e),O(i[o].triggerElements[e],e,(()=>{P(e)}))),D(e),d=e,j(),e<t?(V("left"),z(e-1)):e>t&&(V("right"),z(e+1)),W(t),K();const s=new CustomEvent("select",{detail:{source:i[o].triggerElements[d]}});c.dispatchEvent(s)},U=()=>{d>0&&R(d-1)},G=()=>{const{triggerElements:e}=i[o];d<e.length-1&&R(d+1)},W=e=>{void 0!==i[o].sliderElements[e]&&i[o].sliderElements[e].setAttribute("aria-hidden","true")},j=()=>{o=null!==o?o:l,$=-d*c.offsetWidth,i[o].slider.style.transform=`translate3d(${$}px, 0, 0)`,I=$},V=e=>{const{triggerElements:t}=i[o],s=t.length,r=0===d,n=d===s-1,a=1===s;1===s?A.focus():r&&!a?(f.setAttribute("aria-hidden","true"),f.setAttribute("aria-disabled","true"),E.setAttribute("aria-hidden","false"),E.setAttribute("aria-disabled","false"),E.focus()):n&&!a?(f.setAttribute("aria-hidden","false"),f.setAttribute("aria-disabled","false"),E.setAttribute("aria-hidden","true"),E.setAttribute("aria-disabled","true"),f.focus()):(f.setAttribute("aria-hidden","false"),f.setAttribute("aria-disabled","false"),E.setAttribute("aria-hidden","false"),E.setAttribute("aria-disabled","false"),"left"===e?f.focus():E.focus())},K=()=>{y.textContent=`${d+1}/${i[o].triggerElements.length}`},J=()=>{L={startX:0,endX:0,startY:0,endY:0}},Q=()=>{const{startX:e,startY:t,endX:s,endY:r}=L,n=s-e,a=r-t,l=Math.abs(n),m=Math.abs(a),{triggerElements:g}=i[o],h=g.length;w?n>2&&l>=u.threshold&&d>0?U():n<2&&l>=u.threshold&&d!==h-1?G():j():_?(m>2&&u.swipeClose&&m>=u.threshold?H():(c.classList.remove("parvus--is-vertical-closing"),j()),p.style.opacity=""):j()},Z=()=>{const e=i[o].triggerElements.length,t=1===e,s=i[o].slider,r=i[o].sliderElements,n=u.simulateTouch||be(),a=s.classList.contains("parvus__slider--is-draggable");n&&u.swipeClose&&!a||n&&e>1&&!a?s.classList.add("parvus__slider--is-draggable"):s.classList.remove("parvus__slider--is-draggable"),e>1?(s.setAttribute("role","region"),s.setAttribute("aria-roledescription","carousel"),s.setAttribute("aria-label",u.l10n.sliderLabel),r.forEach(((t,s)=>{t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${s+1}/${e}`)}))):(s.removeAttribute("role"),s.removeAttribute("aria-roledescription"),s.removeAttribute("aria-label"),r.forEach((e=>{e.removeAttribute("role"),e.removeAttribute("aria-label")}))),y.setAttribute("aria-hidden",1===e?"true":"false"),f.setAttribute("aria-hidden",t?"true":"false"),f.setAttribute("aria-disabled",t?"true":"false"),E.setAttribute("aria-hidden",t?"true":"false"),E.setAttribute("aria-disabled",t?"true":"false")},ee=()=>{T||(T=!0,s.requestAnimationFrame((()=>{i[o].sliderElements.forEach(((e,t)=>{te(e,i[o].contentElements[t])})),j(),T=!1})))},te=(e,t)=>{if("IMG"!==t.tagName)return;const s=getComputedStyle(e),r=e.querySelector(".parvus__caption"),n=r?r.getBoundingClientRect().height:0,i=t.getAttribute("height"),a=t.getAttribute("width");let l=e.offsetHeight,o=e.offsetWidth;l-=parseFloat(s.paddingTop)+parseFloat(s.paddingBottom)+parseFloat(n),o-=parseFloat(s.paddingLeft)+parseFloat(s.paddingRight);const d=Math.min(o/a||0,l/i),u=a*d||0,c=i*d||0;i>c&&i<l&&a>u&&a<o||i<c&&i<l&&a<u&&a<o?(t.style.width="",t.style.height=""):(t.style.width=`${u}px`,t.style.height=`${c}px`)},se=function(e){e.preventDefault(),Y(this)},re=e=>{const{target:t}=e;t===f?U():t===E?G():(t===A||u.docClose&&!_&&!w&&t.classList.contains("parvus__slide"))&&H(),e.stopPropagation()},ne=()=>Array.from(c.querySelectorAll(r.join(", "))).filter((e=>null!==e.offsetParent)),ie=()=>{ne()[0].focus()},ae=e=>{const t=ne(),s=t.indexOf(document.activeElement),r=t.length-1;switch(e.code){case"Tab":e.shiftKey?0===s&&(t[r].focus(),e.preventDefault()):s===r&&(t[0].focus(),e.preventDefault());break;case"Escape":H(),e.preventDefault();break;case"ArrowLeft":U(),e.preventDefault();break;case"ArrowRight":G(),e.preventDefault()}},le=e=>{w=!1,_=!1,x=!0;const{pageX:t,pageY:s}=e;L.startX=t,L.startY=s;const{slider:r}=i[o];r.classList.add("parvus__slider--is-dragging"),r.style.willChange="transform",e.stopPropagation(),m=getComputedStyle(p).opacity},oe=e=>{if(x){const{pageX:t,pageY:s}=e;L.endX=t,L.endY=s,me()}e.preventDefault()},de=()=>{x=!1;const{slider:e}=i[o];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="auto",(L.endX||L.endY)&&Q(),J()},ue=e=>{w=!1,_=!1;const{clientX:t,clientY:s}=e.changedTouches[0];L.startX=parseInt(t),L.startY=parseInt(s);const{slider:r}=i[o];r.classList.add("parvus__slider--is-dragging"),r.style.willChange="transform",m=getComputedStyle(p).getPropertyValue("opacity"),e.stopPropagation()},ce=e=>{const{clientX:t,clientY:s}=e.changedTouches[0];L.endX=parseInt(t),L.endY=parseInt(s),me(),e.preventDefault()},pe=()=>{const{slider:e}=i[o];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="auto",(L.endX||L.endY)&&Q(),J()},me=()=>{const{startX:e,endX:t,startY:s,endY:r}=L,n=e-t,a=r-s,l=Math.abs(a);Math.abs(n)>2&&!_&&i[o].triggerElements.length>1?(i[o].slider.style.transform=`translate3d(${I-Math.round(n)}px, 0, 0)`,w=!0,_=!1):Math.abs(a)>2&&!w&&u.swipeClose&&(!S&&l<=100&&(p.style.opacity=m-l/100),c.classList.add("parvus--is-vertical-closing"),i[o].slider.style.transform=`translate3d(${I}px, ${Math.round(a)}px, 0)`,w=!1,_=!0)},ge=()=>{s.addEventListener("keydown",ae),s.addEventListener("resize",ee),s.addEventListener("popstate",H),c.addEventListener("click",re),be()&&(c.addEventListener("touchstart",ue),c.addEventListener("touchmove",ce),c.addEventListener("touchend",pe)),u.simulateTouch&&(c.addEventListener("mousedown",le),c.addEventListener("mouseup",de),c.addEventListener("mousemove",oe))},he=()=>{s.removeEventListener("keydown",ae),s.removeEventListener("resize",ee),s.removeEventListener("popstate",H),c.removeEventListener("click",re),be()&&(c.removeEventListener("touchstart",ue),c.removeEventListener("touchmove",ce),c.removeEventListener("touchend",pe)),u.simulateTouch&&(c.removeEventListener("mousedown",le),c.removeEventListener("mouseup",de),c.removeEventListener("mousemove",oe))},ve=()=>"false"===c.getAttribute("aria-hidden"),be=()=>"ontouchstart"in window,fe=()=>{if(u=(t=>({selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,swipeClose:!0,simulateTouch:!0,threshold:50,backFocus:!0,transitionDuration:300,transitionTimingFunction:"cubic-bezier(0.62, 0.16, 0.13, 1.01)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,...t}))(t),!document.querySelectorAll(u.selector).length)return;if(N(),c||(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"),c.appendChild(p),g=document.createElement("div"),g.className="parvus__toolbar",h=document.createElement("div"),v=document.createElement("div"),b=document.createElement("div"),b.className="parvus__controls",b.setAttribute("role","group"),b.setAttribute("aria-label",u.l10n.controlsLabel),v.appendChild(b),A=document.createElement("button"),A.className="parvus__btn parvus__btn--close",A.setAttribute("type","button"),A.setAttribute("aria-label",u.l10n.closeButtonLabel),A.innerHTML=u.closeButtonIcon,b.appendChild(A),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,b.appendChild(f),E=document.createElement("button"),E.className="parvus__btn parvus__btn--next",E.setAttribute("type","button"),E.setAttribute("aria-label",u.l10n.nextButtonLabel),E.innerHTML=u.nextButtonIcon,b.appendChild(E),y=document.createElement("div"),y.className="parvus__counter",h.appendChild(y),g.appendChild(h),g.appendChild(v),c.appendChild(g),document.body.appendChild(c)),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const s=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${s}`),k(e)}))}))}document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach(k)};return fe(),{init:fe,open:Y,close:H,select:R,previous:U,next:G,currentIndex:()=>d,add:k,remove:F,destroy:()=>{if(!c)return;ve()&&H(),c.remove();document.querySelectorAll(".parvus-trigger").forEach(F);const e=new CustomEvent("destroy");c.dispatchEvent(e)},isOpen:ve,on:(e,t)=>{c&&c.addEventListener(e,t)},off:(e,t)=>{c&&c.removeEventListener(e,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 that overlays the main content of the page. The modal displays 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",lightboxLoadingError:"The requested image cannot be loaded.",controlsLabel:"Controls",previousButtonLabel:"Previous image",nextButtonLabel:"Next image",closeButtonLabel:"Close dialog window",sliderLabel:"Images",slideLabel:"Image"};return function(t){const r=window,s=['a:not([inert]):not([tabindex^="-"])','button:not([inert]):not([tabindex^="-"]):not(:disabled)','[tabindex]:not([inert]):not([tabindex^="-"])'],i={triggerElements:[],slider:null,sliderElements:[],contentElements:[]},n={};let a=0,o=null,l=null,d=0,u={},c=null,m=null,p=1,h=null,g=null,b=null,v=null,f=null,E=null,A=null,y=null,w={},L=!1,_=!1,x=!1,C=null,$=null,k=null,I=!1,T=null,S=!0;const M=window.matchMedia("(prefers-reduced-motion)"),B=()=>{M.matches?(S=!0,T=.1):(S=!1,T=u.transitionDuration)};M.addEventListener("change",B);const N=e=>{const t=e.dataset.group||`default-${a}`;return++a,e.hasAttribute("data-group")||e.setAttribute("data-group",t),t},q=e=>{if(!("A"===e.tagName&&e.hasAttribute("href")||"BUTTON"===e.tagName&&e.hasAttribute("data-target")))throw new Error("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.");if(o=N(e),n[o]||(n[o]=structuredClone(i)),n[o].triggerElements.includes(e))throw new Error("Ups, element already added.");if(n[o].triggerElements.push(e),(e=>{if(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),e.classList.add("parvus-trigger"),e.addEventListener("click",re),be()&&o===l){const t=n[o].triggerElements.indexOf(e);X(t),O(e,t,(()=>{P(t)})),Z(),V(),K()}},F=e=>{if(!e||!e.hasAttribute("data-group"))return;const t=N(e);if(!n[t]||!n[t].triggerElements.includes(e))return;const r=n[t].triggerElements.indexOf(e);if(n[t].triggerElements.splice(r,1),n[t].sliderElements.splice(r,1),e.classList.contains("parvus-zoom")){const t=e.querySelector(".parvus-zoom__indicator");e.classList.remove("parvus-zoom"),e.removeChild(t)}be()&&t===l&&(Z(),V(),K()),e.removeEventListener("click",re),e.classList.remove("parvus-trigger")},X=e=>{if(void 0!==n[l].sliderElements[e])return;const t=document.createElement("div"),r=document.createElement("div"),s=n[l].triggerElements.length;if(t.className="parvus__slide",t.style.position="absolute",t.style.left=100*e+"%",t.setAttribute("aria-hidden","true"),t.appendChild(r),s>1&&(t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${e+1}/${s}`)),n[l].sliderElements[e]=t,e>=d){const r=(e=>{const t=n[l].sliderElements,r=t.length;for(let s=e+1;s<r;s++)if(void 0!==t[s])return s;return-1})(e);-1!==r?n[l].sliderElements[r].before(t):n[l].slider.appendChild(t)}else{const r=(e=>{const t=n[l].sliderElements;for(let r=e-1;r>=0;r--)if(void 0!==t[r])return r;return-1})(e);-1!==r?n[l].sliderElements[r].after(t):n[l].slider.prepend(t)}},Y=e=>{if(!c||!e||!e.classList.contains("parvus-trigger")||be())return;if(l=N(e),!n[l].triggerElements.includes(e))throw new Error("Ups, I can't find the element.");d=n[l].triggerElements.indexOf(e),C=document.activeElement,history.pushState({parvus:"close"},"Image",window.location.href),he();document.querySelectorAll('body > *:not([aria-hidden="true"])').forEach((e=>{e.setAttribute("aria-hidden","true"),e.classList.add("parvus-hidden")})),u.hideScrollbar&&(document.body.style.marginInlineEnd=r.innerWidth-document.documentElement.clientWidth+"px",document.body.style.overflow="hidden"),c.classList.add("parvus--is-opening"),c.setAttribute("aria-hidden","false"),(()=>{const e=document.createElement("div");e.className="parvus__slider",e.setAttribute("aria-hidden","true"),n[l].slider=e,c.appendChild(e)})(),X(d),n[l].slider.setAttribute("aria-hidden","false"),G(),Z(),V(),K(),ne(),D(d),O(e,d,(()=>{P(d,!0),c.classList.remove("parvus--is-opening"),n[l].slider.classList.add("parvus__slider--animate")})),H(d+1),H(d-1),fe("open",{source:e}),document.body.classList.add("parvus-is-open")},z=()=>{if(!be())throw new Error("Ups, I'm already closed.");const e=n[l].contentElements[d],t=n[l].triggerElements[d];ge(),J(),"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((()=>{const r=t.getBoundingClientRect();if(e&&"IMG"===e.tagName){const t=e.getBoundingClientRect(),s=r.width/t.width,i=r.height/t.height,n=r.left-t.left,a=r.top-t.top;e.style.transform=`translate(${n}px, ${a}px) scale(${s}, ${i})`}e.style.opacity=0,e.style.transition=`transform ${T}ms ${u.transitionTimingFunction}, opacity ${T}ms ${u.transitionTimingFunction} ${T/2}ms`}));const r=()=>{W(d),C=u.backFocus?C:n[l].triggerElements[d],C.focus({preventScroll:!0}),c.setAttribute("aria-hidden","true"),c.classList.remove("parvus--is-closing"),c.classList.remove("parvus--is-vertical-closing"),e.style.transform="",e.removeEventListener("transitionend",r),n[l].slider.remove(),n[l].slider=null,n[l].sliderElements=[],n[l].contentElements=[],y.removeAttribute("aria-hidden"),f.removeAttribute("aria-hidden"),f.removeAttribute("aria-disabled"),E.removeAttribute("aria-hidden"),E.removeAttribute("aria-disabled"),u.hideScrollbar&&(document.body.style.marginInlineEnd="",document.body.style.overflow="")};e.addEventListener("transitionend",r,{once:!0}),fe("close",{detail:{source:n[l].triggerElements[d]}}),document.body.classList.remove("parvus-is-open")},H=e=>{e<0||e>=n[l].triggerElements.length||void 0!==n[l].sliderElements[e]||(X(e),O(n[l].triggerElements[e],e,(()=>{P(e)})))},D=e=>{n[l].sliderElements[e].setAttribute("aria-hidden","false")},O=(e,t,r)=>{const{contentElements:s,sliderElements:i}=n[l];if(void 0!==s[t])return void(r&&"function"==typeof r&&r());const a=i[t].querySelector("div"),o=new Image,d=document.createElement("div"),c=e.querySelector("img"),m=document.createElement("div");d.className="parvus__content",m.className="parvus__loader",m.setAttribute("role","progressbar"),m.setAttribute("aria-label",u.l10n.lightboxLoadingIndicatorLabel),a.appendChild(m);new Promise(((e,t)=>{o.onload=()=>e(o),o.onerror=e=>t(e)})).then((r=>{r.style.opacity=0,d.appendChild(r),a.appendChild(d),u.captions&&((e,t,r)=>{const s=document.createElement("div");let i=null;if(s.className="parvus__caption","self"===u.captionsSelector)t.hasAttribute(u.captionsAttribute)&&""!==t.getAttribute(u.captionsAttribute)&&(i=t.getAttribute(u.captionsAttribute));else{const e=t.querySelector(u.captionsSelector);null!==e&&(i=e.hasAttribute(u.captionsAttribute)&&""!==e.getAttribute(u.captionsAttribute)?e.getAttribute(u.captionsAttribute):e.innerHTML)}if(null!==i){const t=`parvus__caption-${r}`;s.setAttribute("aria-labelledby",t),s.id=t,s.innerHTML=`<p>${i}</p>`,e.appendChild(s)}})(a,e,t),s[t]=r,r.setAttribute("width",r.naturalWidth),r.setAttribute("height",r.naturalHeight),te(i[t],r)})).catch((()=>{const e=document.createElement("div");e.classList.add("parvus__content"),e.classList.add("parvus__content--error"),e.innerHTML=`${u.l10n.lightboxLoadingError}`,a.appendChild(e),s[t]=e})).finally((()=>{a.removeChild(m),r&&"function"==typeof r&&r()})),e.hasAttribute("data-sizes")&&""!==e.getAttribute("data-sizes")&&o.setAttribute("sizes",e.getAttribute("data-sizes")),e.hasAttribute("data-srcset")&&""!==e.getAttribute("data-srcset")&&o.setAttribute("srcset",e.getAttribute("data-srcset")),"A"===e.tagName?o.setAttribute("src",e.href):o.setAttribute("src",e.getAttribute("data-target")),c&&c.hasAttribute("alt")&&""!==c.getAttribute("alt")?o.alt=c.alt:e.hasAttribute("data-alt")&&""!==e.getAttribute("data-alt")?o.alt=e.getAttribute("data-alt"):o.alt=""},P=(e,t)=>{const r=n[l].contentElements[e];if(r&&"IMG"===r.tagName){const s=n[l].triggerElements[e];if(t){const e=r.getBoundingClientRect(),t=s.getBoundingClientRect(),i=t.width/e.width,n=t.height/e.height,a=t.left-e.left,o=t.top-e.top;requestAnimationFrame((()=>{r.style.transform=`translate(${a}px, ${o}px) scale(${i}, ${n})`,r.style.transition="transform 0s, opacity 0s",requestAnimationFrame((()=>{r.style.transform="",r.style.opacity=1,r.style.transition=`transform ${T}ms ${u.transitionTimingFunction}, opacity ${T/2}ms ${u.transitionTimingFunction}`}))}))}else r.style.opacity=1}else r.style.opacity=1},R=e=>{const t=d;if(!be())throw new Error("Oops, I'm closed.");{if("number"!=typeof e||isNaN(e))throw new Error("Oops, no slide specified.");const t=n[l].triggerElements;if(e===d)throw new Error(`Oops, slide ${e} is already selected.`);if(e<-1||e>=t.length)throw new Error(`Oops, I can't find slide ${e}.`)}void 0!==n[l].sliderElements[e]||(X(e),O(n[l].triggerElements[e],e,(()=>{P(e)}))),D(e),d=e,G(),e<t?(V(),H(e-1)):e>t&&(V(),H(e+1)),W(t),K(),fe("select",{detail:{source:n[l].triggerElements[d]}})},j=()=>{if(d>0)R(d-1);else{const{slider:e}=n[l],t=k+u.threshold;requestAnimationFrame((()=>{e.style.transform=`translate3d(${t}px, 0, 0)`,setTimeout((()=>{G()}),150)}))}},U=()=>{const{slider:e,triggerElements:t}=n[l];if(d<t.length-1)R(d+1);else{const t=k-u.threshold;requestAnimationFrame((()=>{e.style.transform=`translate3d(${t}px, 0, 0)`,setTimeout((()=>{G()}),150)}))}},W=e=>{void 0!==n[l].sliderElements[e]&&n[l].sliderElements[e].setAttribute("aria-hidden","true")},G=()=>{l=null!==l?l:o,$=-d*c.offsetWidth,n[l].slider.style.transform=`translate3d(${$}px, 0, 0)`,k=$},V=()=>{const{triggerElements:e}=n[l],t=e.length,r=d===t-1;t>1&&(0===d?(f.setAttribute("aria-disabled","true"),E.removeAttribute("aria-disabled")):r?(f.removeAttribute("aria-disabled"),E.setAttribute("aria-disabled","true")):(f.removeAttribute("aria-disabled"),E.removeAttribute("aria-disabled")))},K=()=>{y.textContent=`${d+1}/${n[l].triggerElements.length}`},J=()=>{w={startX:0,endX:0,startY:0,endY:0}},Q=()=>{const{startX:e,startY:t,endX:r,endY:s}=w,i=r-e,a=s-t,o=Math.abs(i),p=Math.abs(a),{triggerElements:h}=n[l],g=h.length;L?i>2&&o>=u.threshold&&d>0?j():i<2&&o>=u.threshold&&d!==g-1?U():G():_?(p>2&&u.swipeClose&&p>=u.threshold?z():(c.classList.remove("parvus--is-vertical-closing"),G()),m.style.opacity=""):G()},Z=()=>{const e=n[l].triggerElements.length,t=n[l].slider,r=n[l].sliderElements,s=u.simulateTouch||ve(),i=t.classList.contains("parvus__slider--is-draggable");s&&u.swipeClose&&!i||s&&e>1&&!i?t.classList.add("parvus__slider--is-draggable"):t.classList.remove("parvus__slider--is-draggable"),e>1?(t.setAttribute("role","region"),t.setAttribute("aria-roledescription","carousel"),t.setAttribute("aria-label",u.l10n.sliderLabel),r.forEach(((t,r)=>{t.setAttribute("role","group"),t.setAttribute("aria-label",`${u.l10n.slideLabel} ${r+1}/${e}`)}))):(t.removeAttribute("role"),t.removeAttribute("aria-roledescription"),t.removeAttribute("aria-label"),r.forEach((e=>{e.removeAttribute("role"),e.removeAttribute("aria-label")}))),1===e?(y.setAttribute("aria-hidden","true"),f.setAttribute("aria-hidden","true"),E.setAttribute("aria-hidden","true")):(y.removeAttribute("aria-hidden"),f.removeAttribute("aria-hidden"),E.removeAttribute("aria-hidden"))},ee=()=>{I||(I=!0,r.requestAnimationFrame((()=>{n[l].sliderElements.forEach(((e,t)=>{te(e,n[l].contentElements[t])})),G(),I=!1})))},te=(e,t)=>{if("IMG"!==t.tagName)return;const r=getComputedStyle(e),s=e.querySelector(".parvus__caption"),i=s?s.getBoundingClientRect().height:0,n=t.getAttribute("height"),a=t.getAttribute("width");let o=e.offsetHeight,l=e.offsetWidth;o-=parseFloat(r.paddingTop)+parseFloat(r.paddingBottom)+parseFloat(i),l-=parseFloat(r.paddingLeft)+parseFloat(r.paddingRight);const d=Math.min(l/a||0,o/n),u=a*d||0,c=n*d||0;n>c&&n<o&&a>u&&a<l||n<c&&n<o&&a<u&&a<l?(t.style.width="",t.style.height=""):(t.style.width=`${u}px`,t.style.height=`${c}px`)},re=function(e){e.preventDefault(),Y(this)},se=e=>{const{target:t}=e;t===f?j():t===E?U():(t===A||u.docClose&&!_&&!L&&t.classList.contains("parvus__slide"))&&z(),e.stopPropagation()},ie=()=>Array.from(c.querySelectorAll(s.join(", "))).filter((e=>null!==e.offsetParent)),ne=()=>{ie()[0].focus()},ae=e=>{const t=ie(),r=t.indexOf(document.activeElement),s=t.length-1;switch(e.code){case"Tab":e.shiftKey?0===r&&(t[s].focus(),e.preventDefault()):r===s&&(t[0].focus(),e.preventDefault());break;case"Escape":z(),e.preventDefault();break;case"ArrowLeft":j(),e.preventDefault();break;case"ArrowRight":U(),e.preventDefault()}},oe=e=>{L=!1,_=!1,x=!0;const{pageX:t,pageY:r}=e;w.startX=t,w.startY=r;const{slider:s}=n[l];s.classList.add("parvus__slider--is-dragging"),s.style.willChange="transform",e.stopPropagation(),p=getComputedStyle(m).opacity},le=e=>{if(x){const{pageX:t,pageY:r}=e;w.endX=t,w.endY=r,pe()}e.preventDefault()},de=()=>{x=!1;const{slider:e}=n[l];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="",(w.endX||w.endY)&&Q(),J()},ue=e=>{L=!1,_=!1;const{clientX:t,clientY:r}=e.changedTouches[0];w.startX=parseInt(t),w.startY=parseInt(r);const{slider:s}=n[l];s.classList.add("parvus__slider--is-dragging"),s.style.willChange="transform",p=getComputedStyle(m).getPropertyValue("opacity"),e.stopPropagation()},ce=e=>{const{clientX:t,clientY:r}=e.changedTouches[0];w.endX=parseInt(t),w.endY=parseInt(r),pe(),e.preventDefault()},me=()=>{const{slider:e}=n[l];e.classList.remove("parvus__slider--is-dragging"),e.style.willChange="",(w.endX||w.endY)&&Q(),J()},pe=()=>{const{startX:e,endX:t,startY:r,endY:s}=w,i=e-t,a=s-r,o=Math.abs(a);Math.abs(i)>2&&!_&&n[l].triggerElements.length>1?(n[l].slider.style.transform=`translate3d(${k-Math.round(i)}px, 0, 0)`,L=!0,_=!1):Math.abs(a)>2&&!L&&u.swipeClose&&(!S&&o<=100&&(m.style.opacity=p-o/100),c.classList.add("parvus--is-vertical-closing"),n[l].slider.style.transform=`translate3d(${k}px, ${Math.round(a)}px, 0)`,L=!1,_=!0)},he=()=>{r.addEventListener("keydown",ae),r.addEventListener("resize",ee),r.addEventListener("popstate",z),c.addEventListener("click",se),ve()&&(c.addEventListener("touchstart",ue),c.addEventListener("touchmove",ce),c.addEventListener("touchend",me)),u.simulateTouch&&(c.addEventListener("mousedown",oe),c.addEventListener("mouseup",de),c.addEventListener("mousemove",le))},ge=()=>{r.removeEventListener("keydown",ae),r.removeEventListener("resize",ee),r.removeEventListener("popstate",z),c.removeEventListener("click",se),ve()&&(c.removeEventListener("touchstart",ue),c.removeEventListener("touchmove",ce),c.removeEventListener("touchend",me)),u.simulateTouch&&(c.removeEventListener("mousedown",oe),c.removeEventListener("mouseup",de),c.removeEventListener("mousemove",le))},be=()=>"false"===c.getAttribute("aria-hidden"),ve=()=>"ontouchstart"in window,fe=function(e){const t=new CustomEvent(e,{detail:arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},cancelable:!0});c.dispatchEvent(t)},Ee=()=>{if(u=(t=>({selector:".lightbox",gallerySelector:null,captions:!0,captionsSelector:"self",captionsAttribute:"data-caption",docClose:!0,swipeClose:!0,simulateTouch:!0,threshold:50,backFocus:!0,hideScrollbar:!0,transitionDuration:300,transitionTimingFunction:"cubic-bezier(0.62, 0.16, 0.13, 1.01)",lightboxIndicatorIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',previousButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',nextButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',closeButtonIcon:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>',l10n:e,...t}))(t),!document.querySelectorAll(u.selector).length)return;if(B(),c||(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"),m=document.createElement("div"),m.classList.add("parvus__overlay"),c.appendChild(m),h=document.createElement("div"),h.className="parvus__toolbar",g=document.createElement("div"),b=document.createElement("div"),v=document.createElement("div"),v.className="parvus__controls",v.setAttribute("role","group"),v.setAttribute("aria-label",u.l10n.controlsLabel),b.appendChild(v),A=document.createElement("button"),A.className="parvus__btn parvus__btn--close",A.setAttribute("type","button"),A.setAttribute("aria-label",u.l10n.closeButtonLabel),A.innerHTML=u.closeButtonIcon,v.appendChild(A),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,v.appendChild(f),E=document.createElement("button"),E.className="parvus__btn parvus__btn--next",E.setAttribute("type","button"),E.setAttribute("aria-label",u.l10n.nextButtonLabel),E.innerHTML=u.nextButtonIcon,v.appendChild(E),y=document.createElement("div"),y.className="parvus__counter",g.appendChild(y),h.appendChild(g),h.appendChild(b),c.appendChild(h),document.body.appendChild(c)),null!==u.gallerySelector){document.querySelectorAll(u.gallerySelector).forEach(((e,t)=>{const r=t;e.querySelectorAll(u.selector).forEach((e=>{e.setAttribute("data-group",`parvus-gallery-${r}`),q(e)}))}))}document.querySelectorAll(`${u.selector}:not(.parvus-trigger)`).forEach(q)};return Ee(),{init:Ee,open:Y,close:z,select:R,previous:j,next:U,currentIndex:()=>d,add:q,remove:F,destroy:()=>{if(!c)return;be()&&z(),c.remove();document.querySelectorAll(".parvus-trigger").forEach(F),fe("destroy")},isOpen:be,on:(e,t)=>{c&&c.addEventListener(e,t)},off:(e,t)=>{c&&c.removeEventListener(e,t)}}}}));

22

package.json
{
"name": "parvus",
"type": "module",
"version": "2.3.3",
"version": "2.4.0",
"description": "An accessible, open-source image lightbox with no dependencies.",

@@ -16,16 +16,16 @@ "main": "./dist/js/parvus.js",

"devDependencies": {
"@babel/core": "^7.22.0",
"@babel/preset-env": "^7.22.0",
"@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@rollup/plugin-commonjs": "^25.0.3",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-terser": "^0.4.3",
"core-js": "^3.30.2",
"postcss": "^8.4.23",
"rollup": "^3.23.0",
"core-js": "^3.31.1",
"postcss": "^8.4.26",
"rollup": "^3.26.3",
"rollup-plugin-license": "^3.0.1",
"rollup-plugin-postcss": "^4.0.2",
"sass": "^1.62.1",
"standard": "^17.0.0",
"stylelint": "^15.6.2"
"sass": "^1.64.0",
"standard": "^17.1.0",
"stylelint": "^15.10.2"
},

@@ -32,0 +32,0 @@ "browserslist": [

21

README.md

@@ -17,3 +17,3 @@ # Parvus

- [Gallery](#gallery)
- [srcset](#srcset)
- [Responsive Images](#responsive-images)
- [Localization](#lokalization)

@@ -168,8 +168,16 @@ - [Options](#options)

### srcset
### Responsive Images
You can specify different image sources and sizes using the `data-srcset` attribute.
You can specify different image sources and sizes using the `data-srcset` and `data-sizes` attribute.
```html
<a href="path/to/image.jpg" class="lightbox" data-srcset="path/to/large.jpg 1200w, path/to/medium.jpg 1000w, path/to/small.jpg 700w">
<a href="path/to/image.jpg" class="lightbox"
data-srcset="path/to/small.jpg 700w,
path/to/medium.jpg 1000w,
path/to/large.jpg 1200w"
data-sizes="(max-width: 75em) 100vw,
75em"
>
<img src="path/to/thumbnail.jpg" alt="">

@@ -184,3 +192,3 @@ </a>

```js
import de from 'parvus/src/l10n/de.js'
import de from 'parvus/src/l10n/de'

@@ -237,2 +245,5 @@ const prvs = new Parvus({

// Browser scrollbar visibility
hideScrollbar: true,
// Duration of transition effects in milliseconds (ms)

@@ -239,0 +250,0 @@ transitionDuration: 300,

211

src/js/parvus.js
// Default language
import en from '../l10n/en.js'
import en from '../l10n/en'

@@ -68,8 +68,9 @@ export default function Parvus (userOptions) {

backFocus: true,
hideScrollbar: true,
transitionDuration: 300,
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',
lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="currentColor"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>',
l10n: en

@@ -105,2 +106,11 @@ }

/**
* Get scrollbar width
*
* @return {Number} - The scrollbar width
*/
const getScrollbarWidth = () => {
return BROWSER_WINDOW.innerWidth - document.documentElement.clientWidth;
}
/**
* Get the group from element

@@ -178,3 +188,3 @@ *

updateAttributes()
updateFocus()
updateSliderNavigationStatus()
updateCounter()

@@ -216,3 +226,3 @@ }

updateAttributes()
updateFocus()
updateSliderNavigationStatus()
updateCounter()

@@ -449,2 +459,7 @@ }

if (config.hideScrollbar) {
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`
document.body.style.overflow = 'hidden'
}
lightbox.classList.add('parvus--is-opening')

@@ -460,3 +475,3 @@ lightbox.setAttribute('aria-hidden', 'false')

updateAttributes()
updateFocus()
updateSliderNavigationStatus()
updateCounter()

@@ -477,4 +492,6 @@

const OPEN_EVENT = new CustomEvent('open', { detail: { source: el } })
lightbox.dispatchEvent(OPEN_EVENT)
// Create and dispatch a new event
fire('open', {
source: el
})

@@ -504,2 +521,3 @@ document.body.classList.add('parvus-is-open')

const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('.parvus-hidden')
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {

@@ -537,4 +555,7 @@ nonLightboxEl.removeAttribute('aria-hidden')

lightbox.classList.remove('parvus--is-vertical-closing')
IMAGE.style.transform = ''
IMAGE.removeEventListener('transitionend', transitionendHandler)
GROUPS[activeGroup].slider.remove()

@@ -545,3 +566,14 @@ GROUPS[activeGroup].slider = null

IMAGE.removeEventListener('transitionend', transitionendHandler)
counter.removeAttribute('aria-hidden')
previousButton.removeAttribute('aria-hidden')
previousButton.removeAttribute('aria-disabled')
nextButton.removeAttribute('aria-hidden')
nextButton.removeAttribute('aria-disabled')
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = ''
document.body.style.overflow = ''
}
}

@@ -551,3 +583,4 @@

const CLOSE_EVENT = new CustomEvent('close', {
// Create and dispatch a new event
fire('close', {
detail: {

@@ -558,4 +591,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

lightbox.dispatchEvent(CLOSE_EVENT)
document.body.classList.remove('parvus-is-open')

@@ -662,9 +693,2 @@ }

.then((loadedImage) => {
// Add srcset if available
const srcset = el.getAttribute('data-srcset')
if (srcset) {
loadedImage.setAttribute('srcset', srcset)
}
loadedImage.style.opacity = 0

@@ -710,14 +734,27 @@

// Add `sizes` attribute
if (el.hasAttribute('data-sizes') && el.getAttribute('data-sizes') !== '') {
IMAGE.setAttribute('sizes', el.getAttribute('data-sizes'))
}
// Add `srcset` attribute
if (el.hasAttribute('data-srcset') && el.getAttribute('data-srcset') !== '') {
IMAGE.setAttribute('srcset', el.getAttribute('data-srcset'))
}
// Add `src` attribute
if (el.tagName === 'A') {
IMAGE.setAttribute('src', el.href)
if (THUMBNAIL) {
IMAGE.alt = THUMBNAIL.alt || ''
} else {
IMAGE.alt = el.getAttribute('data-alt') || ''
}
} else {
IMAGE.alt = el.getAttribute('data-alt') || ''
IMAGE.setAttribute('src', el.getAttribute('data-target'))
}
// `alt` attribute
if (THUMBNAIL && THUMBNAIL.hasAttribute('alt') && THUMBNAIL.getAttribute('alt') !== '') {
IMAGE.alt = THUMBNAIL.alt
} else if (el.hasAttribute('data-alt') && el.getAttribute('data-alt') !== '') {
IMAGE.alt = el.getAttribute('data-alt')
} else {
IMAGE.alt = ''
}
}

@@ -800,6 +837,6 @@

if (index < OLD_INDEX) {
updateFocus('left')
updateSliderNavigationStatus()
preload(index - 1)
} else if (index > OLD_INDEX) {
updateFocus('right')
updateSliderNavigationStatus()
preload(index + 1)

@@ -813,3 +850,3 @@ }

// Create and dispatch a new event
const SELECT_EVENT = new CustomEvent('select', {
fire('select', {
detail: {

@@ -819,4 +856,2 @@ source: GROUPS[activeGroup].triggerElements[currentIndex]

})
lightbox.dispatchEvent(SELECT_EVENT)
}

@@ -831,2 +866,13 @@

select(currentIndex - 1)
} else {
const { slider } = GROUPS[activeGroup]
const offset = offsetTmp + config.threshold
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`
setTimeout(() => {
updateOffset()
}, 150)
})
}

@@ -840,6 +886,16 @@ }

const next = () => {
const { triggerElements } = GROUPS[activeGroup]
const { slider, triggerElements } = GROUPS[activeGroup]
if (currentIndex < triggerElements.length - 1) {
select(currentIndex + 1)
} else {
const offset = offsetTmp - config.threshold
requestAnimationFrame(() => {
slider.style.transform = `translate3d(${offset}px, 0, 0)`
setTimeout(() => {
updateOffset()
}, 150)
})
}

@@ -875,9 +931,9 @@ }

/**
* Update focus
* Update slider navigation status
*
* This function updates the focus based on the specified direction.
* This function updates the disabled status of the slider navigation buttons
* based on the current slide position.
*
* @param {String} dir - The direction of the focus update.
*/
const updateFocus = (dir) => {
const updateSliderNavigationStatus = () => {
const { triggerElements } = GROUPS[activeGroup]

@@ -888,30 +944,16 @@ const TOTAL_TRIGGER_ELEMENTS = triggerElements.length

const LAST_SLIDE = currentIndex === TOTAL_TRIGGER_ELEMENTS - 1
const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1
if (TOTAL_TRIGGER_ELEMENTS === 1) {
closeButton.focus()
} else if (FIRST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'true')
previousButton.setAttribute('aria-disabled', 'true')
nextButton.setAttribute('aria-hidden', 'false')
nextButton.setAttribute('aria-disabled', 'false')
if (TOTAL_TRIGGER_ELEMENTS > 1) {
if (FIRST_SLIDE) {
previousButton.setAttribute('aria-disabled', 'true')
nextButton.focus()
} else if (LAST_SLIDE && !HIDE_BUTTONS) {
previousButton.setAttribute('aria-hidden', 'false')
previousButton.setAttribute('aria-disabled', 'false')
nextButton.setAttribute('aria-hidden', 'true')
nextButton.setAttribute('aria-disabled', 'true')
nextButton.removeAttribute('aria-disabled')
} else if (LAST_SLIDE) {
previousButton.removeAttribute('aria-disabled')
previousButton.focus()
} else {
previousButton.setAttribute('aria-hidden', 'false')
previousButton.setAttribute('aria-disabled', 'false')
nextButton.setAttribute('aria-hidden', 'false')
nextButton.setAttribute('aria-disabled', 'false')
nextButton.setAttribute('aria-disabled', 'true')
} else {
previousButton.removeAttribute('aria-disabled')
if (dir === 'left') {
previousButton.focus()
} else {
nextButton.focus()
nextButton.removeAttribute('aria-disabled')
}

@@ -987,4 +1029,2 @@ }

const HIDE_BUTTONS = TOTAL_TRIGGER_ELEMENTS === 1
const SLIDER = GROUPS[activeGroup].slider

@@ -1024,10 +1064,16 @@ const SLIDER_ELEMENTS = GROUPS[activeGroup].sliderElements

// Show or hide counter
counter.setAttribute('aria-hidden', TOTAL_TRIGGER_ELEMENTS === 1 ? 'true' : 'false')
// Show or hide buttons
if (TOTAL_TRIGGER_ELEMENTS === 1) {
counter.setAttribute('aria-hidden', 'true')
// Show or hide buttons
previousButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false')
previousButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false')
nextButton.setAttribute('aria-hidden', HIDE_BUTTONS ? 'true' : 'false')
nextButton.setAttribute('aria-disabled', HIDE_BUTTONS ? 'true' : 'false')
previousButton.setAttribute('aria-hidden', 'true')
nextButton.setAttribute('aria-hidden', 'true')
} else {
counter.removeAttribute('aria-hidden')
previousButton.removeAttribute('aria-hidden')
nextButton.removeAttribute('aria-hidden')
}
}

@@ -1256,3 +1302,3 @@

slider.classList.remove('parvus__slider--is-dragging')
slider.style.willChange = 'auto'
slider.style.willChange = ''

@@ -1322,3 +1368,3 @@ if (drag.endX || drag.endY) {

slider.classList.remove('parvus__slider--is-dragging')
slider.style.willChange = 'auto'
slider.style.willChange = ''

@@ -1443,5 +1489,3 @@ if (drag.endX || drag.endY) {

// Create and dispatch a new event
const DESTROY_EVENT = new CustomEvent('destroy')
lightbox.dispatchEvent(DESTROY_EVENT)
fire('destroy')
}

@@ -1477,2 +1521,17 @@

/**
* Dispatch a custom event
*
* @param {String} type - The type of the event to dispatch
* @param {Function} event - The event object
*/
const fire = (type, event = {}) => {
const CUSTOM_EVENT = new CustomEvent(type, {
detail: event,
cancelable: true
})
lightbox.dispatchEvent(CUSTOM_EVENT)
}
/**
* Bind a specific event listener

@@ -1479,0 +1538,0 @@ *

dist/css/parvus.css

Sorry, the diff of this file is not supported yet

dist/css/parvus.min.css

Sorry, the diff of this file is not supported yet

src/scss/parvus.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc