vevet 2.17.0 → 3.0.0-beta.0

package/lib/cjs/components/ScrollBar/Bar/index.js

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var vevet_dom_1 = require("vevet-dom");
+var DraggerMove_1 = require("../../DraggerMove");
+var onScroll_1 = require("../../../utils/scroll/onScroll");
+var math_1 = require("../../../utils/math");
+var scroll_1 = require("../../../utils/scroll");
+var Bar = /** @class */ (function () {
+    function Bar(_props) {
+        this._props = _props;
+        var direction = _props.direction, domParent = _props.domParent, container = _props.container, canAutoHide = _props.canAutoHide;
+        // set default vars
+        this._outerHeight = 0;
+        this._outerWidth = 0;
+        this._thumbHeight = 0;
+        this._thumbWidth = 0;
+        this._prevScrollValue = 0;
+        this._coordsAtDragStart = { scrollLeft: 0, scrollTop: 0 };
+        // create container
+        var outer = document.createElement('div');
+        this._outer = outer;
+        outer.classList.add(this.className(''));
+        outer.classList.add(this.className("_".concat(direction)));
+        if (container instanceof Window) {
+            outer.classList.add(this.className('_in-window'));
+        }
+        outer.classList.toggle(this.className('_auto-hide'), canAutoHide);
+        domParent.append(outer);
+        // create a thumb
+        var thumb = document.createElement('div');
+        this._thumb = thumb;
+        thumb.classList.add(this.className('__thumb'));
+        thumb.classList.add(this.className("__thumb_".concat(direction)));
+        outer.append(thumb);
+        // set events
+        this._setEvents();
+    }
+    Object.defineProperty(Bar.prototype, "outer", {
+        get: function () {
+            return this._outer;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "thumb", {
+        get: function () {
+            return this._thumb;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "prefix", {
+        get: function () {
+            return this.props.prefix;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "isHorizontal", {
+        get: function () {
+            return this.props.direction === 'x';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "isVertical", {
+        get: function () {
+            return !this.isHorizontal;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "scrollElement", {
+        get: function () {
+            return this.props.container instanceof Window
+                ? document.documentElement
+                : this.props.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "scrollLine", {
+        get: function () {
+            var scrollElement = this.scrollElement;
+            return this.isHorizontal
+                ? scrollElement.scrollWidth - scrollElement.clientWidth
+                : scrollElement.scrollHeight - scrollElement.clientHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "scrollWidth", {
+        get: function () {
+            return this.scrollElement.scrollWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "scrollHeight", {
+        get: function () {
+            return this.scrollElement.scrollHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Bar.prototype, "props", {
+        get: function () {
+            return this._props;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Bar.prototype.className = function (value) {
+        return "".concat(this.props.prefix).concat(value);
+    };
+    /** Set scrolblar events */
+    Bar.prototype._setEvents = function () {
+        var _this = this;
+        if (!this._listeners) {
+            this._listeners = [];
+        }
+        var _a = this, outer = _a.outer, thumb = _a.thumb, props = _a.props;
+        this._listeners.push((0, vevet_dom_1.addEventListener)(outer, 'mouseenter', function () { return _this._handleHover(true); }));
+        this._listeners.push((0, vevet_dom_1.addEventListener)(outer, 'mouseleave', function () { return _this._handleHover(false); }));
+        this._scrollEvent = (0, onScroll_1.onScroll)({
+            container: props.container,
+            callback: function (data) { return _this._handleScroll(data); },
+        });
+        if (this.props.isDraggable) {
+            this._dragger = new DraggerMove_1.DraggerMove({ container: thumb });
+            this._dragger.addCallback('start', function () {
+                _this._coordsAtDragStart = (0, scroll_1.getScrollValues)(_this.props.container);
+            });
+            this._dragger.addCallback('move', function (data) { return _this._handleThumbDrag(data); });
+        }
+    };
+    /** Remove events */
+    Bar.prototype._removeEvents = function () {
+        var _a, _b, _c;
+        (_a = this._listeners) === null || _a === void 0 ? void 0 : _a.forEach(function (listener) { return listener.remove(); });
+        (_b = this._scrollEvent) === null || _b === void 0 ? void 0 : _b.remove();
+        (_c = this._dragger) === null || _c === void 0 ? void 0 : _c.destroy();
+    };
+    /** Handle hover state */
+    Bar.prototype._handleHover = function (isHovered) {
+        var className = this.className('_is-hovered');
+        this.outer.classList.toggle(className, isHovered);
+    };
+    /** Handle Scroll Event */
+    Bar.prototype._handleScroll = function (_a) {
+        var _this = this;
+        var scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop;
+        var hasChanged = false;
+        // check if changes happened
+        if (this.isHorizontal) {
+            hasChanged = scrollLeft !== this._prevScrollValue;
+            this._prevScrollValue = scrollLeft;
+        }
+        else {
+            hasChanged = scrollTop !== this._prevScrollValue;
+            this._prevScrollValue = scrollTop;
+        }
+        // continue if there are changes
+        if (!hasChanged) {
+            return;
+        }
+        // set auto hide
+        if (this.props.canAutoHide && hasChanged) {
+            var actionClassName_1 = this.className('_in-action');
+            this.outer.classList.add(actionClassName_1);
+            if (this._actionTimeout) {
+                clearTimeout(this._actionTimeout);
+            }
+            this._actionTimeout = setTimeout(function () { return _this.outer.classList.remove(actionClassName_1); }, 500);
+        }
+        // render elements
+        this._renderThumb();
+    };
+    /** Event on dragger move */
+    Bar.prototype._handleThumbDrag = function (_a) {
+        var event = _a.event, coords = _a.coords, start = _a.start;
+        event.preventDefault();
+        var scrollLine = this.scrollLine;
+        var container = this.props.container;
+        // calculate scroll iterators
+        var leftIterator = ((coords.x - start.x) / (this._outerWidth - this._thumbWidth)) *
+            scrollLine;
+        var topIterator = ((coords.y - start.y) / (this._outerHeight - this._thumbHeight)) *
+            scrollLine;
+        // calculate new scroll values
+        var _b = this._coordsAtDragStart, scrollLeft = _b.scrollLeft, scrollTop = _b.scrollTop;
+        if (this.isHorizontal) {
+            scrollLeft += leftIterator;
+        }
+        else {
+            scrollTop += topIterator;
+        }
+        // apply the values
+        container.scrollTo({
+            top: scrollTop,
+            left: scrollLeft,
+            behavior: 'isSmoothScroll' in this.props.container
+                ? this.props.scrollBehavior
+                : 'auto',
+        });
+    };
+    /** Render thumb */
+    Bar.prototype._renderThumb = function () {
+        var progress = (0, math_1.clamp)(this._prevScrollValue / this.scrollLine, [0, 1]);
+        var x = this.isHorizontal
+            ? (this._outerWidth - this._thumbWidth) * progress
+            : 0;
+        var y = this.isVertical
+            ? (this._outerHeight - this._thumbHeight) * progress
+            : 0;
+        this._thumb.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
+    };
+    /** Resize the scene */
+    Bar.prototype.resize = function () {
+        var _a = this, outer = _a.outer, thumb = _a.thumb, scrollLine = _a.scrollLine, scrollWidth = _a.scrollWidth, scrollHeight = _a.scrollHeight, isHorizontal = _a.isHorizontal;
+        var _b = this.props, minSize = _b.minSize, hasAutoSize = _b.hasAutoSize;
+        // get outer sizes
+        this._outerHeight = outer.clientHeight;
+        this._outerWidth = outer.clientWidth;
+        // calculate thumb sizes
+        if (hasAutoSize) {
+            if (isHorizontal) {
+                var barSize = (0, math_1.clamp)(this._outerWidth / (scrollWidth / (scrollWidth - scrollLine)), [minSize, Infinity]);
+                thumb.style.width = "".concat(barSize, "px");
+            }
+            else {
+                var barSize = (0, math_1.clamp)(this._outerHeight / (scrollHeight / (scrollHeight - scrollLine)), [minSize, Infinity]);
+                thumb.style.height = "".concat(barSize, "px");
+            }
+        }
+        // get thumb sizes
+        this._thumbHeight = thumb.clientHeight;
+        this._thumbWidth = thumb.clientWidth;
+        // define if empty
+        outer.classList.toggle(this.className('_is-empty'), scrollLine === 0);
+        // render elements
+        this._renderThumb();
+    };
+    Bar.prototype.destroy = function () {
+        this._removeEvents();
+        if (this._actionTimeout) {
+            clearTimeout(this._actionTimeout);
+        }
+        this._outer.remove();
+    };
+    return Bar;
+}());
+exports.default = Bar;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/ScrollBar/Bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/ScrollBar/Bar/index.ts"],"names":[],"mappings":"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"}

package/lib/cjs/components/ScrollBar/Bar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/ScrollBar/Bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/ScrollBar/Bar/types.ts"],"names":[],"mappings":""}

package/lib/cjs/components/ScrollBar/index.js

@@ -0,0 +1,168 @@
+"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.ScrollBar = void 0;
+var vevet_dom_1 = require("vevet-dom");
+var Bar_1 = require("./Bar");
+var Component_1 = require("../../base/Component");
+var onResize_1 = require("../../utils/internal/onResize");
+/**
+ * Create custom scroll bar
+ */
+var ScrollBar = /** @class */ (function (_super) {
+    __extends(ScrollBar, _super);
+    function ScrollBar(initialProps, canInit) {
+        if (canInit === void 0) { canInit = true; }
+        var _this = _super.call(this, initialProps, false) || this;
+        var container = _this.props.container;
+        // get container
+        if (typeof container === 'string') {
+            var element = (0, vevet_dom_1.selectOne)(container);
+            if (element) {
+                _this._container = element;
+            }
+            else {
+                throw new Error('No scroll container');
+            }
+        }
+        else {
+            _this._container = container;
+        }
+        // create bars
+        var barProps = __assign(__assign({}, _this.props), { container: _this.container, domParent: _this.domParent, prefix: _this.prefix });
+        _this._xBar = new Bar_1.default(__assign(__assign({}, barProps), { direction: 'x' }));
+        _this._yBar = new Bar_1.default(__assign(__assign({}, barProps), { direction: 'y' }));
+        // add classnames
+        _this.toggleClassName(_this.scrollableElement, _this.className('-parent'), true);
+        // initialize the class
+        if (canInit) {
+            _this.init();
+        }
+        return _this;
+    }
+    ScrollBar.prototype._getDefaultProps = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProps.call(this)), { container: window, domParent: false, resizeDebounce: 16, isDraggable: true, hasAutoSize: true, canAutoHide: true, minSize: 50, scrollBehavior: 'smooth' });
+    };
+    Object.defineProperty(ScrollBar.prototype, "prefix", {
+        get: function () {
+            return "".concat(this.app.prefix, "scrollbar");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollBar.prototype, "container", {
+        /** Scroll container */
+        get: function () {
+            return this._container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollBar.prototype, "scrollableElement", {
+        /** Scrollable element */
+        get: function () {
+            var container = this.container;
+            if (container instanceof Window) {
+                return this.app.body;
+            }
+            if (container instanceof Element) {
+                return container;
+            }
+            return container.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollBar.prototype, "domParent", {
+        /**
+         * The element where scrollbars will be appended
+         */
+        get: function () {
+            var domParent = this.props.domParent;
+            if (domParent) {
+                return domParent;
+            }
+            var container = this.container;
+            if (container instanceof Window) {
+                return this.app.body;
+            }
+            if (container instanceof Element) {
+                return container;
+            }
+            return container.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ScrollBar.prototype._init = function () {
+        _super.prototype._init.call(this);
+        this._setEvents();
+    };
+    // Set Module Events
+    ScrollBar.prototype._setEvents = function () {
+        var _this = this;
+        var _a = this, container = _a.container, props = _a.props;
+        // default resize handler
+        var resizeHandler = (0, onResize_1.onResize)({
+            onResize: function () { return _this.resize(); },
+            element: [this._xBar.outer, this._yBar.outer],
+            viewportTarget: 'any',
+            hasBothEvents: true,
+            resizeDebounce: props.resizeDebounce,
+        });
+        // resize for smoothscroll
+        var smoothScrollResize = 'isSmoothScroll' in container
+            ? container.addCallback('resize', function () { return resizeHandler.debounceResize(); }, { name: this.name })
+            : undefined;
+        this.addDestroyableAction(function () {
+            resizeHandler.remove();
+            smoothScrollResize === null || smoothScrollResize === void 0 ? void 0 : smoothScrollResize.remove();
+        });
+        // initial resize
+        resizeHandler.resize();
+    };
+    ScrollBar.prototype._onPropsMutate = function () {
+        _super.prototype._onPropsMutate.call(this);
+        this.resize();
+    };
+    /** Resize the scene */
+    ScrollBar.prototype.resize = function () {
+        this._xBar.resize();
+        this._yBar.resize();
+    };
+    /** Destroy the module */
+    ScrollBar.prototype._destroy = function () {
+        _super.prototype._destroy.call(this);
+        // destroy bars
+        this._xBar.destroy();
+        this._yBar.destroy();
+    };
+    return ScrollBar;
+}(Component_1.Component));
+exports.ScrollBar = ScrollBar;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/ScrollBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ScrollBar/index.ts"],"names":[],"mappings":"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"}

package/lib/cjs/components/ScrollBar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/ScrollBar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/ScrollBar/types.ts"],"names":[],"mappings":""}