vevet 1.4.27 → 2.0.1-dev.3

package/src/ts/components/scroll/scrollbar/Bar.ts

@@ -0,0 +1,364 @@
+import { addEventListener, createElement, IAddEventListener } from 'vevet-dom';
+import { IRemovable } from '../../../utils/types/general';
+import onScroll from '../../../utils/listeners/onScroll';
+import boundVal from '../../../utils/math/boundVal';
+import { DraggerMove, NDraggerMove } from '../../dragger/DraggerMove';
+import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
+
+interface Data {
+    container: Window | SmoothScroll | Element;
+    domParent: Element;
+    dir: 'x' | 'y';
+    autoHide: boolean;
+    autoSize: boolean;
+    minSize: number;
+    optimizeCalculations: boolean;
+    prefix: string;
+    isDraggable: boolean;
+    draggableScrollBehavior: 'smooth' | 'auto';
+}
+
+export default class Bar {
+    // elements
+    protected _outer: HTMLElement;
+    get outer () {
+        return this._outer;
+    }
+    protected _thumb: HTMLElement;
+    get thumb () {
+        return this._thumb;
+    }
+
+    // global
+    get prefix () {
+        return this._prop.prefix;
+    }
+    get isX () {
+        return this.prop.dir === 'x';
+    }
+    get isY () {
+        return !this.isX;
+    }
+
+    // sizes
+    protected _outerHeight: number;
+    protected _outerWidth: number;
+    protected _thumbHeight: number;
+    protected _thumbWidth: number;
+
+    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;
+    }
+
+    // states
+    protected _scrollVal: number;
+    protected _coordsAtDragStart: {
+        left: number;
+        top: number;
+    }
+
+    // events
+    protected _listeners: IAddEventListener[];
+    protected _scrollEvent?: IRemovable;
+    protected _actionTimeout?: NodeJS.Timeout;
+    protected _dragger?: DraggerMove;
+
+
+
+    get prop () {
+        return this._prop;
+    }
+
+    constructor (
+        protected _prop: Data,
+    ) {
+        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 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
+     */
+    protected _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
+     */
+    protected _disableScrollBehaviour (
+        bool: boolean,
+    ) {
+        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
+     */
+    protected _handleHover (
+        bool: boolean,
+    ) {
+        this.outer.classList.toggle('is-hovered', bool);
+    }
+
+    /**
+     * Handle Scroll Event
+     */
+    protected _handleScroll (data: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) {
+        // 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) as unknown as NodeJS.Timeout;
+        }
+
+        // render thumb
+        if (this.prop.optimizeCalculations) {
+            this._renderThumb();
+        }
+    }
+
+    /**
+     * Event on dragger move
+     */
+    protected _handleThumbDrag (
+        data: NDraggerMove.CallbacksTypes['move'],
+    ) {
+        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
+     */
+    protected _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
+     */
+    public 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();
+    }
+
+
+
+    public 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/src/ts/components/scroll/scrollbar/ScrollBar.ts

@@ -0,0 +1,292 @@
+import { createElement, selectOne } from 'vevet-dom';
+import { Component, NComponent } from '../../../base/Component';
+import { RequiredModuleProp } from '../../../utils/types/utility';
+import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
+import Bar from './Bar';
+
+
+
+export namespace NScrollBar {
+
+    /**
+     * Static properties
+     */
+    export interface StaticProp extends NComponent.StaticProp {
+        /**
+         * The scrollable element
+         * @default window
+         */
+        container?: Window | SmoothScroll | Element | string;
+        /**
+         * The element that will contain the scrollbar.
+         * If false, the property 'container' will be taken into consideration.
+         * @default false
+         */
+        domParent?: false | Element;
+        /**
+         * If the scrollbar must be interactive
+         * @default true
+         */
+        draggable?: boolean;
+        /**
+         * Automatically define the size of the scrollbar thumb
+         * @default true
+         */
+        autoSize?: boolean;
+        /**
+         * Automatically hide scrollbars
+         * @default true
+         */
+        autoHide?: boolean;
+        /**
+         * Minimum size of the scrollbar thumb
+         * @default 50
+         */
+        minSize?: number;
+        /**
+         * Optimize sizes calculation.
+         * If true, the sizes are calculated only when calling the "resize" method.
+         * Subsequently, if content changes, the scrollbar may be of false sizes.
+         * @default false
+         */
+        optimizeCalculations?: boolean;
+        /**
+         * If the scroll bar is draggable
+         * @default true
+         */
+        isDraggable?: boolean;
+        /**
+         * What scroll behavior should be used when dragging the ScrollBar thumb.
+         * Only for SmoothScroll
+         * @default 'smooth'
+         */
+        draggableScrollBehavior?: 'smooth' | 'auto';
+    }
+
+    /**
+     * Changeable properties
+     */
+    export interface ChangeableProp extends NComponent.ChangeableProp { }
+
+    /**
+     * Available callbacks
+     */
+    export interface CallbacksTypes extends NComponent.CallbacksTypes { }
+
+}
+
+
+
+/**
+ * Create custom scroll bar
+ */
+export class ScrollBar <
+    StaticProp extends NScrollBar.StaticProp = NScrollBar.StaticProp,
+    ChangeableProp extends NScrollBar.ChangeableProp = NScrollBar.ChangeableProp,
+    CallbacksTypes extends NScrollBar.CallbacksTypes = NScrollBar.CallbacksTypes,
+> extends Component <
+    StaticProp,
+    ChangeableProp,
+    CallbacksTypes
+> {
+    protected _getDefaultProp <
+        T extends RequiredModuleProp<StaticProp & ChangeableProp>
+    > (): T {
+        return {
+            ...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;
+    }
+    protected _container: Element | Window | SmoothScroll;
+
+    /**
+     * 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;
+    }
+
+    /**
+     * The scroll wrapper.
+     * Used for wrapper scroll
+     */
+    protected _scrollWrapper?: HTMLElement;
+
+    // scrollbars
+    protected _xBar: Bar;
+    protected _yBar: Bar;
+
+
+
+    constructor (
+        initialProp?: (StaticProp & ChangeableProp),
+        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({
+            dir: 'x',
+            ...barMainProp,
+        });
+        this._yBar = new Bar({
+            dir: 'y',
+            ...barMainProp,
+        });
+
+        // add styles
+        this.scrollableElement.classList.add(`${this.prefix}-parent`);
+
+        // initialize the class
+        if (init) {
+            this.init();
+        }
+    }
+
+    // Set Module Events
+    protected _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();
+    }
+
+    protected _onPropMutate () {
+        super._onPropMutate();
+        this.resize();
+    }
+
+
+
+    /**
+     * Resize the canvas
+     */
+    public resize () {
+        this._xBar.resize();
+        this._yBar.resize();
+    }
+
+
+
+    /**
+     * Destroy the module
+     */
+    protected _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`);
+    }
+}