@tomasvn/glightbox 0.0.0-stage → 3.3.4

package/src/js/core/slide.js

@@ -0,0 +1,251 @@
+/**
+ * Slide
+ * class to hablde slide creation
+ * and config parser
+ */
+
+import ZoomImages from './zoom.js';
+import DragSlides from './drag.js';
+import slideImage from '../slides/image.js';
+import slideVideo from '../slides/video.js';
+import slideInline from '../slides/inline.js';
+import slideIframe from '../slides/iframe.js';
+import SlideConfigParser from './slide-parser.js';
+import { addEvent, addClass, removeClass, hasClass, closest, isMobile, isFunction, isNode, createHTML } from '../utils/helpers.js';
+
+export default class Slide {
+    constructor(el, instance, index) {
+        this.element = el;
+        this.instance = instance;
+        this.index = index;
+    }
+
+    /**
+     * Set slide content
+     *
+     * @param {node} slide
+     * @param {object} data
+     * @param {function} callback
+     */
+    setContent(slide = null, callback = false) {
+        if (hasClass(slide, 'loaded')) {
+            return false;
+        }
+
+        const settings = this.instance.settings;
+        const slideConfig = this.slideConfig;
+        const isMobileDevice = isMobile();
+
+        if (isFunction(settings.beforeSlideLoad)) {
+            settings.beforeSlideLoad({
+                index: this.index,
+                slide: slide,
+                player: false
+            });
+        }
+
+        let type = slideConfig.type;
+        let position = slideConfig.descPosition;
+        let slideMedia = slide.querySelector('.gslide-media');
+        let slideTitle = slide.querySelector('.gslide-title');
+        let slideText = slide.querySelector('.gslide-desc');
+        let slideDesc = slide.querySelector('.gdesc-inner');
+        let finalCallback = callback;
+
+        // used for image accessiblity
+        let titleID = 'gSlideTitle_' + this.index;
+        let textID = 'gSlideDesc_' + this.index;
+
+        if (isFunction(settings.afterSlideLoad)) {
+            finalCallback = () => {
+                if (isFunction(callback)) {
+                    callback();
+                }
+                settings.afterSlideLoad({
+                    index: this.index,
+                    slide: slide,
+                    player: this.instance.getSlidePlayerInstance(this.index)
+                });
+            };
+        }
+
+        if (slideConfig.title == '' && slideConfig.description == '') {
+            if (slideDesc) {
+                slideDesc.parentNode.parentNode.removeChild(slideDesc.parentNode);
+            }
+        } else {
+            if (slideTitle && slideConfig.title !== '') {
+                slideTitle.id = titleID;
+                slideTitle.innerHTML = slideConfig.title;
+            } else {
+                slideTitle.parentNode.removeChild(slideTitle);
+            }
+            if (slideText && slideConfig.description !== '') {
+                slideText.id = textID;
+                if (isMobileDevice && settings.moreLength > 0) {
+                    slideConfig.smallDescription = this.slideShortDesc(slideConfig.description, settings.moreLength, settings.moreText);
+                    slideText.innerHTML = slideConfig.smallDescription;
+                    this.descriptionEvents(slideText, slideConfig);
+                } else {
+                    slideText.innerHTML = slideConfig.description;
+                }
+            } else {
+                slideText.parentNode.removeChild(slideText);
+            }
+            addClass(slideMedia.parentNode, `desc-${position}`);
+            addClass(slideDesc.parentNode, `description-${position}`);
+        }
+
+        addClass(slideMedia, `gslide-${type}`);
+        addClass(slide, 'loaded');
+
+        if (type === 'video') {
+            slideVideo.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+            return;
+        }
+
+        if (type === 'external') {
+            slideIframe.apply(this, [slide, slideConfig, this.index, finalCallback]);
+            return;
+        }
+
+        if (type === 'inline') {
+            slideInline.apply(this.instance, [slide, slideConfig, this.index, finalCallback]);
+            if (slideConfig.draggable) {
+                new DragSlides({
+                    dragEl: slide.querySelector('.gslide-inline'),
+                    toleranceX: settings.dragToleranceX,
+                    toleranceY: settings.dragToleranceY,
+                    slide: slide,
+                    instance: this.instance
+                });
+            }
+            return;
+        }
+
+        if (type === 'image') {
+            slideImage(slide, slideConfig, this.index, () => {
+                const img = slide.querySelector('img');
+
+                if (slideConfig.draggable) {
+                    new DragSlides({
+                        dragEl: img,
+                        toleranceX: settings.dragToleranceX,
+                        toleranceY: settings.dragToleranceY,
+                        slide: slide,
+                        instance: this.instance
+                    });
+                }
+                if (slideConfig.zoomable && img.naturalWidth > img.offsetWidth) {
+                    addClass(img, 'zoomable');
+                    new ZoomImages(img, slide, () => {
+                        this.instance.resize();
+                    });
+                }
+
+                if (isFunction(finalCallback)) {
+                    finalCallback();
+                }
+            });
+            return;
+        }
+
+        if (isFunction(finalCallback)) {
+            finalCallback();
+        }
+    }
+
+    slideShortDesc(string, n = 50, wordBoundary = false) {
+        let div = document.createElement('div');
+        div.innerHTML = string;
+        let cleanedString = div.innerText;
+
+        let useWordBoundary = wordBoundary;
+        string = cleanedString.trim();
+        if (string.length <= n) {
+            return string;
+        }
+        let subString = string.substr(0, n - 1);
+        if (!useWordBoundary) {
+            return subString;
+        }
+
+        div = null;
+        return subString + '... <a href="#" class="desc-more">' + wordBoundary + '</a>';
+    }
+
+    descriptionEvents(desc, data) {
+        let moreLink = desc.querySelector('.desc-more');
+        if (!moreLink) {
+            return false;
+        }
+
+        addEvent('click', {
+            onElement: moreLink,
+            withCallback: (event, target) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const body = document.body;
+
+                let desc = closest(target, '.gslide-desc');
+                if (!desc) {
+                    return false;
+                }
+
+                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) => {
+                        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;
+                            this.descriptionEvents(desc, data);
+
+                            setTimeout(() => {
+                                removeClass(body, 'gdesc-closed');
+                            }, 400);
+                            shortEvent.destroy();
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    /**
+     * Create Slide Node
+     *
+     * @return { node }
+     */
+    create() {
+        return createHTML(this.instance.settings.slideHTML);
+    }
+
+    /**
+     * Get slide config
+     * returns each individual slide config
+     * it uses SlideConfigParser
+     * each slide can overwrite a global setting
+     * read more in the SlideConfigParser class
+     *
+     * @return { object }
+     */
+    getConfig() {
+        if (!isNode(this.element) && !this.element.hasOwnProperty('draggable')) {
+            this.element.draggable = this.instance.settings.draggable;
+        }
+
+        const parser = new SlideConfigParser(this.instance.settings.slideExtraAttributes);
+        this.slideConfig = parser.parseConfig(this.element, this.instance.settings);
+
+        return this.slideConfig;
+    }
+}

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

@@ -0,0 +1,378 @@
+function getLen(v) {
+    return Math.sqrt(v.x * v.x + v.y * v.y);
+}
+
+function dot(v1, v2) {
+    return v1.x * v2.x + v1.y * v2.y;
+}
+
+function getAngle(v1, v2) {
+    var mr = getLen(v1) * getLen(v2);
+    if (mr === 0) {
+        return 0;
+    }
+    var r = dot(v1, v2) / mr;
+    if (r > 1) {
+        r = 1;
+    }
+    return Math.acos(r);
+}
+
+function cross(v1, v2) {
+    return v1.x * v2.y - v2.x * v1.y;
+}
+
+function getRotateAngle(v1, v2) {
+    var angle = getAngle(v1, v2);
+    if (cross(v1, v2) > 0) {
+        angle *= -1;
+    }
+
+    return (angle * 180) / Math.PI;
+}
+
+class EventsHandlerAdmin {
+    constructor(el) {
+        this.handlers = [];
+        this.el = el;
+    }
+    add(handler) {
+        this.handlers.push(handler);
+    }
+    del(handler) {
+        if (!handler) {
+            this.handlers = [];
+        }
+
+        for (var i = this.handlers.length; i >= 0; i--) {
+            if (this.handlers[i] === handler) {
+                this.handlers.splice(i, 1);
+            }
+        }
+    }
+    dispatch() {
+        for (var i = 0, len = this.handlers.length; i < len; i++) {
+            var handler = this.handlers[i];
+            if (typeof handler === 'function') {
+                handler.apply(this.el, arguments);
+            }
+        }
+    }
+}
+
+function wrapFunc(el, handler) {
+    var EventshandlerAdmin = new EventsHandlerAdmin(el);
+    EventshandlerAdmin.add(handler);
+
+    return EventshandlerAdmin;
+}
+
+// Modified version of AlloyFinger
+export default class TouchEvents {
+    constructor(el, option) {
+        this.element = typeof el == 'string' ? document.querySelector(el) : el;
+
+        this.start = this.start.bind(this);
+        this.move = this.move.bind(this);
+        this.end = this.end.bind(this);
+        this.cancel = this.cancel.bind(this);
+        this.element.addEventListener('touchstart', this.start, false);
+        this.element.addEventListener('touchmove', this.move, false);
+        this.element.addEventListener('touchend', this.end, false);
+        this.element.addEventListener('touchcancel', this.cancel, false);
+
+        this.preV = { x: null, y: null };
+        this.pinchStartLen = null;
+        this.zoom = 1;
+        this.isDoubleTap = false;
+
+        var noop = function () {};
+
+        this.rotate = wrapFunc(this.element, option.rotate || noop);
+        this.touchStart = wrapFunc(this.element, option.touchStart || noop);
+        this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
+        this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
+        this.pinch = wrapFunc(this.element, option.pinch || noop);
+        this.swipe = wrapFunc(this.element, option.swipe || noop);
+        this.tap = wrapFunc(this.element, option.tap || noop);
+        this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
+        this.longTap = wrapFunc(this.element, option.longTap || noop);
+        this.singleTap = wrapFunc(this.element, option.singleTap || noop);
+        this.pressMove = wrapFunc(this.element, option.pressMove || noop);
+        this.twoFingerPressMove = wrapFunc(this.element, option.twoFingerPressMove || noop);
+        this.touchMove = wrapFunc(this.element, option.touchMove || noop);
+        this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
+        this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
+        this.translateContainer = this.element;
+
+        this._cancelAllHandler = this.cancelAll.bind(this);
+
+        window.addEventListener('scroll', this._cancelAllHandler);
+
+        this.delta = null;
+        this.last = null;
+        this.now = null;
+        this.tapTimeout = null;
+        this.singleTapTimeout = null;
+        this.longTapTimeout = null;
+        this.swipeTimeout = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+        this.preTapPosition = { x: null, y: null };
+    }
+    start(evt) {
+        if (!evt.touches) {
+            return;
+        }
+
+        // Fix Media Buttons Not responding on Android #233
+        const ignoreDragFor = ['a', 'button', 'input'];
+        if (evt.target && evt.target.nodeName && ignoreDragFor.indexOf(evt.target.nodeName.toLowerCase()) >= 0) {
+            console.log('ignore drag for this touched element', evt.target.nodeName.toLowerCase());
+            return;
+        }
+
+        this.now = Date.now();
+        this.x1 = evt.touches[0].pageX;
+        this.y1 = evt.touches[0].pageY;
+        this.delta = this.now - (this.last || this.now);
+        this.touchStart.dispatch(evt, this.element);
+        if (this.preTapPosition.x !== null) {
+            this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
+            if (this.isDoubleTap) {
+                clearTimeout(this.singleTapTimeout);
+            }
+        }
+        this.preTapPosition.x = this.x1;
+        this.preTapPosition.y = this.y1;
+        this.last = this.now;
+        var preV = this.preV,
+            len = evt.touches.length;
+        if (len > 1) {
+            this._cancelLongTap();
+            this._cancelSingleTap();
+            var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
+            preV.x = v.x;
+            preV.y = v.y;
+            this.pinchStartLen = getLen(preV);
+            this.multipointStart.dispatch(evt, this.element);
+        }
+        this._preventTap = false;
+        this.longTapTimeout = setTimeout(
+            function () {
+                this.longTap.dispatch(evt, this.element);
+                this._preventTap = true;
+            }.bind(this),
+            750
+        );
+    }
+    move(evt) {
+        if (!evt.touches) {
+            return;
+        }
+        var preV = this.preV,
+            len = evt.touches.length,
+            currentX = evt.touches[0].pageX,
+            currentY = evt.touches[0].pageY;
+        this.isDoubleTap = false;
+        if (len > 1) {
+            var sCurrentX = evt.touches[1].pageX,
+                sCurrentY = evt.touches[1].pageY;
+            var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
+
+            if (preV.x !== null) {
+                if (this.pinchStartLen > 0) {
+                    evt.zoom = getLen(v) / this.pinchStartLen;
+                    this.pinch.dispatch(evt, this.element);
+                }
+
+                evt.angle = getRotateAngle(v, preV);
+                this.rotate.dispatch(evt, this.element);
+            }
+            preV.x = v.x;
+            preV.y = v.y;
+
+            if (this.x2 !== null && this.sx2 !== null) {
+                evt.deltaX = (currentX - this.x2 + sCurrentX - this.sx2) / 2;
+                evt.deltaY = (currentY - this.y2 + sCurrentY - this.sy2) / 2;
+            } else {
+                evt.deltaX = 0;
+                evt.deltaY = 0;
+            }
+            this.twoFingerPressMove.dispatch(evt, this.element);
+
+            this.sx2 = sCurrentX;
+            this.sy2 = sCurrentY;
+        } else {
+            if (this.x2 !== null) {
+                evt.deltaX = currentX - this.x2;
+                evt.deltaY = currentY - this.y2;
+
+                var movedX = Math.abs(this.x1 - this.x2),
+                    movedY = Math.abs(this.y1 - this.y2);
+
+                if (movedX > 10 || movedY > 10) {
+                    this._preventTap = true;
+                }
+            } else {
+                evt.deltaX = 0;
+                evt.deltaY = 0;
+            }
+            this.pressMove.dispatch(evt, this.element);
+        }
+
+        this.touchMove.dispatch(evt, this.element);
+
+        this._cancelLongTap();
+        this.x2 = currentX;
+        this.y2 = currentY;
+
+        if (len > 1) {
+            evt.preventDefault();
+        }
+    }
+    end(evt) {
+        if (!evt.changedTouches) {
+            return;
+        }
+        this._cancelLongTap();
+        var self = this;
+        if (evt.touches.length < 2) {
+            this.multipointEnd.dispatch(evt, this.element);
+            this.sx2 = this.sy2 = null;
+        }
+
+        //swipe
+        if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
+            evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
+            this.swipeTimeout = setTimeout(function () {
+                self.swipe.dispatch(evt, self.element);
+            }, 0);
+        } else {
+            this.tapTimeout = setTimeout(function () {
+                if (!self._preventTap) {
+                    self.tap.dispatch(evt, self.element);
+                }
+                // trigger double tap immediately
+                if (self.isDoubleTap) {
+                    self.doubleTap.dispatch(evt, self.element);
+                    self.isDoubleTap = false;
+                }
+            }, 0);
+
+            if (!self.isDoubleTap) {
+                self.singleTapTimeout = setTimeout(function () {
+                    self.singleTap.dispatch(evt, self.element);
+                }, 250);
+            }
+        }
+
+        this.touchEnd.dispatch(evt, this.element);
+
+        this.preV.x = 0;
+        this.preV.y = 0;
+        this.zoom = 1;
+        this.pinchStartLen = null;
+        this.x1 = this.x2 = this.y1 = this.y2 = null;
+    }
+    cancelAll() {
+        this._preventTap = true;
+        clearTimeout(this.singleTapTimeout);
+        clearTimeout(this.tapTimeout);
+        clearTimeout(this.longTapTimeout);
+        clearTimeout(this.swipeTimeout);
+    }
+    cancel(evt) {
+        this.cancelAll();
+        this.touchCancel.dispatch(evt, this.element);
+    }
+    _cancelLongTap() {
+        clearTimeout(this.longTapTimeout);
+    }
+    _cancelSingleTap() {
+        clearTimeout(this.singleTapTimeout);
+    }
+    _swipeDirection(x1, x2, y1, y2) {
+        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
+    }
+    on(evt, handler) {
+        if (this[evt]) {
+            this[evt].add(handler);
+        }
+    }
+    off(evt, handler) {
+        if (this[evt]) {
+            this[evt].del(handler);
+        }
+    }
+    destroy() {
+        if (this.singleTapTimeout) {
+            clearTimeout(this.singleTapTimeout);
+        }
+        if (this.tapTimeout) {
+            clearTimeout(this.tapTimeout);
+        }
+        if (this.longTapTimeout) {
+            clearTimeout(this.longTapTimeout);
+        }
+        if (this.swipeTimeout) {
+            clearTimeout(this.swipeTimeout);
+        }
+
+        this.element.removeEventListener('touchstart', this.start);
+        this.element.removeEventListener('touchmove', this.move);
+        this.element.removeEventListener('touchend', this.end);
+        this.element.removeEventListener('touchcancel', this.cancel);
+
+        this.rotate.del();
+        this.touchStart.del();
+        this.multipointStart.del();
+        this.multipointEnd.del();
+        this.pinch.del();
+        this.swipe.del();
+        this.tap.del();
+        this.doubleTap.del();
+        this.longTap.del();
+        this.singleTap.del();
+        this.pressMove.del();
+        this.twoFingerPressMove.del();
+        this.touchMove.del();
+        this.touchEnd.del();
+        this.touchCancel.del();
+
+        this.preV =
+            this.pinchStartLen =
+            this.zoom =
+            this.isDoubleTap =
+            this.delta =
+            this.last =
+            this.now =
+            this.tapTimeout =
+            this.singleTapTimeout =
+            this.longTapTimeout =
+            this.swipeTimeout =
+            this.x1 =
+            this.x2 =
+            this.y1 =
+            this.y2 =
+            this.preTapPosition =
+            this.rotate =
+            this.touchStart =
+            this.multipointStart =
+            this.multipointEnd =
+            this.pinch =
+            this.swipe =
+            this.tap =
+            this.doubleTap =
+            this.longTap =
+            this.singleTap =
+            this.pressMove =
+            this.touchMove =
+            this.touchEnd =
+            this.touchCancel =
+            this.twoFingerPressMove =
+                null;
+
+        window.removeEventListener('scroll', this._cancelAllHandler);
+        return null;
+    }
+}