vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,486 @@
+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/scroll/plugins/SmoothScrollDragPlugin.js

@@ -0,0 +1,140 @@
+import { DraggerMove } from '../../dragger/DraggerMove';
+import { Plugin } from '../../../base/Plugin';
+const draggingClassName = 'is-dragging';
+/**
+ * A class for Plugins.
+ */
+export class SmoothScrollDragPlugin extends Plugin {
+    constructor(initialProp) {
+        super(initialProp);
+        this._componentEvents = [];
+        this._currentLerp = false;
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { enabled: true, speed: 1, lerp: false, reverseDir: false });
+    }
+    /**
+     * If is dragging at the moment
+     */
+    get isDragging() {
+        if (this._dragger) {
+            return this._dragger.isDragging;
+        }
+        return false;
+    }
+    _constructor() {
+        super._constructor();
+        this._toggleDragger();
+    }
+    _onPropMutate() {
+        super._onPropMutate();
+        this._toggleDragger();
+    }
+    /**
+     * Add or remove dragger
+     */
+    _toggleDragger() {
+        if (this.prop.enabled) {
+            this._addDragger();
+        }
+        else {
+            this._removeDragger();
+        }
+    }
+    /**
+     * Add dragger events
+     */
+    _addDragger() {
+        if (this._dragger) {
+            return;
+        }
+        const { component } = this;
+        this._dragger = new DraggerMove({
+            container: component.outer,
+        });
+        this._dragger.addCallback('start', this._handleDragStart.bind(this));
+        this._dragger.addCallback('move', this._handleDragMove.bind(this));
+        this._dragger.addCallback('end', this._handleDragEnd.bind(this));
+        this._componentEvents.push(component.addCallback('wheel', () => {
+            var _a;
+            (_a = this._dragger) === null || _a === void 0 ? void 0 : _a.cancel();
+        }));
+    }
+    /**
+     * Remove dragger events
+     */
+    _removeDragger() {
+        if (!this._dragger) {
+            return;
+        }
+        this._dragger.destroy();
+        this._dragger = undefined;
+        this._componentEvents.forEach((evt) => {
+            evt.remove();
+        });
+        this._componentEvents = [];
+    }
+    /**
+     * Callback on dragging start
+     */
+    _handleDragStart() {
+        const { component } = this;
+        if (!component.prop.enabled) {
+            return;
+        }
+        // set classes
+        component.outer.classList.add(draggingClassName);
+        component.container.classList.add(draggingClassName);
+        // change lerp
+        const { lerp } = this.prop;
+        if (typeof lerp !== 'boolean') {
+            this._currentLerp = component.prop.render.lerp;
+            component.changeProp({
+                render: {
+                    lerp,
+                },
+            });
+        }
+    }
+    /**
+     * Callback on dragging move
+     */
+    _handleDragMove(data) {
+        const { component } = this;
+        if (!component.prop.enabled) {
+            return;
+        }
+        const { speed, reverseDir } = this.prop;
+        // get coordinates
+        const x = data.step.x * speed;
+        const y = data.step.y * speed;
+        // update scroll values
+        component.targetLeft -= !reverseDir ? x : y;
+        component.targetTop -= !reverseDir ? y : x;
+    }
+    /**
+     * Callback on dragging end
+     */
+    _handleDragEnd() {
+        const { component } = this;
+        // set classes
+        component.outer.classList.remove(draggingClassName);
+        component.container.classList.remove(draggingClassName);
+        // restore SmoothScroll Lerp
+        if (typeof this._currentLerp !== 'boolean') {
+            component.changeProp({
+                render: {
+                    lerp: this._currentLerp,
+                },
+            });
+            this._currentLerp = false;
+        }
+    }
+    /**
+     * Destroy the plugin
+     */
+    _destroy() {
+        super._destroy();
+        this._removeDragger();
+    }
+}