vevet 1.4.27 → 2.0.1-dev.3

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

@@ -0,0 +1,262 @@
+import { addEventListener, createElement } from 'vevet-dom';
+import onScroll from '../../../utils/listeners/onScroll';
+import boundVal from '../../../utils/math/boundVal';
+import { DraggerMove } from '../../dragger/DraggerMove';
+import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
+export default class Bar {
+    constructor(_prop) {
+        this._prop = _prop;
+        const { prefix, dir, domParent, container, autoHide, } = _prop;
+        // 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
+        let outerClassNames = `${prefix} ${prefix}_${dir}`;
+        if (container instanceof Window) {
+            outerClassNames += ' in-window';
+        }
+        this._outer = createElement('div', {
+            parent: domParent,
+            class: outerClassNames,
+        });
+        // create a thumb
+        this._thumb = 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();
+    }
+    get outer() {
+        return this._outer;
+    }
+    get thumb() {
+        return this._thumb;
+    }
+    // global
+    get prefix() {
+        return this._prop.prefix;
+    }
+    get isX() {
+        return this.prop.dir === 'x';
+    }
+    get isY() {
+        return !this.isX;
+    }
+    get scrollElement() {
+        return this.prop.container instanceof Window
+            ? document.documentElement : this.prop.container;
+    }
+    get scrollLine() {
+        const { scrollElement } = this;
+        return this.isX
+            ? scrollElement.scrollWidth - scrollElement.clientWidth
+            : scrollElement.scrollHeight - scrollElement.clientHeight;
+    }
+    get scrollWidth() {
+        return this.scrollElement.scrollWidth;
+    }
+    get scrollHeight() {
+        return this.scrollElement.scrollHeight;
+    }
+    get prop() {
+        return this._prop;
+    }
+    get scrollValues() {
+        const { container } = this.prop;
+        let top = 0;
+        let left = 0;
+        if (container instanceof Window) {
+            top = container.pageYOffset;
+            left = container.pageXOffset;
+        }
+        else if (container instanceof SmoothScroll) {
+            top = container.targetTop;
+            left = container.targetLeft;
+        }
+        else {
+            top = container.scrollTop;
+            left = container.scrollLeft;
+        }
+        return {
+            left,
+            top,
+        };
+    }
+    /**
+     * Set scrolblar events
+     */
+    _setEvents() {
+        // set hover events
+        this._listeners.push(addEventListener(this.outer, 'mouseenter', this._handleHover.bind(this, true)));
+        this._listeners.push(addEventListener(this.outer, 'mouseleave', this._handleHover.bind(this, false)));
+        // set scroll events
+        this._scrollEvent = onScroll(this.prop.container, (data) => {
+            this._handleScroll(data);
+        });
+        // set dragger
+        if (this.prop.isDraggable) {
+            this._dragger = new DraggerMove({
+                container: this.thumb,
+            });
+            this._dragger.addCallback('start', () => {
+                this.thumb.classList.add('in-action');
+                this._disableScrollBehaviour(true);
+                this._coordsAtDragStart = this.scrollValues;
+            });
+            this._dragger.addCallback('move', (data) => {
+                this._handleThumbDrag(data);
+            });
+            this._dragger.addCallback('end', () => {
+                this.thumb.classList.remove('in-action');
+                this._disableScrollBehaviour(false);
+            });
+        }
+    }
+    /**
+     * Toggle scrollBehavior: disable & reset smooth scrolling
+     */
+    _disableScrollBehaviour(bool) {
+        const 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
+     */
+    _handleHover(bool) {
+        this.outer.classList.toggle('is-hovered', bool);
+    }
+    /**
+     * Handle Scroll Event
+     */
+    _handleScroll(data) {
+        // resize if needed
+        if (!this.prop.optimizeCalculations) {
+            this.resize();
+        }
+        // check if changes happened
+        let 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(() => {
+                this.outer.classList.remove('in-action');
+            }, 500);
+        }
+        // render thumb
+        if (this.prop.optimizeCalculations) {
+            this._renderThumb();
+        }
+    }
+    /**
+     * Event on dragger move
+     */
+    _handleThumbDrag(data) {
+        data.evt.preventDefault();
+        const { container } = this.prop;
+        // calculate scroll iterators
+        const leftIterator = ((data.coords.x - data.start.x) / (this._outerWidth - this._thumbWidth)) * this.scrollLine;
+        const topIterator = ((data.coords.y - data.start.y) / (this._outerHeight - this._thumbHeight)) * this.scrollLine;
+        // calculate new scroll values
+        let { left, top } = this._coordsAtDragStart;
+        if (this.isX) {
+            left += leftIterator;
+        }
+        else {
+            top += topIterator;
+        }
+        // apply the values
+        container.scrollTo({
+            top,
+            left,
+            behavior: container instanceof SmoothScroll ? this.prop.draggableScrollBehavior : 'auto',
+        });
+    }
+    /**
+     * Render the thumb
+     */
+    _renderThumb() {
+        // calculate progress
+        const progress = boundVal(this._scrollVal / this.scrollLine, [0, 1]);
+        // calculate transforms
+        const x = this.isX ? (this._outerWidth - this._thumbWidth) * progress : 0;
+        const y = this.isY ? (this._outerHeight - this._thumbHeight) * progress : 0;
+        // render the thumb
+        this._thumb.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    /**
+     * Resize the scene
+     */
+    resize() {
+        const { outer, thumb, scrollLine } = this;
+        const { minSize } = this.prop;
+        // get outer sizes
+        this._outerHeight = outer.clientHeight;
+        this._outerWidth = outer.clientWidth;
+        // calculate thumb sizes
+        if (this.prop.autoSize) {
+            if (this.isX) {
+                const barSize = boundVal(this._outerWidth / (this.scrollWidth / (this.scrollWidth - scrollLine)), [minSize, Infinity]);
+                thumb.style.width = `${barSize}px`;
+            }
+            else {
+                const barSize = boundVal(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();
+    }
+    destroy() {
+        this._listeners.forEach((listener) => {
+            listener.remove();
+        });
+        if (this._scrollEvent) {
+            this._scrollEvent.remove();
+        }
+        if (this._actionTimeout) {
+            clearTimeout(this._actionTimeout);
+        }
+        if (this._dragger) {
+            this._dragger.destroy();
+        }
+        this._outer.remove();
+    }
+}

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

@@ -0,0 +1,152 @@
+import { createElement, selectOne } from 'vevet-dom';
+import { Component } from '../../../base/Component';
+import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
+import Bar from './Bar';
+/**
+ * Create custom scroll bar
+ */
+export class ScrollBar extends Component {
+    constructor(initialProp, init = true) {
+        super(initialProp, false);
+        const { autoHide, autoSize, minSize, optimizeCalculations, isDraggable, draggableScrollBehavior, } = this.prop;
+        // get container
+        if (typeof this.prop.container === 'string') {
+            const el = 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) {
+            const { parentElement } = this.container;
+            if (parentElement) {
+                this._scrollWrapper = 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
+        const barMainProp = {
+            container: this.container,
+            domParent: this.domParent,
+            autoHide,
+            autoSize,
+            minSize,
+            optimizeCalculations,
+            prefix: this.prefix,
+            isDraggable,
+            draggableScrollBehavior,
+        };
+        this._xBar = new Bar(Object.assign({ dir: 'x' }, barMainProp));
+        this._yBar = new Bar(Object.assign({ dir: 'y' }, barMainProp));
+        // add styles
+        this.scrollableElement.classList.add(`${this.prefix}-parent`);
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+    _getDefaultProp() {
+        return Object.assign(Object.assign({}, super._getDefaultProp()), { container: window, domParent: false, draggable: true, autoSize: true, autoHide: true, minSize: 50, optimizeCalculations: false, isDraggable: true, draggableScrollBehavior: 'smooth' });
+    }
+    get prefix() {
+        return `${this._app.prefix}scrollbar`;
+    }
+    /**
+     * Scroll container
+     */
+    get container() {
+        return this._container;
+    }
+    /**
+     * Get scrollable element
+     */
+    get scrollableElement() {
+        const { container } = this;
+        if (container instanceof Window) {
+            return this._app.body;
+        }
+        if (container instanceof Element) {
+            return container;
+        }
+        return container.outer;
+    }
+    /**
+     * The element into wchich scroll bars will be appended
+     */
+    get domParent() {
+        const { domParent } = this.prop;
+        const { container } = this;
+        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;
+    }
+    // Set Module Events
+    _setEvents() {
+        super._setEvents();
+        const { container } = this;
+        // set resize event
+        if (container instanceof SmoothScroll) {
+            container.addCallback('resize', () => {
+                this.resize();
+            }, {
+                name: this.name,
+            });
+        }
+        else {
+            this.addViewportCallback('', () => {
+                this.resize();
+            });
+        }
+        this.resize();
+    }
+    _onPropMutate() {
+        super._onPropMutate();
+        this.resize();
+    }
+    /**
+     * Resize the canvas
+     */
+    resize() {
+        this._xBar.resize();
+        this._yBar.resize();
+    }
+    /**
+     * Destroy the module
+     */
+    _destroy() {
+        super._destroy();
+        // destroy bars
+        this._xBar.destroy();
+        this._yBar.destroy();
+        // remove scrollbars parent
+        if (!!this._scrollWrapper && this.container instanceof Element) {
+            const { parentElement } = this._scrollWrapper;
+            if (parentElement) {
+                parentElement.insertBefore(this.container, this._scrollWrapper);
+            }
+            this._scrollWrapper.remove();
+        }
+        // reset styles
+        this.scrollableElement.classList.remove(`${this.prefix}-parent`);
+    }
+}