vevet 3.0.0-beta.1 → 3.0.0-beta.2

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

@@ -1,3 +1,29 @@
+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';
@@ -8,213 +34,282 @@ import { onResize } from '../../utils/internal/onResize';
 /**
  * Smooth scrolling
  */
-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);
+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;
         // 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;
-        const { container, elements, hasWillChange, animationFrame, translatePrecision, } = this.props;
+        _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;
         // get outer elements
-        this._container = selectOne(container);
-        if (!(this._container instanceof HTMLElement)) {
-            throw new Error(`${container} is not a HTMLElement`);
+        _this._container = selectOne(container);
+        if (!(_this._container instanceof HTMLElement)) {
+            throw new Error("".concat(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,
-            hasWillChange,
-            translatePrecision,
+        _this._elements = new Elements({
+            container: _this._container,
+            wrapperClassName: _this.className('__wrapper'),
+            elements: elements,
+            hasWillChange: hasWillChange,
+            translatePrecision: translatePrecision,
         });
         // set classnames
-        this._setDirectionClassNames(true);
+        _this._setDirectionClassNames(true);
         // create animation frame
-        this._animationFrame = new AnimationFrame({
-            callback: () => this.render(),
+        _this._animationFrame = new AnimationFrame({
+            callback: function () { return _this.render(); },
             outerAnimationFrame: animationFrame,
         });
         // initialize the class
         if (canInit) {
-            this.init();
+            _this.init();
         }
-    }
-    _init() {
-        super._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);
         this._setEvents();
         this._toggle();
-    }
-    _setDirectionClassNames(isActive) {
-        const { direction } = this.props;
-        const isHorizontal = direction === 'horizontal' && isActive;
-        const isVertical = direction === 'vertical' && isActive;
+    };
+    SmoothScroll.prototype._setDirectionClassNames = function (isActive) {
+        var direction = this.props.direction;
+        var isHorizontal = direction === 'horizontal' && isActive;
+        var isVertical = direction === 'vertical' && isActive;
         this.wrapper.classList.toggle(this.className('_horizontal'), isHorizontal);
         this.wrapper.classList.toggle(this.className('_vertical'), isVertical);
-    }
+    };
     /** Set events */
-    _setEvents() {
+    SmoothScroll.prototype._setEvents = function () {
+        var _this = this;
         this._setResize();
         // wheel
-        this.addEventListener(this.container, 'wheel', (event) => this.handleWheel(event));
+        this.addEventListener(this.container, 'wheel', function (event) {
+            return _this.handleWheel(event);
+        });
         // prevent native scroll
-        this.addEventListener(this.container, 'scroll', () => {
-            this.container.scrollTop = 0;
-            this.container.scrollLeft = 0;
+        this.addEventListener(this.container, 'scroll', function () {
+            _this.container.scrollTop = 0;
+            _this.container.scrollLeft = 0;
         });
-    }
+    };
     /** Set resize events */
-    _setResize() {
-        const { viewportTarget, resizeDebounce } = this.props;
+    SmoothScroll.prototype._setResize = function () {
+        var _this = this;
+        var _a = this.props, viewportTarget = _a.viewportTarget, resizeDebounce = _a.resizeDebounce;
         // resize handler
-        const resizeHandler = onResize({
-            onResize: () => this.resize(true),
+        var resizeHandler = onResize({
+            onResize: function () { return _this.resize(true); },
             element: [this.container, this.wrapper],
-            viewportTarget,
-            resizeDebounce,
+            viewportTarget: viewportTarget,
+            resizeDebounce: resizeDebounce,
         });
-        this.addDestroyableAction(() => resizeHandler.remove());
+        this.addDestroyableAction(function () { return resizeHandler.remove(); });
         // initial resize
         resizeHandler.resize();
         // if resize observer not used, we recalculate sizes on each 10th frame
         if (!resizeHandler.hasResizeObserver) {
-            this.addCallback('render', (() => {
-                if (this._frameIndex % 10 === 0) {
-                    this._recalculateScrollSizes();
+            this.addCallback('render', (function () {
+                if (_this._frameIndex % 10 === 0) {
+                    _this._recalculateScrollSizes();
                 }
             }), { isProtected: true, name: this.name });
         }
-    }
+    };
     /** Handle properties mutation */
-    _onPropsMutate() {
-        super._onPropsMutate();
+    SmoothScroll.prototype._onPropsMutate = function () {
+        _super.prototype._onPropsMutate.call(this);
         this._setDirectionClassNames(true);
         this.resize();
         this._toggle();
-    }
+    };
     /** Recalculate scroll sizes */
-    _recalculateScrollSizes() {
-        const { wrapper } = this;
-        const height = wrapper.clientHeight;
-        const width = wrapper.clientWidth;
+    SmoothScroll.prototype._recalculateScrollSizes = function () {
+        var wrapper = this.wrapper;
+        var height = wrapper.clientHeight;
+        var width = wrapper.clientWidth;
         if (height !== this._wrapperHeight || width !== this._wrapperWidth) {
             this.resize(false);
         }
-    }
+    };
     /** Resize the scene */
-    resize(isNative = false) {
+    SmoothScroll.prototype.resize = function (isNative) {
+        if (isNative === void 0) { isNative = false; }
         this._resize(isNative);
         // launch callbacks
         this.callbacks.tbt('resize', undefined);
         // enable animation
         this._enable();
-    }
+    };
     /** Resize the scene */
-    _resize(
+    SmoothScroll.prototype._resize = function (
     /** If the method was called natively on window resize */
-    isNative = false) {
-        const { container, wrapper } = this;
+    isNative) {
+        if (isNative === void 0) { isNative = false; }
+        var _a = this, container = _a.container, wrapper = _a.wrapper;
         this._clientWidth = container.clientWidth;
         this._clientHeight = container.clientHeight;
         this._wrapperWidth = wrapper.clientWidth;
@@ -241,14 +336,14 @@ export class SmoothScroll extends ComponentClass {
         container.classList.toggle(this.className('_no-scroll'), !this.hasScroll);
         // update elements
         this._elements.updateElementsProp(this.scrollLeft, this.scrollTop);
-    }
+    };
     /** Event on wheel */
-    handleWheel(event) {
-        const { isEnabled, hasWheel, hasStopPropagation, isInverseHandlerDirection, } = this.props;
+    SmoothScroll.prototype.handleWheel = function (event) {
+        var _a = this.props, isEnabled = _a.isEnabled, hasWheel = _a.hasWheel, hasStopPropagation = _a.hasStopPropagation, isInverseHandlerDirection = _a.isInverseHandlerDirection;
         if (!isEnabled || !hasWheel || !this.hasScroll) {
             return;
         }
-        const isPropagationStopped = hasStopPropagation ||
+        var isPropagationStopped = hasStopPropagation ||
             (this.scrollTop > 0 && this.scrollTop < this.maxScrollableHeight) ||
             (this.scrollLeft > 0 && this.scrollLeft < this.maxScrollableWidth);
         if (isPropagationStopped) {
@@ -257,39 +352,39 @@ export class SmoothScroll extends ComponentClass {
             event.preventDefault();
         }
         // get normalized delta
-        const { pixelX, pixelY } = normalizeWheel(event);
+        var _b = normalizeWheel(event), pixelX = _b.pixelX, pixelY = _b.pixelY;
         // set new scroll targets
-        const leftIterator = isInverseHandlerDirection ? pixelY : pixelX;
-        const topIterator = isInverseHandlerDirection ? pixelX : pixelY;
+        var leftIterator = isInverseHandlerDirection ? pixelY : pixelX;
+        var 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 });
-    }
+        this.callbacks.tbt('wheel', { event: event });
+    };
     /** Toggle animation: Enable / Disable scrolling */
-    _toggle() {
+    SmoothScroll.prototype._toggle = function () {
         if (this.props.isEnabled) {
             this._enable();
         }
         else {
             this._disable();
         }
-    }
+    };
     /** Enable scrolling */
-    _enable() {
+    SmoothScroll.prototype._enable = function () {
         if (!this.props.isEnabled) {
             return;
         }
         this._animationFrame.enable();
-    }
+    };
     /** Disable scrolling */
-    _disable() {
+    SmoothScroll.prototype._disable = function () {
         this._animationFrame.disable();
-    }
+    };
     /** Render elements */
-    render() {
+    SmoothScroll.prototype.render = function () {
         this._frameIndex += 1;
         this._calcScrollValues();
         this._calcElementsValues();
@@ -304,56 +399,58 @@ export class SmoothScroll extends ComponentClass {
         this.callbacks.tbt('render', undefined);
         // auto stop
         this._checkAutoStop();
-    }
+    };
     /** Calculate scroll values */
-    _calcScrollValues() {
+    SmoothScroll.prototype._calcScrollValues = function () {
         this._scrollLeft = this._lerp(this.scrollLeft, this.targetLeft);
         this._scrollTop = this._lerp(this.scrollTop, this.targetTop);
-    }
+    };
     /** Calculate elements' values */
-    _calcElementsValues() {
-        const { elements } = this._elements;
-        for (let index = 0; index < elements.length; index += 1) {
-            const element = elements[index];
-            const elementLerp = this._getLerp(element);
+    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);
             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 */
-    _checkAutoStop() {
+    SmoothScroll.prototype._checkAutoStop = function () {
         if (!this.props.isAutoStop) {
             return;
         }
-        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();
+        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();
         if (isGlobalInterpolated && isInnerInterpolated) {
             this._disable();
         }
-    }
+    };
     /** Interpolate values */
-    _lerp(current, target, ease = this._getLerp()) {
-        const { lerpApproximation } = this.props;
-        const currentEase = this._isInstant ? 1 : ease;
-        const value = lerp(current, target, currentEase, lerpApproximation);
+    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);
         return value;
-    }
+    };
     /** Get lerp */
-    _getLerp(element) {
+    SmoothScroll.prototype._getLerp = function (element) {
         var _a;
-        const { lerp: lerpEase, isFpsNormalized } = this.props;
-        const fpsMultiplier = isFpsNormalized
+        var _b = this.props, lerpEase = _b.lerp, isFpsNormalized = _b.isFpsNormalized;
+        var 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 */
-    scrollTo({ top, left, behavior }) {
+    SmoothScroll.prototype.scrollTo = function (_a) {
+        var top = _a.top, left = _a.left, behavior = _a.behavior;
         if (typeof left !== 'undefined') {
             if (behavior === 'smooth') {
                 this.setTargetLeft(left);
@@ -375,16 +472,18 @@ export class SmoothScroll extends ComponentClass {
         if (behavior === 'smooth') {
             this._enable();
         }
-    }
+    };
     /** Destroy the module */
-    _destroy() {
-        super._destroy();
+    SmoothScroll.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
         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