@tomasvn/glightbox 3.3.3 → 3.3.5

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@tomasvn/glightbox",
-  "version": "3.3.3",
+  "version": "3.3.5",
   "description": "Pure Javascript lightbox",
   "main": "dist/js/glightbox.min.js",
   "scripts": {
-    "watch": "node development/watcher.js"
+    "build": "node development/build.js",
+    "test": "node --test",
+    "watch": "node development/watcher.js",
+    "lint": "eslint \"src/js/**/*.js\"",
+    "format": "prettier --write \"src/js/**/*.js\"",
+    "prepare": "husky"
   },
   "publishConfig": {
     "access": "public"
@@ -36,22 +41,20 @@
     "clean-css": "^4.2.3",
     "css-mqpacker": "^7.0.0",
     "eslint": "^7.16.0",
-    "fs-extra": "^8.1.0",
     "fs-jetpack": "^2.4.0",
+    "husky": "^9.1.7",
     "install": "^0.13.0",
     "node-notifier": "^5.4.0",
-    "npm": "^6.14.10",
     "postcss": "^7.0.32",
     "postcss-nested": "^4.1.1",
     "postcss-preset-env": "^6.5.0",
     "postcss-prettify": "^0.3.4",
+    "prettier": "^3.10.1",
     "rollup": "^1.32.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^4.0.0",
-    "temporary": "^1.1.0",
     "terser": "^4.8.0",
     "uninstall": "0.0.0"
-  },
-  "dependencies": {}
+  }
 }

package/src/js/.jshintrc

@@ -3,4 +3,4 @@
     "esversion": 6,
     "maxparams": 4,
     "asi": false
-}
+}

package/src/js/core/drag.js

