vevet 3.13.1 → 3.14.0

package/src/components/SplitText/stories/index.tsx

@@ -1,26 +1,44 @@
+/* eslint-disable react/no-danger */
 import React, { FC, useEffect, useRef } from 'react';
-import { SplitText, NSplitText } from '..';
+import { NSplitText } from '../types';
+import { SplitText } from '..';
 
 interface IProps extends Omit<NSplitText.IStaticProps, 'parent' | 'container'> {
   text: string;
 }
 
-export const Component: FC<IProps> = ({ text, ...props }) => {
+export const Component: FC<IProps> = ({ text, hasLetters, hasLines }) => {
   const ref = useRef<HTMLHeadingElement>(null);
 
   useEffect(() => {
-    if (!ref.current) {
+    const container = ref.current;
+    if (!container) {
       return undefined;
     }
 
     const instance = new SplitText({
-      ...props,
-      container: ref.current,
+      container,
+      hasLetters,
+      hasLines,
     });
 
     return () => instance.destroy();
-  }, [props]);
+  }, [hasLetters, hasLines]);
 
-  // eslint-disable-next-line react/no-danger
-  return <h1 ref={ref} dangerouslySetInnerHTML={{ __html: text }} />;
+  const style = { fontSize: '30px', fontKerning: 'none' } as any;
+
+  return (
+    <>
+      <h1>Vevet</h1>
+
+      <div ref={ref} style={style} dangerouslySetInnerHTML={{ __html: text }} />
+
+      <br />
+      <br />
+
+      <h1>Reference text</h1>
+
+      <div style={style} dangerouslySetInnerHTML={{ __html: text }} />
+    </>
+  );
 };

package/src/components/SplitText/types.ts

