Skip to content

Commit e703293

Browse files
deoostfreesdeoostfrees
committed
[FEATURE] Use the native HTML dialog element
Related: #60
1 parent e3f9bd4 commit e703293

File tree

9 files changed

+36
-127
lines changed

9 files changed

+36
-127
lines changed

‎README.md

-3
Original file line numberDiff line numberDiff line change
@@ -240,9 +240,6 @@ The following options are available:
240240
// Touch dragging threshold (in pixels)
241241
threshold: 100,
242242

243-
// Setting focus back to the trigger element after closing Parvus
244-
backFocus: true,
245-
246243
// Browser scrollbar visibility
247244
hideScrollbar: true,
248245

‎dist/css/parvus.css

+10-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
--parvus-loader-color: hsl(228deg 24% 23%);
1818
}
1919

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

@@ -49,20 +49,25 @@ body:has(.parvus[aria-hidden=false]) {
4949
*
5050
*/
5151
.parvus {
52+
background-color: transparent;
53+
block-size: 100%;
5254
box-sizing: border-box;
55+
color: var(--parvus-color);
5356
contain: strict;
57+
inline-size: 100%;
5458
inset: 0;
59+
max-block-size: unset;
60+
max-inline-size: unset;
5561
overflow: hidden;
5662
overscroll-behavior: contain;
5763
position: fixed;
58-
z-index: 1337;
64+
}
65+
.parvus::backdrop {
66+
display: none;
5967
}
6068
.parvus *, .parvus *::before, .parvus *::after {
6169
box-sizing: border-box;
6270
}
63-
.parvus[aria-hidden=true] {
64-
display: none;
65-
}
6671
.parvus__overlay {
6772
background-color: var(--parvus-background-color);
6873
color: var(--parvus-color);

‎dist/css/parvus.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/parvus.esm.js

+4-35
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ function Parvus(userOptions) {
102102
let isDraggingX = false;
103103
let isDraggingY = false;
104104
let pointerDown = false;
105-
let lastFocus = null;
106105
let offset = null;
107106
let offsetTmp = null;
108107
let resizeTicking = false;
@@ -128,7 +127,6 @@ function Parvus(userOptions) {
128127
swipeClose: true,
129128
simulateTouch: true,
130129
threshold: 50,
131-
backFocus: true,
132130
hideScrollbar: true,
133131
transitionDuration: 300,
134132
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
@@ -258,11 +256,7 @@ function Parvus(userOptions) {
258256
*/
259257
const createLightbox = () => {
260258
// Create the lightbox container
261-
lightbox = document.createElement('div');
262-
lightbox.setAttribute('role', 'dialog');
263-
lightbox.setAttribute('aria-modal', 'true');
264-
lightbox.setAttribute('aria-hidden', 'true');
265-
lightbox.setAttribute('tabindex', '-1');
259+
lightbox = document.createElement('dialog');
266260
lightbox.setAttribute('aria-label', config.l10n.lightboxLabel);
267261
lightbox.classList.add('parvus');
268262

@@ -444,30 +438,23 @@ function Parvus(userOptions) {
444438
throw new Error('Ups, I can\'t find the element.');
445439
}
446440
currentIndex = GROUPS[activeGroup].triggerElements.indexOf(el);
447-
lastFocus = document.activeElement;
448441
history.pushState({
449442
parvus: 'close'
450443
}, 'Image', window.location.href);
451444
bindEvents();
452-
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('body > *:not([aria-hidden="true"])');
453-
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
454-
nonLightboxEl.setAttribute('aria-hidden', 'true');
455-
nonLightboxEl.classList.add('parvus-hidden');
456-
});
457445
if (config.hideScrollbar) {
458446
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
459447
document.body.style.overflow = 'hidden';
460448
}
461449
lightbox.classList.add('parvus--is-opening');
462-
lightbox.setAttribute('aria-hidden', 'false');
450+
lightbox.showModal();
463451
createSlider();
464452
createSlide(currentIndex);
465453
GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false');
466454
updateOffset();
467455
updateAttributes();
468456
updateSliderNavigationStatus();
469457
updateCounter();
470-
setFocusToFirstItem();
471458
loadSlide(currentIndex);
472459
createImage(el, currentIndex, () => {
473460
loadImage(currentIndex, true);
@@ -498,11 +485,6 @@ function Parvus(userOptions) {
498485
if (history.state?.parvus === 'close') {
499486
history.back();
500487
}
501-
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('.parvus-hidden');
502-
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
503-
nonLightboxEl.removeAttribute('aria-hidden');
504-
nonLightboxEl.classList.remove('parvus-hidden');
505-
});
506488
lightbox.classList.add('parvus--is-closing');
507489
requestAnimationFrame(() => {
508490
const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect();
@@ -519,11 +501,7 @@ function Parvus(userOptions) {
519501
});
520502
const transitionendHandler = () => {
521503
leaveSlide(currentIndex);
522-
lastFocus = config.backFocus ? lastFocus : GROUPS[activeGroup].triggerElements[currentIndex];
523-
lastFocus.focus({
524-
preventScroll: true
525-
});
526-
lightbox.setAttribute('aria-hidden', 'true');
504+
lightbox.close();
527505
lightbox.classList.remove('parvus--is-closing');
528506
lightbox.classList.remove('parvus--is-vertical-closing');
529507
IMAGE.style.transform = '';
@@ -1043,15 +1021,6 @@ function Parvus(userOptions) {
10431021
event.stopPropagation();
10441022
};
10451023

1046-
/**
1047-
* Set focus to the first item in the list
1048-
*
1049-
*/
1050-
const setFocusToFirstItem = () => {
1051-
const FOCUSABLE_CHILDREN = getFocusableChildren(lightbox);
1052-
FOCUSABLE_CHILDREN[0].focus();
1053-
};
1054-
10551024
/**
10561025
* Event handler for the keydown event
10571026
*
@@ -1360,7 +1329,7 @@ function Parvus(userOptions) {
13601329
* @returns {boolean} - True if Parvus is open, otherwise false
13611330
*/
13621331
const isOpen = () => {
1363-
return lightbox.getAttribute('aria-hidden') === 'false';
1332+
return lightbox.hasAttribute('open');
13641333
};
13651334

13661335
/**

‎dist/js/parvus.esm.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/parvus.js

+4-35
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@
108108
let isDraggingX = false;
109109
let isDraggingY = false;
110110
let pointerDown = false;
111-
let lastFocus = null;
112111
let offset = null;
113112
let offsetTmp = null;
114113
let resizeTicking = false;
@@ -134,7 +133,6 @@
134133
swipeClose: true,
135134
simulateTouch: true,
136135
threshold: 50,
137-
backFocus: true,
138136
hideScrollbar: true,
139137
transitionDuration: 300,
140138
transitionTimingFunction: 'cubic-bezier(0.62, 0.16, 0.13, 1.01)',
@@ -264,11 +262,7 @@
264262
*/
265263
const createLightbox = () => {
266264
// Create the lightbox container
267-
lightbox = document.createElement('div');
268-
lightbox.setAttribute('role', 'dialog');
269-
lightbox.setAttribute('aria-modal', 'true');
270-
lightbox.setAttribute('aria-hidden', 'true');
271-
lightbox.setAttribute('tabindex', '-1');
265+
lightbox = document.createElement('dialog');
272266
lightbox.setAttribute('aria-label', config.l10n.lightboxLabel);
273267
lightbox.classList.add('parvus');
274268

@@ -450,30 +444,23 @@
450444
throw new Error('Ups, I can\'t find the element.');
451445
}
452446
currentIndex = GROUPS[activeGroup].triggerElements.indexOf(el);
453-
lastFocus = document.activeElement;
454447
history.pushState({
455448
parvus: 'close'
456449
}, 'Image', window.location.href);
457450
bindEvents();
458-
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('body > *:not([aria-hidden="true"])');
459-
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
460-
nonLightboxEl.setAttribute('aria-hidden', 'true');
461-
nonLightboxEl.classList.add('parvus-hidden');
462-
});
463451
if (config.hideScrollbar) {
464452
document.body.style.marginInlineEnd = `${getScrollbarWidth()}px`;
465453
document.body.style.overflow = 'hidden';
466454
}
467455
lightbox.classList.add('parvus--is-opening');
468-
lightbox.setAttribute('aria-hidden', 'false');
456+
lightbox.showModal();
469457
createSlider();
470458
createSlide(currentIndex);
471459
GROUPS[activeGroup].slider.setAttribute('aria-hidden', 'false');
472460
updateOffset();
473461
updateAttributes();
474462
updateSliderNavigationStatus();
475463
updateCounter();
476-
setFocusToFirstItem();
477464
loadSlide(currentIndex);
478465
createImage(el, currentIndex, () => {
479466
loadImage(currentIndex, true);
@@ -504,11 +491,6 @@
504491
if (history.state?.parvus === 'close') {
505492
history.back();
506493
}
507-
const NON_LIGHTBOX_ELEMENTS = document.querySelectorAll('.parvus-hidden');
508-
NON_LIGHTBOX_ELEMENTS.forEach(nonLightboxEl => {
509-
nonLightboxEl.removeAttribute('aria-hidden');
510-
nonLightboxEl.classList.remove('parvus-hidden');
511-
});
512494
lightbox.classList.add('parvus--is-closing');
513495
requestAnimationFrame(() => {
514496
const THUMBNAIL_SIZE = THUMBNAIL.getBoundingClientRect();
@@ -525,11 +507,7 @@
525507
});
526508
const transitionendHandler = () => {
527509
leaveSlide(currentIndex);
528-
lastFocus = config.backFocus ? lastFocus : GROUPS[activeGroup].triggerElements[currentIndex];
529-
lastFocus.focus({
530-
preventScroll: true
531-
});
532-
lightbox.setAttribute('aria-hidden', 'true');
510+
lightbox.close();
533511
lightbox.classList.remove('parvus--is-closing');
534512
lightbox.classList.remove('parvus--is-vertical-closing');
535513
IMAGE.style.transform = '';
@@ -1049,15 +1027,6 @@
10491027
event.stopPropagation();
10501028
};
10511029

1052-
/**
1053-
* Set focus to the first item in the list
1054-
*
1055-
*/
1056-
const setFocusToFirstItem = () => {
1057-
const FOCUSABLE_CHILDREN = getFocusableChildren(lightbox);
1058-
FOCUSABLE_CHILDREN[0].focus();
1059-
};
1060-
10611030
/**
10621031
* Event handler for the keydown event
10631032
*
@@ -1366,7 +1335,7 @@
13661335
* @returns {boolean} - True if Parvus is open, otherwise false
13671336
*/
13681337
const isOpen = () => {
1369-
return lightbox.getAttribute('aria-hidden') === 'false';
1338+
return lightbox.hasAttribute('open');
13701339
};
13711340

13721341
/**

‎dist/js/parvus.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)