vevet 2.17.0 → 3.0.0-beta.0

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

@@ -1,154 +0,0 @@
-import { createElement, selectOne } from 'vevet-dom';
-import { Component } from '../../../base/Component';
-import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
-import Bar from './Bar';
-/**
- * Create custom scroll bar
- */
-export class ScrollBar extends Component {
-    constructor(initialProp, init = true) {
-        super(initialProp, false);
-        const { autoHide, autoSize, minSize, optimizeCalculations, isDraggable, draggableScrollBehavior, } = this.prop;
-        // get container
-        if (typeof this.prop.container === 'string') {
-            const el = selectOne(this.prop.container);
-            if (el) {
-                this._container = el;
-            }
-            else {
-                throw new Error('No scroll container');
-            }
-        }
-        else {
-            this._container = this.prop.container;
-        }
-        // create scrollBarsParent if needed
-        if (this.container instanceof Element) {
-            const { parentElement } = this.container;
-            if (parentElement) {
-                this._scrollWrapper = createElement('div');
-                this._scrollWrapper.style.position = 'relative';
-                this._scrollWrapper.style.display = 'inline-block';
-                parentElement.insertBefore(this._scrollWrapper, this.container);
-                this._scrollWrapper.appendChild(this.container);
-                this._scrollWrapper.classList.add(`${this.prefix}-wrapper`);
-            }
-        }
-        // create bars
-        const barMainProp = {
-            container: this.container,
-            domParent: this.domParent,
-            autoHide,
-            autoSize,
-            minSize,
-            optimizeCalculations,
-            prefix: this.prefix,
-            isDraggable,
-            draggableScrollBehavior,
-        };
-        this._xBar = new Bar(Object.assign({ dir: 'x' }, barMainProp));
-        this._yBar = new Bar(Object.assign({ dir: 'y' }, barMainProp));
-        // add styles
-        this.scrollableElement.classList.add(`${this.prefix}-parent`);
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, resizeTimeout: 0, isDraggable: true, draggableScrollBehavior: 'smooth' });
-    }
-    get prefix() {
-        return `${this._app.prefix}scrollbar`;
-    }
-    /**
-     * Scroll container
-     */
-    get container() {
-        return this._container;
-    }
-    /**
-     * Get scrollable element
-     */
-    get scrollableElement() {
-        const { container } = this;
-        if (container instanceof Window) {
-            return this._app.body;
-        }
-        if (container instanceof Element) {
-            return container;
-        }
-        return container.outer;
-    }
-    /**
-     * The element into wchich scroll bars will be appended
-     */
-    get domParent() {
-        const { domParent } = this.prop;
-        const { container } = this;
-        if (!domParent) {
-            if (this._scrollWrapper) {
-                return this._scrollWrapper;
-            }
-            if (container instanceof Window) {
-                return this._app.body;
-            }
-            if (container instanceof Element) {
-                return container;
-            }
-            return container.outer;
-        }
-        return domParent;
-    }
-    // Set Module Events
-    _setEvents() {
-        super._setEvents();
-        const { container } = this;
-        // set resize event
-        if (container instanceof SmoothScroll) {
-            container.addCallback('resize', () => {
-                this.resize();
-            }, {
-                name: this.name,
-            });
-        }
-        else {
-            this.addViewportCallback('', () => {
-                this.resize();
-            }, {
-                timeout: this.prop.resizeTimeout,
-            });
-        }
-        this.resize();
-    }
-    _onPropMutate() {
-        super._onPropMutate();
-        this.resize();
-    }
-    /**
-     * Resize the canvas
-     */
-    resize() {
-        this._xBar.resize();
-        this._yBar.resize();
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        super._destroy();
-        // destroy bars
-        this._xBar.destroy();
-        this._yBar.destroy();
-        // remove scrollbars parent
-        if (!!this._scrollWrapper && this.container instanceof Element) {
-            const { parentElement } = this._scrollWrapper;
-            if (parentElement) {
-                parentElement.insertBefore(this.container, this._scrollWrapper);
-            }
-            this._scrollWrapper.remove();
-        }
-        // reset styles
-        this.scrollableElement.classList.remove(`${this.prefix}-parent`);
-    }
-}

package/build/es/components/scroll/section/ScrollSectionProgress.js