@@ -2,18 +2,11 @@ import { NComponent } from '@/base/Component/types';
 import { TOnResizeTarget } from '@/utils/listeners/onResize';
 
 export namespace NSplitText {
-  export type TTextSource = 'textContent' | 'innerText' | 'innerHTML';
-
   export interface IStaticProps extends NComponent.IStaticProps {
     /**
      * The text container. You may use a CSS selector or the element itself
      */
     container: string | Element;
-    /**
-     * Text content
-     * @default 'innerText'
-     */
-    textSource?: TTextSource;
     /**
      * If need to split text into letters.
      * @default true
@@ -24,6 +17,21 @@ export namespace NSplitText {
      * @default false
      */
     hasLines?: boolean;
+    /**
+     * Letter tagName
+     * @default `span`
+     */
+    letterTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Word tagName
+     * @default `span`
+     */
+    wordTag?: keyof HTMLElementTagNameMap;
+    /**
+     * Line tagName
+     * @default `span`
+     */
+    lineTag?: keyof HTMLElementTagNameMap;
     /**
      * Viewport target
      * @default 'any'
@@ -44,22 +52,17 @@ export namespace NSplitText {
 
   export interface ILine {
     element: HTMLElement;
-    textContent: string;
     words: NSplitText.IWord[];
   }
 
   export interface IWord {
     element: HTMLElement;
-    textContent: string;
-    hasNewLine: boolean;
+    text: string;
     letters: NSplitText.ILetter[];
-    br?: HTMLBRElement;
-    whitespace?: Text;
   }
 
   export interface ILetter {
     element: HTMLElement;
-    textContent: string;
-    word: NSplitText.IWord;
+    text: string;
   }
 }

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

@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign */
+import { NSplitText } from '../types';
+import { wrapLetters } from './wrapLetters';
+import { wrapWords } from './wrapWords';
+
+interface IProps {
+  container: HTMLElement;
+  letterClassName: string;
+  wordClassName: string;
+  hasLetters: boolean;
+  letterTag: keyof HTMLElementTagNameMap;
+  wordTag: keyof HTMLElementTagNameMap;
+}
+
+/** Split text into letters & words */
+export function splitBase({
+  container,
+  letterClassName,
+  wordClassName,
+  hasLetters,
+  letterTag,
+  wordTag,
+}: IProps) {
+  const helper = container.cloneNode(true) as HTMLElement;
+
+  const words = wrapWords({
+    container: helper,
+    classname: wordClassName,
+    tagName: wordTag,
+  });
+
+  const letters: NSplitText.ILetter[] = [];
+
+  if (hasLetters) {
+    const wrappedLetters = wrapLetters({
+      words,
+      classname: letterClassName,
+      tagName: letterTag,
+    });
+
+    letters.push(...wrappedLetters.letters);
+  }
+
+  return {
+    helper,
+    words,
+    letters,
+  };
+}

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

@@ -0,0 +1,41 @@
+import { NSplitText } from '../types';
+
+interface IProps {
+  words: NSplitText.IWord[];
+  classname: string;
+  tagName: keyof HTMLElementTagNameMap;
+}
+
+/** Wrap each word inside the container */
+export function wrapLetters({ words, classname, tagName }: IProps) {
+  const letters: NSplitText.ILetter[] = [];
+
+  words.forEach((word) => {
+    const textNode = word.element.childNodes[0];
+    const text = textNode.textContent;
+
+    if (!text) {
+      return;
+    }
+
+    const slitLetters = text.split('');
+
+    slitLetters.forEach((splitLetter) => {
+      const element = document.createElement(tagName);
+      element.style.display = 'inline-block';
+      element.classList.add(classname);
+      element.appendChild(document.createTextNode(splitLetter));
+
+      word.element.appendChild(element);
+
+      const letter: NSplitText.ILetter = { element, text: splitLetter };
+
+      word.letters.push(letter);
+      letters.push(letter);
+    });
+
+    textNode.remove();
+  });
+
+  return { letters };
+}

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

@@ -0,0 +1,98 @@
+/* eslint-disable no-param-reassign */
+import { childOf } from 'vevet-dom';
+import { NSplitText } from '../types';
+
+interface IProps {
+  container: HTMLElement;
+  words: NSplitText.IWord[];
+  className: string;
+  tagName: keyof HTMLElementTagNameMap;
+}
+
+interface ILine extends NSplitText.ILine {
+  nodes: Node[];
+}
+
+function getTopParent(ref: Element | null, topParent: Element): Element {
+  if (ref?.parentElement === topParent) {
+    return ref;
+  }
+
+  return getTopParent(ref?.parentElement ?? null, topParent);
+}
+
+/** Wrap each word inside the container */
+export function wrapLines({ container, words, className, tagName }: IProps) {
+  const lines: ILine[] = [];
+  let lineIndex = -1;
+  let prevTop = Infinity;
+
+  // create lines
+  words.forEach((word) => {
+    const currentTop = Math.round(word.element.getBoundingClientRect().top);
+    const topParent = getTopParent(word.element, container);
+
+    if (currentTop !== prevTop) {
+      prevTop = currentTop;
+      lineIndex += 1;
+
+      const element = document.createElement(tagName);
+      element.style.display = 'block';
+      element.classList.add(className);
+
+      lines[lineIndex] = { element, nodes: [], words: [] };
+    }
+
+    const currentLine = lines[lineIndex];
+
+    const isInList = !!lines.find(({ nodes }) => nodes.includes(topParent));
+
+    if (!isInList) {
+      currentLine.nodes.push(topParent);
+
+      if (topParent.nextSibling?.nodeType === 3) {
+        currentLine.nodes.push(topParent.nextSibling);
+      }
+    }
+  });
+
+  // append lines
+  lines.forEach((line) => {
+    container.insertBefore(line.element, line.nodes[0]);
+
+    line.element.append(...line.nodes);
+  });
+
+  // hide extra br
+  const hiddenBr: HTMLBRElement[] = [];
+  lines.forEach((line) => {
+    const nextSibling = line.element.nextElementSibling;
+    if (nextSibling instanceof HTMLBRElement) {
+      nextSibling.style.display = 'none';
+      hiddenBr.push(nextSibling);
+    }
+  });
+
+  // add words
+  lines.forEach((line) => {
+    line.words.push(
+      ...words.filter((word) => childOf(word.element, line.element)),
+    );
+  });
+
+  const destroy = () => {
+    hiddenBr.forEach((br) => {
+      br.style.display = '';
+    });
+
+    lines.forEach((line) => {
+      line.nodes.forEach((node) => {
+        container.insertBefore(node, line.element);
+      });
+
+      line.element.remove();
+    });
+  };
+
+  return { lines, destroy };
+}

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

@@ -0,0 +1,64 @@
+import { NSplitText } from '../types';
+
+/* eslint-disable no-param-reassign */
+interface IProps {
+  container: ChildNode;
+  classname: string;
+  tagName: keyof HTMLElementTagNameMap;
+}
+
+/** Wrap each word inside the container */
+export function wrapWords({ container, classname, tagName }: IProps) {
+  const whitespace = String.fromCharCode(32);
+
+  const words: NSplitText.IWord[] = [];
+
+  function recursive(node: ChildNode) {
+    if (node instanceof HTMLElement) {
+      if (node.tagName !== 'BR') {
+        node.style.display = 'inline-block';
+      }
+
+      const children = [...Array.from(node.childNodes)];
+      children.forEach((child) => recursive(child));
+
+      return;
+    }
+
+    if (node.nodeType === 3) {
+      const nodeParent = node.parentElement;
+      const text = node.nodeValue ?? '';
+      const splitWords = text.split(whitespace);
+
+      if (text === whitespace) {
+        nodeParent?.insertBefore(document.createTextNode(whitespace), node);
+        node.remove();
+
+        return;
+      }
+
+      splitWords.forEach((splitWord, index) => {
+        if (splitWord) {
+          const element = document.createElement(tagName);
+          element.style.display = 'inline-block';
+          element.classList.add(classname);
+          element.appendChild(document.createTextNode(splitWord));
+
+          words.push({ element, text: splitWord, letters: [] });
+
+          nodeParent?.insertBefore(element, node);
+        }
+
+        if (index < splitWords.length - 1) {
+          nodeParent?.insertBefore(document.createTextNode(whitespace), node);
+        }
+      });
+
+      node.remove();
+    }
+  }
+
+  recursive(container);
+
+  return words;
+}

package/src/components/Timeline/index.ts

@@ -68,7 +68,7 @@ export class Timeline<
 
   /** Play the timeline */
   public play() {
-    if (this.isDestroyed || this.progress === 1) {
+    if (this.isDestroyed || this.p === 1) {
       return;
     }
 
@@ -83,7 +83,7 @@ export class Timeline<
 
   /** Reverse timeline */
   public reverse() {
-    if (this.isDestroyed || this.progress === 0) {
+    if (this.isDestroyed || this.p === 0) {
       return;
     }
 
@@ -117,7 +117,7 @@ export class Timeline<
     }
 
     this.pause();
-    this.progress = 0;
+    this.p = 0;
   }
 
   /** Start animation */
@@ -135,8 +135,8 @@ export class Timeline<
 
     // calculate current progress
     const progressIterator = frameDiff / this.duration / (isReversed ? -1 : 1);
-    const progressTarget = clamp(this.progress + progressIterator, [0, 1]);
-    this.progress = progressTarget;
+    const progressTarget = clamp(this.p + progressIterator, [0, 1]);
+    this.p = progressTarget;
 
     // end animation
     if (
@@ -160,13 +160,13 @@ export class Timeline<
   protected _handleProgressUpdate() {
     super._handleProgressUpdate();
 
-    if (this.progress === 0) {
+    if (this.p === 0) {
       this.callbacks.tbt('start', undefined);
 
       return;
     }
 
-    if (this.progress === 1) {
+    if (this.p === 1) {
       this.callbacks.tbt('end', undefined);
 
       if (this.props.shouldDestroyOnEnd) {

package/src/components/Timeline/stories/Basic.tsx

@@ -16,13 +16,13 @@ export const Basic: FC = () => {
 
     setTimeline(instance);
 
-    instance.addCallback('progress', ({ easing, progress }) => {
+    instance.addCallback('progress', ({ e, p }) => {
       if (inputRef.current) {
-        inputRef.current.value = `${progress}`;
+        inputRef.current.value = `${p}`;
       }
 
       if (thumbRef.current) {
-        thumbRef.current.style.left = `${easing * 100}%`;
+        thumbRef.current.style.left = `${e * 100}%`;
       }
     });
 
@@ -54,7 +54,7 @@ export const Basic: FC = () => {
         style={{ width: '100%' }}
         onChange={(event) => {
           if (timeline) {
-            timeline.progress = parseFloat(event.currentTarget.value);
+            timeline.p = parseFloat(event.currentTarget.value);
           }
         }}
       />

package/src/components/Timeline/stories/Nested.tsx

@@ -17,9 +17,9 @@ export const Nested: FC = () => {
 
     setTimeline(instance);
 
-    instance.addCallback('progress', ({ progress }) => {
+    instance.addCallback('progress', ({ p }) => {
       if (inputRef.current) {
-        inputRef.current.value = `${progress}`;
+        inputRef.current.value = `${p}`;
       }
     });
 
@@ -36,9 +36,9 @@ export const Nested: FC = () => {
           easing: EaseInOutBounce,
         });
 
-        nestedTm.addCallback('progress', ({ easing }) => {
+        nestedTm.addCallback('progress', ({ e }) => {
           // eslint-disable-next-line no-param-reassign
-          child.style.transform = `scale(${easing}, 1)`;
+          child.style.transform = `scale(${e}, 1)`;
         });
 
         instance.addNestedTimeline(nestedTm);
@@ -73,7 +73,7 @@ export const Nested: FC = () => {
         style={{ width: '100%' }}
         onChange={(event) => {
           if (timeline) {
-            timeline.progress = parseFloat(event.currentTarget.value);
+            timeline.p = parseFloat(event.currentTarget.value);
           }
         }}
       />

package/src/utils/internal/getApp.ts

@@ -0,0 +1,3 @@
+export function getApp() {
+  return window.vevetApp;
+}

package/src/utils/scroll/scrollTo.ts

@@ -75,14 +75,14 @@ export function scrollTo({
       shouldDestroyOnEnd: true,
     });
 
-    timeline.addCallback('progress', ({ easing }) => {
+    timeline.addCallback('progress', ({ e }) => {
       if (!container) {
         return;
       }
 
       container.scrollTo({
-        top: startValues.scrollTop + topDiff * easing,
-        left: startValues.scrollLeft + leftDiff * easing,
+        top: startValues.scrollTop + topDiff * e,
+        left: startValues.scrollLeft + leftDiff * e,
         behavior: 'auto',
       });
     });

package/src/version.ts

@@ -1,2 +1,2 @@
-const version = '3.13.1';
+const version = '3.14.0';
 export default version;