vevet 2.16.1 → 3.0.0-beta.0

package/src/ts/components/scroll/plugins/SmoothScrollDragPlugin.ts

@@ -1,304 +0,0 @@
-import { DraggerMove, NDraggerMove } from '../../dragger/DraggerMove';
-import { Plugin, NPlugin } from '../../../base/Plugin';
-import { NCallbacks } from '../../../base/Callbacks';
-import { SmoothScroll as SmoothScrollInstance } from '../smooth-scroll/SmoothScroll';
-import { RequiredModuleProp } from '../../../utils/types/utility';
-
-const draggingClassName = 'is-dragging';
-
-
-
-export namespace NSmoothScrollDragPlugin {
-
-    /**
-     * Static properties
-     */
-    export interface StaticProp extends NPlugin.StaticProp {}
-
-    /**
-     * Changeable Properties
-     */
-    export interface ChangeableProp extends NPlugin.ChangeableProp {
-        /**
-         * If dragger is enabled
-         * @default true
-         */
-        enabled?: boolean;
-        /**
-         * Dragger speed
-         * @default 1
-         */
-        speed?: number;
-        /**
-         * Linear interpolation of SmoothScroll.
-         * If false, the current value will be used.
-         * @default false
-         */
-        lerp?: number | false;
-        /**
-         * If need to reverse dragger direction
-         * @default false
-         */
-        reverseDir?: boolean;
-        /**
-         * If need to reverse dragger direction
-         * @default false
-         */
-        stopPropagation?: false | {
-            threshold: number;
-            dir: 'x' | 'y';
-        };
-    }
-
-    /**
-     * Available callbacks
-     */
-    export interface CallbacksTypes extends NPlugin.CallbacksTypes {
-        start: false;
-        move: false;
-        end: false;
-    }
-
-}
-
-
-
-/**
- * A class for Plugins.
- */
-export class SmoothScrollDragPlugin<
-    StaticProp extends NSmoothScrollDragPlugin.StaticProp
-        = NSmoothScrollDragPlugin.StaticProp,
-    ChangeableProp extends NSmoothScrollDragPlugin.ChangeableProp
-        = NSmoothScrollDragPlugin.ChangeableProp,
-    CallbacksTypes extends NSmoothScrollDragPlugin.CallbacksTypes
-        = NSmoothScrollDragPlugin.CallbacksTypes
-> extends Plugin <
-    StaticProp,
-    ChangeableProp,
-    CallbacksTypes,
-    SmoothScrollInstance
-> {
-    protected _getDefaultProp <
-        T extends RequiredModuleProp<StaticProp & ChangeableProp>
-    > (): T {
-        return {
-            ...super._getDefaultProp(),
-            enabled: true,
-            speed: 1,
-            lerp: false,
-            reverseDir: false,
-            stopPropagation: false,
-        };
-    }
-
-    /**
-     * Dragger component
-     */
-    protected _dragger?: DraggerMove;
-    /**
-     * Component events
-     */
-    protected _componentEvents: NCallbacks.AddedCallback[];
-
-    /**
-     * If is dragging at the moment
-     */
-    get isDragging () {
-        if (this._dragger) {
-            return this._dragger.isDragging;
-        }
-        return false;
-    }
-
-    /**
-     * Current lerp of SmoothScroll
-     */
-    protected _currentLerp: number | false;
-
-
-
-    constructor (
-        initialProp?: (StaticProp & ChangeableProp),
-    ) {
-        super(initialProp);
-        this._dragger = undefined;
-        this._componentEvents = [];
-        this._currentLerp = false;
-    }
-
-    protected _constructor () {
-        super._constructor();
-        this._toggleDragger();
-    }
-
-    protected _onPropMutate () {
-        super._onPropMutate();
-        this._toggleDragger();
-    }
-
-
-
-    /**
-     * Add or remove dragger
-     */
-    protected _toggleDragger () {
-        if (this.prop.enabled) {
-            this._addDragger();
-        } else {
-            this._removeDragger();
-        }
-    }
-
-    /**
-     * Add dragger events
-     */
-    protected _addDragger () {
-        if (this._dragger) {
-            return;
-        }
-        const { component } = this;
-
-        this._dragger = new DraggerMove({
-            container: component.outer,
-        });
-        this._dragger.addCallback('start', this._handleDragStart.bind(this));
-        this._dragger.addCallback('move', (data) => {
-            this._handleDragMove(data);
-        });
-        this._dragger.addCallback('end', this._handleDragEnd.bind(this));
-
-        this._componentEvents.push(
-            component.addCallback('wheel', () => {
-                this._dragger?.cancel();
-            }),
-        );
-    }
-
-    /**
-     * Remove dragger events
-     */
-    protected _removeDragger () {
-        if (!this._dragger) {
-            return;
-        }
-
-        this._dragger.destroy();
-        this._dragger = undefined;
-
-        this._componentEvents.forEach((evt) => {
-            evt.remove();
-        });
-        this._componentEvents = [];
-    }
-
-
-
-    /**
-     * Callback on dragging start
-     */
-    protected _handleDragStart () {
-        const { component } = this;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // check scrollable area
-        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
-            return;
-        }
-        // change lerp
-        const { lerp } = this.prop;
-        if (typeof lerp !== 'boolean') {
-            this._currentLerp = component.prop.render.lerp;
-            component.changeProp({
-                render: {
-                    lerp,
-                },
-            });
-        }
-        // launch events
-        this._callbacks.tbt('start', false);
-    }
-
-    /**
-     * Callback on dragging move
-     */
-    protected _handleDragMove (
-        data: NDraggerMove.CallbacksTypes['move'],
-    ) {
-        const { component } = this;
-        if (!component.prop.enabled) {
-            return;
-        }
-        // check scrollable area
-        if (component.maxScrollableWidth <= 0 && component.maxScrollableHeight <= 0) {
-            return;
-        }
-        const { evt } = data;
-
-        // get difference between coordinates and decide
-        // if we need to stop propagation
-        const { stopPropagation } = this.prop;
-        if (stopPropagation) {
-            if (!evt.cancelable) {
-                return;
-            }
-            const diffX = Math.abs(data.coords.x - data.start.x);
-            const diffY = Math.abs(data.coords.y - data.start.y);
-            if (
-                ((diffX > stopPropagation.threshold) && stopPropagation.dir === 'x')
-                || ((diffY > stopPropagation.threshold) && stopPropagation.dir === 'y')
-            ) {
-                if (evt.cancelable) {
-                    evt.preventDefault();
-                    evt.stopPropagation();
-                }
-            }
-        }
-
-        const { speed, reverseDir } = this.prop;
-        // get coordinates
-        const x = data.step.x * speed;
-        const y = data.step.y * speed;
-        // update scroll values
-        component.targetLeft -= !reverseDir ? x : y;
-        component.targetTop -= !reverseDir ? y : x;
-        // set classes
-        component.outer.classList.add(draggingClassName);
-        component.container.classList.add(draggingClassName);
-
-        // launch events
-        this._callbacks.tbt('move', false);
-    }
-
-    /**
-     * Callback on dragging end
-     */
-    protected _handleDragEnd () {
-        const { component } = this;
-        // set classes
-        component.outer.classList.remove(draggingClassName);
-        component.container.classList.remove(draggingClassName);
-        // restore SmoothScroll Lerp
-        if (typeof this._currentLerp !== 'boolean') {
-            component.changeProp({
-                render: {
-                    lerp: this._currentLerp,
-                },
-            });
-            this._currentLerp = false;
-        }
-        // launch events
-        this._callbacks.tbt('end', false);
-    }
-
-
-
-    /**
-     * Destroy the plugin
-     */
-    protected _destroy () {
-        super._destroy();
-        this._removeDragger();
-    }
-}

