vevet 1.4.27 → 2.0.1-dev.3

package/build/es/components/scroll/plugins/SmoothScrollKeyboardPlugin.js

@@ -0,0 +1,109 @@
+import { childOf } from 'vevet-dom';
+import { Plugin } from '../../../base/Plugin';
+import timeoutCallback from '../../../utils/common/timeoutCallback';
+/**
+ * A class for Plugins.
+ */
+export class SmoothScrollKeyboardPlugin extends Plugin {
+    _setEvents() {
+        super._setEvents();
+        this.addEventListeners(window, 'keydown', (e) => {
+            this._handleKeydown(e);
+        });
+    }
+    /**
+     * Event on a key pressed
+     */
+    _handleKeydown(e) {
+        const component = this._component;
+        if (!component.prop.enabled) {
+            return;
+        }
+        // tab is active for everethyng, forms too
+        if (e.keyCode === 9) {
+            this._handleTab();
+            return;
+        }
+        // check if some element is under focus
+        // if some exists, ignore key events
+        const { activeElement } = document;
+        if (activeElement) {
+            if (activeElement instanceof HTMLInputElement
+                || activeElement instanceof HTMLTextAreaElement) {
+                return;
+            }
+        }
+        // update scroll values
+        const scrollIterator = 40;
+        switch (e.keyCode) {
+            // up
+            case 38:
+                component.targetTop -= scrollIterator;
+                break;
+            // down
+            case 40:
+                component.targetTop += scrollIterator;
+                break;
+            // right
+            case 39:
+                component.targetLeft += scrollIterator;
+                break;
+            // left
+            case 37:
+                component.targetLeft -= scrollIterator;
+                break;
+            // page down
+            case 34:
+                component.targetTop += scrollIterator * 10;
+                break;
+            // page up
+            case 33:
+                component.targetTop -= scrollIterator * 10;
+                break;
+            // home
+            case 36:
+                component.targetTop = 0;
+                component.targetLeft = 0;
+                break;
+            // end
+            case 35:
+                component.targetTop = component.scrollHeight;
+                component.targetLeft = component.scrollWidth;
+                break;
+            // space
+            case 32:
+                component.targetTop += scrollIterator * 5;
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * Handle Tab key pressed
+     */
+    _handleTab() {
+        // get active element and scroll to it
+        timeoutCallback(() => {
+            const scroll = this._component;
+            const { activeElement } = document;
+            // skip elements that do not belong to the SmoothScroll outer
+            if (!(activeElement instanceof HTMLElement)
+                || !childOf(activeElement, scroll.outer)) {
+                return;
+            }
+            // get boundings
+            const scrollOuterBounding = scroll.outer.getBoundingClientRect();
+            const activeElementBounding = activeElement.getBoundingClientRect();
+            // get element position
+            const top = scroll.scrollTop
+                + (activeElementBounding.top - scrollOuterBounding.top)
+                - (scroll.clientHeight / 2 - activeElementBounding.height / 2);
+            const left = scroll.scrollLeft
+                + (activeElementBounding.left - scrollOuterBounding.left)
+                - (scroll.clientWidth / 2 - activeElementBounding.width / 2);
+            // apply new targets
+            scroll.targetTop = top;
+            scroll.targetLeft = left;
+        }, 120);
+    }
+}

package/build/es/components/scroll/scrollable/ScrollEventsBase.js

@@ -0,0 +1,79 @@
+import { selectOne } from 'vevet-dom';
+import { Component } from '../../../base/Component';
+/**
+ * A base for scroll event components
+ */
+export class ScrollEventsBase extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        // get scroll container
+        if (typeof this.prop.container === 'string') {
+            this._scrollContainer = selectOne(this.prop.container);
+        }
+        else {
+            this._scrollContainer = this.prop.container;
+        }
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window });
+    }
+    get scrollContainer() {
+        return this._scrollContainer;
+    }
+    get scrollableElement() {
+        if (this._scrollContainer instanceof Window) {
+            return this._app.html;
+        }
+        return this._scrollContainer;
+    }
+    /**
+     * Parent of inner elements
+     */
+    get domParent() {
+        const { scrollContainer } = this;
+        if (scrollContainer instanceof Window) {
+            return this._app.body;
+        }
+        if (scrollContainer instanceof Element) {
+            return scrollContainer;
+        }
+        return scrollContainer.outer;
+    }
+    /**
+     * Used as a "root" for IntersectionObserver
+     */
+    get intersectionRoot() {
+        const { scrollContainer } = this;
+        if (scrollContainer instanceof Window) {
+            return null;
+        }
+        if (scrollContainer instanceof Element) {
+            return scrollContainer;
+        }
+        return scrollContainer.outer;
+    }
+    /**
+     * BoundingRect of 'scrollContainer'
+     */
+    get scrollContainerBounding() {
+        if (this.intersectionRoot) {
+            const bounding = this.intersectionRoot.getBoundingClientRect();
+            return {
+                top: bounding.top,
+                left: bounding.left,
+                width: bounding.width,
+                height: bounding.height,
+            };
+        }
+        return {
+            top: 0,
+            left: 0,
+            width: this._app.viewport.width,
+            height: this._app.viewport.height,
+        };
+    }
+}

