@tomasvn/glightbox 0.0.0-stage → 3.3.3

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

@@ -0,0 +1,287 @@
+/**
+ * Touch Navigation
+ * Allow navigation using touch events
+ *
+ * @param {object} instance
+ */
+
+import TouchEvents from './touch-events.js';
+import { addEvent, addClass, removeClass, hasClass, closest, whichTransitionEvent, cssTransform, windowSize } from '../utils/helpers.js';
+
+function resetSlideMove(slide) {
+    const transitionEnd = whichTransitionEvent();
+    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+    let media = hasClass(slide, 'gslide-media') ? slide : slide.querySelector('.gslide-media');
+    let container = closest(media, '.ginner-container');
+    let desc = slide.querySelector('.gslide-description');
+
+    if (windowWidth > 769) {
+        media = container;
+    }
+
+    addClass(media, 'greset');
+    cssTransform(media, 'translate3d(0, 0, 0)');
+    addEvent(transitionEnd, {
+        onElement: media,
+        once: true,
+        withCallback: (event, target) => {
+            removeClass(media, 'greset');
+        }
+    });
+
+    media.style.opacity = '';
+    if (desc) {
+        desc.style.opacity = '';
+    }
+}
+
+export default function touchNavigation(instance) {
+    if (instance.events.hasOwnProperty('touch')) {
+        return false;
+    }
+
+    let winSize = windowSize();
+    let winWidth = winSize.width;
+    let winHeight = winSize.height;
+    let process = false;
+    let currentSlide = null;
+    let media = null;
+    let mediaImage = null;
+    let doingMove = false;
+    let initScale = 1;
+    let maxScale = 4.5;
+    let currentScale = 1;
+    let doingZoom = false;
+    let imageZoomed = false;
+    let zoomedPosX = null;
+    let zoomedPosY = null;
+    let lastZoomedPosX = null;
+    let lastZoomedPosY = null;
+    let hDistance;
+    let vDistance;
+    let hDistancePercent = 0;
+    let vDistancePercent = 0;
+    let vSwipe = false;
+    let hSwipe = false;
+    let startCoords = {};
+    let endCoords = {};
+    let xDown = 0;
+    let yDown = 0;
+    let isInlined;
+
+    const sliderWrapper = document.getElementById('glightbox-slider');
+    const overlay = document.querySelector('.goverlay');
+
+    const touchInstance = new TouchEvents(sliderWrapper, {
+        touchStart: (e) => {
+            process = true;
+
+            // TODO: More tests for inline content slides
+            if (hasClass(e.targetTouches[0].target, 'ginner-container') || closest(e.targetTouches[0].target, '.gslide-desc') || e.targetTouches[0].target.nodeName.toLowerCase() == 'a') {
+                process = false;
+            }
+
+            if (closest(e.targetTouches[0].target, '.gslide-inline') && !hasClass(e.targetTouches[0].target.parentNode, 'gslide-inline')) {
+                process = false;
+            }
+
+            if (process) {
+                endCoords = e.targetTouches[0];
+                startCoords.pageX = e.targetTouches[0].pageX;
+                startCoords.pageY = e.targetTouches[0].pageY;
+                xDown = e.targetTouches[0].clientX;
+                yDown = e.targetTouches[0].clientY;
+
+                currentSlide = instance.activeSlide;
+                media = currentSlide.querySelector('.gslide-media');
+                isInlined = currentSlide.querySelector('.gslide-inline');
+
+                mediaImage = null;
+                if (hasClass(media, 'gslide-image')) {
+                    mediaImage = media.querySelector('img');
+                }
+
+                const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+                if (windowWidth > 769) {
+                    media = currentSlide.querySelector('.ginner-container');
+                }
+
+                removeClass(overlay, 'greset');
+
+                if (e.pageX > 20 && e.pageX < window.innerWidth - 20) {
+                    return;
+                }
+                e.preventDefault();
+            }
+        },
+        touchMove: (e) => {
+            if (!process) {
+                return;
+            }
+            endCoords = e.targetTouches[0];
+
+            if (doingZoom || imageZoomed) {
+                return;
+            }
+            if (isInlined && isInlined.offsetHeight > winHeight) {
+                // Allow scroll without moving the slide
+                const moved = startCoords.pageX - endCoords.pageX;
+                if (Math.abs(moved) <= 13) {
+                    return false;
+                }
+            }
+
+            doingMove = true;
+            let xUp = e.targetTouches[0].clientX;
+            let yUp = e.targetTouches[0].clientY;
+            let xDiff = xDown - xUp;
+            let yDiff = yDown - yUp;
+
+            if (Math.abs(xDiff) > Math.abs(yDiff)) {
+                vSwipe = false;
+                hSwipe = true;
+            } else {
+                hSwipe = false;
+                vSwipe = true;
+            }
+
+            hDistance = endCoords.pageX - startCoords.pageX;
+            hDistancePercent = (hDistance * 100) / winWidth;
+
+            vDistance = endCoords.pageY - startCoords.pageY;
+            vDistancePercent = (vDistance * 100) / winHeight;
+
+            let opacity;
+            if (vSwipe && mediaImage) {
+                opacity = 1 - Math.abs(vDistance) / winHeight;
+                overlay.style.opacity = opacity;
+
+                if (instance.settings.touchFollowAxis) {
+                    hDistancePercent = 0;
+                }
+            }
+            if (hSwipe) {
+                opacity = 1 - Math.abs(hDistance) / winWidth;
+                media.style.opacity = opacity;
+
+                if (instance.settings.touchFollowAxis) {
+                    vDistancePercent = 0;
+                }
+            }
+
+            if (!mediaImage) {
+                return cssTransform(media, `translate3d(${hDistancePercent}%, 0, 0)`);
+            }
+
+            cssTransform(media, `translate3d(${hDistancePercent}%, ${vDistancePercent}%, 0)`);
+        },
+        touchEnd: () => {
+            if (!process) {
+                return;
+            }
+            doingMove = false;
+            if (imageZoomed || doingZoom) {
+                lastZoomedPosX = zoomedPosX;
+                lastZoomedPosY = zoomedPosY;
+                return;
+            }
+            const v = Math.abs(parseInt(vDistancePercent));
+            const h = Math.abs(parseInt(hDistancePercent));
+
+            if (v > 29 && mediaImage) {
+                instance.close();
+                return;
+            }
+            if (v < 29 && h < 25) {
+                addClass(overlay, 'greset');
+                overlay.style.opacity = 1;
+                return resetSlideMove(media);
+            }
+        },
+        multipointEnd: () => {
+            setTimeout(() => {
+                doingZoom = false;
+            }, 50);
+        },
+        multipointStart: () => {
+            doingZoom = true;
+            initScale = currentScale ? currentScale : 1;
+        },
+        pinch: (evt) => {
+            if (!mediaImage || doingMove) {
+                return false;
+            }
+
+            doingZoom = true;
+            mediaImage.scaleX = mediaImage.scaleY = initScale * evt.zoom;
+
+            let scale = initScale * evt.zoom;
+            imageZoomed = true;
+
+            if (scale <= 1) {
+                imageZoomed = false;
+                scale = 1;
+                lastZoomedPosY = null;
+                lastZoomedPosX = null;
+                zoomedPosX = null;
+                zoomedPosY = null;
+                mediaImage.setAttribute('style', '');
+                return;
+            }
+            if (scale > maxScale) {
+                // max scale zoom
+                scale = maxScale;
+            }
+
+            mediaImage.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+            currentScale = scale;
+        },
+        pressMove: (e) => {
+            if (imageZoomed && !doingZoom) {
+                var mhDistance = endCoords.pageX - startCoords.pageX;
+                var mvDistance = endCoords.pageY - startCoords.pageY;
+
+                if (lastZoomedPosX) {
+                    mhDistance = mhDistance + lastZoomedPosX;
+                }
+                if (lastZoomedPosY) {
+                    mvDistance = mvDistance + lastZoomedPosY;
+                }
+
+                zoomedPosX = mhDistance;
+                zoomedPosY = mvDistance;
+
+                let style = `translate3d(${mhDistance}px, ${mvDistance}px, 0)`;
+                if (currentScale) {
+                    style += ` scale3d(${currentScale}, ${currentScale}, 1)`;
+                }
+                cssTransform(mediaImage, style);
+            }
+        },
+        swipe: (evt) => {
+            if (imageZoomed) {
+                return;
+            }
+            if (doingZoom) {
+                doingZoom = false;
+                return;
+            }
+            if (evt.direction == 'Left') {
+                if (instance.index == instance.elements.length - 1) {
+                    return resetSlideMove(media);
+                }
+                instance.nextSlide();
+            }
+            if (evt.direction == 'Right') {
+                if (instance.index == 0) {
+                    return resetSlideMove(media);
+                }
+                instance.prevSlide();
+            }
+        }
+    });
+
+    instance.events['touch'] = touchInstance;
+}