@@ -1,181 +0,0 @@
-import { selectOne } from 'vevet-dom';
-import onScroll from '../../../utils/listeners/onScroll';
-import { Component } from '../../../base/Component';
-import clampScope from '../../../utils/math/clampScope';
-import getScrollValues from '../../../utils/scroll/getScrollValues';
-/**
- * Elements into viewport
- */
-export class ScrollSectionProgress 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;
-        }
-        // get section element
-        if (typeof this.prop.section === 'string') {
-            this._section = selectOne(this.prop.section);
-        }
-        else {
-            this._section = this.prop.section;
-        }
-        // set defaults
-        this._progress = -0.001;
-        this._scopeScroll = [0, 0];
-        this._scopeIn = [0, 0];
-        this._scopeMove = [0, 0];
-        this._scopeOut = [0, 0];
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
-    _getDefaultProp() {
-        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, viewportTarget: '', resizeTimeout: 0 });
-    }
-    get scrollContainer() {
-        return this._scrollContainer;
-    }
-    get section() {
-        return this._section;
-    }
-    get scopeScroll() {
-        return this._scopeScroll;
-    }
-    get scopeIn() {
-        return this._scopeIn;
-    }
-    get scopeMove() {
-        return this._scopeMove;
-    }
-    get scopeOut() {
-        return this._scopeOut;
-    }
-    /**
-     * Global progress
-     */
-    get progress() {
-        return this._progress;
-    }
-    set progress(val) {
-        this._progress = val;
-    }
-    init() {
-        super.init();
-    }
-    // Set Module Events
-    _setEvents() {
-        super._setEvents();
-        // set resize events
-        this.addViewportCallback(this.prop.viewportTarget, () => {
-            this.resize();
-        }, {
-            timeout: this.prop.resizeTimeout,
-        });
-        // resize on page loaded
-        this._loadedEvent = this._app.onPageLoaded();
-        this._loadedEvent.then(() => {
-            this.resize();
-        }).catch(() => { });
-        // set scroll events
-        this._scrollEvent = onScroll({
-            container: this.prop.container,
-            callback: this._handleScroll.bind(this),
-        });
-    }
-    _onPropMutate() {
-        super._onPropMutate();
-        this.resize();
-    }
-    /**
-     * 'in' progress
-     */
-    get progressIn() {
-        return clampScope(this.progress, this.scopeIn) || 0;
-    }
-    /**
-     * 'out' progress
-     */
-    get progressOut() {
-        return clampScope(this.progress, this.scopeOut) || 0;
-    }
-    /**
-     * 'move' progress
-     */
-    get progressMove() {
-        return clampScope(this.progress, this.scopeMove) || 0;
-    }
-    /**
-     * Handle scroll event
-     */
-    _handleScroll() {
-        // calculate scopes
-        const scrollData = getScrollValues(this.scrollContainer);
-        if (!scrollData) {
-            return;
-        }
-        this._render(scrollData);
-    }
-    /**
-     * Resize the scene
-     */
-    resize() {
-        // calculate scopes
-        const scrollData = getScrollValues(this.scrollContainer);
-        if (!scrollData) {
-            return;
-        }
-        // get sizes
-        const bounding = this.section.getBoundingClientRect();
-        const vHeight = this._app.viewport.height;
-        // calculate scroll scope
-        const inStart = scrollData.scrollTop + bounding.top - vHeight;
-        const moveEnd = scrollData.scrollTop + bounding.top + bounding.height;
-        const scrollLine = moveEnd - inStart;
-        this._scopeScroll = [inStart, moveEnd];
-        // calculate scopes
-        this._scopeIn = [0, vHeight / scrollLine];
-        this._scopeOut = [1 - vHeight / scrollLine, 1];
-        this._scopeMove = [this._scopeIn[1], this._scopeOut[0]];
-        // launch callbacks
-        this.callbacks.tbt('resize', false);
-        // render the scene
-        this._render(scrollData, true);
-    }
-    /**
-     * Render the scene
-     */
-    _render(scrollData, force = false) {
-        const canRender = this._canRender(scrollData, force);
-        if (!canRender) {
-            return;
-        }
-        this.callbacks.tbt('render', false);
-    }
-    /**
-     * Check if the section can be rendered
-     */
-    _canRender(scrollData, force = false) {
-        if (!scrollData) {
-            return false;
-        }
-        const { scrollTop } = scrollData;
-        const prevProgress = this.progress;
-        const progress = clampScope(scrollTop, [this._scopeScroll[0], this._scopeScroll[1]]) || 0;
-        this.progress = progress;
-        return force || (progress !== prevProgress);
-    }
-    /**
-     * Destroy the module
-     */
-    _destroy() {
-        var _a, _b;
-        super._destroy();
-        (_a = this._scrollEvent) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = this._loadedEvent) === null || _b === void 0 ? void 0 : _b.cancel();
-    }
-}