@tomasvn/glightbox 0.0.0-stage → 3.3.3

package/src/js/core/drag.js

@@ -0,0 +1,219 @@
+/**
+ * DragSlides
+ * Allow imaes to be dragged for prev and next
+ * in desktops
+ *
+ * @param { object } config
+ */
+
+import { closest } from '../utils/helpers.js';
+
+export default class DragSlides {
+    constructor(config = {}) {
+        let { dragEl, toleranceX = 40, toleranceY = 65, slide = null, instance = null } = config;
+
+        this.el = dragEl;
+        this.active = false;
+        this.dragging = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.direction = null;
+        this.lastDirection = null;
+        this.toleranceX = toleranceX;
+        this.toleranceY = toleranceY;
+        this.toleranceReached = false;
+        this.dragContainer = this.el;
+        this.slide = slide;
+        this.instance = instance;
+
+        this.el.addEventListener('mousedown', (e) => this.dragStart(e), false);
+        this.el.addEventListener('mouseup', (e) => this.dragEnd(e), false);
+        this.el.addEventListener('mousemove', (e) => this.drag(e), false);
+    }
+    dragStart(e) {
+        if (this.slide.classList.contains('zoomed')) {
+            this.active = false;
+            return;
+        }
+
+        if (e.type === 'touchstart') {
+            this.initialX = e.touches[0].clientX - this.xOffset;
+            this.initialY = e.touches[0].clientY - this.yOffset;
+        } else {
+            this.initialX = e.clientX - this.xOffset;
+            this.initialY = e.clientY - this.yOffset;
+        }
+
+        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
+        ) {
+            this.active = false;
+            return;
+        }
+
+        e.preventDefault();
+
+        if (e.target === this.el || (clicked !== 'img' && closest(e.target, '.gslide-inline'))) {
+            this.active = true;
+            this.el.classList.add('dragging');
+            this.dragContainer = closest(e.target, '.ginner-container');
+        }
+    }
+    dragEnd(e) {
+        e && e.preventDefault();
+        this.initialX = 0;
+        this.initialY = 0;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+        this.active = false;
+
+        if (this.doSlideChange) {
+            this.instance.preventOutsideClick = true;
+            this.doSlideChange == 'right' && this.instance.prevSlide();
+            this.doSlideChange == 'left' && this.instance.nextSlide();
+        }
+
+        if (this.doSlideClose) {
+            this.instance.close();
+        }
+
+        if (!this.toleranceReached) {
+            this.setTranslate(this.dragContainer, 0, 0, true);
+        }
+
+        setTimeout(() => {
+            this.instance.preventOutsideClick = false;
+            this.toleranceReached = false;
+            this.lastDirection = null;
+            this.dragging = false;
+            this.el.isDragging = false;
+            this.el.classList.remove('dragging');
+            this.slide.classList.remove('dragging-nav');
+            this.dragContainer.style.transform = '';
+            this.dragContainer.style.transition = '';
+        }, 100);
+    }
+    drag(e) {
+        if (this.active) {
+            e.preventDefault();
+
+            this.slide.classList.add('dragging-nav');
+
+            if (e.type === 'touchmove') {
+                this.currentX = e.touches[0].clientX - this.initialX;
+                this.currentY = e.touches[0].clientY - this.initialY;
+            } else {
+                this.currentX = e.clientX - this.initialX;
+                this.currentY = e.clientY - this.initialY;
+            }
+
+            this.xOffset = this.currentX;
+            this.yOffset = this.currentY;
+
+            this.el.isDragging = true;
+            this.dragging = true;
+            this.doSlideChange = false;
+            this.doSlideClose = false;
+
+            let currentXInt = Math.abs(this.currentX);
+            let currentYInt = Math.abs(this.currentY);
+
+            // Horizontal drag
+            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);
+
+                let doChange = this.shouldChange();
+                if (!this.instance.settings.dragAutoSnap && doChange) {
+                    this.doSlideChange = doChange;
+                }
+
+                if (this.instance.settings.dragAutoSnap && doChange) {
+                    this.instance.preventOutsideClick = true;
+                    this.toleranceReached = true;
+                    this.active = false;
+                    this.instance.preventOutsideClick = true;
+                    this.dragEnd(null);
+                    doChange == 'right' && this.instance.prevSlide();
+                    doChange == 'left' && this.instance.nextSlide();
+                    return;
+                }
+            }
+
+            // Vertical drag
+            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);
+
+                let doClose = this.shouldClose();
+
+                if (!this.instance.settings.dragAutoSnap && doClose) {
+                    this.doSlideClose = true;
+                }
+                if (this.instance.settings.dragAutoSnap && doClose) {
+                    this.instance.close();
+                }
+                return;
+            }
+        }
+    }
+
+    shouldChange() {
+        let doChange = false;
+        let currentXInt = Math.abs(this.currentX);
+
+        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)
+            ) {
+                doChange = dragDir;
+            }
+        }
+        return doChange;
+    }
+
+    shouldClose() {
+        let doClose = false;
+        let currentYInt = Math.abs(this.currentY);
+
+        if (currentYInt >= this.toleranceY) {
+            doClose = true;
+        }
+        return doClose;
+    }
+
+    setTranslate(node, xPos, yPos, animated = false) {
+        if (animated) {
+            node.style.transition = 'all .2s ease';
+        } else {
+            node.style.transition = '';
+        }
+        node.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
+    }
+}

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

