vevet 1.4.27 → 2.0.1-dev.3

package/build/cjs/components/scroll/smooth-scroll/SmoothScroll.js

@@ -0,0 +1,625 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmoothScroll = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var normalize_wheel_1 = __importDefault(require("normalize-wheel"));
+var Component_1 = require("../../../base/Component");
+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 SmoothScroll = /** @class */ (function (_super) {
+    __extends(SmoothScroll, _super);
+    function SmoothScroll(initialProp, init) {
+        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;
+        _this._currentFPS = 60;
+        // 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;
+        // add will-change
+        _this._elements.forEach(function (el) {
+            el.style.willChange = 'transform';
+        });
+        // initialize the class
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    Object.defineProperty(SmoothScroll.prototype, "prefix", {
+        get: function () {
+            return this._app.prefix + "smooth-scroll";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "outer", {
+        get: function () {
+            return this._outer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "container", {
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "elements", {
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "targetLeft", {
+        get: function () {
+            return this._targetLeft;
+        },
+        set: function (val) {
+            this.targetLeftBound = val;
+            this._enable();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "targetLeftBound", {
+        get: function () {
+            return this._targetLeft;
+        },
+        /**
+         * Set value without animation request
+         */
+        set: function (val) {
+            var min = !!this.prop.overscroll && this.prop.isHorizontal
+                ? -this.prop.overscroll.max : 0;
+            var max = this.maxScrollableWidth
+                + (!!this.prop.overscroll && this.prop.isHorizontal ? this.prop.overscroll.max : 0);
+            this._targetLeft = boundVal_1.default(val, [min, max]);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "targetTop", {
+        get: function () {
+            return this._targetTop;
+        },
+        set: function (val) {
+            this.targetTopBound = val;
+            this._enable();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "targetTopBound", {
+        get: function () {
+            return this._targetTop;
+        },
+        /**
+         * Set value without animation request
+         */
+        set: function (val) {
+            var min = !!this.prop.overscroll && !this.prop.isHorizontal
+                ? -this.prop.overscroll.max : 0;
+            var max = this.maxScrollableHeight
+                + (!!this.prop.overscroll && !this.prop.isHorizontal ? this.prop.overscroll.max : 0);
+            this._targetTop = boundVal_1.default(val, [min, max]);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "scrollLeft", {
+        get: function () {
+            return this._scrollLeft;
+        },
+        set: function (val) {
+            this.targetLeftBound = val;
+            this._scrollLeft = this._targetLeft;
+            this._enable();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "scrollTop", {
+        get: function () {
+            return this._scrollTop;
+        },
+        set: function (val) {
+            this.targetTopBound = val;
+            this._scrollTop = this._targetTop;
+            this._enable();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "scrollWidth", {
+        get: function () {
+            return this._scrollWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "scrollHeight", {
+        get: function () {
+            return this._scrollHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "clientWidth", {
+        get: function () {
+            return this._clientWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "clientHeight", {
+        get: function () {
+            return this._clientHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "maxScrollableWidth", {
+        /**
+         * Maximum scrollable area of the X axis
+         */
+        get: function () {
+            return this.scrollWidth - this.clientWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SmoothScroll.prototype, "maxScrollableHeight", {
+        /**
+         * Maximum scrollable area of the Y axis
+         */
+        get: function () {
+            return this.scrollHeight - this.clientHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SmoothScroll.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { selectors: {
+                outer: "#" + this.prefix,
+                elements: false,
+            }, enabled: true, animationFrame: false, recalculateSizes: true, useWheel: true, autoStop: true, isHorizontal: false, stopPropagation: true, useWillChange: true, render: {
+                lerp: 0.1,
+                lerpToFixed: 2,
+                approximation: 0.1,
+                normalizeLerp: false,
+            }, overscroll: {
+                friction: 0.5,
+                max: 250,
+            } });
+    };
+    // Extra constructor
+    SmoothScroll.prototype._constructor = function () {
+        _super.prototype._constructor.call(this);
+        this._toggle();
+    };
+    // Set Events
+    SmoothScroll.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);
+        });
+        // on scroll
+        this.addEventListeners(this.outer, 'scroll', function () {
+            _this.outer.scrollTop = 0;
+            _this.outer.scrollLeft = 0;
+        });
+    };
+    SmoothScroll.prototype._onPropMutate = function () {
+        _super.prototype._onPropMutate.call(this);
+        this.resize();
+        this._toggle();
+    };
+    /**
+     * Recalculate scroll sizes
+     */
+    SmoothScroll.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
+     */
+    SmoothScroll.prototype._recalculateSizes = function () {
+        var container = this.container;
+        var height = container.clientHeight;
+        var width = container.clientWidth;
+        if ((height !== this.scrollHeight) || (width !== this.scrollWidth)) {
+            this.resize();
+        }
+    };
+    /**
+     * Update elements' properties
+     */
+    SmoothScroll.prototype._updateElementsProp = function () {
+        for (var index = 0; index < this._elementsLength; index += 1) {
+            var el = this._elements[index];
+            // update scroll values
+            el.smoothScrollLeft = this.scrollLeft;
+            el.smoothScrollTop = this.scrollTop;
+            // update easing
+            var easingAttr = el.getAttribute(this.prefix + "-ease");
+            if (easingAttr) {
+                try {
+                    el.smoothScrollLerpEase = parseFloat(easingAttr);
+                }
+                catch (e) {
+                    //
+                }
+            }
+        }
+    };
+    /**
+     * Event on wheel
+     */
+    SmoothScroll.prototype._handleWheel = function (evt) {
+        var prop = this.prop;
+        if (!prop.enabled || !prop.useWheel) {
+            return;
+        }
+        // stop propagation if needed
+        if (prop.stopPropagation
+            || (!prop.stopPropagation
+                && ((this.scrollLeft > 0
+                    && this.scrollLeft < this.maxScrollableWidth)
+                    || (this.scrollTop > 0
+                        && this.scrollTop < this.maxScrollableHeight)))) {
+            evt.stopImmediatePropagation();
+            evt.stopPropagation();
+            evt.preventDefault();
+        }
+        // get normalized delta
+        var delta = normalize_wheel_1.default(evt);
+        // set new scroll targets
+        this.targetLeftBound += prop.isHorizontal ? delta.pixelY : delta.pixelX;
+        this.targetTopBound += prop.isHorizontal ? delta.pixelX : delta.pixelY;
+        // play scroll
+        this._enable();
+        // launch events
+        this.callbacks.tbt('wheel', evt);
+    };
+    /**
+     * Toggle animation: Enable / Disable scrolling
+     */
+    SmoothScroll.prototype._toggle = function () {
+        if (this.prop.enabled) {
+            this._enable();
+        }
+        else {
+            this._disable();
+        }
+    };
+    /**
+     * Enable scrolling
+     */
+    SmoothScroll.prototype._enable = function () {
+        var _this = this;
+        if (!this.prop.enabled) {
+            return;
+        }
+        // set animation callback for the outer AnimationFrame
+        if (!!this.prop.animationFrame && !this._outerAnimationFrameEvent) {
+            this._outerAnimationFrameEvent = this.prop.animationFrame.addCallback('frame', function (data) {
+                _this._currentFPS = data.realFPS;
+                _this.render();
+            });
+        }
+        else {
+            // otherwise, check if inner AnimationFrame is created
+            if (!this._animationFrame) {
+                this._animationFrame = new AnimationFrame_1.AnimationFrame();
+                this._animationFrame.addCallback('frame', function (data) {
+                    _this._currentFPS = data.realFPS;
+                    _this.render();
+                });
+            }
+            this._animationFrame.play();
+        }
+    };
+    /**
+     * Disable scrolling
+     */
+    SmoothScroll.prototype._disable = function () {
+        if (!!this._outerAnimationFrameEvent && !!this.prop.animationFrame) {
+            this._outerAnimationFrameEvent.remove();
+        }
+        if (this._animationFrame) {
+            this._animationFrame.pause();
+        }
+    };
+    /**
+     * Render elements
+     */
+    SmoothScroll.prototype.render = function () {
+        // vars
+        var prop = this.prop;
+        // recalculate sizes
+        if (prop.recalculateSizes) {
+            this._recalculateSizes();
+        }
+        // calculate scroll values
+        this._calcScroll();
+        // change elements' values
+        this._calcElements();
+        // render
+        this._renderElements();
+        // disable instant scrolling
+        if (this._instant) {
+            this._instant = false;
+        }
+        // launch events
+        this.callbacks.tbt('scroll', 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 scroll value
+     */
+    SmoothScroll.prototype._calcScroll = function () {
+        var overscroll = this.prop.overscroll;
+        // use overscroll
+        if (overscroll) {
+            // left
+            if (this.targetLeft < 0) {
+                this.targetLeftBound = this._lerp(this.targetLeftBound, 0, overscroll.friction);
+            }
+            else if (this.targetLeft > this.maxScrollableWidth) {
+                this.targetLeftBound = this._lerp(this.targetLeftBound, this.maxScrollableWidth, overscroll.friction);
+            }
+            // top
+            if (this.targetTop < 0) {
+                this.targetTopBound = this._lerp(this.targetTopBound, 0, overscroll.friction);
+            }
+            else if (this.targetTop > this.maxScrollableHeight) {
+                this.targetTopBound = this._lerp(this.targetTopBound, this.maxScrollableHeight, overscroll.friction);
+            }
+        }
+        // update values
+        this._scrollLeft = this._lerp(this.scrollLeft, this.targetLeft);
+        this._scrollTop = this._lerp(this.scrollTop, this.targetTop);
+    };
+    /**
+     * Calculate elements' values.
+     */
+    SmoothScroll.prototype._calcElements = function () {
+        var globalEase = this._getLerpEase();
+        for (var index = 0; index < this._elementsLength; index += 1) {
+            var el = this._elements[index];
+            // get element ease
+            var elEase = this._getLerpEase(el);
+            // change values
+            if (elEase === globalEase) {
+                el.smoothScrollLeft = this._scrollLeft;
+                el.smoothScrollTop = this._scrollTop;
+            }
+            else {
+                el.smoothScrollLeft = this._lerp(el.smoothScrollLeft, this._targetLeft, elEase);
+                el.smoothScrollTop = this._lerp(el.smoothScrollTop, this._targetTop, elEase);
+            }
+        }
+    };
+    /**
+     * Interpolate values
+     */
+    SmoothScroll.prototype._lerp = function (current, target, ease) {
+        if (ease === void 0) { ease = this._getLerpEase(); }
+        var _a = this.prop.render, lerpToFixed = _a.lerpToFixed, approximation = _a.approximation;
+        var currentEase = this._instant ? 1 : ease;
+        var val = math_1.lerp(current, target, currentEase, approximation);
+        // round the values
+        if (typeof lerpToFixed === 'number') {
+            var fixed = Math.round(Math.abs(lerpToFixed));
+            return parseFloat(val.toFixed(fixed));
+        }
+        return val;
+    };
+    /**
+     * Get element ease
+     */
+    SmoothScroll.prototype._getLerpEase = function (el) {
+        if (el === void 0) { el = false; }
+        var _a = this.prop.render, lerpEase = _a.lerp, normalizeLerp = _a.normalizeLerp;
+        var fpsMultiplier = normalizeLerp ? 60 / this._currentFPS : 1;
+        if (el) {
+            return el.smoothScrollLerpEase || lerpEase * fpsMultiplier;
+        }
+        return lerpEase * fpsMultiplier;
+    };
+    /**
+     * Render elements
+     */
+    SmoothScroll.prototype._renderElements = function () {
+        for (var index = 0; index < this._elementsLength; index += 1) {
+            var el = this._elements[index];
+            // coords
+            var x = -el.smoothScrollLeft;
+            var y = -el.smoothScrollTop;
+            // 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)";
+        }
+    };
+    // LIKE NATIVE SCROLL
+    /**
+     * Scroll to
+     */
+    SmoothScroll.prototype.scrollTo = function () {
+        // eslint-disable-next-line prefer-rest-params
+        var arg = arguments;
+        // if object
+        if (arg.length === 1 && typeof arg[0] === 'object') {
+            var options = arg[0];
+            var top_1 = options.top, left = options.left, behavior = options.behavior;
+            if (typeof left !== 'undefined') {
+                if (behavior === 'smooth') {
+                    this.targetLeftBound = left;
+                }
+                else {
+                    this.scrollLeft = left;
+                }
+            }
+            if (typeof top_1 !== 'undefined') {
+                if (behavior === 'smooth') {
+                    this.targetTopBound = top_1;
+                }
+                else {
+                    this.scrollTop = top_1;
+                }
+            }
+            if (behavior === 'smooth') {
+                this._enable();
+            }
+        }
+        // if numbers
+        if (typeof arg[0] === 'number' || typeof arg[1] === 'number') {
+            if (typeof arg[0] === 'number') {
+                // eslint-disable-next-line prefer-destructuring
+                this.scrollLeft = arg[0];
+            }
+            if (typeof arg[1] === 'number') {
+                // eslint-disable-next-line prefer-destructuring
+                this.scrollTop = arg[1];
+            }
+        }
+    };
+    /**
+     * Destroy the scroll
+     */
+    SmoothScroll.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
+        this._elements.forEach(function (el) {
+            el.style.transform = '';
+            el.style.willChange = '';
+        });
+    };
+    return SmoothScroll;
+}(Component_1.Component));
+exports.SmoothScroll = SmoothScroll;

package/build/cjs/components/scroll/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });