vevet 2.16.1 → 3.0.0-beta.0

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

@@ -1,82 +0,0 @@
-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, intersectionRoot: false });
-    }
-    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() {
-        if (this.prop.intersectionRoot === false) {
-            const { scrollContainer } = this;
-            if (scrollContainer instanceof Window) {
-                return null;
-            }
-            if (scrollContainer instanceof Element) {
-                return scrollContainer;
-            }
-            return scrollContainer.outer;
-        }
-        return this.prop.intersectionRoot;
-    }
-    /**
-     * 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

@@ -1,316 +0,0 @@
-import { ScrollEventsBase } from './ScrollEventsBase';
-import onScroll from '../../../utils/listeners/onScroll';
-import { intersectionObserverSupported } from '../../../utils/listeners';
-import clamp from '../../../utils/math/clamp';
-import timeoutCallback from '../../../utils/common/timeoutCallback';
-/**
- * Elements into viewport
- */
-export class ScrollView extends ScrollEventsBase {
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        this._scrollEvent = undefined;
-        this._intersectionObserverIn = undefined;
-        this._intersectionObserverOut = undefined;
-        this._firstStart = true;
-        this._elements = [...this.prop.elements];
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
-    get prefix() {
-        return `${this._app.prefix}scroll-view`;
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true, viewportTarget: '', resizeTimeout: 0 });
-    }
-    /**
-     * Elements to seek
-     */
-    get elements() {
-        return this._elements;
-    }
-    init() {
-        super.init();
-    }
-    // Set Module Events
-    _setEvents() {
-        super._setEvents();
-        this.resize();
-        this.addViewportCallback(this.prop.viewportTarget, () => {
-            this.resize();
-        }, {
-            timeout: this.prop.resizeTimeout,
-        });
-    }
-    _onPropMutate() {
-        super._onPropMutate();
-        this.resize();
-    }
-    /**
-     * Resize the scene
-     */
-    resize() {
-        this._removeViewEvents();
-        if (this.prop.enabled) {
-            this._setViewEvents();
-            this.seekBounding();
-        }
-    }
-    /**
-     * 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 observers
-            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
-                root: this.intersectionRoot,
-                threshold: 0,
-                rootMargin: `0px ${xMargin}px ${yMargin}px 0px`,
-            });
-            this.elements.forEach((el) => {
-                var _a;
-                (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
-            });
-            if (this.prop.states === 'inout') {
-                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
-                    root: this.intersectionRoot,
-                    threshold: 0,
-                    rootMargin: '0px 0px 0px 0px',
-                });
-                this.elements.forEach((el) => {
-                    var _a;
-                    (_a = this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
-                });
-            }
-        }
-        else {
-            // set scroll bounding events
-            this._scrollEvent = onScroll({
-                container: this.prop.container,
-                callback: this._handleScroll.bind(this),
-            });
-        }
-    }
-    /**
-     * Remove View events: scroll or intersection
-     */
-    _removeViewEvents() {
-        var _a, _b;
-        // remove scroll events
-        if (this._scrollEvent) {
-            this._scrollEvent.remove();
-            this._scrollEvent = undefined;
-        }
-        // destroy intersection observers
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._intersectionObserverIn = undefined;
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
-        this._intersectionObserverOut = undefined;
-    }
-    /**
-     * Event on IntersectionObserver
-     */
-    _handleIntersectionObserverIn(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;
-            }
-            if (entry.isIntersecting) {
-                this._handleInOut(entry.target, entry.isIntersecting, delay);
-            }
-        }
-        this._processUnusedElements();
-        // change states
-        if (this._firstStart) {
-            this._firstStart = false;
-            this.resize();
-        }
-    }
-    /**
-     * Event on IntersectionObserver
-     */
-    _handleIntersectionObserverOut(data) {
-        for (let index = 0; index < data.length; index += 1) {
-            const entry = data[index];
-            if (!entry.isIntersecting) {
-                this._handleInOut(entry.target, entry.isIntersecting, 0);
-            }
-        }
-    }
-    /**
-     * 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;
-            if (typeof elData.isIntersecting === 'boolean') {
-                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;
-        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;
-            }
-        }
-        else if (bounding.top > parentBounding.top + parentBounding.height
-            || bounding.left > parentBounding.left + parentBounding.width) {
-            isIntersecting = false;
-        }
-        // calculate delay only if it is enabled & calculations
-        // are done for the first time
-        let delay = 0;
-        if (!!useDelay && this._firstStart) {
-            const progress = clamp(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
-        if (this.prop.classToToggle) {
-            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) => {
-            var _a, _b;
-            (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
-            (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
-        });
-        this._elements = this._elements.filter((el) => !el.scrollViewIn);
-    }
-    /**
-     * Add a view element
-     */
-    addElement(element) {
-        var _a, _b;
-        const viewEl = element;
-        viewEl.scrollViewIn = undefined;
-        this._elements.push(element);
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
-        if (this.prop.enabled) {
-            this.seekBounding();
-        }
-        return {
-            remove: () => {
-                this.removeElement(element);
-            },
-        };
-    }
-    /**
-     * Remove a view element
-     */
-    removeElement(element) {
-        var _a, _b;
-        const viewEl = element;
-        viewEl.scrollViewIn = undefined;
-        this._elements = this._elements.filter((el) => el !== element);
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
-    }
-    /**
-     * Remove all view elements
-     */
-    removeElements() {
-        this._elements.forEach((el) => {
-            this.removeElement(el);
-        });
-        this._elements = [];
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        super._destroy();
-        this._removeViewEvents();
-    }
-}