package/src/ts/components/scroll/plugins/SmoothScrollKeyboardPlugin.ts

@@ -1,178 +0,0 @@
-import { childOf } from 'vevet-dom';
-import { Plugin, NPlugin } from '../../../base/Plugin';
-import timeoutCallback from '../../../utils/common/timeoutCallback';
-import { SmoothScroll as SmoothScrollInstance } from '../smooth-scroll/SmoothScroll';
-
-
-
-export namespace NSmoothScrollKeyboardPlugin {
-
-    /**
-     * Static properties
-     */
-    export interface StaticProp extends NPlugin.StaticProp {}
-
-    /**
-     * Changeable Properties
-     */
-    export interface ChangeableProp extends NPlugin.ChangeableProp {}
-
-    /**
-     * Available callbacks
-     */
-    export interface CallbacksTypes extends NPlugin.CallbacksTypes {}
-
-}
-
-
-
-/**
- * A class for Plugins.
- */
-export class SmoothScrollKeyboardPlugin<
-    StaticProp extends NSmoothScrollKeyboardPlugin.StaticProp
-        = NSmoothScrollKeyboardPlugin.StaticProp,
-    ChangeableProp extends NSmoothScrollKeyboardPlugin.ChangeableProp
-        = NSmoothScrollKeyboardPlugin.ChangeableProp,
-    CallbacksTypes extends NSmoothScrollKeyboardPlugin.CallbacksTypes
-        = NSmoothScrollKeyboardPlugin.CallbacksTypes
-> extends Plugin <
-    StaticProp,
-    ChangeableProp,
-    CallbacksTypes,
-    SmoothScrollInstance
-> {
-    protected _setEvents () {
-        super._setEvents();
-        this.addEventListeners(window, 'keydown', (e) => {
-            this._handleKeydown(e);
-        });
-    }
-
-
-
-    /**
-     * Event on a key pressed
-     */
-    protected _handleKeydown (e: KeyboardEvent) {
-        const component = this._component;
-        if (!component.prop.enabled) {
-            return;
-        }
-
-        // tab is active for everethyng, forms too
-        if (e.keyCode === 9) {
-            this._handleTab();
-            return;
-        }
-
-        // check if some element is under focus
-        // if some exists, ignore key events
-        const { activeElement } = document;
-        if (activeElement) {
-            if (
-                activeElement instanceof HTMLInputElement
-                || activeElement instanceof HTMLTextAreaElement
-            ) {
-                return;
-            }
-        }
-
-        // check if the scroll container is in viewport
-        const { viewport } = this._app;
-        const bounding = component.outer.getBoundingClientRect();
-        if (!(
-            bounding.left < viewport.width
-            && bounding.right > 0
-            && bounding.top < viewport.height
-            && bounding.bottom > 0
-        )) {
-            return;
-        }
-
-        // update scroll values
-        const scrollIterator = 40;
-        switch (e.keyCode) {
-            // up
-            case 38:
-                component.targetTop -= scrollIterator;
-                break;
-            // down
-            case 40:
-                component.targetTop += scrollIterator;
-                break;
-
-            // right
-            case 39:
-                component.targetLeft += scrollIterator;
-                break;
-            // left
-            case 37:
-                component.targetLeft -= scrollIterator;
-                break;
-
-            // page down
-            case 34:
-                component.targetTop += scrollIterator * 10;
-                break;
-            // page up
-            case 33:
-                component.targetTop -= scrollIterator * 10;
-                break;
-
-            // home
-            case 36:
-                component.targetTop = 0;
-                component.targetLeft = 0;
-                break;
-            // end
-            case 35:
-                component.targetTop = component.scrollHeight;
-                component.targetLeft = component.scrollWidth;
-                break;
-
-            // space
-            case 32:
-                component.targetTop += scrollIterator * 5;
-                break;
-
-            default:
-                break;
-        }
-    }
-
-    /**
-     * Handle Tab key pressed
-     */
-    protected _handleTab () {
-        // get active element and scroll to it
-        timeoutCallback(() => {
-            const scroll = this._component;
-            const { activeElement } = document;
-
-            // skip elements that do not belong to the SmoothScroll outer
-            if (
-                !(activeElement instanceof HTMLElement)
-                || !childOf(activeElement, scroll.outer)
-            ) {
-                return;
-            }
-
-            // get boundings
-            const scrollOuterBounding = scroll.outer.getBoundingClientRect();
-            const activeElementBounding = activeElement.getBoundingClientRect();
-
-            // get element position
-            const top = scroll.scrollTop
-            + (activeElementBounding.top - scrollOuterBounding.top)
-            - (scroll.clientHeight / 2 - activeElementBounding.height / 2);
-            const left = scroll.scrollLeft
-                + (activeElementBounding.left - scrollOuterBounding.left)
-                - (scroll.clientWidth / 2 - activeElementBounding.width / 2);
-
-            // apply new targets
-            scroll.targetTop = top;
-            scroll.targetLeft = left;
-        }, 120);
-    }
-}

