vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,138 @@
+"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;
+            }
+        }
+        // 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
+        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)
+                || !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

@@ -0,0 +1,133 @@
+"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 = 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 });
+    };
+    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 () {
+            var scrollContainer = this.scrollContainer;
+            if (scrollContainer instanceof Window) {
+                return null;
+            }
+            if (scrollContainer instanceof Element) {
+                return scrollContainer;
+            }
+            return scrollContainer.outer;
+        },
+        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

@@ -0,0 +1,315 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollView = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var ScrollEventsBase_1 = require("./ScrollEventsBase");
+var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
+var listeners_1 = require("../../../utils/listeners");
+var boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+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._firstStart = true;
+        // get view elements
+        _this.updateElements();
+        // initialize the class
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    Object.defineProperty(ScrollView.prototype, "prefix", {
+        get: function () {
+            return this._app.prefix + "scroll-view";
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ScrollView.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, elements: "." + this.prefix + "__el", threshold: 0.9, states: 'in', classToToggle: 'viewed', useDelay: false, useIntersectionObserver: true });
+    };
+    ScrollView.prototype.init = function () {
+        _super.prototype.init.call(this);
+        this.seekBounding();
+    };
+    // Set Module Events
+    ScrollView.prototype._setEvents = function () {
+        var _this = this;
+        _super.prototype._setEvents.call(this);
+        this.resize();
+        this.addViewportCallback('', function () {
+            _this.resize();
+        });
+    };
+    ScrollView.prototype._onPropMutate = function () {
+        _super.prototype._onPropMutate.call(this);
+        this._removeViewEvents();
+        this.updateElements();
+        this._setViewEvents();
+    };
+    /**
+     * Resize the scene
+     */
+    ScrollView.prototype.resize = function () {
+        this._removeViewEvents();
+        this._setViewEvents();
+    };
+    /**
+     * Set View events: scroll or intersection
+     */
+    ScrollView.prototype._setViewEvents = function () {
+        var _this = this;
+        // set intersection observer
+        if (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 observer
+            this._intersectionObserver = new IntersectionObserver(this._handleIntersectionObserver.bind(this), {
+                root: this.intersectionRoot,
+                threshold: 0,
+                rootMargin: "0px " + xMargin + "px " + yMargin + "px 0px",
+            });
+            // add elements
+            if (this.elements) {
+                this.elements.forEach(function (el) {
+                    var _a;
+                    (_a = _this._intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+                });
+            }
+        }
+        else {
+            // set scroll bounding events
+            this._scrollEvent = onScroll_1.default(this.prop.container, this._handleScroll.bind(this));
+        }
+    };
+    /**
+     * Remove View events: scroll or intersection
+     */
+    ScrollView.prototype._removeViewEvents = function () {
+        // remove scroll events
+        if (this._scrollEvent) {
+            this._scrollEvent.remove();
+            this._scrollEvent = undefined;
+        }
+        // destroy intersection observer
+        if (this._intersectionObserver) {
+            this._intersectionObserver.disconnect();
+            this._intersectionObserver = undefined;
+        }
+    };
+    Object.defineProperty(ScrollView.prototype, "elements", {
+        /**
+         * Element to seek
+         */
+        get: function () {
+            return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Update elements
+     */
+    ScrollView.prototype.updateElements = function () {
+        var _this = this;
+        // check if elements exist
+        if (typeof this.elements === 'undefined') {
+            this._elements = [];
+        }
+        // unobserve old elements
+        this.elements.forEach(function (el) {
+            if (_this._intersectionObserver) {
+                _this._intersectionObserver.unobserve(el);
+            }
+        });
+        // update elements
+        this._elements = Array.from(vevet_dom_1.selectAll(this.prop.elements, this.domParent || undefined)).filter(function (el) { return !el.classList.contains(_this.prop.classToToggle); });
+        // add them to the observer
+        this._elements.forEach(function (el) {
+            if (_this._intersectionObserver) {
+                _this._intersectionObserver.observe(el);
+            }
+        });
+    };
+    /**
+     * Event on IntersectionObserver
+     */
+    ScrollView.prototype._handleIntersectionObserver = 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;
+            }
+            this._handleInOut(entry.target, entry.isIntersecting, delay);
+        }
+        this._processUnusedElements();
+        // change states
+        if (this._firstStart) {
+            this._firstStart = false;
+            this.resize();
+        }
+    };
+    /**
+     * 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 (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;
+            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 = false;
+        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;
+            }
+        }
+        // calculate delay only if it is enabled & calculations
+        // are done for the first time
+        var delay = 0;
+        if (!!useDelay && this._firstStart) {
+            var progress = boundVal_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
+        timeoutCallback_1.default(function () {
+            el.classList.toggle(_this.prop.classToToggle, inViewport);
+        }, delay);
+        // process callbacks
+        if (inViewport && (states === 'in' || states === 'inout')) {
+            timeoutCallback_1.default(function () {
+                _this.callbacks.tbt('in', el);
+            }, delay);
+        }
+        else if (!inViewport && states === 'inout') {
+            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) {
+            if (_this._intersectionObserver) {
+                _this._intersectionObserver.unobserve(el);
+            }
+        });
+        this._elements = this._elements.filter(function (el) { return !el.scrollViewIn; });
+    };
+    /**
+     * Destroy the module
+     */
+    ScrollView.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        this._removeViewEvents();
+    };
+    return ScrollView;
+}(ScrollEventsBase_1.ScrollEventsBase));
+exports.ScrollView = ScrollView;