Skip to content

Commit

Permalink
[FEATURE] Use the native HTML dialog element
Browse files Browse the repository at this point in the history 
Related: #60
  • Loading branch information
@deoostfrees
deoostfrees committed Jul 10, 2024
1 parent e3f9bd4 commit e703293
Show file tree
Hide file tree
Showing 9 changed files with 36 additions and 127 deletions.
3 changes: 0 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,9 +240,6 @@ The following options are available:
// Touch dragging threshold (in pixels)
threshold: 100,

// Setting focus back to the trigger element after closing Parvus
backFocus: true,

// Browser scrollbar visibility
hideScrollbar: true,

Expand Down
15 changes: 10 additions & 5 deletions dist/css/parvus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
--parvus-loader-color: hsl(228deg 24% 23%);
}

body:has(.parvus[aria-hidden=false]) {
body:has(.parvus[open]) {
touch-action: none;
}

Expand Down Expand Up @@ -49,20 +49,25 @@ body:has(.parvus[aria-hidden=false]) {
*
*/
.parvus {
background-color: transparent;
block-size: 100%;
box-sizing: border-box;
color: var(--parvus-color);
contain: strict;
inline-size: 100%;
inset: 0;
max-block-size: unset;
max-inline-size: unset;
overflow: hidden;
overscroll-behavior: contain;
position: fixed;
z-index: 1337;
}
.parvus::backdrop {
display: none;
}
.parvus *, .parvus *::before, .parvus *::after {
box-sizing: border-box;
}
.parvus[aria-hidden=true] {
display: none;
}
.parvus__overlay {
background-color: var(--parvus-background-color);
color: var(--parvus-color);
Expand Down
2 changes: 1 addition & 1 deletion dist/css/parvus.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 4 additions & 35 deletions dist/js/parvus.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ function Parvus(userOptions) {
let isDraggingX = false;
let isDraggingY = false;
let pointerDown = false;
let lastFocus = null;
let offset = null;
let offsetTmp = null;
let resizeTicking = false;
Expand All @@ -128,7 +127,6 @@ function Parvus(userOptions) {
swipeClose: true,
simulateTouch: true,
threshold: 50,
backFocus: true,
hideScrollbar: true,
transitionDuration: 300,
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
Expand Down Expand Up @@ -258,11 +256,7 @@ function Parvus(userOptions) {
*/
const createLightbox = () => {
// Create the lightbox container
lightbox = document.createElement('div');
lightbox.setAttribute('role', 'dialog');
lightbox.setAttribute('aria-modal', 'true');
lightbox.setAttribute('aria-hidden', 'true');
lightbox.setAttribute('tabindex', '-1');
lightbox = document.createElement('dialog');
lightbox.setAttribute('aria-label', config.l10n.lightboxLabel);
lightbox.classList.add('parvus');

Expand Down Expand Up @@ -444,30 +438,23 @@ function Parvus(userOptions) {
throw new Error('Ups, I can\'t find the element.');
}
currentIndex = GROUPS[activeGroup].triggerElements.indexOf(el);
lastFocus = document.activeElement;
history.pushState({
parvus: 'close'
}, 'Image', window.location.href);
bindEvents();
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('body > *:not([aria-hidden="true"])');
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
nonLightboxEl.setAttribute('aria-hidden', 'true');
nonLightboxEl.classList.add('parvus-hidden');
});
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
document.body.style.overflow = 'hidden';
}
lightbox.classList.add('parvus--is-opening');
lightbox.setAttribute('aria-hidden', 'false');
lightbox.showModal();
createSlider();
createSlide(currentIndex);
GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false');
updateOffset();
updateAttributes();
updateSliderNavigationStatus();
updateCounter();
setFocusToFirstItem();
loadSlide(currentIndex);
createImage(el, currentIndex, () => {
loadImage(currentIndex, true);
Expand Down Expand Up @@ -498,11 +485,6 @@ function Parvus(userOptions) {
if (history.state?.parvus === 'close') {
history.back();
}
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('.parvus-hidden');
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
nonLightboxEl.removeAttribute('aria-hidden');
nonLightboxEl.classList.remove('parvus-hidden');
});
lightbox.classList.add('parvus--is-closing');
requestAnimationFrame(() => {
const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect();
Expand All @@ -519,11 +501,7 @@ function Parvus(userOptions) {
});
const transitionendHandler = () => {
leaveSlide(currentIndex);
lastFocus = config.backFocus ? lastFocus : GROUPS[activeGroup].triggerElements[currentIndex];
lastFocus.focus({
preventScroll: true
});
lightbox.setAttribute('aria-hidden', 'true');
lightbox.close();
lightbox.classList.remove('parvus--is-closing');
lightbox.classList.remove('parvus--is-vertical-closing');
IMAGE.style.transform = '';
Expand Down Expand Up @@ -1043,15 +1021,6 @@ function Parvus(userOptions) {
event.stopPropagation();
};

/**
* Set focus to the first item in the list
*
*/
const setFocusToFirstItem = () => {
const FOCUSABLE_CHILDREN = getFocusableChildren(lightbox);
FOCUSABLE_CHILDREN[0].focus();
};

/**
* Event handler for the keydown event
*
Expand Down Expand Up @@ -1360,7 +1329,7 @@ function Parvus(userOptions) {
* @returns {boolean} - True if Parvus is open, otherwise false
*/
const isOpen = () => {
return lightbox.getAttribute('aria-hidden') === 'false';
return lightbox.hasAttribute('open');
};

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/js/parvus.esm.min.js
View file

Large diffs are not rendered by default.

39 changes: 4 additions & 35 deletions dist/js/parvus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@
let isDraggingX = false;
let isDraggingY = false;
let pointerDown = false;
let lastFocus = null;
let offset = null;
let offsetTmp = null;
let resizeTicking = false;
Expand All @@ -134,7 +133,6 @@
swipeClose: true,
simulateTouch: true,
threshold: 50,
backFocus: true,
hideScrollbar: true,
transitionDuration: 300,
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
Expand Down Expand Up @@ -264,11 +262,7 @@
*/
const createLightbox = () => {
// Create the lightbox container
lightbox = document.createElement('div');
lightbox.setAttribute('role', 'dialog');
lightbox.setAttribute('aria-modal', 'true');
lightbox.setAttribute('aria-hidden', 'true');
lightbox.setAttribute('tabindex', '-1');
lightbox = document.createElement('dialog');
lightbox.setAttribute('aria-label', config.l10n.lightboxLabel);
lightbox.classList.add('parvus');

Expand Down Expand Up @@ -450,30 +444,23 @@
throw new Error('Ups, I can\'t find the element.');
}
currentIndex = GROUPS[activeGroup].triggerElements.indexOf(el);
lastFocus = document.activeElement;
history.pushState({
parvus: 'close'
}, 'Image', window.location.href);
bindEvents();
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('body > *:not([aria-hidden="true"])');
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
nonLightboxEl.setAttribute('aria-hidden', 'true');
nonLightboxEl.classList.add('parvus-hidden');
});
if (config.hideScrollbar) {
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
document.body.style.overflow = 'hidden';
}
lightbox.classList.add('parvus--is-opening');
lightbox.setAttribute('aria-hidden', 'false');
lightbox.showModal();
createSlider();
createSlide(currentIndex);
GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false');
updateOffset();
updateAttributes();
updateSliderNavigationStatus();
updateCounter();
setFocusToFirstItem();
loadSlide(currentIndex);
createImage(el, currentIndex, () => {
loadImage(currentIndex, true);
Expand Down Expand Up @@ -504,11 +491,6 @@
if (history.state?.parvus === 'close') {
history.back();
}
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('.parvus-hidden');
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
nonLightboxEl.removeAttribute('aria-hidden');
nonLightboxEl.classList.remove('parvus-hidden');
});
lightbox.classList.add('parvus--is-closing');
requestAnimationFrame(() => {
const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect();
Expand All @@ -525,11 +507,7 @@
});
const transitionendHandler = () => {
leaveSlide(currentIndex);
lastFocus = config.backFocus ? lastFocus : GROUPS[activeGroup].triggerElements[currentIndex];
lastFocus.focus({
preventScroll: true
});
lightbox.setAttribute('aria-hidden', 'true');
lightbox.close();
lightbox.classList.remove('parvus--is-closing');
lightbox.classList.remove('parvus--is-vertical-closing');
IMAGE.style.transform = '';
Expand Down Expand Up @@ -1049,15 +1027,6 @@
event.stopPropagation();
};

/**
* Set focus to the first item in the list
*
*/
const setFocusToFirstItem = () => {
const FOCUSABLE_CHILDREN = getFocusableChildren(lightbox);
FOCUSABLE_CHILDREN[0].focus();
};

/**
* Event handler for the keydown event
*
Expand Down Expand Up @@ -1366,7 +1335,7 @@
* @returns {boolean} - True if Parvus is open, otherwise false
*/
const isOpen = () => {
return lightbox.getAttribute('aria-hidden') === 'false';
return lightbox.hasAttribute('open');
};

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/js/parvus.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e703293

Please sign in to comment.