vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,315 @@
+"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 boundVal_1 = __importDefault(require("../../../utils/math/boundVal"));
+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,
+        };
+        // create outer
+        var outerClassNames = prefix + " " + prefix + "_" + dir;
+        if (container instanceof Window) {
+            outerClassNames += ' in-window';
+        }
+        this._outer = vevet_dom_1.createElement('div', {
+            parent: domParent,
+            class: outerClassNames,
+        });
+        // create a thumb
+        this._thumb = vevet_dom_1.createElement('div', {
+            parent: this._outer,
+            class: prefix + "__thumb " + prefix + "__thumb_" + 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(vevet_dom_1.addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
+        this._listeners.push(vevet_dom_1.addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
+        // set scroll events
+        this._scrollEvent = onScroll_1.default(this.prop.container, 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 = boundVal_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(" + x + "px, " + 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 = boundVal_1.default(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                thumb.style.width = barSize + "px";
+            }
+            else {
+                var barSize = boundVal_1.default(this._outerHeight / (this.scrollHeight / (this.scrollHeight - scrollLine)), [minSize, Infinity]);
+                thumb.style.height = 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

@@ -0,0 +1,206 @@
+"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 = 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 = 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(_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(_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, isDraggable: true, draggableScrollBehavior: 'smooth' });
+    };
+    Object.defineProperty(ScrollBar.prototype, "prefix", {
+        get: function () {
+            return 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();
+            });
+        }
+        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(this.prefix + "-parent");
+    };
+    return ScrollBar;
+}(Component_1.Component));
+exports.ScrollBar = ScrollBar;