package/build/es/components/scroll/scrollable/ScrollView.js

@@ -0,0 +1,264 @@
+import { selectAll } from 'vevet-dom';
+import { ScrollEventsBase } from './ScrollEventsBase';
+import onScroll from '../../../utils/listeners/onScroll';
+import { intersectionObserverSupported } from '../../../utils/listeners';
+import boundVal from '../../../utils/math/boundVal';
+import timeoutCallback from '../../../utils/common/timeoutCallback';
+/**
+ * Elements into viewport
+ */
+export class ScrollView extends ScrollEventsBase {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        this._firstStart = true;
+        // get view elements
+        this.updateElements();
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    get prefix() {
+        return `${this._app.prefix}scroll-view`;
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, elements: `.${this.prefix}__el`, threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+    }
+    init() {
+        super.init();
+        this.seekBounding();
+    }
+    // Set Module Events
+    _setEvents() {
+        super._setEvents();
+        this.resize();
+        this.addViewportCallback('', () => {
+            this.resize();
+        });
+    }
+    _onPropMutate() {
+        super._onPropMutate();
+        this._removeViewEvents();
+        this.updateElements();
+        this._setViewEvents();
+    }
+    /**
+     * Resize the scene
+     */
+    resize() {
+        this._removeViewEvents();
+        this._setViewEvents();
+    }
+    /**
+     * Set View events: scroll or intersection
+     */
+    _setViewEvents() {
+        // set intersection observer
+        if (intersectionObserverSupported() && this.prop.useIntersectionObserver) {
+            // get intersecton margins
+            const { scrollContainerBounding } = this;
+            const xMargin = this._firstStart
+                ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
+            const yMargin = this._firstStart
+                ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
+            // create intersection observer
+            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+                root: this.intersectionRoot,
+                threshold: 0,
+                rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
+            });
+            // add elements
+            if (this.elements) {
+                this.elements.forEach((el) => {
+                    var _a;
+                    (_a = this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                });
+            }
+        }
+        else {
+            // set scroll bounding events
+            this._scrollEvent = onScroll(this.prop.container, this._handleScroll.bind(this));
+        }
+    }
+    /**
+     * Remove View events: scroll or intersection
+     */
+    _removeViewEvents() {
+        // remove scroll events
+        if (this._scrollEvent) {
+            this._scrollEvent.remove();
+            this._scrollEvent = undefined;
+        }
+        // destroy intersection observer
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+            this._intersectionObserver = undefined;
+        }
+    }
+    /**
+     * Element to seek
+     */
+    get elements() {
+        return this._elements;
+    }
+    /**
+     * Update elements
+     */
+    updateElements() {
+        // check if elements exist
+        if (typeof this.elements === 'undefined') {
+            this._elements = [];
+        }
+        // unobserve old elements
+        this.elements.forEach((el) => {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.unobserve(el);
+            }
+        });
+        // update elements
+        this._elements = Array.from(selectAll(this.prop.elements, this.domParent || undefined)).filter((el) => !el.classList.contains(this.prop.classToToggle));
+        // add them to the observer
+        this._elements.forEach((el) => {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.observe(el);
+            }
+        });
+    }
+    /**
+     * Event on IntersectionObserver
+     */
+    _handleIntersectionObserver(data) {
+        const parentBounding = this._firstStart ? this.scrollContainerBounding : false;
+        for (let index = 0; index < data.length; index += 1) {
+            const entry = data[index];
+            let delay = 0;
+            if (this._firstStart && !!parentBounding && entry.isIntersecting) {
+                delay = this._elementInViewportData(entry.target, parentBounding).delay;
+            }
+            this._handleInOut(entry.target, entry.isIntersecting, delay);
+        }
+        this._processUnusedElements();
+        // change states
+        if (this._firstStart) {
+            this._firstStart = false;
+            this.resize();
+        }
+    }
+    /**
+     * Event on Scroll
+     */
+    _handleScroll() {
+        this.seekBounding();
+    }
+    /**
+     * Seek the elements by their bounding.
+     * Only if IntersectionObserver is not used.
+     */
+    seekBounding() {
+        // check if calculations are done through getBoundingClientRect
+        if (intersectionObserverSupported() && this.prop.useIntersectionObserver) {
+            return;
+        }
+        // vars
+        const { scrollContainerBounding } = this;
+        // go through all elements and get their boudning
+        for (let index = 0; index < this.elements.length; index += 1) {
+            const el = this.elements[index];
+            const elData = this._elementInViewportData(el, scrollContainerBounding);
+            const delay = elData.isIntersecting ? elData.delay : 0;
+            this._handleInOut(el, elData.isIntersecting, delay);
+        }
+        this._processUnusedElements();
+        // change states
+        if (this._firstStart) {
+            this._firstStart = false;
+        }
+    }
+    /**
+     * Check element's bounding to define if it is in viewport
+     */
+    _elementInViewportData(el, parentBounding) {
+        const { threshold: propThreshold, states, useDelay } = this.prop;
+        const threshold = this._firstStart ? 1 : propThreshold;
+        const bounding = el.getBoundingClientRect();
+        // check if the element is intersecting
+        let isIntersecting = false;
+        if (bounding.top < parentBounding.top + parentBounding.height * threshold
+            && bounding.left < parentBounding.left + parentBounding.width * threshold) {
+            if (states === 'in') {
+                isIntersecting = true;
+            }
+            else if (bounding.right < parentBounding.left * threshold
+                || bounding.bottom < parentBounding.top * threshold) {
+                isIntersecting = false;
+            }
+            else {
+                isIntersecting = true;
+            }
+        }
+        // calculate delay only if it is enabled & calculations
+        // are done for the first time
+        let delay = 0;
+        if (!!useDelay && this._firstStart) {
+            const progress = boundVal(useDelay.dir === 'x'
+                ? (bounding.left - parentBounding.left) / parentBounding.width
+                : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
+            delay = progress * useDelay.max;
+        }
+        return {
+            isIntersecting,
+            delay,
+        };
+    }
+    /**
+     * Event that is triggered when an element appears or disappears
+     */
+    _handleInOut(el, inViewport, delay = 0) {
+        const { states } = this.prop;
+        // check if need to continue
+        if ((el.scrollViewIn && inViewport)
+            || (!el.scrollViewIn && !inViewport)) {
+            return;
+        }
+        // update props
+        el.scrollViewIn = inViewport;
+        // toggle classes
+        timeoutCallback(() => {
+            el.classList.toggle(this.prop.classToToggle, inViewport);
+        }, delay);
+        // process callbacks
+        if (inViewport && (states === 'in' || states === 'inout')) {
+            timeoutCallback(() => {
+                this.callbacks.tbt('in', el);
+            }, delay);
+        }
+        else if (!inViewport && states === 'inout') {
+            timeoutCallback(() => {
+                this.callbacks.tbt('out', el);
+            }, delay);
+        }
+    }
+    /**
+     * Remove elements that are mo more in need
+     */
+    _processUnusedElements() {
+        if (this.prop.states !== 'in') {
+            return;
+        }
+        // remove unused elements
+        const elementsToRemove = this._elements.filter((el) => el.scrollViewIn);
+        elementsToRemove.forEach((el) => {
+            if (this._intersectionObserver) {
+                this._intersectionObserver.unobserve(el);
+            }
+        });
+        this._elements = this._elements.filter((el) => !el.scrollViewIn);
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        super._destroy();
+        this._removeViewEvents();
+    }
+}