vevet 5.1.4 → 5.2.1

package/src/components/SplitText/utils/wrapWords.ts

@@ -1,23 +1,37 @@
+import { cnAdd } from '@/internal/cn';
 import { ISplitTextStaticProps, ISplitTextWordMeta } from '../types';
 import { isIgnored } from './isIgnored';
+import { doc } from '@/internal/env';
 
-interface IProps {
+type TBaseProps = Pick<
+  ISplitTextStaticProps,
+  'ignore' | 'prepareText' | 'wordDelimiter' | 'wordDelimiterOutput'
+>;
+
+interface IProps extends TBaseProps {
   container: ChildNode;
   classname: string;
   tagName: keyof HTMLElementTagNameMap;
-  ignore: ISplitTextStaticProps['ignore'];
 }
 
 /**
  * Wraps each word inside the container in an HTML element with the specified tag and class.
  */
-export function wrapWords({ container, classname, tagName, ignore }: IProps) {
-  const whitespace = String.fromCharCode(32); // ASCII for space
-
-  const baseElement = document.createElement(tagName);
+export function wrapWords({
+  container,
+  classname,
+  tagName,
+  ignore,
+  prepareText,
+  wordDelimiter = ' ',
+  wordDelimiterOutput: wordDelimiterOutputProp,
+}: IProps) {
+  const wordDelimiterOutput = wordDelimiterOutputProp || wordDelimiter;
+
+  const baseElement = doc.createElement(tagName);
   baseElement.style.display = 'inline-block';
   baseElement.setAttribute('aria-hidden', 'true');
-  baseElement.classList.add(classname);
+  cnAdd(baseElement, classname);
 
   const wordsMeta: ISplitTextWordMeta[] = [];
   let prevNonBreakingWord: HTMLElement | null = null;
@@ -54,23 +68,25 @@ export function wrapWords({ container, classname, tagName, ignore }: IProps) {
     // If the node is a text node, split it into words
     if (node.nodeType === 3) {
       const parent = node.parentElement ?? container;
-      const text = node.nodeValue ?? '';
+      let text = node.nodeValue ?? '';
 
       // Handle case where node contains only whitespace
-      if (text === whitespace) {
+      if (text === wordDelimiter) {
         prevNonBreakingWord = null;
-        parent?.insertBefore(document.createTextNode(whitespace), node);
+        parent?.insertBefore(doc.createTextNode(wordDelimiterOutput), node);
         node.remove();
 
         return;
       }
 
       // Wrap each word in an element and insert it into the DOM
-      const splitWords = text.split(whitespace);
+      text = prepareText ? prepareText(text) : text;
+      const splitWords = text.split(wordDelimiter);
+
       splitWords.forEach((wordContents, index) => {
         if (wordContents) {
           const element = baseElement.cloneNode(false) as HTMLElement;
-          element.appendChild(document.createTextNode(wordContents));
+          element.appendChild(doc.createTextNode(wordContents));
           prevNonBreakingWord = element;
 
           wordsMeta.push({ element, letters: [] });
@@ -80,7 +96,7 @@ export function wrapWords({ container, classname, tagName, ignore }: IProps) {
 
         // Add a whitespace between words, except after the last word
         if (index < splitWords.length - 1) {
-          parent?.insertBefore(document.createTextNode(whitespace), node);
+          parent?.insertBefore(doc.createTextNode(wordDelimiterOutput), node);
         }
       });
 

package/src/components/Swipe/index.ts

@@ -1,4 +1,4 @@
-import { Module } from '@/base';
+import { Module, TModuleOnCallbacksProps } from '@/base';
 import { TRequiredProps } from '@/internal/requiredProps';
 import {
   ISwipeCallbacksMap,
@@ -14,6 +14,7 @@ import { addEventListener, clamp, EaseOutCubic } from '@/utils';
 import { initVevet } from '@/global/initVevet';
 import { Timeline } from '../Timeline';
 import { cursorStyles } from './styles';
+import { body } from '@/internal/env';
 
 export * from './types';
 
@@ -34,31 +35,33 @@ const VELOCITIES_COUNT = 4;
  * @group Components
  */
 export class Swipe<
-  CallbacksMap extends ISwipeCallbacksMap = ISwipeCallbacksMap,
-  StaticProps extends ISwipeStaticProps = ISwipeStaticProps,
-  MutableProps extends ISwipeMutableProps = ISwipeMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ISwipeCallbacksMap = ISwipeCallbacksMap,
+  S extends ISwipeStaticProps = ISwipeStaticProps,
+  M extends ISwipeMutableProps = ISwipeMutableProps,
+> extends Module<C, S, M> {
   /**
    * Returns default static properties.
    */
-  public _getStatic(): TRequiredProps<StaticProps> {
+  public _getStatic(): TRequiredProps<S> {
     return {
       ...super._getStatic(),
+      thumb: null,
       buttons: [0],
       pointers: 1,
       disableUserSelect: true,
-    } as TRequiredProps<StaticProps>;
+    } as TRequiredProps<S>;
   }
 
   /**
    * Returns default mutable properties.
    */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       enabled: true,
       relative: false,
       axis: null,
+      ratio: 1,
       grabCursor: false,
       willAbort: () => false,
       threshold: 5,
@@ -75,7 +78,7 @@ export class Swipe<
       distanceModifier: false,
       inertiaRatio: 1,
       inertiaDistanceThreshold: 50,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Pointer event manager */
@@ -125,10 +128,13 @@ export class Swipe<
   /** Cursor styles */
   protected _cursorStyles: HTMLStyleElement;
 
-  constructor(props?: StaticProps & MutableProps) {
-    super(props);
+  constructor(
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Swipe<C, S, M>>,
+  ) {
+    super(props, onCallbacks as any);
 
-    const { container, buttons, pointers } = this.props;
+    const { container, thumb, buttons, pointers } = this.props;
 
     // set default data
     this._coords = {
@@ -147,7 +153,7 @@ export class Swipe<
 
     // create pointers
     this._pointers = new Pointers({
-      container,
+      container: thumb || container,
       buttons,
       minPointers: pointers,
       maxPointers: pointers,
@@ -185,6 +191,7 @@ export class Swipe<
   /** Applies touch-action and cursor styles */
   protected _setInlineStyles() {
     const { container, axis } = this.props;
+    const { style } = container;
 
     const cursor = this.props.grabCursor ? 'grab' : '';
 
@@ -195,8 +202,8 @@ export class Swipe<
       touchAction = 'pan-x';
     }
 
-    container.style.cursor = cursor;
-    container.style.touchAction = touchAction;
+    style.cursor = cursor;
+    style.touchAction = touchAction;
   }
 
   /** Handles `touchstart` events */
@@ -287,6 +294,7 @@ export class Swipe<
   /** Parses pointer coordinates relative to the container */
   protected _decodeCoords(event: MouseEvent | TouchEvent): ISwipeMatrix {
     const { props } = this;
+    const { container, ratio } = props;
 
     const clientX =
       'touches' in event ? event.touches[0].clientX : event.clientX;
@@ -300,7 +308,7 @@ export class Swipe<
     let centerY = initVevet().height / 2;
 
     if (props.relative) {
-      const bounding = props.container.getBoundingClientRect();
+      const bounding = container.getBoundingClientRect();
 
       x = clientX - bounding.left;
       y = clientY - bounding.top;
@@ -311,7 +319,11 @@ export class Swipe<
     const angleRad = Math.atan2(clientY - centerY, clientX - centerX);
     const angle = (angleRad * 180) / Math.PI;
 
-    return { x, y, angle };
+    return {
+      x: x * ratio,
+      y: y * ratio,
+      angle,
+    };
   }
 
   /** Handles move events */
@@ -332,14 +344,17 @@ export class Swipe<
 
     // check if can start
     if (!this._isSwiping) {
-      const { threshold, minTime, axis, willAbort } = this.props;
+      const { threshold, ratio, minTime, axis, willAbort } = this.props;
+      const speed = Math.abs(ratio);
+
       const diff = {
         x: matrix.x - this._startCoord.x,
         y: matrix.y - this._startCoord.y,
       };
 
       // check threshold
-      if (Math.sqrt(diff.x ** 2 + diff.y ** 2) < threshold) {
+      const dist = Math.sqrt((diff.x / speed) ** 2 + (diff.y / speed) ** 2);
+      if (dist < threshold) {
         return;
       }
 
@@ -396,7 +411,7 @@ export class Swipe<
 
       // apply cursor
       if (this.props.grabCursor && this._cursorStyles) {
-        initVevet().body.append(this._cursorStyles);
+        body.append(this._cursorStyles);
       }
     }
 

package/src/components/Swipe/styles.ts

@@ -1,5 +1,6 @@
-export const cursorStyles =
-  typeof window !== 'undefined' ? document.createElement('style') : null;
+import { doc, isBrowser } from '@/internal/env';
+
+export const cursorStyles = isBrowser ? doc.createElement('style') : null;
 
 if (cursorStyles) {
   cursorStyles.innerHTML = '* { cursor: grabbing !important; }';

package/src/components/Swipe/types.ts

@@ -9,6 +9,12 @@ export interface ISwipeStaticProps extends IModuleStaticProps {
   /** Event listener container. */
   container: HTMLElement | SVGElement;
 
+  /**
+   * An element that triggers the swipe start.
+   * Calculations remain relative to the container regardless of this element.
+   */
+  thumb?: HTMLElement | SVGElement | null;
+
   /**
    * Determines which mouse buttons trigger events.
    * - 0: Main button pressed, usually the left button or the un-initialized state
@@ -55,6 +61,12 @@ export interface ISwipeMutableProps extends IModuleMutableProps {
    */
   axis?: null | 'x' | 'y';
 
+  /**
+   * Swipe move ratio (multiplier).
+   * @default 1
+   */
+  ratio?: number;
+
   /**
    * Shows "grab" and "grabbing" cursors during interaction.
    * @default false

package/src/components/Timeline/index.ts

@@ -1,5 +1,5 @@
 import { TRequiredProps } from '@/internal/requiredProps';
-import { Module } from '@/base/Module';
+import { Module, TModuleOnCallbacksProps } from '@/base/Module';
 import { clamp, easing } from '@/utils/math';
 import {
   ITimelineCallbacksMap,
@@ -7,6 +7,8 @@ import {
   ITimelineStaticProps,
 } from './types';
 import { initVevet } from '@/global/initVevet';
+import { noopIfDestroyed } from '@/internal/noopIfDestroyed';
+import { isUndefined } from '@/internal/isUndefined';
 
 export * from './types';
 
@@ -19,22 +21,22 @@ export * from './types';
  * @group Components
  */
 export class Timeline<
-  CallbacksMap extends ITimelineCallbacksMap = ITimelineCallbacksMap,
-  StaticProps extends ITimelineStaticProps = ITimelineStaticProps,
-  MutableProps extends ITimelineMutableProps = ITimelineMutableProps,
-> extends Module<CallbacksMap, StaticProps, MutableProps> {
+  C extends ITimelineCallbacksMap = ITimelineCallbacksMap,
+  S extends ITimelineStaticProps = ITimelineStaticProps,
+  M extends ITimelineMutableProps = ITimelineMutableProps,
+> extends Module<C, S, M> {
   /** Get default static properties. */
-  public _getStatic(): TRequiredProps<StaticProps> {
-    return { ...super._getStatic() } as TRequiredProps<StaticProps>;
+  public _getStatic(): TRequiredProps<S> {
+    return { ...super._getStatic() } as TRequiredProps<S>;
   }
 
   /** Get default mutable properties. */
-  public _getMutable(): TRequiredProps<MutableProps> {
+  public _getMutable(): TRequiredProps<M> {
     return {
       ...super._getMutable(),
       easing: initVevet().props.easing,
       duration: 1000,
-    } as TRequiredProps<MutableProps>;
+    } as TRequiredProps<M>;
   }
 
   /** Current linear progress of the timeline (0 to 1). */
@@ -74,7 +76,7 @@ export class Timeline<
    * Whether the timeline is currently playing.
    */
   get isPlaying() {
-    return typeof this._raf !== 'undefined';
+    return !isUndefined(this._raf);
   }
 
   /** Indicates whether the timeline is currently reversed. */
@@ -110,8 +112,11 @@ export class Timeline<
     return this.props.duration;
   }
 
-  constructor(props?: StaticProps & MutableProps) {
-    super(props);
+  constructor(
+    props?: S & M,
+    onCallbacks?: TModuleOnCallbacksProps<C, Timeline<C, S, M>>,
+  ) {
+    super(props, onCallbacks as any);
 
     // Initialize default values
     this._progress = 0;
@@ -126,8 +131,9 @@ export class Timeline<
    * Play the timeline, advancing progress toward completion.
    * Does nothing if the timeline is destroyed or already completed.
    */
+  @noopIfDestroyed
   public play() {
-    if (this.isDestroyed || this.progress === 1) {
+    if (this.progress === 1) {
       return;
     }
 
@@ -144,8 +150,9 @@ export class Timeline<
    * Reverse the timeline, moving progress toward the start.
    * Does nothing if the timeline is destroyed or already at the start.
    */
+  @noopIfDestroyed
   public reverse() {
-    if (this.isDestroyed || this.progress === 0) {
+    if (this.progress === 0) {
       return;
     }
 
@@ -161,11 +168,8 @@ export class Timeline<
   /**
    * Pause the timeline, halting progress without resetting it.
    */
+  @noopIfDestroyed
   public pause() {
-    if (this.isDestroyed) {
-      return;
-    }
-
     this._isPaused = true;
 
     if (this._raf) {
@@ -178,11 +182,8 @@ export class Timeline<
   /**
    * Reset the timeline to the beginning (progress = 0).
    */
+  @noopIfDestroyed
   public reset() {
-    if (this.isDestroyed) {
-      return;
-    }
-
     this.pause();
     this.progress = 0;
   }

package/src/core/global.ts

@@ -51,6 +51,11 @@ export interface ICore extends IViewport {
    */
   browserName: string;
 
+  /**
+   * Detects In-App Browser and returns its name, otherwise - `false`.
+   */
+  inAppBrowser: false | string;
+
   /** Document */
   doc: Document;
 

package/src/core/handlers/createPageLoad/index.ts

@@ -1,6 +1,8 @@
 import { Callbacks } from '@/base/Callbacks';
 import { IPageLoadCallbacksMap } from './types';
 import { addEventListener } from '@/utils/listeners';
+import { cnAdd, cnRemove } from '@/internal/cn';
+import { doc, html } from '@/internal/env';
 
 interface IProps {
   prefix: string;
@@ -12,7 +14,7 @@ export function createPageLoad({ prefix, applyClassNames }: IProps) {
 
   let isLoaded = false;
 
-  if (document.readyState === 'complete') {
+  if (doc.readyState === 'complete') {
     setTimeout(() => handleLoaded(), 0);
   } else {
     addEventListener(window, 'load', () => handleLoaded());
@@ -20,16 +22,15 @@ export function createPageLoad({ prefix, applyClassNames }: IProps) {
 
   /** Callback on page loaded */
   function handleLoaded() {
-    const html = document.documentElement;
     const { body } = document;
 
     isLoaded = true;
 
     if (applyClassNames) {
-      html.classList.remove(`${prefix}loading`);
-      body.classList.remove(`${prefix}loading`);
+      cnRemove(html, `${prefix}loading`);
+      cnRemove(body, `${prefix}loading`);
 
-      html.classList.add(`${prefix}loaded`);
+      cnAdd(html, `${prefix}loaded`);
     }
 
     callbacks.emit('loaded', undefined);

package/src/core/handlers/createViewport/index.ts

@@ -1,24 +1,38 @@
 import { IViewport, TViewportCallbacks } from './types';
 import { Callbacks } from '@/base/Callbacks';
 import { ICoreProps } from '@/core/types';
+import { cnToggle } from '@/internal/cn';
+import { body, doc, html } from '@/internal/env';
 import { addEventListener } from '@/utils/listeners';
 
 interface IProps {
   prefix: string;
   props: ICoreProps;
   isMobile: boolean;
+  isInApp: boolean;
 }
 
-export function createViewport({ prefix, props, isMobile }: IProps) {
-  const html = document.documentElement;
-
-  let styles = document.getElementById('vevet_css_preset');
+export function createViewport({ prefix, props, isMobile, isInApp }: IProps) {
+  // create styles
+  let styles = doc.getElementById('vevet_css_preset');
   if (!styles) {
-    styles = document.createElement('style');
+    styles = doc.createElement('style');
     styles.id = 'vevet_css_preset';
-    document.body.appendChild(styles);
+    body.appendChild(styles);
   }
 
+  // create svh helper
+  const svhHelper = doc.createElement('div');
+  const { style } = svhHelper;
+  svhHelper.id = 'vevet_svh_helper';
+  style.position = 'fixed';
+  style.top = '-100svh';
+  style.left = '-100px';
+  style.width = '1px';
+  style.height = '100svh';
+  body.appendChild(svhHelper);
+
+  // media queries
   const mqDesktop = window.matchMedia(`(min-width: ${props.md + 0.001}px)`);
   const mqTablet = window.matchMedia(
     `(min-width: ${props.sm + 0.001}px) and (max-width: ${props.md}px)`,
@@ -72,8 +86,8 @@ export function createViewport({ prefix, props, isMobile }: IProps) {
   addEventListener(window, 'resize', () => debounceResize());
 
   const observer = new ResizeObserver(() => debounceResize());
-  observer.observe(document.documentElement);
-  observer.observe(document.body);
+  observer.observe(html);
+  observer.observe(body);
 
   /** Event on window resize */
   function onResize() {
@@ -116,12 +130,11 @@ export function createViewport({ prefix, props, isMobile }: IProps) {
   function updateValues() {
     const { width: prevWidth } = data;
 
-    const root = document.documentElement;
-    const rootStyles = getComputedStyle(root);
+    const rootStyles = getComputedStyle(html);
 
     data.width = window.innerWidth;
     data.height = window.innerHeight;
-    data.scrollbarWidth = window.innerWidth - root.clientWidth;
+    data.scrollbarWidth = window.innerWidth - html.clientWidth;
     data.vw = data.width / 100;
     data.vh = data.height / 100;
     data.rem = parseFloat(rootStyles.fontSize);
@@ -141,11 +154,21 @@ export function createViewport({ prefix, props, isMobile }: IProps) {
       data.lg = true;
     }
 
-    // update sHeight && svh only when the width changes
-    // or for desktop
-    if (prevWidth !== data.width || !data.sHeight || !isMobile) {
-      data.sHeight = root.clientHeight;
-      data.svh = data.sHeight / 100;
+    // for in-app browser, update svh only if width changed
+    if (isMobile && isInApp) {
+      const rootHeight = html.clientHeight;
+
+      if (prevWidth !== data.width || !data.sHeight) {
+        data.sHeight = rootHeight;
+        data.svh = data.sHeight / 100;
+      } else if (prevWidth === data.width && rootHeight < data.sHeight) {
+        data.sHeight = rootHeight;
+        data.svh = data.sHeight / 100;
+      }
+    } else {
+      // when other browser, update svh directly
+      data.svh = svhHelper.clientHeight / 100 || html.clientHeight / 100;
+      data.sHeight = data.svh * 100;
     }
   }
 
@@ -155,12 +178,12 @@ export function createViewport({ prefix, props, isMobile }: IProps) {
       return;
     }
 
-    html.classList.toggle(`${prefix}lg`, data.lg);
-    html.classList.toggle(`${prefix}md`, data.md);
-    html.classList.toggle(`${prefix}sm`, data.sm);
+    cnToggle(html, `${prefix}lg`, data.lg);
+    cnToggle(html, `${prefix}md`, data.md);
+    cnToggle(html, `${prefix}sm`, data.sm);
 
-    html.classList.toggle(`${prefix}landscape`, data.landscape);
-    html.classList.toggle(`${prefix}portrait`, data.portrait);
+    cnToggle(html, `${prefix}landscape`, data.landscape);
+    cnToggle(html, `${prefix}portrait`, data.portrait);
   }
 
   /** Update CSS variables */

package/src/core/index.ts

@@ -1,10 +1,13 @@
 import { detect } from 'detect-browser';
 import isMobileJs from 'ismobilejs';
+import InAppSpy from 'inapp-spy';
 import manifest from '../manifest.json';
 import { createPageLoad } from './handlers/createPageLoad';
 import { ICoreProps } from './types';
 import { createViewport } from './handlers/createViewport';
 import { ICore } from './global';
+import { cnAdd, cnToggle } from '@/internal/cn';
+import { body, doc, html } from '@/internal/env';
 
 export function Core(input: Partial<ICoreProps>): ICore {
   // set default properties
@@ -31,13 +34,17 @@ export function Core(input: Partial<ICoreProps>): ICore {
 
   const isMobile = device.phone || device.tablet;
 
+  const { isInApp, appName } = InAppSpy();
+  const inAppBrowser = isInApp ? (appName || 'unknown').toLowerCase() : false;
+
   // events
 
   const pageLoad = createPageLoad({
     prefix,
     applyClassNames: props.applyClassNames,
   });
-  const viewport = createViewport({ prefix, props, isMobile });
+
+  const viewport = createViewport({ prefix, props, isMobile, isInApp });
 
   // output
 
@@ -52,9 +59,10 @@ export function Core(input: Partial<ICoreProps>): ICore {
     mobile: isMobile,
     osName,
     browserName,
-    doc: document,
-    html: document.documentElement,
-    body: document.body,
+    inAppBrowser,
+    doc,
+    html,
+    body,
     loaded: false,
     onLoad: pageLoad.onLoad,
     onResize: (...params) => viewport.callbacks.on(...params),
@@ -87,17 +95,15 @@ export function Core(input: Partial<ICoreProps>): ICore {
       return;
     }
 
-    const { html } = output;
-
-    html.classList.add(`${prefix}os-${osName}`);
+    cnAdd(html, `${prefix}os-${osName}`);
 
-    html.classList.add(`${prefix}browser-${browserName}`);
+    cnAdd(html, `${prefix}browser-${browserName}`);
 
-    html.classList.toggle(`${prefix}phone`, output.phone);
+    cnToggle(html, `${prefix}phone`, output.phone);
 
-    html.classList.toggle(`${prefix}tablet`, output.tablet);
+    cnToggle(html, `${prefix}tablet`, output.tablet);
 
-    html.classList.toggle(`${prefix}mobile`, output.mobile);
+    cnToggle(html, `${prefix}mobile`, output.mobile);
   })();
 
   return output;

package/src/global/initVevet.ts

@@ -1,6 +1,7 @@
 import { Core } from '@/core';
 import { ICore } from '@/core/global';
 import { ICoreProps } from '@/core/types';
+import { isBrowser } from '@/internal/env';
 
 declare global {
   interface Window {
@@ -26,6 +27,6 @@ export function initVevet() {
 }
 
 // auto initialize
-if (typeof window !== 'undefined') {
+if (isBrowser) {
   window.vevet5 = initVevet();
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 import { ICore } from './core/global';
 import { initVevet } from './global/initVevet';
+import { isBrowser } from './internal/env';
 
 export { initVevet };
 
@@ -8,9 +9,7 @@ export { initVevet };
  *
  * @group Core
  */
-export const vevet = (
-  typeof window !== 'undefined' ? initVevet() : undefined
-) as Readonly<ICore>;
+export const vevet = (isBrowser ? initVevet() : undefined) as Readonly<ICore>;
 
 export const app = vevet;