@@ -0,0 +1,98 @@
+/**
+ * Keyboard Navigation
+ * Allow navigation using the keyboard
+ *
+ * @param {object} instance
+ */
+
+import { addEvent, addClass, removeClass, each } from '../utils/helpers.js';
+
+function getNextFocusElement(current = -1) {
+    const btns = document.querySelectorAll('.gbtn[data-taborder]:not(.disabled)');
+    if (!btns.length) {
+        return false;
+    }
+
+    if (btns.length == 1) {
+        return btns[0];
+    }
+
+    if (typeof current == 'string') {
+        current = parseInt(current);
+    }
+
+    const orders = [];
+    each(btns, (btn) => {
+        orders.push(btn.getAttribute('data-taborder'));
+    });
+    const highestOrder = Math.max.apply(Math, orders.map((order) => parseInt(order)));
+
+    let newIndex = current < 0 ? 1 : current + 1;
+    if (newIndex > highestOrder) {
+        newIndex = '1';
+    }
+
+    const nextOrders = orders.filter((el) => el >= parseInt(newIndex));
+    const nextFocus = nextOrders.sort()[0];
+
+    return document.querySelector(`.gbtn[data-taborder="${nextFocus}"]`);
+}
+
+export default function keyboardNavigation(instance) {
+    if (instance.events.hasOwnProperty('keyboard')) {
+        return false;
+    }
+
+    instance.events['keyboard'] = addEvent('keydown', {
+        onElement: window,
+        withCallback: (event, target) => {
+            event = event || window.event;
+            const key = event.keyCode;
+            if (key == 9) {
+                //prettier-ignore
+                const focusedButton = document.querySelector('.gbtn.focused');
+
+                if (!focusedButton) {
+                    const activeElement = document.activeElement && document.activeElement.nodeName ? document.activeElement.nodeName.toLocaleLowerCase() : false;
+                    if (activeElement == 'input' || activeElement == 'textarea' || activeElement == 'button') {
+                        return;
+                    }
+                }
+
+                event.preventDefault();
+                const btns = document.querySelectorAll('.gbtn[data-taborder]');
+                if (!btns || btns.length <= 0) {
+                    return;
+                }
+
+                if (!focusedButton) {
+                    const first = getNextFocusElement();
+                    if (first) {
+                        first.focus();
+                        addClass(first, 'focused');
+                    }
+                    return;
+                }
+
+                let currentFocusOrder = focusedButton.getAttribute('data-taborder');
+                let nextFocus = getNextFocusElement(currentFocusOrder);
+
+                removeClass(focusedButton, 'focused');
+
+                if (nextFocus) {
+                    nextFocus.focus();
+                    addClass(nextFocus, 'focused');
+                }
+            }
+            if (key == 39) {
+                instance.nextSlide();
+            }
+            if (key == 37) {
+                instance.prevSlide();
+            }
+            if (key == 27) {
+                instance.close();
+            }
+        }
+    });
+}

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

