npm - text-slicer - Versions diffs - 1.4.0-dev.0 → 1.4.0-dev.2 - Mend

text-slicer 1.4.0-dev.0 → 1.4.0-dev.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.cjs.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";class a{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;useFlexWords;charIndexCounter=0;destroyed=!1;constructor(t={}){const{container:s=".text-slicer",splitMode:e="both",cssVariables:n=!1,dataAttributes:i=!1,waitForFonts:r=!1,fontReadyTimeout:o=1500,stabilizeLayout:l=!1,nowrapWords:h=!1,useFlexWords:d=!0}=t;if(this.textElement=typeof s=="string"?document.querySelector(s):s??null,!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,this.waitForFonts=!1,this.fontReadyTimeout=0,this.stabilizeLayout=!1,this.nowrapWords=!1,void(this.useFlexWords=!0);this.originalText=(this.textElement.textContent??"").trim(),this.splitMode=e,this.cssVariables=n,this.dataAttributes=i,this.waitForFonts=r,this.fontReadyTimeout=o,this.stabilizeLayout=l,this.nowrapWords=h,this.useFlexWords=d,this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText)}async init(){this.textElement&&(this.waitForFonts&&await a.waitFontsReady(this.fontReadyTimeout).catch(()=>{}),await a.nextFrame(),this.split())}destroy(){this.textElement&&!this.destroyed&&(this.textElement.innerHTML="",this.textElement.textContent=this.originalText,this.textElement.removeAttribute("aria-hidden"),this.destroyed=!0)}split(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),s=this.originalText.split(" "),e=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,s):this.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),a.forceReflow(this.textElement),this.cssVariables&&(this.textElement.style.setProperty("--word-total",String(s.length)),this.textElement.style.setProperty("--char-total",String(e))),this.textElement.setAttribute("aria-hidden","false")}splitWords(t,s){s.forEach((e,n)=>{if(this.splitMode==="both"){const i=this.createWordSpan(n,e);for(const r of e)i.append(this.createCharSpan(r,!0));t.append(i)}else{const i=this.createWordSpan(n);i.append(document.createTextNode(e)),t.append(i)}n<s.length-1&&t.append(a.createSpaceSpan())})}splitChars(t){for(const s of this.originalText)t.append(this.createCharSpan(s,!1))}createWordSpan(t,s=""){const e=document.createElement("span");return e.classList.add("word"),this.dataAttributes&&e.setAttribute("data-word",s),this.cssVariables&&e.style.setProperty("--word-index",String(t)),(this.stabilizeLayout||this.useFlexWords)&&(a.applyWordLayout(e,this.useFlexWords),this.nowrapWords&&(e.style.whiteSpace="nowrap")),e}createCharSpan(t,s){const e=document.createElement("span");return e.textContent=t,this.dataAttributes&&e.setAttribute("data-char",t),t===" "?e.classList.add("whitespace"):(e.classList.add("char"),this.cssVariables&&e.style.setProperty("--char-index",String(this.charIndexCounter)),(this.stabilizeLayout||this.useFlexWords)&&a.applyCharLayout(e,s),this.charIndexCounter+=1),e}static createSpaceSpan(){const t=document.createElement("span");return t.classList.add("whitespace"),t.textContent=" ",t}clear(){this.textElement&&(this.textElement.innerHTML="")}static applyWordLayout(t,s){s?(t.style.display="inline-flex",t.style.flexWrap="nowrap",t.style.alignItems="baseline",t.style.verticalAlign="baseline",t.style.lineHeight="1em"):(t.style.display="inline-block",t.style.verticalAlign="baseline",t.style.lineHeight="1em"),t.style.backfaceVisibility="hidden"}static applyCharLayout(t,s){s?t.style.display="block":(t.style.display="inline-block",t.style.verticalAlign="baseline"),t.style.lineHeight="1em",t.style.willChange="transform",t.style.backfaceVisibility="hidden"}static forceReflow(t){t.offsetHeight}static nextFrame(){return new Promise(t=>requestAnimationFrame(()=>t()))}static getFontFaceSet(){const t=document;return typeof t.fonts=="object"&&t.fonts?t.fonts:null}static waitFontsReady(t){const s=a.getFontFaceSet();return s&&s.ready!==void 0?new Promise(e=>{let n=!1;const i=()=>{n||(n=!0,e())};s.ready.then(()=>i()).catch(()=>i()),t>0&&window.setTimeout(()=>i(),t)}):Promise.resolve()}}module.exports=a;

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+export type SplitMode = 'words' | 'chars' | 'both';
+export interface TextSlicerOptions {
+    container?: HTMLElement | string;
+    splitMode?: SplitMode;
+    cssVariables?: boolean;
+    dataAttributes?: boolean;
+    waitForFonts?: boolean;
+    fontReadyTimeout?: number;
+    stabilizeLayout?: boolean;
+    nowrapWords?: boolean;
+    useFlexWords?: boolean;
+}
+declare class TextSlicer {
+    private readonly textElement;
+    private originalText;
+    private readonly splitMode;
+    private readonly cssVariables;
+    private readonly dataAttributes;
+    private readonly waitForFonts;
+    private readonly fontReadyTimeout;
+    private readonly stabilizeLayout;
+    private readonly nowrapWords;
+    private readonly useFlexWords;
+    private charIndexCounter;
+    private destroyed;
+    constructor(options?: TextSlicerOptions);
+    init(): Promise<void>;
+    destroy(): void;
+    private split;
+    private splitWords;
+    private splitChars;
+    private createWordSpan;
+    private createCharSpan;
+    private static createSpaceSpan;
+    private clear;
+    private static applyWordLayout;
+    private static applyCharLayout;
+    private static forceReflow;
+    private static nextFrame;
+    private static getFontFaceSet;
+    private static waitFontsReady;
+}
+export default TextSlicer;