package/src/ts/components/scroll/scrollable/ScrollEventsBase.ts

@@ -1,161 +0,0 @@
-import { selectOne } from 'vevet-dom';
-import { Component, NComponent } from '../../../base/Component';
-import { RequiredModuleProp } from '../../../utils/types/utility';
-import { SmoothScroll } from '../smooth-scroll/SmoothScroll';
-
-
-
-export namespace NScrollEventsBase {
-
-    /**
-     * Static properties
-     */
-    export interface StaticProp extends NComponent.StaticProp {
-        /**
-         * The scrollable element
-         * @default window
-         */
-        container?: string | Element | SmoothScroll | Window;
-        /**
-         * Intersection root element. If false, the element is found
-         * automatically
-         * @default false
-         */
-        intersectionRoot?: false | null | Element;
-    }
-
-    /**
-     * Changeable properties
-     */
-    export interface ChangeableProp extends NComponent.ChangeableProp { }
-
-    /**
-     * Available callbacks
-     */
-    export interface CallbacksTypes extends NComponent.CallbacksTypes { }
-
-    /**
-     * BoundingRect
-     */
-    export interface BoundingRect {
-        top: number;
-        left: number;
-        width: number;
-        height: number;
-    }
-
-}
-
-
-
-/**
- * A base for scroll event components
- */
-export abstract class ScrollEventsBase <
-    StaticProp extends NScrollEventsBase.StaticProp = NScrollEventsBase.StaticProp,
-    ChangeableProp extends NScrollEventsBase.ChangeableProp = NScrollEventsBase.ChangeableProp,
-    CallbacksTypes extends NScrollEventsBase.CallbacksTypes = NScrollEventsBase.CallbacksTypes,
-> extends Component <
-    StaticProp,
-    ChangeableProp,
-    CallbacksTypes
-> {
-    protected _getDefaultProp <
-        T extends RequiredModuleProp<StaticProp & ChangeableProp>
-    > (): T {
-        return {
-            ...super._getDefaultProp(),
-            container: window,
-            intersectionRoot: false,
-        };
-    }
-
-
-
-    /**
-     * Scroll container
-     */
-    protected _scrollContainer: Element | SmoothScroll | Window;
-    get scrollContainer () {
-        return this._scrollContainer;
-    }
-    get scrollableElement () {
-        if (this._scrollContainer instanceof Window) {
-            return this._app.html;
-        }
-        return this._scrollContainer;
-    }
-
-    /**
-     * Parent of inner elements
-     */
-    protected get domParent () {
-        const { scrollContainer } = this;
-        if (scrollContainer instanceof Window) {
-            return this._app.body;
-        }
-        if (scrollContainer instanceof Element) {
-            return scrollContainer;
-        }
-        return scrollContainer.outer;
-    }
-
-    /**
-     * Used as a "root" for IntersectionObserver
-     */
-    protected get intersectionRoot () {
-        if (this.prop.intersectionRoot === false) {
-            const { scrollContainer } = this;
-            if (scrollContainer instanceof Window) {
-                return null;
-            }
-            if (scrollContainer instanceof Element) {
-                return scrollContainer;
-            }
-            return scrollContainer.outer;
-        }
-        return this.prop.intersectionRoot;
-    }
-
-    /**
-     * BoundingRect of 'scrollContainer'
-     */
-    protected get scrollContainerBounding (): NScrollEventsBase.BoundingRect {
-        if (this.intersectionRoot) {
-            const bounding = this.intersectionRoot.getBoundingClientRect();
-            return {
-                top: bounding.top,
-                left: bounding.left,
-                width: bounding.width,
-                height: bounding.height,
-            };
-        }
-        return {
-            top: 0,
-            left: 0,
-            width: this._app.viewport.width,
-            height: this._app.viewport.height,
-        };
-    }
-
-
-
-    constructor (
-        initialProp?: (StaticProp & ChangeableProp),
-        init = true,
-    ) {
-        super(initialProp, false);
-
-        // get scroll container
-        if (typeof this.prop.container === 'string') {
-            this._scrollContainer = selectOne(this.prop.container) as Element;
-        } else {
-            this._scrollContainer = this.prop.container;
-        }
-
-        // initialize the class
-        if (init) {
-            this.init();
-        }
-    }
-}