@@ -0,0 +1,231 @@
+import { extend, has, each, isNil, isNode, isObject, isNumber } from '../utils/helpers.js';
+
+export default class SlideConfigParser {
+    constructor(slideParamas = {}) {
+        this.defaults = {
+            href: '',
+            sizes: '',
+            srcset: '',
+            title: '',
+            type: '',
+            videoProvider: '',
+            description: '',
+            alt: '',
+            descPosition: 'bottom',
+            effect: '',
+            width: '',
+            height: '',
+            content: false,
+            zoomable: true,
+            draggable: true
+        };
+
+        if (isObject(slideParamas)) {
+            this.defaults = extend(this.defaults, slideParamas);
+        }
+    }
+
+    /**
+     * Get source type
+     * gte the source type of a url
+     *
+     * @param {string} url
+     */
+    sourceType(url) {
+        let origin = url;
+        url = url.toLowerCase();
+
+        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\-_]+)/)) {
+            return 'video';
+        }
+        if (url.match(/vimeo\.com\/([0-9]*)/)) {
+            return 'video';
+        }
+        if (url.match(/\.(mp4|ogg|webm|mov)/) !== null) {
+            return 'video';
+        }
+        if (url.match(/\.(mp3|wav|wma|aac|ogg)/) !== null) {
+            return 'audio';
+        }
+
+        // Check if inline content
+        if (url.indexOf('#') > -1) {
+            let hash = origin.split('#').pop();
+            if (hash.trim() !== '') {
+                return 'inline';
+            }
+        }
+        // Ajax
+        if (url.indexOf('goajax=true') > -1) {
+            return 'ajax';
+        }
+
+        return 'external';
+    }
+
+    parseConfig(element, settings) {
+        let data = extend({ descPosition: settings.descPosition }, this.defaults);
+
+        if (isObject(element) && !isNode(element)) {
+            if (!has(element, 'type')) {
+                if (has(element, 'content') && element.content) {
+                    element.type = 'inline';
+                } else if (has(element, 'href')) {
+                    element.type = this.sourceType(element.href);
+                }
+            }
+            let objectData = extend(data, element);
+            this.setSize(objectData, settings);
+
+            return objectData;
+        }
+
+        let url = '';
+        let config = element.getAttribute('data-glightbox');
+        let nodeType = element.nodeName.toLowerCase();
+
+        if (nodeType === 'a') {
+            url = element.href;
+        }
+        if (nodeType === 'img') {
+            url = element.src;
+            //alt attribute propagation
+            data.alt = element.alt;
+        }
+
+        data.href = url;
+
+        each(data, (val, key) => {
+            if (has(settings, key) && key !== 'width') {
+                data[key] = settings[key];
+            }
+            const nodeData = element.dataset[key];
+            if (!isNil(nodeData)) {
+                data[key] = this.sanitizeValue(nodeData);
+            }
+        });
+
+        if (data.content) {
+            data.type = 'inline';
+        }
+
+        if (!data.type && url) {
+            data.type = this.sourceType(url);
+        }
+
+        if (!isNil(config)) {
+            let cleanKeys = [];
+            each(data, (v, k) => {
+                cleanKeys.push(';\\s?' + k);
+            });
+            cleanKeys = cleanKeys.join('\\s?:|');
+            if (config.trim() !== '') {
+                each(data, (val, key) => {
+                    const str = config;
+                    const match = 's?' + key + 's?:s?(.*?)(' + cleanKeys + 's?:|$)';
+                    const regex = new RegExp(match);
+                    const matches = str.match(regex);
+
+                    if (matches && matches.length && matches[1]) {
+                        const value = matches[1].trim().replace(/;\s*$/, '');
+                        data[key] = this.sanitizeValue(value);
+                    }
+                });
+            }
+        } else {
+            if (!data.title && nodeType == 'a') {
+                let title = element.title;
+                if (!isNil(title) && title !== '') {
+                    data.title = title;
+                }
+            }
+            if (!data.title && nodeType == 'img') {
+                let alt = element.alt;
+                if (!isNil(alt) && alt !== '') {
+                    data.title = alt;
+                }
+            }
+        }
+
+        // Try to get the description from a referenced element
+        if (data.description && data.description.substring(0, 1) === '.') {
+            let description;
+
+            try {
+                description = document.querySelector(data.description).innerHTML;
+            } catch (error) {
+                if (!(error instanceof DOMException)) {
+                    throw error;
+                }
+            }
+
+            if (description) {
+                data.description = description;
+            }
+        }
+
+        // Try to get the description from a .glightbox-desc element
+        if (!data.description) {
+            let nodeDesc = element.querySelector('.glightbox-desc');
+            if (nodeDesc) {
+                data.description = nodeDesc.innerHTML;
+            }
+        }
+
+        this.setSize(data, settings, element);
+        this.slideConfig = data;
+
+        return data;
+    }
+
+    /**
+     * Set slide data size
+     * set the correct size dependin
+     * on the slide type
+     *
+     * @param { object } data
+     * @param { object } settings
+     * @return { object }
+     */
+    setSize(data, settings, element = null) {
+        const defaultWith = data.type == 'video' ? this.checkSize(settings.videosWidth) : this.checkSize(settings.width);
+        const defaultHeight = this.checkSize(settings.height);
+
+        data.width = has(data, 'width') && data.width !== '' ? this.checkSize(data.width) : defaultWith;
+        data.height = has(data, 'height') && data.height !== '' ? this.checkSize(data.height) : defaultHeight;
+
+        if (element && data.type == 'image') {
+            data._hasCustomWidth = element.dataset.width ? true : false;
+            data._hasCustomHeight = element.dataset.height ? true : false;
+        }
+
+        return data;
+    }
+
+    /**
+     * [checkSize size
+     * check if the passed size has a correct unit
+     *
+     * @param {string} size
+     * @return {string}
+     */
+    checkSize(size) {
+        return isNumber(size) ? `${size}px` : size;
+    }
+
+    /**
+     * Sanitize data attributes value
+     *
+     * @param string val
+     * @return mixed
+     */
+    sanitizeValue(val) {
+        if (val !== 'true' && val !== 'false') {
+            return val;
+        }
+        return val === 'true';
+    }
+}