vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,517 @@
+"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;

package/build/cjs/components/scroll/plugins/SmoothScrollDragPlugin.js

@@ -0,0 +1,178 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmoothScrollDragPlugin = void 0;
+var DraggerMove_1 = require("../../dragger/DraggerMove");
+var Plugin_1 = require("../../../base/Plugin");
+var draggingClassName = 'is-dragging';
+/**
+ * A class for Plugins.
+ */
+var SmoothScrollDragPlugin = /** @class */ (function (_super) {
+    __extends(SmoothScrollDragPlugin, _super);
+    function SmoothScrollDragPlugin(initialProp) {
+        var _this = _super.call(this, initialProp) || this;
+        _this._componentEvents = [];
+        _this._currentLerp = false;
+        return _this;
+    }
+    SmoothScrollDragPlugin.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, speed: 1, lerp: false, reverseDir: false });
+    };
+    Object.defineProperty(SmoothScrollDragPlugin.prototype, "isDragging", {
+        /**
+         * If is dragging at the moment
+         */
+        get: function () {
+            if (this._dragger) {
+                return this._dragger.isDragging;
+            }
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SmoothScrollDragPlugin.prototype._constructor = function () {
+        _super.prototype._constructor.call(this);
+        this._toggleDragger();
+    };
+    SmoothScrollDragPlugin.prototype._onPropMutate = function () {
+        _super.prototype._onPropMutate.call(this);
+        this._toggleDragger();
+    };
+    /**
+     * Add or remove dragger
+     */
+    SmoothScrollDragPlugin.prototype._toggleDragger = function () {
+        if (this.prop.enabled) {
+            this._addDragger();
+        }
+        else {
+            this._removeDragger();
+        }
+    };
+    /**
+     * Add dragger events
+     */
+    SmoothScrollDragPlugin.prototype._addDragger = function () {
+        var _this = this;
+        if (this._dragger) {
+            return;
+        }
+        var component = this.component;
+        this._dragger = new DraggerMove_1.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', function () {
+            var _a;
+            (_a = _this._dragger) === null || _a === void 0 ? void 0 : _a.cancel();
+        }));
+    };
+    /**
+     * Remove dragger events
+     */
+    SmoothScrollDragPlugin.prototype._removeDragger = function () {
+        if (!this._dragger) {
+            return;
+        }
+        this._dragger.destroy();
+        this._dragger = undefined;
+        this._componentEvents.forEach(function (evt) {
+            evt.remove();
+        });
+        this._componentEvents = [];
+    };
+    /**
+     * Callback on dragging start
+     */
+    SmoothScrollDragPlugin.prototype._handleDragStart = function () {
+        var component = this.component;
+        if (!component.prop.enabled) {
+            return;
+        }
+        // set classes
+        component.outer.classList.add(draggingClassName);
+        component.container.classList.add(draggingClassName);
+        // change lerp
+        var lerp = this.prop.lerp;
+        if (typeof lerp !== 'boolean') {
+            this._currentLerp = component.prop.render.lerp;
+            component.changeProp({
+                render: {
+                    lerp: lerp,
+                },
+            });
+        }
+    };
+    /**
+     * Callback on dragging move
+     */
+    SmoothScrollDragPlugin.prototype._handleDragMove = function (data) {
+        var component = this.component;
+        if (!component.prop.enabled) {
+            return;
+        }
+        var _a = this.prop, speed = _a.speed, reverseDir = _a.reverseDir;
+        // get coordinates
+        var x = data.step.x * speed;
+        var y = data.step.y * speed;
+        // update scroll values
+        component.targetLeft -= !reverseDir ? x : y;
+        component.targetTop -= !reverseDir ? y : x;
+    };
+    /**
+     * Callback on dragging end
+     */
+    SmoothScrollDragPlugin.prototype._handleDragEnd = function () {
+        var component = this.component;
+        // 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
+     */
+    SmoothScrollDragPlugin.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._removeDragger();
+    };
+    return SmoothScrollDragPlugin;
+}(Plugin_1.Plugin));
+exports.SmoothScrollDragPlugin = SmoothScrollDragPlugin;