vevet 2.16.1 → 3.0.0-beta.0

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

@@ -1,147 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmoothScrollKeyboardPlugin = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Plugin_1 = require("../../../base/Plugin");
-var timeoutCallback_1 = __importDefault(require("../../../utils/common/timeoutCallback"));
-/**
- * A class for Plugins.
- */
-var SmoothScrollKeyboardPlugin = /** @class */ (function (_super) {
-    __extends(SmoothScrollKeyboardPlugin, _super);
-    function SmoothScrollKeyboardPlugin() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SmoothScrollKeyboardPlugin.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        this.addEventListeners(window, 'keydown', function (e) {
-            _this._handleKeydown(e);
-        });
-    };
-    /**
-     * Event on a key pressed
-     */
-    SmoothScrollKeyboardPlugin.prototype._handleKeydown = function (e) {
-        var component = this._component;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // tab is active for everethyng, forms too
-        if (e.keyCode === 9) {
-            this._handleTab();
-            return;
-        }
-        // check if some element is under focus
-        // if some exists, ignore key events
-        var activeElement = document.activeElement;
-        if (activeElement) {
-            if (activeElement instanceof HTMLInputElement
-                || activeElement instanceof HTMLTextAreaElement) {
-                return;
-            }
-        }
-        // check if the scroll container is in viewport
-        var viewport = this._app.viewport;
-        var bounding = component.outer.getBoundingClientRect();
-        if (!(bounding.left < viewport.width
-            && bounding.right > 0
-            && bounding.top < viewport.height
-            && bounding.bottom > 0)) {
-            return;
-        }
-        // update scroll values
-        var scrollIterator = 40;
-        switch (e.keyCode) {
-            // up
-            case 38:
-                component.targetTop -= scrollIterator;
-                break;
-            // down
-            case 40:
-                component.targetTop += scrollIterator;
-                break;
-            // right
-            case 39:
-                component.targetLeft += scrollIterator;
-                break;
-            // left
-            case 37:
-                component.targetLeft -= scrollIterator;
-                break;
-            // page down
-            case 34:
-                component.targetTop += scrollIterator * 10;
-                break;
-            // page up
-            case 33:
-                component.targetTop -= scrollIterator * 10;
-                break;
-            // home
-            case 36:
-                component.targetTop = 0;
-                component.targetLeft = 0;
-                break;
-            // end
-            case 35:
-                component.targetTop = component.scrollHeight;
-                component.targetLeft = component.scrollWidth;
-                break;
-            // space
-            case 32:
-                component.targetTop += scrollIterator * 5;
-                break;
-            default:
-                break;
-        }
-    };
-    /**
-     * Handle Tab key pressed
-     */
-    SmoothScrollKeyboardPlugin.prototype._handleTab = function () {
-        var _this = this;
-        // get active element and scroll to it
-        (0, timeoutCallback_1.default)(function () {
-            var scroll = _this._component;
-            var activeElement = document.activeElement;
-            // skip elements that do not belong to the SmoothScroll outer
-            if (!(activeElement instanceof HTMLElement)
-                || !(0, vevet_dom_1.childOf)(activeElement, scroll.outer)) {
-                return;
-            }
-            // get boundings
-            var scrollOuterBounding = scroll.outer.getBoundingClientRect();
-            var activeElementBounding = activeElement.getBoundingClientRect();
-            // get element position
-            var top = scroll.scrollTop
-                + (activeElementBounding.top - scrollOuterBounding.top)
-                - (scroll.clientHeight / 2 - activeElementBounding.height / 2);
-            var left = scroll.scrollLeft
-                + (activeElementBounding.left - scrollOuterBounding.left)
-                - (scroll.clientWidth / 2 - activeElementBounding.width / 2);
-            // apply new targets
-            scroll.targetTop = top;
-            scroll.targetLeft = left;
-        }, 120);
-    };
-    return SmoothScrollKeyboardPlugin;
-}(Plugin_1.Plugin));
-exports.SmoothScrollKeyboardPlugin = SmoothScrollKeyboardPlugin;

package/build/cjs/components/scroll/scrollable/ScrollEventsBase.js

