Simplify lightbox

src/scripts/lightbox.js

@@ -1,29 +1,26 @@
 import { icon } from '@fortawesome/fontawesome-svg-core';
 import { getIcon } from '@scripts/icons';
 
-const defaults = {
-	albumLabel: 'Image %1 of %2',
-	alwaysShowNavOnTouchDevices: false,
-	fadeDuration: 600,
-	fitImagesInViewport: true,
-	imageFadeDuration: 600,
-	positionFromTop: 50,
-	resizeDuration: 700,
-	wrapAround: false,
-	disableScrolling: false,
-	sanitizeTitle: false,
-	hasVideo: true,
-	onMediaChange: () => {},
-	onClosing: () => {}
-};
-
-
-
-class Lightbox {
-	constructor() {
+export default class Lightbox {
+	constructor(options = {}) {
 		this.album = [];
 		this.currentImageIndex = 0;
-		this.options = { ...defaults };
+		this.options = {
+			albumLabel: 'Image %1 of %2',
+			alwaysShowNavOnTouchDevices: false,
+			fadeDuration: 600,
+			fitImagesInViewport: true,
+			imageFadeDuration: 600,
+			positionFromTop: 50,
+			resizeDuration: 700,
+			wrapAround: false,
+			disableScrolling: false,
+			sanitizeTitle: false,
+			hasVideo: true,
+			onMediaChange: () => {},
+			onClosing: () => {}
+		};
+		this.option(options);
 		this.gMouseDownOffsetX = 0;
 		this.gMouseDownOffsetY = 0;
 		this.resizeTimer = null;
@@ -123,8 +120,8 @@ class Lightbox {
 		this.video.autoplay = true;
 		this.image.insertAdjacentElement('afterend', this.video);
 
-		this.overlay.style.display = 'none';
-		this.lightbox.style.display = 'none';
+		this.setVisible(this.overlay, false);
+		this.setVisible(this.lightbox, false);
 
 		this.containerPadding = this.getBoxMetrics(this.container, 'padding');
 		this.imageBorderWidth = this.getBoxMetrics(this.image, 'border');
@@ -157,6 +154,7 @@ class Lightbox {
 		});
 		this.closeButton.addEventListener('click', (event) => {
 			event.preventDefault();
+			event.stopPropagation();
 			this.end();
 		});
 		this.closeButton.addEventListener('keyup', (event) => {
@@ -381,19 +379,19 @@ class Lightbox {
 	}
 
 	updateNav() {
-		this.nav.style.display = 'block';
-		this.prev.style.display = 'none';
-		this.next.style.display = 'none';
+		this.setVisible(this.nav, true);
+		this.setVisible(this.prev, false);
+		this.setVisible(this.next, false);
 
 		const alwaysShowNav = ('ontouchstart' in window) && this.options.alwaysShowNavOnTouchDevices;
 		if (this.album.length <= 1) return;
 
 		if (this.options.wrapAround) {
-			this.prev.style.display = '';
-			this.next.style.display = '';
+			this.setVisible(this.prev, true);
+			this.setVisible(this.next, true);
 		} else {
-			if (this.currentImageIndex > 0) this.prev.style.display = '';
-			if (this.currentImageIndex < this.album.length - 1) this.next.style.display = '';
+			if (this.currentImageIndex > 0) this.setVisible(this.prev, true);
+			if (this.currentImageIndex < this.album.length - 1) this.setVisible(this.next, true);
 		}
 
 		if (alwaysShowNav) {
@@ -413,12 +411,12 @@ class Lightbox {
 			if (this.options.sanitizeTitle) this.caption.textContent = media.title;
 			else this.caption.innerHTML = media.title;
 			this.fade(this.caption, true, 200);
-			this.fade(this.closeButton, true, 200);
 		} else {
 			this.caption.textContent = '';
-			this.caption.style.display = 'none';
+			this.setVisible(this.caption, false);
 		}
 
+		this.fade(this.closeButton, true, 200);
 		this.outerContainer.classList.remove('animating');
 		this.fade(this.dataContainer, true, this.options.resizeDuration);
 	}
@@ -529,24 +527,31 @@ class Lightbox {
 
 	hideElements(elements) {
 		elements.forEach((element) => {
-			if (element) element.style.display = 'none';
+			this.setVisible(element, false);
 		});
 	}
 
+	setVisible(element, visible) {
+		if (!element) return;
+		element.style.visibility = visible ? 'visible' : 'hidden';
+		element.style.pointerEvents = visible ? '' : 'none';
+	}
+
 	fade(element, show, duration, done) {
 		if (!element) return;
 
 		const safeDuration = duration || 0;
 		element.style.transition = `opacity ${safeDuration}ms`;
 		if (show) {
-			element.style.display = element === this.lightbox ? 'flex' : 'block';
+			this.setVisible(element, true);
 			requestAnimationFrame(() => {
 				element.style.opacity = element === this.overlay ? '0.8' : '1';
 			});
 		} else {
 			element.style.opacity = '0';
+			element.style.pointerEvents = 'none';
 			window.setTimeout(() => {
-				element.style.display = 'none';
+				this.setVisible(element, false);
 			}, safeDuration);
 		}
 
@@ -568,9 +573,4 @@ class Lightbox {
 		if (this.options.disableScrolling) document.body.classList.remove('lb-disable-scrolling');
 		this.options.onClosing();
 	}
-}
-
-const lightbox = new Lightbox();
-
-export const options = defaults;
-export default lightbox;
+}