package/build/es/components/scroll/scrollbar/Bar.js

@@ -1,268 +0,0 @@
-import { addEventListener, createElement } from 'vevet-dom';
-import onScroll from '../../../utils/listeners/onScroll';
-import clamp from '../../../utils/math/clamp';
-import { DraggerMove } from '../../dragger/DraggerMove';
-import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
-export default class Bar {
-    constructor(_prop) {
-        this._prop = _prop;
-        const { prefix, dir, domParent, container, autoHide, } = _prop;
-        // set default vars
-        this._outerHeight = 0;
-        this._outerWidth = 0;
-        this._thumbHeight = 0;
-        this._thumbWidth = 0;
-        this._scrollVal = 0;
-        this._coordsAtDragStart = {
-            left: 0,
-            top: 0,
-        };
-        this._scrollEvent = undefined;
-        this._actionTimeout = undefined;
-        this._dragger = undefined;
-        // create outer
-        let outerClassNames = `${prefix} ${prefix}_${dir}`;
-        if (container instanceof Window) {
-            outerClassNames += ' in-window';
-        }
-        this._outer = createElement('div', {
-            parent: domParent,
-            class: outerClassNames,
-        });
-        // create a thumb
-        this._thumb = createElement('div', {
-            parent: this._outer,
-            class: `${prefix}__thumb ${prefix}__thumb_${dir}`,
-        });
-        // set auto hide classes
-        if (autoHide) {
-            this.outer.classList.add('auto-hide');
-        }
-        // set events
-        this._listeners = [];
-        this._setEvents();
-    }
-    get outer() {
-        return this._outer;
-    }
-    get thumb() {
-        return this._thumb;
-    }
-    // global
-    get prefix() {
-        return this._prop.prefix;
-    }
-    get isX() {
-        return this.prop.dir === 'x';
-    }
-    get isY() {
-        return !this.isX;
-    }
-    get scrollElement() {
-        return this.prop.container instanceof Window
-            ? document.documentElement : this.prop.container;
-    }
-    get scrollLine() {
-        const { scrollElement } = this;
-        return this.isX
-            ? scrollElement.scrollWidth - scrollElement.clientWidth
-            : scrollElement.scrollHeight - scrollElement.clientHeight;
-    }
-    get scrollWidth() {
-        return this.scrollElement.scrollWidth;
-    }
-    get scrollHeight() {
-        return this.scrollElement.scrollHeight;
-    }
-    get prop() {
-        return this._prop;
-    }
-    get scrollValues() {
-        const { container } = this.prop;
-        let top = 0;
-        let left = 0;
-        if (container instanceof Window) {
-            top = container.pageYOffset;
-            left = container.pageXOffset;
-        }
-        else if (container instanceof SmoothScroll) {
-            top = container.targetTop;
-            left = container.targetLeft;
-        }
-        else {
-            top = container.scrollTop;
-            left = container.scrollLeft;
-        }
-        return {
-            left,
-            top,
-        };
-    }
-    /**
-     * Set scrolblar events
-     */
-    _setEvents() {
-        // set hover events
-        this._listeners.push(addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
-        this._listeners.push(addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
-        // set scroll events
-        this._scrollEvent = onScroll({
-            container: this.prop.container,
-            callback: (data) => {
-                this._handleScroll(data);
-            },
-        });
-        // set dragger
-        if (this.prop.isDraggable) {
-            this._dragger = new DraggerMove({
-                container: this.thumb,
-            });
-            this._dragger.addCallback('start', () => {
-                this.thumb.classList.add('in-action');
-                this._disableScrollBehaviour(true);
-                this._coordsAtDragStart = this.scrollValues;
-            });
-            this._dragger.addCallback('move', (data) => {
-                this._handleThumbDrag(data);
-            });
-            this._dragger.addCallback('end', () => {
-                this.thumb.classList.remove('in-action');
-                this._disableScrollBehaviour(false);
-            });
-        }
-    }
-    /**
-     * Toggle scrollBehavior: disable & reset smooth scrolling
-     */
-    _disableScrollBehaviour(bool) {
-        const val = bool ? 'auto' : 'unset';
-        if (this.prop.container instanceof Window) {
-            document.documentElement.style.scrollBehavior = val;
-        }
-        else if (this.prop.container instanceof HTMLElement) {
-            document.documentElement.style.scrollBehavior = val;
-        }
-    }
-    /**
-     * Handle hover state
-     */
-    _handleHover(bool) {
-        this.outer.classList.toggle('is-hovered', bool);
-    }
-    /**
-     * Handle Scroll Event
-     */
-    _handleScroll(data) {
-        // resize if needed
-        if (!this.prop.optimizeCalculations) {
-            this.resize();
-        }
-        // check if changes happened
-        let hasChanged = false;
-        if (this.isX) {
-            hasChanged = data.scrollLeft !== this._scrollVal;
-            this._scrollVal = data.scrollLeft;
-        }
-        else {
-            hasChanged = data.scrollTop !== this._scrollVal;
-            this._scrollVal = data.scrollTop;
-        }
-        if (!hasChanged) {
-            return;
-        }
-        // set auto hide
-        if (this.prop.autoHide && hasChanged) {
-            this.outer.classList.add('in-action');
-            if (this._actionTimeout) {
-                clearTimeout(this._actionTimeout);
-                this._actionTimeout = undefined;
-            }
-            this._actionTimeout = setTimeout(() => {
-                this.outer.classList.remove('in-action');
-            }, 500);
-        }
-        // render thumb
-        if (this.prop.optimizeCalculations) {
-            this._renderThumb();
-        }
-    }
-    /**
-     * Event on dragger move
-     */
-    _handleThumbDrag(data) {
-        data.evt.preventDefault();
-        const { container } = this.prop;
-        // calculate scroll iterators
-        const leftIterator = ((data.coords.x - data.start.x) / (this._outerWidth - this._thumbWidth)) * this.scrollLine;
-        const topIterator = ((data.coords.y - data.start.y) / (this._outerHeight - this._thumbHeight)) * this.scrollLine;
-        // calculate new scroll values
-        let { left, top } = this._coordsAtDragStart;
-        if (this.isX) {
-            left += leftIterator;
-        }
-        else {
-            top += topIterator;
-        }
-        // apply the values
-        container.scrollTo({
-            top,
-            left,
-            behavior: container instanceof SmoothScroll ? this.prop.draggableScrollBehavior : 'auto',
-        });
-    }
-    /**
-     * Render the thumb
-     */
-    _renderThumb() {
-        // calculate progress
-        const progress = clamp(this._scrollVal / this.scrollLine, [0, 1]);
-        // calculate transforms
-        const x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
-        const y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
-        // render the thumb
-        this._thumb.style.transform = `translate(${x}px, ${y}px)`;
-    }
-    /**
-     * Resize the scene
-     */
-    resize() {
-        const { outer, thumb, scrollLine } = this;
-        const { minSize } = this.prop;
-        // get outer sizes
-        this._outerHeight = outer.clientHeight;
-        this._outerWidth = outer.clientWidth;
-        // calculate thumb sizes
-        if (this.prop.autoSize) {
-            if (this.isX) {
-                const barSize = clamp(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
-                thumb.style.width = `${barSize}px`;
-            }
-            else {
-                const barSize = clamp(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
-                thumb.style.height = `${barSize}px`;
-            }
-        }
-        // get thumb sizes
-        this._thumbHeight = thumb.clientHeight;
-        this._thumbWidth = thumb.clientWidth;
-        // define if empty
-        outer.classList.toggle('is-empty', scrollLine === 0);
-        // render the scrollbar thumb
-        this._renderThumb();
-    }
-    destroy() {
-        this._listeners.forEach((listener) => {
-            listener.remove();
-        });
-        if (this._scrollEvent) {
-            this._scrollEvent.remove();
-        }
-        if (this._actionTimeout) {
-            clearTimeout(this._actionTimeout);
-        }
-        if (this._dragger) {
-            this._dragger.destroy();
-        }
-        this._outer.remove();
-    }
-}