vevet 2.1.0 → 2.4.0

package/build/types/utils/scroll/scrollToElement.d.ts

@@ -0,0 +1,32 @@
+import { ScrollLike } from '../types/general';
+interface Props {
+    /**
+     * @default window
+     */
+    container?: Window | Element | ScrollLike;
+    /**
+     * The target element
+     */
+    el: Element | string;
+    /**
+     * top padding
+     * @default 0
+     */
+    top?: number;
+    /**
+     * left padding
+     * @default 0
+     */
+    left?: number;
+    /**
+     * scroll duration
+     * @default 250
+     */
+    duration?: number;
+}
+/**
+ * Scroll to element
+ */
+export default function scrollToElement({ container, el, top, left, duration, }: Props): Promise<void>;
+export {};
+//# sourceMappingURL=scrollToElement.d.ts.map

package/build/types/utils/scroll/scrollToElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollToElement.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/scroll/scrollToElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAK9C,UAAU,KAAK;IACX;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C;;OAEG;IACH,EAAE,EAAE,OAAO,GAAG,MAAM,CAAC;IACrB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACrC,SAAkB,EAClB,EAAE,EACF,GAAO,EACP,IAAQ,EACR,QAAc,GACjB,EAAE,KAAK,iBAgCP"}

package/build/types/utils/scroll/to.d.ts

@@ -0,0 +1,28 @@
+import { ScrollLike } from '../types/general';
+interface Props {
+    /**
+     * @default window
+     */
+    container?: Window | Element | ScrollLike;
+    /**
+     * top padding
+     * @default 0
+     */
+    top?: number;
+    /**
+     * left padding
+     * @default 0
+     */
+    left?: number;
+    /**
+     * scroll duration
+     * @default 250
+     */
+    duration?: number;
+}
+/**
+ * Scroll to coordinates
+ */
+export default function scrollTo({ container, top, left, duration, }: Props): Promise<void>;
+export {};
+//# sourceMappingURL=to.d.ts.map

package/build/types/utils/scroll/to.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/scroll/to.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,UAAU,KAAK;IACX;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,EAC9B,SAAkB,EAClB,GAAO,EACP,IAAQ,EACR,QAAc,GACjB,EAAE,KAAK,iBA8BP"}

package/build/types/utils/types/general.d.ts