@@ -50,11 +50,7 @@ export default class DragSlides {
 
         let clicked = e.target.nodeName.toLowerCase();
         let exludeClicks = ['input', 'select', 'textarea', 'button', 'a'];
-        if (
-            e.target.classList.contains('nodrag') ||
-            closest(e.target, '.nodrag') ||
-            exludeClicks.indexOf(clicked) !== -1
-        ) {
+        if (e.target.classList.contains('nodrag') || closest(e.target, '.nodrag') || exludeClicks.indexOf(clicked) !== -1) {
             this.active = false;
             return;
         }
@@ -131,11 +127,7 @@ export default class DragSlides {
             let currentYInt = Math.abs(this.currentY);
 
             // Horizontal drag
-            if (
-                currentXInt > 0 &&
-                currentXInt >= Math.abs(this.currentY) &&
-                (!this.lastDirection || this.lastDirection == 'x')
-            ) {
+            if (currentXInt > 0 && currentXInt >= Math.abs(this.currentY) && (!this.lastDirection || this.lastDirection == 'x')) {
                 this.yOffset = 0;
                 this.lastDirection = 'x';
                 this.setTranslate(this.dragContainer, this.currentX, 0);
@@ -158,12 +150,7 @@ export default class DragSlides {
             }
 
             // Vertical drag
-            if (
-                this.toleranceY > 0 &&
-                currentYInt > 0 &&
-                currentYInt >= currentXInt &&
-                (!this.lastDirection || this.lastDirection == 'y')
-            ) {
+            if (this.toleranceY > 0 && currentYInt > 0 && currentYInt >= currentXInt && (!this.lastDirection || this.lastDirection == 'y')) {
                 this.xOffset = 0;
                 this.lastDirection = 'y';
                 this.setTranslate(this.dragContainer, 0, this.currentY);
@@ -188,10 +175,7 @@ export default class DragSlides {
         if (currentXInt >= this.toleranceX) {
             let dragDir = this.currentX > 0 ? 'right' : 'left';
 
-            if (
-                (dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild) ||
-                (dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild)
-            ) {
+            if ((dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild) || (dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild)) {
                 doChange = dragDir;
             }
         }

package/src/js/core/keyboard-navigation.js

@@ -25,7 +25,10 @@ function getNextFocusElement(current = -1) {
     each(btns, (btn) => {
         orders.push(btn.getAttribute('data-taborder'));
     });
-    const highestOrder = Math.max.apply(Math, orders.map((order) => parseInt(order)));
+    const highestOrder = Math.max.apply(
+        Math,
+        orders.map((order) => parseInt(order))
+    );
 
     let newIndex = current < 0 ? 1 : current + 1;
     if (newIndex > highestOrder) {

package/src/js/core/slide-parser.js

@@ -38,7 +38,12 @@ export default class SlideConfigParser {
         if (url.match(/\.(jpeg|jpg|jpe|gif|png|apn|webp|avif|svg)/) !== null) {
             return 'image';
         }
-        if (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/)) {
+        if (
+            url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) ||
+            url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) ||
+            url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) ||
+            url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/)
+        ) {
             return 'video';
         }
         if (url.match(/vimeo\.com\/([0-9]*)/)) {

package/src/js/core/slide.js

@@ -184,6 +184,7 @@ export default class Slide {
             onElement: moreLink,
             withCallback: (event, target) => {
                 event.preventDefault();
+                event.stopPropagation();
                 const body = document.body;
 
                 let desc = closest(target, '.gslide-desc');
@@ -191,13 +192,18 @@ export default class Slide {
                     return false;
                 }
 
-                desc.innerHTML = data.description;
+                desc.innerHTML = `${data.description} <a href="#" class="desc-less">${this.instance.settings.lessText}</a>`;
                 addClass(body, 'gdesc-open');
 
                 let shortEvent = addEvent('click', {
                     onElement: [body, closest(desc, '.gslide-description')],
                     withCallback: (event, target) => {
-                        if (event.target.nodeName.toLowerCase() !== 'a') {
+                        const isLessLink = hasClass(event.target, 'desc-less');
+                        if (event.target.nodeName.toLowerCase() !== 'a' || isLessLink) {
+                            event.stopPropagation();
+                            if (isLessLink) {
+                                event.preventDefault();
+                            }
                             removeClass(body, 'gdesc-open');
                             addClass(body, 'gdesc-closed');
                             desc.innerHTML = data.smallDescription;

package/src/js/core/touch-navigation.js

@@ -8,7 +8,11 @@
 import TouchEvents from './touch-events.js';
 import { addEvent, addClass, removeClass, hasClass, closest, whichTransitionEvent, cssTransform, windowSize } from '../utils/helpers.js';
 
-function resetSlideMove(slide) {
+export function resetSlideMove(slide) {
+    if (!slide) {
+        return;
+    }
+
     const transitionEnd = whichTransitionEvent();
     const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 

package/src/js/glightbox.js

@@ -10,7 +10,7 @@ import Slide from './core/slide.js';
 import touchNavigation from './core/touch-navigation.js';
 import * as _ from './utils/helpers.js';
 
-const version = '3.3.1';
+const version = '3.3.4';
 const isMobile = _.isMobile();
 const isTouch = _.isTouch();
 const html = document.getElementsByTagName('html')[0];
@@ -21,6 +21,9 @@ const defaults = {
     skin: 'clean',
     theme: 'clean',
     closeButton: true,
+    closeButtonText: 'Close',
+    prevButtonText: 'Previous',
+    nextButtonText: 'Next',
     startAt: null,
     autoplayVideos: true,
     autofocusVideos: true,
@@ -74,6 +77,7 @@ const defaults = {
     closeEffect: 'zoom', // fade, zoom, none
     slideEffect: 'slide', // fade, slide, zoom, none
     moreText: 'See more',
+    lessText: 'See less',
     moreLength: 60,
     cssEfects: {
         fade: { in: 'fadeIn', out: 'fadeOut' },
@@ -116,9 +120,9 @@ defaults.lightboxHTML = `<div id="glightbox-body" class="glightbox-container" ta
     <div class="goverlay"></div>
     <div class="gcontainer">
     <div id="glightbox-slider" class="gslider"></div>
-    <button class="gclose gbtn" aria-label="Close" data-taborder="3">{closeSVG}</button>
-    <button class="gprev gbtn" aria-label="Previous" data-taborder="2">{prevSVG}</button>
-    <button class="gnext gbtn" aria-label="Next" data-taborder="1">{nextSVG}</button>
+    <button class="gclose gbtn" aria-label="{closeButtonText}" data-taborder="3">{closeSVG}</button>
+    <button class="gprev gbtn" aria-label="{prevButtonText}" data-taborder="2">{prevSVG}</button>
+    <button class="gnext gbtn" aria-label="{nextButtonText}" data-taborder="1">{nextSVG}</button>
 </div>
 </div>`;
 
@@ -954,11 +958,17 @@ class GlightboxInit {
         const nextSVG = _.has(this.settings.svg, 'next') ? this.settings.svg.next : '';
         const prevSVG = _.has(this.settings.svg, 'prev') ? this.settings.svg.prev : '';
         const closeSVG = _.has(this.settings.svg, 'close') ? this.settings.svg.close : '';
+        const closeButtonText = this.settings.closeButtonText ?? 'Close';
+        const prevButtonText = this.settings.prevButtonText ?? 'Previous';
+        const nextButtonText = this.settings.nextButtonText ?? 'Next';
 
         let lightboxHTML = this.settings.lightboxHTML;
         lightboxHTML = lightboxHTML.replace(/{nextSVG}/g, nextSVG);
         lightboxHTML = lightboxHTML.replace(/{prevSVG}/g, prevSVG);
         lightboxHTML = lightboxHTML.replace(/{closeSVG}/g, closeSVG);
+        lightboxHTML = lightboxHTML.replace(/{closeButtonText}/g, closeButtonText);
+        lightboxHTML = lightboxHTML.replace(/{prevButtonText}/g, prevButtonText);
+        lightboxHTML = lightboxHTML.replace(/{nextButtonText}/g, nextButtonText);
 
         lightboxHTML = _.createHTML(lightboxHTML);
         document.body.appendChild(lightboxHTML);

package/src/js/slides/video.js

@@ -37,7 +37,10 @@ export default function slideVideo(slide, data, index, callback) {
         // Set youtube videos
         if (
             !provider &&
-            (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) || url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/))
+            (url.match(/(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) ||
+                url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/) ||
+                url.match(/(youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9\-_]+)/) ||
+                url.match(/(youtube\.com|youtube-nocookie\.com)\/shorts\/([a-zA-Z0-9\-_]+)/))
         ) {
             provider = 'youtube';
         }

package/src/postcss/glightbox.css

@@ -370,7 +370,7 @@
     }
 }
 
-.gdesc-open {
+.glightbox-mobile.gdesc-open {
     .gslide-media {
         transition: opacity 0.5s ease;
         opacity: 0.4;
@@ -379,7 +379,7 @@
         padding-bottom: 30px;
     }
 }
-.gdesc-closed {
+.glightbox-mobile.gdesc-closed {
     .gslide-media {
         transition: opacity 0.5s ease;
         opacity: 1;
@@ -524,6 +524,7 @@ iframe.wait-autoplay {
     .gslide-title {
         font-size: 1em;
         font-weight: normal;
+        font-family: Arial, sans-serif;
         color: #000;
         margin-bottom: 19px;
         line-height: 1.4em;
@@ -531,6 +532,7 @@ iframe.wait-autoplay {
 
     .gslide-desc {
         font-size: 0.86em;
+        font-family: Arial, sans-serif;
         margin-bottom: 0;
         line-height: 1.4em;
     }

package/tests/slide.test.mjs

@@ -0,0 +1,130 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import Slide from '../src/js/core/slide.js';
+import { closest } from '../src/js/utils/helpers.js';
+
+class FakeElement {
+    constructor(nodeName, classes = [], parentElement = null) {
+        this.nodeType = 1;
+        this.nodeName = nodeName;
+        this.parentElement = parentElement;
+        this.listeners = {};
+        this.children = [];
+        this.innerHTML = '';
+        this.classList = {
+            contains: (name) => classes.includes(name),
+            add: (name) => {
+                if (!classes.includes(name)) {
+                    classes.push(name);
+                }
+            },
+            remove: (name) => {
+                const index = classes.indexOf(name);
+                if (index >= 0) {
+                    classes.splice(index, 1);
+                }
+            }
+        };
+        if (parentElement) {
+            parentElement.children.push(this);
+        }
+    }
+
+    addEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name] || [];
+        this.listeners[name].push(callback);
+    }
+
+    removeEventListener(name, callback) {
+        this.listeners[name] = (this.listeners[name] || []).filter((listener) => listener !== callback);
+    }
+
+    matches(selector) {
+        return selector[0] === '.' && this.classList.contains(selector.slice(1));
+    }
+
+    querySelector(selector) {
+        return this.children.find((child) => child.matches(selector)) || null;
+    }
+
+    set innerHTML(value) {
+        this._innerHTML = value;
+        for (const child of this.children) {
+            child.parentElement = null;
+        }
+        this.children = [];
+
+        const linkMatch = value.match(/<a [^>]*class="([^"]+)"[^>]*>(.*?)<\/a>/);
+        if (linkMatch) {
+            const link = new FakeElement('A', linkMatch[1].split(' '), this);
+            link.innerHTML = linkMatch[2];
+        }
+    }
+
+    get innerHTML() {
+        return this._innerHTML;
+    }
+
+    click() {
+        const path = [];
+        for (let element = this; element; element = element.parentElement) {
+            path.push(element);
+        }
+
+        let propagationStopped = false;
+        const event = {
+            target: this,
+            preventDefault() {},
+            stopPropagation() {
+                propagationStopped = true;
+            }
+        };
+
+        for (const element of path) {
+            for (const listener of element.listeners.click || []) {
+                listener.call(element, event);
+            }
+            if (propagationStopped) {
+                break;
+            }
+        }
+    }
+}
+
+describe('description expansion', () => {
+    it('does not reach the outside-click handler after detaching the more link', () => {
+        const body = new FakeElement('BODY');
+        globalThis.document = { body };
+        globalThis.window = {};
+
+        const modal = new FakeElement('DIV', [], body);
+        const innerContainer = new FakeElement('DIV', ['ginner-container'], modal);
+        const description = new FakeElement('DIV', ['gslide-description'], innerContainer);
+        const desc = new FakeElement('DIV', ['gslide-desc'], description);
+        const moreLink = new FakeElement('A', ['desc-more'], desc);
+        desc.querySelector = (selector) => desc.children.find((child) => child.matches(selector)) || null;
+
+        let closeCount = 0;
+        modal.addEventListener('click', (event) => {
+            if (!closest(event.target, '.ginner-container')) {
+                closeCount++;
+            }
+        });
+
+        const slide = Object.create(Slide.prototype);
+        slide.instance = { settings: { lessText: 'See less' } };
+        slide.descriptionEvents(desc, {
+            description: 'Full description',
+            smallDescription: 'Short description'
+        });
+        moreLink.click();
+
+        assert.match(desc.innerHTML, /^Full description <a href="#" class="desc-less">See less<\/a>$/);
+        assert.equal(closeCount, 0);
+
+        desc.querySelector('.desc-less').click();
+
+        assert.equal(desc.innerHTML, 'Short description');
+        assert.equal(closeCount, 0);
+    });
+});

package/tests/touch-navigation.test.mjs

@@ -0,0 +1,13 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { resetSlideMove } from '../src/js/core/touch-navigation.js';
+
+describe('resetSlideMove', () => {
+    it('returns when the slide is null', () => {
+        assert.equal(resetSlideMove(null), undefined);
+    });
+
+    it('returns when the slide is undefined', () => {
+        assert.equal(resetSlideMove(undefined), undefined);
+    });
+});