vevet 2.16.1 → 3.0.0-beta.0

package/build/cjs/components/scroll/scrollbar/Bar.js

@@ -1,321 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var vevet_dom_1 = require("vevet-dom");
-var onScroll_1 = __importDefault(require("../../../utils/listeners/onScroll"));
-var clamp_1 = __importDefault(require("../../../utils/math/clamp"));
-var DraggerMove_1 = require("../../dragger/DraggerMove");
-var SmoothScroll_1 = require("../smooth-scroll/SmoothScroll");
-var Bar = /** @class */ (function () {
-    function Bar(_prop) {
-        this._prop = _prop;
-        var prefix = _prop.prefix, dir = _prop.dir, domParent = _prop.domParent, container = _prop.container, autoHide = _prop.autoHide;
-        // set default vars
-        this._outerHeight = 0;
-        this._outerWidth = 0;
-        this._thumbHeight = 0;
-        this._thumbWidth = 0;
-        this._scrollVal = 0;
-        this._coordsAtDragStart = {
-            left: 0,
-            top: 0,
-        };
-        this._scrollEvent = undefined;
-        this._actionTimeout = undefined;
-        this._dragger = undefined;
-        // create outer
-        var outerClassNames = "".concat(prefix, " ").concat(prefix, "_").concat(dir);
-        if (container instanceof Window) {
-            outerClassNames += ' in-window';
-        }
-        this._outer = (0, vevet_dom_1.createElement)('div', {
-            parent: domParent,
-            class: outerClassNames,
-        });
-        // create a thumb
-        this._thumb = (0, vevet_dom_1.createElement)('div', {
-            parent: this._outer,
-            class: "".concat(prefix, "__thumb ").concat(prefix, "__thumb_").concat(dir),
-        });
-        // set auto hide classes
-        if (autoHide) {
-            this.outer.classList.add('auto-hide');
-        }
-        // set events
-        this._listeners = [];
-        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", {
-        // global
-        get: function () {
-            return this._prop.prefix;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Bar.prototype, "isX", {
-        get: function () {
-            return this.prop.dir === 'x';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Bar.prototype, "isY", {
-        get: function () {
-            return !this.isX;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Bar.prototype, "scrollElement", {
-        get: function () {
-            return this.prop.container instanceof Window
-                ? document.documentElement : this.prop.container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Bar.prototype, "scrollLine", {
-        get: function () {
-            var scrollElement = this.scrollElement;
-            return this.isX
-                ? 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, "prop", {
-        get: function () {
-            return this._prop;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Bar.prototype, "scrollValues", {
-        get: function () {
-            var container = this.prop.container;
-            var top = 0;
-            var left = 0;
-            if (container instanceof Window) {
-                top = container.pageYOffset;
-                left = container.pageXOffset;
-            }
-            else if (container instanceof SmoothScroll_1.SmoothScroll) {
-                top = container.targetTop;
-                left = container.targetLeft;
-            }
-            else {
-                top = container.scrollTop;
-                left = container.scrollLeft;
-            }
-            return {
-                left: left,
-                top: top,
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Set scrolblar events
-     */
-    Bar.prototype._setEvents = function () {
-        var _this = this;
-        // set hover events
-        this._listeners.push((0, vevet_dom_1.addEventListener)(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
-        this._listeners.push((0, vevet_dom_1.addEventListener)(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
-        // set scroll events
-        this._scrollEvent = (0, onScroll_1.default)({
-            container: this.prop.container,
-            callback: function (data) {
-                _this._handleScroll(data);
-            },
-        });
-        // set dragger
-        if (this.prop.isDraggable) {
-            this._dragger = new DraggerMove_1.DraggerMove({
-                container: this.thumb,
-            });
-            this._dragger.addCallback('start', function () {
-                _this.thumb.classList.add('in-action');
-                _this._disableScrollBehaviour(true);
-                _this._coordsAtDragStart = _this.scrollValues;
-            });
-            this._dragger.addCallback('move', function (data) {
-                _this._handleThumbDrag(data);
-            });
-            this._dragger.addCallback('end', function () {
-                _this.thumb.classList.remove('in-action');
-                _this._disableScrollBehaviour(false);
-            });
-        }
-    };
-    /**
-     * Toggle scrollBehavior: disable & reset smooth scrolling
-     */
-    Bar.prototype._disableScrollBehaviour = function (bool) {
-        var val = bool ? 'auto' : 'unset';
-        if (this.prop.container instanceof Window) {
-            document.documentElement.style.scrollBehavior = val;
-        }
-        else if (this.prop.container instanceof HTMLElement) {
-            document.documentElement.style.scrollBehavior = val;
-        }
-    };
-    /**
-     * Handle hover state
-     */
-    Bar.prototype._handleHover = function (bool) {
-        this.outer.classList.toggle('is-hovered', bool);
-    };
-    /**
-     * Handle Scroll Event
-     */
-    Bar.prototype._handleScroll = function (data) {
-        var _this = this;
-        // resize if needed
-        if (!this.prop.optimizeCalculations) {
-            this.resize();
-        }
-        // check if changes happened
-        var hasChanged = false;
-        if (this.isX) {
-            hasChanged = data.scrollLeft !== this._scrollVal;
-            this._scrollVal = data.scrollLeft;
-        }
-        else {
-            hasChanged = data.scrollTop !== this._scrollVal;
-            this._scrollVal = data.scrollTop;
-        }
-        if (!hasChanged) {
-            return;
-        }
-        // set auto hide
-        if (this.prop.autoHide && hasChanged) {
-            this.outer.classList.add('in-action');
-            if (this._actionTimeout) {
-                clearTimeout(this._actionTimeout);
-                this._actionTimeout = undefined;
-            }
-            this._actionTimeout = setTimeout(function () {
-                _this.outer.classList.remove('in-action');
-            }, 500);
-        }
-        // render thumb
-        if (this.prop.optimizeCalculations) {
-            this._renderThumb();
-        }
-    };
-    /**
-     * Event on dragger move
-     */
-    Bar.prototype._handleThumbDrag = function (data) {
-        data.evt.preventDefault();
-        var container = this.prop.container;
-        // calculate scroll iterators
-        var leftIterator = ((data.coords.x - data.start.x) / (this._outerWidth - this._thumbWidth)) * this.scrollLine;
-        var topIterator = ((data.coords.y - data.start.y) / (this._outerHeight - this._thumbHeight)) * this.scrollLine;
-        // calculate new scroll values
-        var _a = this._coordsAtDragStart, left = _a.left, top = _a.top;
-        if (this.isX) {
-            left += leftIterator;
-        }
-        else {
-            top += topIterator;
-        }
-        // apply the values
-        container.scrollTo({
-            top: top,
-            left: left,
-            behavior: container instanceof SmoothScroll_1.SmoothScroll ? this.prop.draggableScrollBehavior : 'auto',
-        });
-    };
-    /**
-     * Render the thumb
-     */
-    Bar.prototype._renderThumb = function () {
-        // calculate progress
-        var progress = (0, clamp_1.default)(this._scrollVal / this.scrollLine, [0, 1]);
-        // calculate transforms
-        var x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
-        var y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
-        // render the thumb
-        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;
-        var minSize = this.prop.minSize;
-        // get outer sizes
-        this._outerHeight = outer.clientHeight;
-        this._outerWidth = outer.clientWidth;
-        // calculate thumb sizes
-        if (this.prop.autoSize) {
-            if (this.isX) {
-                var barSize = (0, clamp_1.default)(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
-                thumb.style.width = "".concat(barSize, "px");
-            }
-            else {
-                var barSize = (0, clamp_1.default)(this._outerHeight / (this.scrollHeight / (this.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('is-empty', scrollLine === 0);
-        // render the scrollbar thumb
-        this._renderThumb();
-    };
-    Bar.prototype.destroy = function () {
-        this._listeners.forEach(function (listener) {
-            listener.remove();
-        });
-        if (this._scrollEvent) {
-            this._scrollEvent.remove();
-        }
-        if (this._actionTimeout) {
-            clearTimeout(this._actionTimeout);
-        }
-        if (this._dragger) {
-            this._dragger.destroy();
-        }
-        this._outer.remove();
-    };
-    return Bar;
-}());
-exports.default = Bar;

package/build/cjs/components/scroll/scrollbar/ScrollBar.js

@@ -1,208 +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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollBar = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Component_1 = require("../../../base/Component");
-var SmoothScroll_1 = require("../smooth-scroll/SmoothScroll");
-var Bar_1 = __importDefault(require("./Bar"));
-/**
- * Create custom scroll bar
- */
-var ScrollBar = /** @class */ (function (_super) {
-    __extends(ScrollBar, _super);
-    function ScrollBar(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        var _a = _this.prop, autoHide = _a.autoHide, autoSize = _a.autoSize, minSize = _a.minSize, optimizeCalculations = _a.optimizeCalculations, isDraggable = _a.isDraggable, draggableScrollBehavior = _a.draggableScrollBehavior;
-        // get container
-        if (typeof _this.prop.container === 'string') {
-            var el = (0, vevet_dom_1.selectOne)(_this.prop.container);
-            if (el) {
-                _this._container = el;
-            }
-            else {
-                throw new Error('No scroll container');
-            }
-        }
-        else {
-            _this._container = _this.prop.container;
-        }
-        // create scrollBarsParent if needed
-        if (_this.container instanceof Element) {
-            var parentElement = _this.container.parentElement;
-            if (parentElement) {
-                _this._scrollWrapper = (0, vevet_dom_1.createElement)('div');
-                _this._scrollWrapper.style.position = 'relative';
-                _this._scrollWrapper.style.display = 'inline-block';
-                parentElement.insertBefore(_this._scrollWrapper, _this.container);
-                _this._scrollWrapper.appendChild(_this.container);
-                _this._scrollWrapper.classList.add("".concat(_this.prefix, "-wrapper"));
-            }
-        }
-        // create bars
-        var barMainProp = {
-            container: _this.container,
-            domParent: _this.domParent,
-            autoHide: autoHide,
-            autoSize: autoSize,
-            minSize: minSize,
-            optimizeCalculations: optimizeCalculations,
-            prefix: _this.prefix,
-            isDraggable: isDraggable,
-            draggableScrollBehavior: draggableScrollBehavior,
-        };
-        _this._xBar = new Bar_1.default(__assign({ dir: 'x' }, barMainProp));
-        _this._yBar = new Bar_1.default(__assign({ dir: 'y' }, barMainProp));
-        // add styles
-        _this.scrollableElement.classList.add("".concat(_this.prefix, "-parent"));
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    ScrollBar.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, resizeTimeout: 0, isDraggable: true, draggableScrollBehavior: '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", {
-        /**
-         * Get scrollable element
-         */
-        get: function () {
-            var container = this.container;
-            if (container instanceof Window) {
-                return this._app.body;
-            }
-            if (container instanceof Element) {
-                return container;
-            }
-            return container.outer;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ScrollBar.prototype, "domParent", {
-        /**
-         * The element into wchich scroll bars will be appended
-         */
-        get: function () {
-            var domParent = this.prop.domParent;
-            var container = this.container;
-            if (!domParent) {
-                if (this._scrollWrapper) {
-                    return this._scrollWrapper;
-                }
-                if (container instanceof Window) {
-                    return this._app.body;
-                }
-                if (container instanceof Element) {
-                    return container;
-                }
-                return container.outer;
-            }
-            return domParent;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    // Set Module Events
-    ScrollBar.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        var container = this.container;
-        // set resize event
-        if (container instanceof SmoothScroll_1.SmoothScroll) {
-            container.addCallback('resize', function () {
-                _this.resize();
-            }, {
-                name: this.name,
-            });
-        }
-        else {
-            this.addViewportCallback('', function () {
-                _this.resize();
-            }, {
-                timeout: this.prop.resizeTimeout,
-            });
-        }
-        this.resize();
-    };
-    ScrollBar.prototype._onPropMutate = function () {
-        _super.prototype._onPropMutate.call(this);
-        this.resize();
-    };
-    /**
-     * Resize the canvas
-     */
-    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();
-        // remove scrollbars parent
-        if (!!this._scrollWrapper && this.container instanceof Element) {
-            var parentElement = this._scrollWrapper.parentElement;
-            if (parentElement) {
-                parentElement.insertBefore(this.container, this._scrollWrapper);
-            }
-            this._scrollWrapper.remove();
-        }
-        // reset styles
-        this.scrollableElement.classList.remove("".concat(this.prefix, "-parent"));
-    };
-    return ScrollBar;
-}(Component_1.Component));
-exports.ScrollBar = ScrollBar;