@@ -1,136 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __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.ScrollEventsBase = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Component_1 = require("../../../base/Component");
-/**
- * A base for scroll event components
- */
-var ScrollEventsBase = /** @class */ (function (_super) {
-    __extends(ScrollEventsBase, _super);
-    function ScrollEventsBase(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // get scroll container
-        if (typeof _this.prop.container === 'string') {
-            _this._scrollContainer = (0, vevet_dom_1.selectOne)(_this.prop.container);
-        }
-        else {
-            _this._scrollContainer = _this.prop.container;
-        }
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    ScrollEventsBase.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, intersectionRoot: false });
-    };
-    Object.defineProperty(ScrollEventsBase.prototype, "scrollContainer", {
-        get: function () {
-            return this._scrollContainer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollEventsBase.prototype, "scrollableElement", {
-        get: function () {
-            if (this._scrollContainer instanceof Window) {
-                return this._app.html;
-            }
-            return this._scrollContainer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollEventsBase.prototype, "domParent", {
-        /**
-         * Parent of inner elements
-         */
-        get: function () {
-            var scrollContainer = this.scrollContainer;
-            if (scrollContainer instanceof Window) {
-                return this._app.body;
-            }
-            if (scrollContainer instanceof Element) {
-                return scrollContainer;
-            }
-            return scrollContainer.outer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollEventsBase.prototype, "intersectionRoot", {
-        /**
-         * Used as a "root" for IntersectionObserver
-         */
-        get: function () {
-            if (this.prop.intersectionRoot === false) {
-                var scrollContainer = this.scrollContainer;
-                if (scrollContainer instanceof Window) {
-                    return null;
-                }
-                if (scrollContainer instanceof Element) {
-                    return scrollContainer;
-                }
-                return scrollContainer.outer;
-            }
-            return this.prop.intersectionRoot;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollEventsBase.prototype, "scrollContainerBounding", {
-        /**
-         * BoundingRect of 'scrollContainer'
-         */
-        get: function () {
-            if (this.intersectionRoot) {
-                var bounding = this.intersectionRoot.getBoundingClientRect();
-                return {
-                    top: bounding.top,
-                    left: bounding.left,
-                    width: bounding.width,
-                    height: bounding.height,
-                };
-            }
-            return {
-                top: 0,
-                left: 0,
-                width: this._app.viewport.width,
-                height: this._app.viewport.height,
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return ScrollEventsBase;
-}(Component_1.Component));
-exports.ScrollEventsBase = ScrollEventsBase;

package/build/cjs/components/scroll/scrollable/ScrollView.js

@@ -1,377 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollView = void 0;
-var ScrollEventsBase_1 = require("./ScrollEventsBase");
-var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
-var listeners_1 = require("../../../utils/listeners");
-var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
-var timeoutCallback_1 = __importDefault(require("../../../utils/common/timeoutCallback"));
-/**
- * Elements into viewport
- */
-var ScrollView = /** @class */ (function (_super) {
-    __extends(ScrollView, _super);
-    function ScrollView(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        _this._scrollEvent = undefined;
-        _this._intersectionObserverIn = undefined;
-        _this._intersectionObserverOut = undefined;
-        _this._firstStart = true;
-        _this._elements = __spreadArray([], _this.prop.elements, true);
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    Object.defineProperty(ScrollView.prototype, "prefix", {
-        get: function () {
-            return "".concat(this._app.prefix, "scroll-view");
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ScrollView.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { enabled: true, container: window, elements: [], threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true, viewportTarget: '', resizeTimeout: 0 });
-    };
-    Object.defineProperty(ScrollView.prototype, "elements", {
-        /**
-         * Elements to seek
-         */
-        get: function () {
-            return this._elements;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ScrollView.prototype.init = function () {
-        _super.prototype.init.call(this);
-    };
-    // Set Module Events
-    ScrollView.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        this.resize();
-        this.addViewportCallback(this.prop.viewportTarget, function () {
-            _this.resize();
-        }, {
-            timeout: this.prop.resizeTimeout,
-        });
-    };
-    ScrollView.prototype._onPropMutate = function () {
-        _super.prototype._onPropMutate.call(this);
-        this.resize();
-    };
-    /**
-     * Resize the scene
-     */
-    ScrollView.prototype.resize = function () {
-        this._removeViewEvents();
-        if (this.prop.enabled) {
-            this._setViewEvents();
-            this.seekBounding();
-        }
-    };
-    /**
-     * Set View events: scroll or intersection
-     */
-    ScrollView.prototype._setViewEvents = function () {
-        var _this = this;
-        // set intersection observer
-        if ((0, listeners_1.intersectionObserverSupported)() && this.prop.useIntersectionObserver) {
-            // get intersecton margins
-            var scrollContainerBounding = this.scrollContainerBounding;
-            var xMargin = this._firstStart
-                ? 0 : scrollContainerBounding.width * (1 - this.prop.threshold) * -1;
-            var yMargin = this._firstStart
-                ? 0 : scrollContainerBounding.height * (1 - this.prop.threshold) * -1;
-            // create intersection observers
-            this._intersectionObserverIn = new IntersectionObserver(this._handleIntersectionObserverIn.bind(this), {
-                root: this.intersectionRoot,
-                threshold: 0,
-                rootMargin: "0px ".concat(xMargin, "px ").concat(yMargin, "px 0px"),
-            });
-            this.elements.forEach(function (el) {
-                var _a;
-                (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(el);
-            });
-            if (this.prop.states === 'inout') {
-                this._intersectionObserverOut = new IntersectionObserver(this._handleIntersectionObserverOut.bind(this), {
-                    root: this.intersectionRoot,
-                    threshold: 0,
-                    rootMargin: '0px 0px 0px 0px',
-                });
-                this.elements.forEach(function (el) {
-                    var _a;
-                    (_a = _this._intersectionObserverOut) === null || _a === void 0 ? void 0 : _a.observe(el);
-                });
-            }
-        }
-        else {
-            // set scroll bounding events
-            this._scrollEvent = (0, onScroll_1.default)({
-                container: this.prop.container,
-                callback: this._handleScroll.bind(this),
-            });
-        }
-    };
-    /**
-     * Remove View events: scroll or intersection
-     */
-    ScrollView.prototype._removeViewEvents = function () {
-        var _a, _b;
-        // remove scroll events
-        if (this._scrollEvent) {
-            this._scrollEvent.remove();
-            this._scrollEvent = undefined;
-        }
-        // destroy intersection observers
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._intersectionObserverIn = undefined;
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.disconnect();
-        this._intersectionObserverOut = undefined;
-    };
-    /**
-     * Event on IntersectionObserver
-     */
-    ScrollView.prototype._handleIntersectionObserverIn = function (data) {
-        var parentBounding = this._firstStart ? this.scrollContainerBounding : false;
-        for (var index = 0; index < data.length; index += 1) {
-            var entry = data[index];
-            var delay = 0;
-            if (this._firstStart && !!parentBounding && entry.isIntersecting) {
-                delay = this._elementInViewportData(entry.target, parentBounding).delay;
-            }
-            if (entry.isIntersecting) {
-                this._handleInOut(entry.target, entry.isIntersecting, delay);
-            }
-        }
-        this._processUnusedElements();
-        // change states
-        if (this._firstStart) {
-            this._firstStart = false;
-            this.resize();
-        }
-    };
-    /**
-     * Event on IntersectionObserver
-     */
-    ScrollView.prototype._handleIntersectionObserverOut = function (data) {
-        for (var index = 0; index < data.length; index += 1) {
-            var entry = data[index];
-            if (!entry.isIntersecting) {
-                this._handleInOut(entry.target, entry.isIntersecting, 0);
-            }
-        }
-    };
-    /**
-     * Event on Scroll
-     */
-    ScrollView.prototype._handleScroll = function () {
-        this.seekBounding();
-    };
-    /**
-     * Seek the elements by their bounding.
-     * Only if IntersectionObserver is not used.
-     */
-    ScrollView.prototype.seekBounding = function () {
-        // check if calculations are done through getBoundingClientRect
-        if ((0, listeners_1.intersectionObserverSupported)() && this.prop.useIntersectionObserver) {
-            return;
-        }
-        // vars
-        var scrollContainerBounding = this.scrollContainerBounding;
-        // go through all elements and get their boudning
-        for (var index = 0; index < this.elements.length; index += 1) {
-            var el = this.elements[index];
-            var elData = this._elementInViewportData(el, scrollContainerBounding);
-            var delay = elData.isIntersecting ? elData.delay : 0;
-            if (typeof elData.isIntersecting === 'boolean') {
-                this._handleInOut(el, elData.isIntersecting, delay);
-            }
-        }
-        this._processUnusedElements();
-        // change states
-        if (this._firstStart) {
-            this._firstStart = false;
-        }
-    };
-    /**
-     * Check element's bounding to define if it is in viewport
-     */
-    ScrollView.prototype._elementInViewportData = function (el, parentBounding) {
-        var _a = this.prop, propThreshold = _a.threshold, states = _a.states, useDelay = _a.useDelay;
-        var threshold = this._firstStart ? 1 : propThreshold;
-        var bounding = el.getBoundingClientRect();
-        // check if the element is intersecting
-        var isIntersecting;
-        if (bounding.top < parentBounding.top + parentBounding.height * threshold
-            && bounding.left < parentBounding.left + parentBounding.width * threshold) {
-            if (states === 'in') {
-                isIntersecting = true;
-            }
-            else if (bounding.right < parentBounding.left * threshold
-                || bounding.bottom < parentBounding.top * threshold) {
-                isIntersecting = false;
-            }
-            else {
-                isIntersecting = true;
-            }
-        }
-        else if (bounding.top > parentBounding.top + parentBounding.height
-            || bounding.left > parentBounding.left + parentBounding.width) {
-            isIntersecting = false;
-        }
-        // calculate delay only if it is enabled & calculations
-        // are done for the first time
-        var delay = 0;
-        if (!!useDelay && this._firstStart) {
-            var progress = (0, clamp_1.default)(useDelay.dir === 'x'
-                ? (bounding.left - parentBounding.left) / parentBounding.width
-                : (bounding.top - parentBounding.top) / parentBounding.height, [0, 1]);
-            delay = progress * useDelay.max;
-        }
-        return {
-            isIntersecting: isIntersecting,
-            delay: delay,
-        };
-    };
-    /**
-     * Event that is triggered when an element appears or disappears
-     */
-    ScrollView.prototype._handleInOut = function (el, inViewport, delay) {
-        var _this = this;
-        if (delay === void 0) { delay = 0; }
-        var states = this.prop.states;
-        // check if need to continue
-        if ((el.scrollViewIn && inViewport)
-            || (!el.scrollViewIn && !inViewport)) {
-            return;
-        }
-        // update props
-        el.scrollViewIn = inViewport;
-        // toggle classes
-        if (this.prop.classToToggle) {
-            (0, timeoutCallback_1.default)(function () {
-                el.classList.toggle(_this.prop.classToToggle, inViewport);
-            }, delay);
-        }
-        // process callbacks
-        if (inViewport && (states === 'in' || states === 'inout')) {
-            (0, timeoutCallback_1.default)(function () {
-                _this.callbacks.tbt('in', el);
-            }, delay);
-        }
-        else if (!inViewport && states === 'inout') {
-            (0, timeoutCallback_1.default)(function () {
-                _this.callbacks.tbt('out', el);
-            }, delay);
-        }
-    };
-    /**
-     * Remove elements that are mo more in need
-     */
-    ScrollView.prototype._processUnusedElements = function () {
-        var _this = this;
-        if (this.prop.states !== 'in') {
-            return;
-        }
-        // remove unused elements
-        var elementsToRemove = this._elements.filter(function (el) { return el.scrollViewIn; });
-        elementsToRemove.forEach(function (el) {
-            var _a, _b;
-            (_a = _this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(el);
-            (_b = _this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(el);
-        });
-        this._elements = this._elements.filter(function (el) { return !el.scrollViewIn; });
-    };
-    /**
-     * Add a view element
-     */
-    ScrollView.prototype.addElement = function (element) {
-        var _this = this;
-        var _a, _b;
-        var viewEl = element;
-        viewEl.scrollViewIn = undefined;
-        this._elements.push(element);
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.observe(element);
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.observe(element);
-        if (this.prop.enabled) {
-            this.seekBounding();
-        }
-        return {
-            remove: function () {
-                _this.removeElement(element);
-            },
-        };
-    };
-    /**
-     * Remove a view element
-     */
-    ScrollView.prototype.removeElement = function (element) {
-        var _a, _b;
-        var viewEl = element;
-        viewEl.scrollViewIn = undefined;
-        this._elements = this._elements.filter(function (el) { return el !== element; });
-        (_a = this._intersectionObserverIn) === null || _a === void 0 ? void 0 : _a.unobserve(element);
-        (_b = this._intersectionObserverOut) === null || _b === void 0 ? void 0 : _b.unobserve(element);
-    };
-    /**
-     * Remove all view elements
-     */
-    ScrollView.prototype.removeElements = function () {
-        var _this = this;
-        this._elements.forEach(function (el) {
-            _this.removeElement(el);
-        });
-        this._elements = [];
-    };
-    /**
-     * Destroy the module
-     */
-    ScrollView.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        this._removeViewEvents();
-    };
-    return ScrollView;
-}(ScrollEventsBase_1.ScrollEventsBase));
-exports.ScrollView = ScrollView;