@@ -4,4 +4,10 @@ export interface IRemovable {
 export interface IDestroyable {
     destroy: () => void;
 }
+export interface ScrollLike {
+    scrollTop: number;
+    scrollLeft: number;
+    scrollTo(options: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+}
 //# sourceMappingURL=general.d.ts.map

package/build/types/utils/types/general.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/types/general.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/types/general.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vevet",
-  "version": "2.1.0",
+  "version": "2.4.0",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"

package/src/ts/app/events/Viewport.ts

@@ -323,7 +323,12 @@ export class Viewport extends Callbacks<
     /**
      * Launch callbacks on resize.
      */
-    protected _onResize () {
+    protected _onResize (
+        /**
+         * force all callbacks
+         */
+        force = false,
+    ) {
         // copy previous values
         const prevWidth = this._prevSize.w;
         const prevHeight = this._prevSize.h;
@@ -342,29 +347,36 @@ export class Viewport extends Callbacks<
         };
 
         // only when width is changed
-        if (width !== prevWidth && height === prevHeight) {
+        if (force || (width !== prevWidth && height === prevHeight)) {
             this.tbt('w_', changes);
         }
         // only when height is changed
-        if (height !== prevHeight && width === prevWidth) {
+        if (force || (height !== prevHeight && width === prevWidth)) {
             this.tbt('h_', changes);
         }
         // when height & width are changed
-        if (width !== prevWidth && height !== prevHeight) {
+        if (force || (width !== prevWidth && height !== prevHeight)) {
             this.tbt('wh', changes);
             this.tbt('hw', changes);
         }
         // when width is changed
-        if (width !== prevWidth) {
+        if (force || width !== prevWidth) {
             this.tbt('w', changes);
         }
         // when height changed
-        if (height !== prevHeight) {
+        if (force || height !== prevHeight) {
             this.tbt('h', changes);
         }
 
         // on any change
         this.tbt('', changes);
     }
+
+    /**
+     * Force launching all callbacks
+     */
+    public forceResize () {
+        this._onResize(true);
+    }
 }
 

package/src/ts/components/scroll/types.ts

@@ -1,8 +1,6 @@
-export interface ScrollableElement {
-    scrollTop: number;
-    scrollTo(options: ScrollToOptions): void;
-    scrollTo(x: number, y: number): void;
-    scrollLeft: number;
+import { ScrollLike } from '../../utils/types/general';
+
+export interface ScrollableElement extends ScrollLike {
     scrollWidth: number;
     scrollHeight: number;
     clientWidth: number;

package/src/ts/components/text/SplitText.ts

@@ -16,6 +16,11 @@ export namespace NSplitText {
          * @default '#v-split-text'
          */
         container?: string | Element;
+        /**
+         * Text content
+         * @default 'innerText'
+         */
+        textSource?: 'textContent' | 'innerText' | 'innerHTML';
         /**
          * If need to split text into letters.
          * @default true
@@ -92,6 +97,7 @@ export class SplitText <
         return {
             ...super._getDefaultProp(),
             container: `#${this.prefix}`,
+            textSource: 'innerText',
             appendLetters: true,
             appendLines: false,
             viewportTarget: '',
@@ -168,7 +174,7 @@ export class SplitText <
 
         // get initial text
         this._initHTML = this._container.innerHTML;
-        const innerText = this._container.innerText.trim() || this._container.innerHTML.trim();
+        const innerText = this._container[this.prop.textSource]!.trim();
         this._initText = innerText || 'no rendered text';
         this._initText = this._initText.replace(/\s+\n/gm, '\n');
         this._initText = this._initText.replace(/<br>/gm, String.fromCharCode(10));

package/src/ts/index.ts

@@ -1,6 +1,7 @@
 import * as common from './utils/common';
 import * as listeners from './utils/listeners';
 import * as math from './utils/math';
+import * as scroll from './utils/scroll';
 
 import * as GeneralTypes from './utils/types/general';
 
@@ -48,6 +49,7 @@ const utils = {
     common,
     listeners,
     math,
+    scroll,
 };
 
 

package/src/ts/utils/scroll/getScrollValues.ts

@@ -0,0 +1,20 @@
+import { ScrollLike } from '../types/general';
+
+/**
+ * Get scroll values of a certain element
+ */
+export default function getScrollValues (
+    selector: (Window | Element | ScrollLike | undefined) = window,
+) {
+    if (selector) {
+        const scrollTop = selector instanceof Window
+            ? selector.pageYOffset : selector.scrollTop;
+        const scrollLeft = selector instanceof Window
+            ? selector.pageXOffset : selector.scrollLeft;
+        return {
+            scrollTop,
+            scrollLeft,
+        };
+    }
+    return undefined;
+}

package/src/ts/utils/scroll/index.ts

@@ -0,0 +1,9 @@
+import getValues from './getScrollValues';
+import scrollTo from './scrollTo';
+import scrollToElement from './scrollToElement';
+
+export {
+    getValues,
+    scrollTo as to,
+    scrollToElement as toElement,
+};

package/src/ts/utils/scroll/scrollTo.ts

@@ -0,0 +1,65 @@
+import { Timeline } from '../../components/timeline/Timeline';
+import { ScrollLike } from '../types/general';
+import getScrollValues from './getScrollValues';
+
+interface Props {
+    /**
+     * @default window
+     */
+    container?: Window | Element | ScrollLike;
+    /**
+     * top padding
+     * @default 0
+     */
+    top?: number;
+    /**
+     * left padding
+     * @default 0
+     */
+    left?: number;
+    /**
+     * scroll duration
+     * @default 250
+     */
+    duration?: number;
+}
+
+/**
+ * Scroll to coordinates
+ */
+export default function scrollTo ({
+    container = window,
+    top = 0,
+    left = 0,
+    duration = 250,
+}: Props) {
+    return new Promise<void>((
+        resolve, reject,
+    ) => {
+        // save start values
+        const startValues = getScrollValues(container);
+        if (startValues) {
+            // create animation
+            const timeline = new Timeline({
+                duration,
+            });
+            timeline.addCallback('progress', (data) => {
+                if (container) {
+                    container.scrollTo({
+                        top: startValues.scrollTop
+                            + (top - startValues.scrollTop) * data.easing,
+                        left: startValues.scrollLeft
+                            + (left - startValues.scrollLeft) * data.easing,
+                        behavior: 'auto',
+                    });
+                }
+            });
+            timeline.addCallback('end', () => {
+                resolve();
+            });
+            timeline.play();
+            return;
+        }
+        reject();
+    });
+}

package/src/ts/utils/scroll/scrollToElement.ts

@@ -0,0 +1,74 @@
+import { selectOne } from 'vevet-dom';
+import { ScrollLike } from '../types/general';
+import getScrollValues from './getScrollValues';
+import clamp from '../math/clamp';
+import scrollTo from './scrollTo';
+
+interface Props {
+    /**
+     * @default window
+     */
+    container?: Window | Element | ScrollLike;
+    /**
+     * The target element
+     */
+    el: Element | string;
+    /**
+     * top padding
+     * @default 0
+     */
+    top?: number;
+    /**
+     * left padding
+     * @default 0
+     */
+    left?: number;
+    /**
+     * scroll duration
+     * @default 250
+     */
+    duration?: number;
+}
+
+/**
+ * Scroll to element
+ */
+export default function scrollToElement ({
+    container = window,
+    el,
+    top = 0,
+    left = 0,
+    duration = 250,
+}: Props) {
+    return new Promise<void>((
+        resolve, reject,
+    ) => {
+        const startValues = getScrollValues(container);
+        if (startValues) {
+            const element = selectOne(el);
+            if (element) {
+                const bounding = element.getBoundingClientRect();
+                const toTop = clamp(
+                    bounding.top + startValues.scrollTop - top,
+                    [0, Infinity],
+                );
+                const toLeft = clamp(
+                    bounding.left + startValues.scrollLeft - left,
+                    [0, Infinity],
+                );
+                scrollTo({
+                    container,
+                    top: toTop,
+                    left: toLeft,
+                    duration,
+                }).then(() => {
+                    resolve();
+                }).catch(() => {
+                    reject();
+                });
+            }
+            return;
+        }
+        reject();
+    });
+}

package/src/ts/utils/types/general.ts

@@ -5,3 +5,10 @@ export interface IRemovable {
 export interface IDestroyable {
     destroy: () => void;
 }
+
+export interface ScrollLike {
+    scrollTop: number;
+    scrollLeft: number;
+    scrollTo(options: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+}