vevet 2.0.1-dev.9 → 2.0.2

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

@@ -1,517 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomScroll = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var normalize_wheel_1 = __importDefault(require("normalize-wheel"));
-var Component_1 = require("../../../base/Component");
-var common_1 = require("../../../utils/common");
-var AnimationFrame_1 = require("../../animation-frame/AnimationFrame");
-var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
-var math_1 = require("../../../utils/math");
-/**
- * Create smooth scrolling.
- */
-var CustomScroll = /** @class */ (function (_super) {
-    __extends(CustomScroll, _super);
-    function CustomScroll(initialProp, init) {
-        if (initialProp === void 0) { initialProp = {}; }
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        var selectors = _this.prop.selectors;
-        // 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 = vevet_dom_1.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
-        var existingContainer = vevet_dom_1.selectOne("." + _this.prefix + "__container", _this.outer);
-        if (vevet_dom_1.isElement(existingContainer)) {
-            _this._container = existingContainer;
-            _this._containerExists = true;
-        }
-        else {
-            _this._container = vevet_dom_1.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(vevet_dom_1.selectAll(selectors.elements, _this._outer));
-        }
-        else {
-            _this._elements = [_this._container];
-        }
-        _this._elementsLength = _this._elements.length;
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    Object.defineProperty(CustomScroll.prototype, "prefix", {
-        get: function () {
-            return this._app.prefix + "custom-scroll";
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "outer", {
-        get: function () {
-            return this._outer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "container", {
-        get: function () {
-            return this._container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "elements", {
-        get: function () {
-            return this._elements;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "targetLeft", {
-        get: function () {
-            return this._targetLeft;
-        },
-        set: function (val) {
-            this.targetLeftDry = val;
-            this.enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "targetLeftDry", {
-        get: function () {
-            return this._targetLeft;
-        },
-        /**
-         * Set value without animation request
-         */
-        set: function (val) {
-            this._targetLeft = boundVal_1.default(val, [0, this.maxScrollableWidth]);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "targetTop", {
-        get: function () {
-            return this._targetTop;
-        },
-        set: function (val) {
-            this.targetTopDry = val;
-            this.enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "targetTopDry", {
-        get: function () {
-            return this._targetTop;
-        },
-        /**
-         * Set value without animation request
-         */
-        set: function (val) {
-            this._targetTop = boundVal_1.default(val, [0, this.maxScrollableHeight]);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "scrollLeft", {
-        get: function () {
-            return this._scrollLeft;
-        },
-        set: function (val) {
-            this.targetLeftDry = val;
-            this._scrollLeft = this._targetLeft;
-            this.enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "scrollTop", {
-        get: function () {
-            return this._scrollTop;
-        },
-        set: function (val) {
-            this.targetTopDry = val;
-            this._scrollTop = this._targetTop;
-            this.enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "scrollWidth", {
-        get: function () {
-            return this._scrollWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "scrollHeight", {
-        get: function () {
-            return this._scrollHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "clientWidth", {
-        get: function () {
-            return this._clientWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "clientHeight", {
-        get: function () {
-            return this._clientHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "maxScrollableWidth", {
-        /**
-         * Maximum scrollable area of the X axis
-         */
-        get: function () {
-            return this.scrollWidth - this.clientWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(CustomScroll.prototype, "maxScrollableHeight", {
-        /**
-         * Maximum scrollable area of the Y axis
-         */
-        get: function () {
-            return this.scrollHeight - this.clientHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CustomScroll.prototype._getDefaultProp = function () {
-        var 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 common_1.mergeWithoutArrays(_super.prototype._getDefaultProp.call(this), prop);
-    };
-    // Set Events
-    CustomScroll.prototype._setEvents = function () {
-        var _this = this;
-        // update sizes
-        this.resize();
-        this.addViewportCallback('', function () {
-            _this.resize(true);
-        });
-        // wheel
-        this.addEventListeners(this.outer, 'wheel', function (e) {
-            _this._handleWheel(e);
-        }, {
-            passive: true,
-        });
-        // on scroll
-        this.addEventListeners(this.outer, 'scroll', function () {
-            _this.outer.scrollTop = 0;
-            _this.outer.scrollLeft = 0;
-        });
-    };
-    CustomScroll.prototype._onPropMutate = function () {
-        _super.prototype._onPropMutate.call(this);
-        this.resize();
-        this._toggle();
-    };
-    /**
-     * Recalculate scroll sizes
-     */
-    CustomScroll.prototype.resize = function (
-    /**
-     * If the method was called natively on window resize
-     */
-    native) {
-        if (native === void 0) { native = false; }
-        // get elements
-        var _a = this, container = _a.container, outer = _a.outer;
-        // get sizes
-        this._clientWidth = outer.clientWidth;
-        this._clientHeight = outer.clientHeight;
-        this._scrollWidth = boundVal_1.default(container.clientWidth, [this.clientWidth, Infinity]);
-        this._scrollHeight = boundVal_1.default(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
-     */
-    CustomScroll.prototype._recalculateSizes = function () {
-        var container = this.container;
-        var height = container.clientHeight;
-        var width = container.clientWidth;
-        if ((height !== this.scrollHeight) || (width !== this.scrollHeight)) {
-            this.resize();
-        }
-    };
-    /**
-     * Update elements' properties
-     */
-    CustomScroll.prototype._updateElementsProp = function () {
-        for (var index = 0; index < this._elementsLength; index += 1) {
-            var el = this._elements[index];
-            // update scroll values
-            el.customScrollLeft = this.scrollLeft;
-            el.customScrollTop = this.scrollTop;
-            // update easing
-            var easingAttr = el.getAttribute(this.prefix + "-ease");
-            if (easingAttr) {
-                try {
-                    el.customScrollLerpEase = parseFloat(easingAttr);
-                }
-                catch (e) {
-                    //
-                }
-            }
-        }
-    };
-    /**
-     * Event on wheel
-     */
-    CustomScroll.prototype._handleWheel = function (evt) {
-        var prop = this.prop;
-        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
-        var delta = normalize_wheel_1.default(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
-     */
-    CustomScroll.prototype._toggle = function () {
-        if (this.prop.enabled) {
-            this.enable();
-        }
-        else {
-            this.disable();
-        }
-    };
-    /**
-     * Enable scrolling
-     */
-    CustomScroll.prototype.enable = function () {
-        // 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_1.AnimationFrame();
-                this._animationFrame.addCallback('frame', this.render.bind(this));
-            }
-            this._animationFrame.play();
-        }
-    };
-    /**
-     * Disable scrolling
-     */
-    CustomScroll.prototype.disable = function () {
-        if (!!this._outerAnimationFrameEvent && !!this.prop.animationFrame) {
-            this._outerAnimationFrameEvent.remove();
-        }
-        if (this._animationFrame) {
-            this._animationFrame.pause();
-        }
-    };
-    /**
-     * Render elements
-     */
-    CustomScroll.prototype.render = function () {
-        // vars
-        var prop = this.prop;
-        // 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
-        var yDiff = Math.abs(this._targetTop - this._scrollTop);
-        var 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.
-     */
-    CustomScroll.prototype._calcElements = function () {
-        for (var index = 0; index < this._elementsLength; index += 1) {
-            var el = this._elements[index];
-            // get element ease
-            var 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
-     */
-    CustomScroll.prototype._lerp = function (current, target, ease) {
-        if (ease === void 0) { ease = this.prop.lerp; }
-        var currentEase = this._instant ? 1 : ease;
-        var val = math_1.lerp(current, target, currentEase);
-        // round the values
-        if (typeof this.prop.lerpToFixed === 'number') {
-            var fixed = Math.round(this.prop.lerpToFixed);
-            return parseFloat(val.toFixed(fixed));
-        }
-        return val;
-    };
-    /**
-     * Get element ease
-     */
-    CustomScroll.prototype._getLerpEase = function (el) {
-        if (el) {
-            return el.customScrollLerpEase || this.prop.lerp;
-        }
-        return this.prop.lerp;
-    };
-    /**
-     * Render elements
-     */
-    CustomScroll.prototype._renderElements = function () {
-        for (var index = 0; index < this._elementsLength; index += 1) {
-            var el = this._elements[index];
-            // coords
-            var x = -el.customScrollLeft;
-            var 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
-     */
-    CustomScroll.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        // 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 (var index = 0; index < this._elementsLength; index += 1) {
-            var el = this._elements[index];
-            el.style.transform = '';
-        }
-    };
-    return CustomScroll;
-}(Component_1.Component));
-exports.CustomScroll = CustomScroll;