vevet 3.0.0-beta.2 → 3.0.0-beta.4

package/lib/esm/components/SmoothScroll/index.js

@@ -1,29 +1,3 @@
-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);
-};
 import { selectOne } from 'vevet-dom';
 import { Component as ComponentClass } from '../../base/Component';
 import { clamp, lerp } from '../../utils/math';
@@ -34,282 +8,213 @@ import { onResize } from '../../utils/internal/onResize';
 /**
  * Smooth scrolling
  */
-var SmoothScroll = /** @class */ (function (_super) {
-    __extends(SmoothScroll, _super);
-    function SmoothScroll(initialProps, canInit) {
-        if (canInit === void 0) { canInit = true; }
-        var _this = _super.call(this, initialProps, false) || this;
+export class SmoothScroll extends ComponentClass {
+    _getDefaultProps() {
+        return Object.assign(Object.assign({}, super._getDefaultProps()), { container: `#${this.prefix}`, elements: false, animationFrame: false, viewportTarget: 'any', resizeDebounce: 0, hasWillChange: true, translatePrecision: 2, isEnabled: true, hasWheel: true, direction: 'vertical', isInverseHandlerDirection: false, isAutoStop: true, hasStopPropagation: true, lerp: 0.1, isFpsNormalized: true, lerpApproximation: 0.1 });
+    }
+    get prefix() {
+        return `${this.app.prefix}smooth-scroll`;
+    }
+    /** Scroll container */
+    get container() {
+        return this._container;
+    }
+    /**
+     * Scroll wrapper. If the element does not exist indide the `container`,
+     * it will be created automatically
+     */
+    get wrapper() {
+        return this._elements.wrapper;
+    }
+    /** `scrollLeft` target value */
+    get targetLeft() {
+        return this._targetLeft;
+    }
+    set targetLeft(value) {
+        this.setTargetLeft(value);
+        this._enable();
+    }
+    /** Update `targetLeft` without animation */
+    setTargetLeft(value) {
+        this._targetLeft = clamp(value, [0, this.maxScrollableWidth]);
+    }
+    /** `scrollTop` target value */
+    get targetTop() {
+        return this._targetTop;
+    }
+    set targetTop(value) {
+        this.setTargetTop(value);
+        this._enable();
+    }
+    /** Update `targetTop` without animation */
+    setTargetTop(value) {
+        this._targetTop = clamp(value, [0, this.maxScrollableHeight]);
+    }
+    /** `scrollLeft` */
+    get scrollLeft() {
+        return this._scrollLeft;
+    }
+    set scrollLeft(value) {
+        this.setTargetLeft(value);
+        this._scrollLeft = this._targetLeft;
+        this._enable();
+    }
+    /** `scrollTop` */
+    get scrollTop() {
+        return this._scrollTop;
+    }
+    set scrollTop(value) {
+        this.setTargetTop(value);
+        this._scrollTop = this._targetTop;
+        this._enable();
+    }
+    /** Scroll width */
+    get scrollWidth() {
+        return this._scrollWidth;
+    }
+    /** Scroll height */
+    get scrollHeight() {
+        return this._scrollHeight;
+    }
+    /** Container width */
+    get clientWidth() {
+        return this._clientWidth;
+    }
+    /** Container height */
+    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;
+    }
+    /** Has scroll */
+    get hasScroll() {
+        return this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
+    }
+    get isSmoothScroll() {
+        return true;
+    }
+    constructor(initialProps, canInit = true) {
+        super(initialProps, false);
         // 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._wrapperWidth = 0;
-        _this._wrapperHeight = 0;
-        _this._frameIndex = 0;
-        _this._isEqualLerp = false;
-        var _a = _this.props, container = _a.container, elements = _a.elements, hasWillChange = _a.hasWillChange, animationFrame = _a.animationFrame, translatePrecision = _a.translatePrecision;
+        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._wrapperWidth = 0;
+        this._wrapperHeight = 0;
+        this._frameIndex = 0;
+        this._isEqualLerp = false;
+        const { container, elements, hasWillChange, animationFrame, translatePrecision, } = this.props;
         // get outer elements
-        _this._container = selectOne(container);
-        if (!(_this._container instanceof HTMLElement)) {
-            throw new Error("".concat(container, " is not a HTMLElement"));
+        this._container = selectOne(container);
+        if (!(this._container instanceof HTMLElement)) {
+            throw new Error(`${container} is not a HTMLElement`);
         }
-        _this.toggleClassName(_this._container, _this.className(''), true);
+        this.toggleClassName(this._container, this.className(''), true);
         // create elements
-        _this._elements = new Elements({
-            container: _this._container,
-            wrapperClassName: _this.className('__wrapper'),
-            elements: elements,
-            hasWillChange: hasWillChange,
-            translatePrecision: translatePrecision,
+        this._elements = new Elements({
+            container: this._container,
+            wrapperClassName: this.className('__wrapper'),
+            elements,
+            hasWillChange,
+            translatePrecision,
         });
         // set classnames
-        _this._setDirectionClassNames(true);
+        this._setDirectionClassNames(true);
         // create animation frame
-        _this._animationFrame = new AnimationFrame({
-            callback: function () { return _this.render(); },
+        this._animationFrame = new AnimationFrame({
+            callback: () => this.render(),
             outerAnimationFrame: animationFrame,
         });
         // initialize the class
         if (canInit) {
-            _this.init();
+            this.init();
         }
-        return _this;
-    }
-    SmoothScroll.prototype._getDefaultProps = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { container: "#".concat(this.prefix), elements: false, animationFrame: false, viewportTarget: 'any', resizeDebounce: 0, hasWillChange: true, translatePrecision: 2, isEnabled: true, hasWheel: true, direction: 'vertical', isInverseHandlerDirection: false, isAutoStop: true, hasStopPropagation: true, lerp: 0.1, isFpsNormalized: true, lerpApproximation: 0.1 });
-    };
-    Object.defineProperty(SmoothScroll.prototype, "prefix", {
-        get: function () {
-            return "".concat(this.app.prefix, "smooth-scroll");
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "container", {
-        /** Scroll container */
-        get: function () {
-            return this._container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "wrapper", {
-        /**
-         * Scroll wrapper. If the element does not exist indide the `container`,
-         * it will be created automatically
-         */
-        get: function () {
-            return this._elements.wrapper;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "targetLeft", {
-        /** `scrollLeft` target value */
-        get: function () {
-            return this._targetLeft;
-        },
-        set: function (value) {
-            this.setTargetLeft(value);
-            this._enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** Update `targetLeft` without animation */
-    SmoothScroll.prototype.setTargetLeft = function (value) {
-        this._targetLeft = clamp(value, [0, this.maxScrollableWidth]);
-    };
-    Object.defineProperty(SmoothScroll.prototype, "targetTop", {
-        /** `scrollTop` target value */
-        get: function () {
-            return this._targetTop;
-        },
-        set: function (value) {
-            this.setTargetTop(value);
-            this._enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** Update `targetTop` without animation */
-    SmoothScroll.prototype.setTargetTop = function (value) {
-        this._targetTop = clamp(value, [0, this.maxScrollableHeight]);
-    };
-    Object.defineProperty(SmoothScroll.prototype, "scrollLeft", {
-        /** `scrollLeft` */
-        get: function () {
-            return this._scrollLeft;
-        },
-        set: function (value) {
-            this.setTargetLeft(value);
-            this._scrollLeft = this._targetLeft;
-            this._enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "scrollTop", {
-        /** `scrollTop` */
-        get: function () {
-            return this._scrollTop;
-        },
-        set: function (value) {
-            this.setTargetTop(value);
-            this._scrollTop = this._targetTop;
-            this._enable();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "scrollWidth", {
-        /** Scroll width */
-        get: function () {
-            return this._scrollWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "scrollHeight", {
-        /** Scroll height */
-        get: function () {
-            return this._scrollHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "clientWidth", {
-        /** Container width */
-        get: function () {
-            return this._clientWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "clientHeight", {
-        /** Container height */
-        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
-    });
-    Object.defineProperty(SmoothScroll.prototype, "hasScroll", {
-        /** Has scroll */
-        get: function () {
-            return this.maxScrollableHeight > 0 || this.maxScrollableWidth > 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SmoothScroll.prototype, "isSmoothScroll", {
-        get: function () {
-            return true;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SmoothScroll.prototype._init = function () {
-        _super.prototype._init.call(this);
+    }
+    _init() {
+        super._init();
         this._setEvents();
         this._toggle();
-    };
-    SmoothScroll.prototype._setDirectionClassNames = function (isActive) {
-        var direction = this.props.direction;
-        var isHorizontal = direction === 'horizontal' && isActive;
-        var isVertical = direction === 'vertical' && isActive;
+    }
+    _setDirectionClassNames(isActive) {
+        const { direction } = this.props;
+        const isHorizontal = direction === 'horizontal' && isActive;
+        const isVertical = direction === 'vertical' && isActive;
         this.wrapper.classList.toggle(this.className('_horizontal'), isHorizontal);
         this.wrapper.classList.toggle(this.className('_vertical'), isVertical);
-    };
+    }
     /** Set events */
-    SmoothScroll.prototype._setEvents = function () {
-        var _this = this;
+    _setEvents() {
         this._setResize();
         // wheel
-        this.addEventListener(this.container, 'wheel', function (event) {
-            return _this.handleWheel(event);
-        });
+        this.addEventListener(this.container, 'wheel', (event) => this.handleWheel(event));
         // prevent native scroll
-        this.addEventListener(this.container, 'scroll', function () {
-            _this.container.scrollTop = 0;
-            _this.container.scrollLeft = 0;
+        this.addEventListener(this.container, 'scroll', () => {
+            this.container.scrollTop = 0;
+            this.container.scrollLeft = 0;
         });
-    };
+    }
     /** Set resize events */
-    SmoothScroll.prototype._setResize = function () {
-        var _this = this;
-        var _a = this.props, viewportTarget = _a.viewportTarget, resizeDebounce = _a.resizeDebounce;
+    _setResize() {
+        const { viewportTarget, resizeDebounce } = this.props;
         // resize handler
-        var resizeHandler = onResize({
-            onResize: function () { return _this.resize(true); },
+        const resizeHandler = onResize({
+            onResize: () => this.resize(true),
             element: [this.container, this.wrapper],
-            viewportTarget: viewportTarget,
-            resizeDebounce: resizeDebounce,
+            viewportTarget,
+            resizeDebounce,
         });
-        this.addDestroyableAction(function () { return resizeHandler.remove(); });
+        this.addDestroyableAction(() => resizeHandler.remove());
         // initial resize
         resizeHandler.resize();
         // if resize observer not used, we recalculate sizes on each 10th frame
         if (!resizeHandler.hasResizeObserver) {
-            this.addCallback('render', (function () {
-                if (_this._frameIndex % 10 === 0) {
-                    _this._recalculateScrollSizes();
+            this.addCallback('render', (() => {
+                if (this._frameIndex % 10 === 0) {
+                    this._recalculateScrollSizes();
                 }
             }), { isProtected: true, name: this.name });
         }
-    };
+    }
     /** Handle properties mutation */
-    SmoothScroll.prototype._onPropsMutate = function () {
-        _super.prototype._onPropsMutate.call(this);
+    _onPropsMutate() {
+        super._onPropsMutate();
         this._setDirectionClassNames(true);
         this.resize();
         this._toggle();
-    };
+    }
     /** Recalculate scroll sizes */
-    SmoothScroll.prototype._recalculateScrollSizes = function () {
-        var wrapper = this.wrapper;
-        var height = wrapper.clientHeight;
-        var width = wrapper.clientWidth;
+    _recalculateScrollSizes() {
+        const { wrapper } = this;
+        const height = wrapper.clientHeight;
+        const width = wrapper.clientWidth;
         if (height !== this._wrapperHeight || width !== this._wrapperWidth) {
             this.resize(false);
         }
-    };
+    }
     /** Resize the scene */
-    SmoothScroll.prototype.resize = function (isNative) {
-        if (isNative === void 0) { isNative = false; }
+    resize(isNative = false) {
         this._resize(isNative);
         // launch callbacks
         this.callbacks.tbt('resize', undefined);
         // enable animation
         this._enable();
-    };
+    }
     /** Resize the scene */
-    SmoothScroll.prototype._resize = function (
+    _resize(
     /** If the method was called natively on window resize */
-    isNative) {
-        if (isNative === void 0) { isNative = false; }
-        var _a = this, container = _a.container, wrapper = _a.wrapper;
+    isNative = false) {
+        const { container, wrapper } = this;
         this._clientWidth = container.clientWidth;
         this._clientHeight = container.clientHeight;
         this._wrapperWidth = wrapper.clientWidth;
@@ -336,14 +241,14 @@ var SmoothScroll = /** @class */ (function (_super) {
         container.classList.toggle(this.className('_no-scroll'), !this.hasScroll);
         // update elements
         this._elements.updateElementsProp(this.scrollLeft, this.scrollTop);
-    };
+    }
     /** Event on wheel */
-    SmoothScroll.prototype.handleWheel = function (event) {
-        var _a = this.props, isEnabled = _a.isEnabled, hasWheel = _a.hasWheel, hasStopPropagation = _a.hasStopPropagation, isInverseHandlerDirection = _a.isInverseHandlerDirection;
+    handleWheel(event) {
+        const { isEnabled, hasWheel, hasStopPropagation, isInverseHandlerDirection, } = this.props;
         if (!isEnabled || !hasWheel || !this.hasScroll) {
             return;
         }
-        var isPropagationStopped = hasStopPropagation ||
+        const isPropagationStopped = hasStopPropagation ||
             (this.scrollTop > 0 && this.scrollTop < this.maxScrollableHeight) ||
             (this.scrollLeft > 0 && this.scrollLeft < this.maxScrollableWidth);
         if (isPropagationStopped) {
@@ -352,39 +257,39 @@ var SmoothScroll = /** @class */ (function (_super) {
             event.preventDefault();
         }
         // get normalized delta
-        var _b = normalizeWheel(event), pixelX = _b.pixelX, pixelY = _b.pixelY;
+        const { pixelX, pixelY } = normalizeWheel(event);
         // set new scroll targets
-        var leftIterator = isInverseHandlerDirection ? pixelY : pixelX;
-        var topIterator = isInverseHandlerDirection ? pixelX : pixelY;
+        const leftIterator = isInverseHandlerDirection ? pixelY : pixelX;
+        const topIterator = isInverseHandlerDirection ? pixelX : pixelY;
         this.setTargetLeft(this.targetLeft + leftIterator);
         this.setTargetTop(this.targetTop + topIterator);
         // play animation frame
         this._enable();
         // launch events
-        this.callbacks.tbt('wheel', { event: event });
-    };
+        this.callbacks.tbt('wheel', { event });
+    }
     /** Toggle animation: Enable / Disable scrolling */
-    SmoothScroll.prototype._toggle = function () {
+    _toggle() {
         if (this.props.isEnabled) {
             this._enable();
         }
         else {
             this._disable();
         }
-    };
+    }
     /** Enable scrolling */
-    SmoothScroll.prototype._enable = function () {
+    _enable() {
         if (!this.props.isEnabled) {
             return;
         }
         this._animationFrame.enable();
-    };
+    }
     /** Disable scrolling */
-    SmoothScroll.prototype._disable = function () {
+    _disable() {
         this._animationFrame.disable();
-    };
+    }
     /** Render elements */
-    SmoothScroll.prototype.render = function () {
+    render() {
         this._frameIndex += 1;
         this._calcScrollValues();
         this._calcElementsValues();
@@ -399,58 +304,56 @@ var SmoothScroll = /** @class */ (function (_super) {
         this.callbacks.tbt('render', undefined);
         // auto stop
         this._checkAutoStop();
-    };
+    }
     /** Calculate scroll values */
-    SmoothScroll.prototype._calcScrollValues = function () {
+    _calcScrollValues() {
         this._scrollLeft = this._lerp(this.scrollLeft, this.targetLeft);
         this._scrollTop = this._lerp(this.scrollTop, this.targetTop);
-    };
+    }
     /** Calculate elements' values */
-    SmoothScroll.prototype._calcElementsValues = function () {
-        var elements = this._elements.elements;
-        for (var index = 0; index < elements.length; index += 1) {
-            var element = elements[index];
-            var elementLerp = this._getLerp(element);
+    _calcElementsValues() {
+        const { elements } = this._elements;
+        for (let index = 0; index < elements.length; index += 1) {
+            const element = elements[index];
+            const elementLerp = this._getLerp(element);
             element.smoothScrollLeft = this._lerp(element.smoothScrollLeft, this._targetLeft, elementLerp);
             element.smoothScrollTop = this._lerp(element.smoothScrollTop, this._targetTop, elementLerp);
         }
-    };
+    }
     /** Make auto stop if the target and current values are equal */
-    SmoothScroll.prototype._checkAutoStop = function () {
+    _checkAutoStop() {
         if (!this.props.isAutoStop) {
             return;
         }
-        var yDiff = Math.abs(this.targetTop - this.scrollTop);
-        var xDiff = Math.abs(this.targetLeft - this.scrollLeft);
-        var isGlobalInterpolated = xDiff === 0 && yDiff === 0;
-        var isInnerInterpolated = this._elements.checkAllScrollValuesEqual();
+        const yDiff = Math.abs(this.targetTop - this.scrollTop);
+        const xDiff = Math.abs(this.targetLeft - this.scrollLeft);
+        const isGlobalInterpolated = xDiff === 0 && yDiff === 0;
+        const isInnerInterpolated = this._elements.checkAllScrollValuesEqual();
         if (isGlobalInterpolated && isInnerInterpolated) {
             this._disable();
         }
-    };
+    }
     /** Interpolate values */
-    SmoothScroll.prototype._lerp = function (current, target, ease) {
-        if (ease === void 0) { ease = this._getLerp(); }
-        var lerpApproximation = this.props.lerpApproximation;
-        var currentEase = this._isInstant ? 1 : ease;
-        var value = lerp(current, target, currentEase, lerpApproximation);
+    _lerp(current, target, ease = this._getLerp()) {
+        const { lerpApproximation } = this.props;
+        const currentEase = this._isInstant ? 1 : ease;
+        const value = lerp(current, target, currentEase, lerpApproximation);
         return value;
-    };
+    }
     /** Get lerp */
-    SmoothScroll.prototype._getLerp = function (element) {
+    _getLerp(element) {
         var _a;
-        var _b = this.props, lerpEase = _b.lerp, isFpsNormalized = _b.isFpsNormalized;
-        var fpsMultiplier = isFpsNormalized
+        const { lerp: lerpEase, isFpsNormalized } = this.props;
+        const fpsMultiplier = isFpsNormalized
             ? this._animationFrame.easeMultiplier
             : 1;
         if (this._isEqualLerp || !element) {
             return lerpEase * fpsMultiplier;
         }
         return ((_a = element.smoothScrollLerp) !== null && _a !== void 0 ? _a : lerpEase) * fpsMultiplier;
-    };
+    }
     /** Scroll to */
-    SmoothScroll.prototype.scrollTo = function (_a) {
-        var top = _a.top, left = _a.left, behavior = _a.behavior;
+    scrollTo({ top, left, behavior }) {
         if (typeof left !== 'undefined') {
             if (behavior === 'smooth') {
                 this.setTargetLeft(left);
@@ -472,18 +375,16 @@ var SmoothScroll = /** @class */ (function (_super) {
         if (behavior === 'smooth') {
             this._enable();
         }
-    };
+    }
     /** Destroy the module */
-    SmoothScroll.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
+    _destroy() {
+        super._destroy();
         this._disable();
         this._elements.destroy();
         this._animationFrame.destroy();
         this._setDirectionClassNames(false);
         this._container.classList.remove(this.className('_has-scroll'));
         this._container.classList.remove(this.className('_no-scroll'));
-    };
-    return SmoothScroll;
-}(ComponentClass));
-export { SmoothScroll };
+    }
+}
 //# sourceMappingURL=index.js.map