package/dist/index.es.js ADDED Viewed

@@ -0,0 +1,92 @@
+class n {
+  textElement;
+  originalText;
+  splitMode;
+  cssVariables;
+  dataAttributes;
+  waitForFonts;
+  fontReadyTimeout;
+  stabilizeLayout;
+  nowrapWords;
+  useFlexWords;
+  charIndexCounter = 0;
+  destroyed = !1;
+  constructor(t = {}) {
+    const { container: s = ".text-slicer", splitMode: e = "both", cssVariables: a = !1, dataAttributes: i = !1, waitForFonts: r = !1, fontReadyTimeout: o = 1500, stabilizeLayout: l = !1, nowrapWords: h = !1, useFlexWords: d = !0 } = t;
+    if (this.textElement = typeof s == "string" ? document.querySelector(s) : s ?? null, !this.textElement) return this.originalText = "", this.splitMode = "both", this.cssVariables = !1, this.dataAttributes = !1, this.waitForFonts = !1, this.fontReadyTimeout = 0, this.stabilizeLayout = !1, this.nowrapWords = !1, void (this.useFlexWords = !0);
+    this.originalText = (this.textElement.textContent ?? "").trim(), this.splitMode = e, this.cssVariables = a, this.dataAttributes = i, this.waitForFonts = r, this.fontReadyTimeout = o, this.stabilizeLayout = l, this.nowrapWords = h, this.useFlexWords = d, this.originalText.length > 0 && this.textElement.setAttribute("aria-label", this.originalText);
+  }
+  async init() {
+    this.textElement && (this.waitForFonts && await n.waitFontsReady(this.fontReadyTimeout).catch(() => {
+    }), await n.nextFrame(), this.split());
+  }
+  destroy() {
+    this.textElement && !this.destroyed && (this.textElement.innerHTML = "", this.textElement.textContent = this.originalText, this.textElement.removeAttribute("aria-hidden"), this.destroyed = !0);
+  }
+  split() {
+    if (!this.textElement) return;
+    this.clear(), this.charIndexCounter = 0;
+    const t = document.createDocumentFragment(), s = this.originalText.split(" "), e = this.originalText.length;
+    this.splitMode === "words" || this.splitMode === "both" ? this.splitWords(t, s) : this.splitMode === "chars" && this.splitChars(t), this.textElement.appendChild(t), n.forceReflow(this.textElement), this.cssVariables && (this.textElement.style.setProperty("--word-total", String(s.length)), this.textElement.style.setProperty("--char-total", String(e))), this.textElement.setAttribute("aria-hidden", "false");
+  }
+  splitWords(t, s) {
+    s.forEach((e, a) => {
+      if (this.splitMode === "both") {
+        const i = this.createWordSpan(a, e);
+        for (const r of e) i.append(this.createCharSpan(r, !0));
+        t.append(i);
+      } else {
+        const i = this.createWordSpan(a);
+        i.append(document.createTextNode(e)), t.append(i);
+      }
+      a < s.length - 1 && t.append(n.createSpaceSpan());
+    });
+  }
+  splitChars(t) {
+    for (const s of this.originalText) t.append(this.createCharSpan(s, !1));
+  }
+  createWordSpan(t, s = "") {
+    const e = document.createElement("span");
+    return e.classList.add("word"), this.dataAttributes && e.setAttribute("data-word", s), this.cssVariables && e.style.setProperty("--word-index", String(t)), (this.stabilizeLayout || this.useFlexWords) && (n.applyWordLayout(e, this.useFlexWords), this.nowrapWords && (e.style.whiteSpace = "nowrap")), e;
+  }
+  createCharSpan(t, s) {
+    const e = document.createElement("span");
+    return e.textContent = t, this.dataAttributes && e.setAttribute("data-char", t), t === " " ? e.classList.add("whitespace") : (e.classList.add("char"), this.cssVariables && e.style.setProperty("--char-index", String(this.charIndexCounter)), (this.stabilizeLayout || this.useFlexWords) && n.applyCharLayout(e, s), this.charIndexCounter += 1), e;
+  }
+  static createSpaceSpan() {
+    const t = document.createElement("span");
+    return t.classList.add("whitespace"), t.textContent = " ", t;
+  }
+  clear() {
+    this.textElement && (this.textElement.innerHTML = "");
+  }
+  static applyWordLayout(t, s) {
+    s ? (t.style.display = "inline-flex", t.style.flexWrap = "nowrap", t.style.alignItems = "baseline", t.style.verticalAlign = "baseline", t.style.lineHeight = "1em") : (t.style.display = "inline-block", t.style.verticalAlign = "baseline", t.style.lineHeight = "1em"), t.style.backfaceVisibility = "hidden";
+  }
+  static applyCharLayout(t, s) {
+    s ? t.style.display = "block" : (t.style.display = "inline-block", t.style.verticalAlign = "baseline"), t.style.lineHeight = "1em", t.style.willChange = "transform", t.style.backfaceVisibility = "hidden";
+  }
+  static forceReflow(t) {
+    t.offsetHeight;
+  }
+  static nextFrame() {
+    return new Promise((t) => requestAnimationFrame(() => t()));
+  }
+  static getFontFaceSet() {
+    const t = document;
+    return typeof t.fonts == "object" && t.fonts ? t.fonts : null;
+  }
+  static waitFontsReady(t) {
+    const s = n.getFontFaceSet();
+    return s && s.ready !== void 0 ? new Promise((e) => {
+      let a = !1;
+      const i = () => {
+        a || (a = !0, e());
+      };
+      s.ready.then(() => i()).catch(() => i()), t > 0 && window.setTimeout(() => i(), t);
+    }) : Promise.resolve();
+  }
+}
+export {
+  n as default
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.4.0-dev.0",
+  "version": "1.4.0-dev.2",
   "description": "TextSlicer is designed to split text within an HTML element into separate words and/or characters, wrapping each word and/or character in separate span elements.",
   "author": "ux-ui.pro",
   "license": "MIT",