package/src/js/core/zoom.js

@@ -0,0 +1,156 @@
+/**
+ * ZoomImages
+ * Allow imaes to zoom and drag
+ * for desktops
+ *
+ * @param {node} img node
+ * @param {node} slide container
+ * @param {function} function to trigger on close
+ */
+export default class ZoomImages {
+    constructor(el, slide, onclose = null) {
+        this.img = el;
+        this.slide = slide;
+        this.onclose = onclose;
+
+        if (this.img.setZoomEvents) {
+            return false;
+        }
+
+        this.active = false;
+        this.zoomedIn = false;
+        this.dragging = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+
+        this.img.addEventListener('mousedown', (e) => this.dragStart(e), false);
+        this.img.addEventListener('mouseup', (e) => this.dragEnd(e), false);
+        this.img.addEventListener('mousemove', (e) => this.drag(e), false);
+
+        this.img.addEventListener(
+            'click',
+            (e) => {
+                if (this.slide.classList.contains('dragging-nav')) {
+                    this.zoomOut();
+                    return false;
+                }
+
+                if (!this.zoomedIn) {
+                    return this.zoomIn();
+                }
+                if (this.zoomedIn && !this.dragging) {
+                    this.zoomOut();
+                }
+            },
+            false
+        );
+
+        this.img.setZoomEvents = true;
+    }
+    zoomIn() {
+        let winWidth = this.widowWidth();
+
+        if (this.zoomedIn || winWidth <= 768) {
+            return;
+        }
+
+        const img = this.img;
+        img.setAttribute('data-style', img.getAttribute('style'));
+        img.style.maxWidth = img.naturalWidth + 'px';
+        img.style.maxHeight = img.naturalHeight + 'px';
+
+        if (img.naturalWidth > winWidth) {
+            let centerX = winWidth / 2 - img.naturalWidth / 2;
+            this.setTranslate(this.img.parentNode, centerX, 0);
+        }
+        this.slide.classList.add('zoomed');
+        this.zoomedIn = true;
+    }
+    zoomOut() {
+        this.img.parentNode.setAttribute('style', '');
+        this.img.setAttribute('style', this.img.getAttribute('data-style'));
+        this.slide.classList.remove('zoomed');
+        this.zoomedIn = false;
+        this.currentX = null;
+        this.currentY = null;
+        this.initialX = null;
+        this.initialY = null;
+        this.xOffset = 0;
+        this.yOffset = 0;
+
+        if (this.onclose && typeof this.onclose == 'function') {
+            this.onclose();
+        }
+    }
+    dragStart(e) {
+        e.preventDefault();
+        if (!this.zoomedIn) {
+            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;
+        }
+
+        if (e.target === this.img) {
+            this.active = true;
+            this.img.classList.add('dragging');
+        }
+    }
+    dragEnd(e) {
+        e.preventDefault();
+        this.initialX = this.currentX;
+        this.initialY = this.currentY;
+        this.active = false;
+
+        setTimeout(() => {
+            this.dragging = false;
+            this.img.isDragging = false;
+            this.img.classList.remove('dragging');
+        }, 100);
+    }
+    drag(e) {
+        if (this.active) {
+            e.preventDefault();
+
+            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.img.isDragging = true;
+            this.dragging = true;
+
+            this.setTranslate(this.img, this.currentX, this.currentY);
+        }
+    }
+    onMove(e) {
+        if (!this.zoomedIn) {
+            return;
+        }
+        let xOffset = e.clientX - this.img.naturalWidth / 2;
+        let yOffset = e.clientY - this.img.naturalHeight / 2;
+
+        this.setTranslate(this.img, xOffset, yOffset);
+    }
+    setTranslate(node, xPos, yPos) {
+        node.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
+    }
+    widowWidth() {
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    }
+}