vevet 3.13.0 → 3.14.0

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.0';
+const version = '3.14.0';
 export default version;