vevet 2.0.1-dev.9 → 2.0.2

package/build/es/components/scroll/custom-scroll/CustomScroll.js

@@ -1,486 +0,0 @@
-import { selectAll, selectOne, isElement, createElement, } from 'vevet-dom';
-import normalizeWheel from 'normalize-wheel';
-import { Component } from '../../../base/Component';
-import { mergeWithoutArrays } from '../../../utils/common';
-import { AnimationFrame } from '../../animation-frame/AnimationFrame';
-import boundVal from '../../../utils/math/boundVal';
-import { lerp } from '../../../utils/math';
-/**
- * Create smooth scrolling.
- */
-export class CustomScroll extends Component {
-    get prefix() {
-        return `${this._app.prefix}custom-scroll`;
-    }
-    /**
-     * Scroll parent
-     */
-    _outer;
-    get outer() {
-        return this._outer;
-    }
-    /**
-     * Scroll container. If the element does not exist indide the outer,
-     * it will be created automatically
-     */
-    _container;
-    get container() {
-        return this._container;
-    }
-    /**
-     * If the container element existed before the class initialization
-     */
-    _containerExists;
-    /**
-     * Scrollable elements
-     */
-    _elements;
-    get elements() {
-        return this._elements;
-    }
-    _elementsLength;
-    /**
-     * Scroll target value
-     */
-    _targetLeft;
-    get targetLeft() {
-        return this._targetLeft;
-    }
-    set targetLeft(val) {
-        this.targetLeftDry = val;
-        this.enable();
-    }
-    /**
-     * Set value without animation request
-     */
-    set targetLeftDry(val) {
-        this._targetLeft = boundVal(val, [0, this.maxScrollableWidth]);
-    }
-    get targetLeftDry() {
-        return this._targetLeft;
-    }
-    /**
-     * Scroll target value
-     */
-    _targetTop;
-    get targetTop() {
-        return this._targetTop;
-    }
-    set targetTop(val) {
-        this.targetTopDry = val;
-        this.enable();
-    }
-    /**
-     * Set value without animation request
-     */
-    set targetTopDry(val) {
-        this._targetTop = boundVal(val, [0, this.maxScrollableHeight]);
-    }
-    get targetTopDry() {
-        return this._targetTop;
-    }
-    /**
-     * Scroll left
-     */
-    _scrollLeft;
-    get scrollLeft() {
-        return this._scrollLeft;
-    }
-    set scrollLeft(val) {
-        this.targetLeftDry = val;
-        this._scrollLeft = this._targetLeft;
-        this.enable();
-    }
-    /**
-     * Scroll top
-     */
-    _scrollTop;
-    get scrollTop() {
-        return this._scrollTop;
-    }
-    set scrollTop(val) {
-        this.targetTopDry = val;
-        this._scrollTop = this._targetTop;
-        this.enable();
-    }
-    /**
-     * Scroll width
-     */
-    _scrollWidth;
-    get scrollWidth() {
-        return this._scrollWidth;
-    }
-    /**
-     * Scroll height
-     */
-    _scrollHeight;
-    get scrollHeight() {
-        return this._scrollHeight;
-    }
-    /**
-     * Parent width
-     */
-    _clientWidth;
-    get clientWidth() {
-        return this._clientWidth;
-    }
-    /**
-     * Parent height
-     */
-    _clientHeight;
-    get clientHeight() {
-        return this._clientHeight;
-    }
-    /**
-     * Maximum scrollable area of the X axis
-     */
-    get maxScrollableWidth() {
-        return this.scrollWidth - this.clientWidth;
-    }
-    /**
-     * Maximum scrollable area of the Y axis
-     */
-    get maxScrollableHeight() {
-        return this.scrollHeight - this.clientHeight;
-    }
-    /**
-     * If the approximation between the target and current scroll values must be instantaneous
-     */
-    _instant;
-    /**
-     * Inner AnimationFrame.
-     * The AnimationFrame is not create if an outer AnimationFrame is passed in properties.
-     */
-    _animationFrame;
-    /**
-     * AnimationFrame callback is used for outer AnimationFrame only.
-     */
-    _outerAnimationFrameEvent;
-    constructor(initialProp = {}, init = true) {
-        super(initialProp, false);
-        const { selectors } = this.prop;
-        // set default variables
-        this._targetLeft = 0;
-        this._targetTop = 0;
-        this._scrollLeft = 0;
-        this._scrollTop = 0;
-        this._scrollWidth = 0;
-        this._scrollHeight = 0;
-        this._clientWidth = 0;
-        this._clientHeight = 0;
-        this._instant = false;
-        // get outer elements
-        this._outer = selectOne(selectors.outer);
-        if (!(this._outer instanceof HTMLElement)) {
-            throw new Error(`${selectors.outer} is not a HTMLElement`);
-        }
-        this._outer.classList.add(this.prefix);
-        // get or create container
-        const existingContainer = selectOne(`.${this.prefix}__container`, this.outer);
-        if (isElement(existingContainer)) {
-            this._container = existingContainer;
-            this._containerExists = true;
-        }
-        else {
-            this._container = createElement('div', {
-                class: `${this.prefix}__container`,
-                parent: this.outer,
-                children: Array.from(this.outer.children),
-            });
-            this._containerExists = false;
-        }
-        // get scrollable elements
-        if (selectors.elements) {
-            this._elements = Array.from(selectAll(selectors.elements, this._outer));
-        }
-        else {
-            this._elements = [this._container];
-        }
-        this._elementsLength = this._elements.length;
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
-    _getDefaultProp() {
-        const prop = {
-            selectors: {
-                outer: '#v-custom-scroll',
-                elements: false,
-            },
-            enabled: true,
-            animationFrame: false,
-            recalculateSizes: true,
-            useWheel: true,
-            autoStop: true,
-            isHorizontal: false,
-            lerp: 0.1,
-            lerpToFixed: false,
-        };
-        return mergeWithoutArrays(super._getDefaultProp(), prop);
-    }
-    // Set Events
-    _setEvents() {
-        // update sizes
-        this.resize();
-        this.addViewportCallback('', () => {
-            this.resize(true);
-        });
-        // wheel
-        this.addEventListeners(this.outer, 'wheel', (e) => {
-            this._handleWheel(e);
-        }, {
-            passive: true,
-        });
-        // on scroll
-        this.addEventListeners(this.outer, 'scroll', () => {
-            this.outer.scrollTop = 0;
-            this.outer.scrollLeft = 0;
-        });
-    }
-    _onPropMutate() {
-        super._onPropMutate();
-        this.resize();
-        this._toggle();
-    }
-    /**
-     * Recalculate scroll sizes
-     */
-    resize(
-    /**
-     * If the method was called natively on window resize
-     */
-    native = false) {
-        // get elements
-        const { container, outer } = this;
-        // get sizes
-        this._clientWidth = outer.clientWidth;
-        this._clientHeight = outer.clientHeight;
-        this._scrollWidth = boundVal(container.clientWidth, [this.clientWidth, Infinity]);
-        this._scrollHeight = boundVal(container.clientHeight, [this.clientHeight, Infinity]);
-        // force instant change
-        // it means that after resizing, scrolling will be instantaneous for a while
-        if (native) {
-            this._instant = true;
-        }
-        // sometimes after resizing it may happen that targets are less or more
-        // than maximum values of scrolling
-        // that's why fix it here
-        if (native) {
-            this.targetLeft = parseInt(this.targetLeft.toFixed(0), 10);
-            this.targetTop = parseInt(this.targetTop.toFixed(0), 10);
-        }
-        // render elements
-        this._updateElementsProp();
-        this.render();
-        // launch callbacks
-        this.callbacks.tbt('resize', false);
-    }
-    /**
-     * Recalculate scroll sizes
-     */
-    _recalculateSizes() {
-        const { container } = this;
-        const height = container.clientHeight;
-        const width = container.clientWidth;
-        if ((height !== this.scrollHeight) || (width !== this.scrollHeight)) {
-            this.resize();
-        }
-    }
-    /**
-     * Update elements' properties
-     */
-    _updateElementsProp() {
-        for (let index = 0; index < this._elementsLength; index += 1) {
-            const el = this._elements[index];
-            // update scroll values
-            el.customScrollLeft = this.scrollLeft;
-            el.customScrollTop = this.scrollTop;
-            // update easing
-            const easingAttr = el.getAttribute(`${this.prefix}-ease`);
-            if (easingAttr) {
-                try {
-                    el.customScrollLerpEase = parseFloat(easingAttr);
-                }
-                catch (e) {
-                    //
-                }
-            }
-        }
-    }
-    /**
-     * Event on wheel
-     */
-    _handleWheel(evt) {
-        const { prop } = this;
-        if (!prop.enabled || prop.useWheel) {
-            return;
-        }
-        // stop propagation if needed
-        if ((this.targetLeft < 0
-            || this.targetLeft === this.scrollWidth - this.clientWidth)
-            || (this.targetTop < 0
-                || this.targetTop === this.scrollHeight - this.clientHeight)) {
-            evt.stopPropagation();
-        }
-        // get normalized delta
-        const delta = normalizeWheel(evt);
-        // set new scroll targets
-        this.targetLeftDry += prop.isHorizontal ? delta.pixelY : delta.pixelX;
-        this.targetTopDry += prop.isHorizontal ? delta.pixelX : delta.pixelY;
-        // play scroll
-        this.enable();
-        // launch events
-        this.callbacks.tbt('wheel', evt);
-    }
-    /**
-     * Toggle animation: Enable / Disable scrolling
-     */
-    _toggle() {
-        if (this.prop.enabled) {
-            this.enable();
-        }
-        else {
-            this.disable();
-        }
-    }
-    /**
-     * Enable scrolling
-     */
-    enable() {
-        // set animation callback for the outer AnimationFrame
-        if (!!this.prop.animationFrame && !this._outerAnimationFrameEvent) {
-            this._outerAnimationFrameEvent = this.prop.animationFrame.addCallback('frame', this.render.bind(this));
-        }
-        else {
-            // otherwise, check if inner AnimationFrame is created
-            if (!this._animationFrame) {
-                this._animationFrame = new AnimationFrame();
-                this._animationFrame.addCallback('frame', this.render.bind(this));
-            }
-            this._animationFrame.play();
-        }
-    }
-    /**
-     * Disable scrolling
-     */
-    disable() {
-        if (!!this._outerAnimationFrameEvent && !!this.prop.animationFrame) {
-            this._outerAnimationFrameEvent.remove();
-        }
-        if (this._animationFrame) {
-            this._animationFrame.pause();
-        }
-    }
-    /**
-     * Render elements
-     */
-    render() {
-        // vars
-        const { prop } = this;
-        // recalculate sizes
-        if (!prop.recalculateSizes) {
-            this._recalculateSizes();
-        }
-        // calculate scroll values
-        this._scrollLeft = this._lerp(this._scrollLeft, this._targetLeft);
-        this._scrollTop = this._lerp(this._scrollTop, this._targetTop);
-        // change elements' values
-        this._calcElements();
-        // render
-        this._renderElements();
-        // disable instant scrolling
-        if (this._instant) {
-            this._instant = false;
-        }
-        // launch events
-        this.callbacks.tbt('render', false);
-        // stop animation frame if values are approximated
-        const yDiff = Math.abs(this._targetTop - this._scrollTop);
-        const xDiff = Math.abs(this._targetLeft - this._scrollLeft);
-        if (xDiff === 0 && yDiff === 0 && prop.autoStop) {
-            this.disable();
-            this.callbacks.tbt('approximate', false);
-        }
-    }
-    /**
-     * Calculate elements' values.
-     * @param {boolean} instant - If animation is to be implemented instantly.
-     */
-    _calcElements() {
-        for (let index = 0; index < this._elementsLength; index += 1) {
-            const el = this._elements[index];
-            // get element ease
-            const ease = this._getLerpEase(el);
-            // change values
-            if (ease === this.prop.lerp) {
-                el.customScrollLeft = this._scrollLeft;
-                el.customScrollTop = this._scrollTop;
-            }
-            else {
-                el.customScrollLeft = this._lerp(el.customScrollLeft, this._targetLeft, ease);
-                el.customScrollTop = this._lerp(el.customScrollTop, this._targetTop, ease);
-            }
-        }
-    }
-    /**
-     * Interpolate values
-     */
-    _lerp(current, target, ease = this.prop.lerp) {
-        const currentEase = this._instant ? 1 : ease;
-        const val = lerp(current, target, currentEase);
-        // round the values
-        if (typeof this.prop.lerpToFixed === 'number') {
-            const fixed = Math.round(this.prop.lerpToFixed);
-            return parseFloat(val.toFixed(fixed));
-        }
-        return val;
-    }
-    /**
-     * Get element ease
-     */
-    _getLerpEase(el) {
-        if (el) {
-            return el.customScrollLerpEase || this.prop.lerp;
-        }
-        return this.prop.lerp;
-    }
-    /**
-     * Render elements
-     */
-    _renderElements() {
-        for (let index = 0; index < this._elementsLength; index += 1) {
-            const el = this._elements[index];
-            // coords
-            const x = -el.customScrollLeft;
-            const y = -el.customScrollTop;
-            // set styles
-            el.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, ${y}, 0,1)`;
-        }
-    }
-    /**
-     * Destroy the scroll
-     */
-    _destroy() {
-        super._destroy();
-        // disable animation
-        this.disable();
-        if (this._animationFrame) {
-            this._animationFrame.destroy();
-        }
-        // destroy container
-        if (!this._containerExists) {
-            while (this._container.firstChild) {
-                this._outer.appendChild(this._container.firstChild);
-            }
-            this._container.remove();
-        }
-        // remove classes
-        this._outer.classList.remove(this.prefix);
-        // reset styles
-        for (let index = 0; index < this._elementsLength; index += 1) {
-            const el = this._elements[index];
-            el.style.transform = '';
-        }
-    }
-}

package/build/es/components/split-text/SplitText.js

@@ -1,199 +0,0 @@
-import { selectOne } from 'vevet-dom';
-import { Component } from '../../base/Component';
-import { mergeWithoutArrays } from '../../utils/common';
-/**
- * The class splits text in an element into words, letters, and lines.
- * This may be useful when animating the text.
- */
-export class SplitText extends Component {
-    _getDefaultProp() {
-        const prop = {
-            container: '.v-text',
-            resizeTimeout: 0,
-            append: {
-                letters: true,
-                words: true,
-                lines: false,
-            },
-        };
-        return mergeWithoutArrays(super._getDefaultProp(), prop);
-    }
-    // Extra constructor
-    _constructor() {
-        this._create();
-    }
-    /**
-     * Text container
-     */
-    _container = null;
-    /**
-     * Get text container
-     */
-    get container() {
-        return this._container;
-    }
-    /**
-     * innerHTML of the container
-     */
-    _html = '';
-    /**
-     * textContent of the container
-     */
-    _text = '';
-    /**
-     * Defines if the text is already split
-     */
-    _isSplit = false;
-    /**
-     * Text letters
-     */
-    _letters = [];
-    /**
-     * Get text letters
-     */
-    get letters() {
-        return this._letters;
-    }
-    /**
-     * Create split text
-     */
-    _create() {
-        // get container
-        const container = selectOne(this.prop.container);
-        this._container = container;
-        if (!container) {
-            return;
-        }
-        container.classList.add(`${this.prefix}`);
-        console.log(this.prefix);
-        // update variables
-        this._text = container.textContent;
-        this._html = container.innerHTML;
-        console.log(this._container);
-    }
-    /**
-     * Set events
-     */
-    _setEvents() {
-        this.addViewportCallback('', () => {
-            this._resize();
-        }, {
-            timeout: this.prop.resizeTimeout,
-            name: this.name,
-        });
-    }
-    /**
-     * Resize the text
-     */
-    _resize() {
-        this.callbacks.tbt('resize', false);
-        this.split();
-    }
-    /**
-     * Split the text
-     */
-    split() {
-        // break if there's no text
-        if (!this._text) {
-            return;
-        }
-        // get prop
-        const { prop } = this;
-        // split text into letters and words
-        // this must happen only once
-        if (!this._isSplit) {
-            // split
-            this._splitToWords(this._text);
-            // this._lettersSplit();
-            // // clear innerHTML
-            // this._outer.innerHTML = '';
-            // // and append
-            // this._lettersAppend();
-            // this._wordsAppend();
-        }
-        // remove previous lines
-        // if (this._splitBool) {
-        //     this._linesRemove();
-        // }
-        // // append spaces
-        // if (!prop.appendLines) {
-        //     if (!this._splitBool) {
-        //         this._appendSpaces();
-        //     }
-        // }
-        // // split to lines
-        // if (prop.appendLines) {
-        //     this._appendSpaces();
-        //     this._linesSplit();
-        //     this._removeBr();
-        //     this._linesAppend();
-        //     this._appendSpaces();
-        // } else {
-        //     this._linesSplit();
-        // }
-        // // change value
-        // this._splitBool = true;
-        // // remove the class
-        // this._outer.classList.remove(`${this._prefix}_splitting`);
-        // // launch callback
-        // this.lbt('split', this._el);
-    }
-    /**
-     * Split text into words
-     */
-    _splitToWords(text) {
-        console.log(text);
-        // split text to chars
-        // const chars = text.split('');
-        // const el = [];
-        // let word: string[] = [];
-        // // gor through all chars and add them to single words
-        // chars.forEach((char, index) => {
-        //     const charCode = char.charCodeAt(0);
-        //     const isNewLine = charCode === 10;
-        //     const isWhitespace = charCode === 32 || charCode === 160;
-        //     const isLastChar = index === (chars.length - 1);
-        //     // define if a new word
-        //     let isNewWord = false;
-        //     if (isNewLine || isWhitespace || isLastChar) {
-        //         isNewWord = true;
-        //         if (isLastChar) {
-        //             word.push(char);
-        //         }
-        //     }
-        //     // if a new word
-        //     if (isNewWord) {
-        //         // add previous word to elements
-        //         if (word.length > 0) {
-        //             el.push({
-        //                 el: false,
-        //                 children: word,
-        //                 newline: isNewLine,
-        //                 content: word.join(''),
-        //                 type: 'word',
-        //             });
-        //         }
-        //         word = [];
-        //     } else {
-        //         word.push(char);
-        //     }
-        //     // iteration
-        //     i++;
-        // });
-        // // add elements to words
-        // if (this._prop.appendWords) {
-        //     el.forEach((word) => {
-        //         word.el = dom({
-        //             selector: 'span',
-        //             styles: `${this._prefix}__word`,
-        //         });
-        //         word.el.classList.add();
-        //         if (!this._prop.appendLetters) {
-        //             word.el.innerHTML = word.content;
-        //         }
-        //     });
-        // }
-        // // add to stack
-        // this._el.words = el;
-    }
-}

package/build/es/utils/math/scopeProgress.js

@@ -1,22 +0,0 @@
-/**
- * Get progress relatively to the scope.
- *
- * @example
- *
- * scopeProgress(.35, [0, 1]);
- * // => .5
- * scopeProgress(.35, [.25, 1]);
- * // => .133
- */
-export default function scopeProgress(
-/**
- * Current progress
- */
-progress, 
-/**
- * Progress scope
- */
-scope) {
-    const result = (progress - scope[0]) / (scope[1] - scope[0]);
-    return result;
-}