text-slicer 1.4.0-dev.1 → 1.4.0-dev.3

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 (6) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.d.ts +6 -2
  4. package/dist/index.es.js +32 -27
  5. package/dist/index.umd.js +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -10,7 +10,7 @@
10
10
  </div>
11
11
 
12
12
  <p align="center">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.</p>
13
- <p align="center"><sup>1kB gzipped</sup></p>
13
+ <p align="center"><sup>1.5kB gzipped</sup></p>
14
14
  <p align="center"><a href="https://codepen.io/ux-ui/full/vYMoGoG">Demo</a></p>
15
15
  <br>
16
16
 
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";class n{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;charIndexCounter;destroyed=!1;constructor(t={}){const{container:e=".text-slicer",splitMode:s="both",cssVariables:a=!1,dataAttributes:i=!1,waitForFonts:r=!1,fontReadyTimeout:o=1500,stabilizeLayout:l=!1,nowrapWords:h=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??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.charIndexCounter=0);this.originalText=(this.textElement.textContent??"").trim(),this.splitMode=s,this.cssVariables=a,this.dataAttributes=i,this.waitForFonts=r,this.fontReadyTimeout=o,this.stabilizeLayout=l,this.nowrapWords=h,this.charIndexCounter=0,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(),e=this.originalText.split(" "),s=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",String(e.length)),this.textElement.style.setProperty("--char-total",String(s))),this.textElement.setAttribute("aria-hidden","false")}splitWords(t,e){e.forEach((s,a)=>{if(this.splitMode==="both"){const i=this.createWordSpan(a,s);for(const r of s)i.append(this.createCharSpan(r));t.append(i)}else{const i=this.createWordSpan(a);i.append(document.createTextNode(s)),t.append(i)}a<e.length-1&&t.append(n.createSpaceSpan())})}splitChars(t){for(const e of this.originalText)t.append(this.createCharSpan(e))}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add("word"),this.dataAttributes&&s.setAttribute("data-word",e),this.cssVariables&&s.style.setProperty("--word-index",String(t)),this.stabilizeLayout&&(n.applyStableInlineBox(s),this.nowrapWords&&(s.style.whiteSpace="nowrap")),s}createCharSpan(t){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&&n.applyStableInlineBox(e),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 applyStableInlineBox(t){t.style.display="inline-block",t.style.verticalAlign="baseline",t.style.lineHeight="1em",t.style.backfaceVisibility="hidden",t.style.willChange="transform"}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 e=n.getFontFaceSet();return e&&e.ready!==void 0?new Promise(s=>{let a=!1;const i=()=>{a||(a=!0,s())};e.ready.then(()=>i()).catch(()=>i()),t>0&&window.setTimeout(()=>i(),t)}):Promise.resolve()}}module.exports=n;
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 CHANGED
@@ -8,10 +8,11 @@ export interface TextSlicerOptions {
8
8
  fontReadyTimeout?: number;
9
9
  stabilizeLayout?: boolean;
10
10
  nowrapWords?: boolean;
11
+ useFlexWords?: boolean;
11
12
  }
12
13
  declare class TextSlicer {
13
14
  private readonly textElement;
14
- private readonly originalText;
15
+ private originalText;
15
16
  private readonly splitMode;
16
17
  private readonly cssVariables;
17
18
  private readonly dataAttributes;
@@ -19,6 +20,7 @@ declare class TextSlicer {
19
20
  private readonly fontReadyTimeout;
20
21
  private readonly stabilizeLayout;
21
22
  private readonly nowrapWords;
23
+ private readonly useFlexWords;
22
24
  private charIndexCounter;
23
25
  private destroyed;
24
26
  constructor(options?: TextSlicerOptions);
@@ -31,7 +33,9 @@ declare class TextSlicer {
31
33
  private createCharSpan;
32
34
  private static createSpaceSpan;
33
35
  private clear;
34
- private static applyStableInlineBox;
36
+ private static applyWordLayout;
37
+ private static applyCharLayout;
38
+ private static forceReflow;
35
39
  private static nextFrame;
36
40
  private static getFontFaceSet;
37
41
  private static waitFontsReady;
package/dist/index.es.js CHANGED
@@ -8,12 +8,13 @@ class n {
8
8
  fontReadyTimeout;
9
9
  stabilizeLayout;
10
10
  nowrapWords;
11
- charIndexCounter;
11
+ useFlexWords;
12
+ charIndexCounter = 0;
12
13
  destroyed = !1;
13
14
  constructor(t = {}) {
14
- const { container: e = ".text-slicer", splitMode: s = "both", cssVariables: a = !1, dataAttributes: i = !1, waitForFonts: r = !1, fontReadyTimeout: o = 1500, stabilizeLayout: l = !1, nowrapWords: h = !1 } = t;
15
- if (this.textElement = typeof e == "string" ? document.querySelector(e) : e ?? 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.charIndexCounter = 0);
16
- this.originalText = (this.textElement.textContent ?? "").trim(), this.splitMode = s, this.cssVariables = a, this.dataAttributes = i, this.waitForFonts = r, this.fontReadyTimeout = o, this.stabilizeLayout = l, this.nowrapWords = h, this.charIndexCounter = 0, this.originalText.length > 0 && this.textElement.setAttribute("aria-label", this.originalText);
15
+ 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;
16
+ 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);
17
+ 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);
17
18
  }
18
19
  async init() {
19
20
  this.textElement && (this.waitForFonts && await n.waitFontsReady(this.fontReadyTimeout).catch(() => {
@@ -25,32 +26,32 @@ class n {
25
26
  split() {
26
27
  if (!this.textElement) return;
27
28
  this.clear(), this.charIndexCounter = 0;
28
- const t = document.createDocumentFragment(), e = this.originalText.split(" "), s = this.originalText.length;
29
- this.splitMode === "words" || this.splitMode === "both" ? this.splitWords(t, e) : this.splitMode === "chars" && this.splitChars(t), this.textElement.appendChild(t), this.cssVariables && (this.textElement.style.setProperty("--word-total", String(e.length)), this.textElement.style.setProperty("--char-total", String(s))), this.textElement.setAttribute("aria-hidden", "false");
29
+ const t = document.createDocumentFragment(), s = this.originalText.split(" "), e = this.originalText.length;
30
+ 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");
30
31
  }
31
- splitWords(t, e) {
32
- e.forEach((s, a) => {
32
+ splitWords(t, s) {
33
+ s.forEach((e, a) => {
33
34
  if (this.splitMode === "both") {
34
- const i = this.createWordSpan(a, s);
35
- for (const r of s) i.append(this.createCharSpan(r));
35
+ const i = this.createWordSpan(a, e);
36
+ for (const r of e) i.append(this.createCharSpan(r, !0));
36
37
  t.append(i);
37
38
  } else {
38
39
  const i = this.createWordSpan(a);
39
- i.append(document.createTextNode(s)), t.append(i);
40
+ i.append(document.createTextNode(e)), t.append(i);
40
41
  }
41
- a < e.length - 1 && t.append(n.createSpaceSpan());
42
+ a < s.length - 1 && t.append(n.createSpaceSpan());
42
43
  });
43
44
  }
44
45
  splitChars(t) {
45
- for (const e of this.originalText) t.append(this.createCharSpan(e));
46
+ for (const s of this.originalText) t.append(this.createCharSpan(s, !1));
46
47
  }
47
- createWordSpan(t, e = "") {
48
- const s = document.createElement("span");
49
- return s.classList.add("word"), this.dataAttributes && s.setAttribute("data-word", e), this.cssVariables && s.style.setProperty("--word-index", String(t)), this.stabilizeLayout && (n.applyStableInlineBox(s), this.nowrapWords && (s.style.whiteSpace = "nowrap")), s;
48
+ createWordSpan(t, s = "") {
49
+ const e = document.createElement("span");
50
+ 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;
50
51
  }
51
- createCharSpan(t) {
52
+ createCharSpan(t, s) {
52
53
  const e = document.createElement("span");
53
- 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 && n.applyStableInlineBox(e), this.charIndexCounter += 1), e;
54
+ 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;
54
55
  }
55
56
  static createSpaceSpan() {
56
57
  const t = document.createElement("span");
@@ -59,26 +60,30 @@ class n {
59
60
  clear() {
60
61
  this.textElement && (this.textElement.innerHTML = "");
61
62
  }
62
- static applyStableInlineBox(t) {
63
- t.style.display = "inline-block", t.style.verticalAlign = "baseline", t.style.lineHeight = "1em", t.style.backfaceVisibility = "hidden", t.style.willChange = "transform";
63
+ static applyWordLayout(t, s) {
64
+ 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";
65
+ }
66
+ static applyCharLayout(t, s) {
67
+ 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";
68
+ }
69
+ static forceReflow(t) {
70
+ t.offsetHeight;
64
71
  }
65
72
  static nextFrame() {
66
- return new Promise((t) => {
67
- requestAnimationFrame(() => t());
68
- });
73
+ return new Promise((t) => requestAnimationFrame(() => t()));
69
74
  }
70
75
  static getFontFaceSet() {
71
76
  const t = document;
72
77
  return typeof t.fonts == "object" && t.fonts ? t.fonts : null;
73
78
  }
74
79
  static waitFontsReady(t) {
75
- const e = n.getFontFaceSet();
76
- return e && e.ready !== void 0 ? new Promise((s) => {
80
+ const s = n.getFontFaceSet();
81
+ return s && s.ready !== void 0 ? new Promise((e) => {
77
82
  let a = !1;
78
83
  const i = () => {
79
- a || (a = !0, s());
84
+ a || (a = !0, e());
80
85
  };
81
- e.ready.then(() => i()).catch(() => i()), t > 0 && window.setTimeout(() => i(), t);
86
+ s.ready.then(() => i()).catch(() => i()), t > 0 && window.setTimeout(() => i(), t);
82
87
  }) : Promise.resolve();
83
88
  }
84
89
  }
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(s,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(s=typeof globalThis<"u"?globalThis:s||self).TextSlicer=r()})(this,function(){"use strict";class s{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;charIndexCounter;destroyed=!1;constructor(t={}){const{container:e=".text-slicer",splitMode:i="both",cssVariables:n=!1,dataAttributes:a=!1,waitForFonts:o=!1,fontReadyTimeout:l=1500,stabilizeLayout:h=!1,nowrapWords:d=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??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.charIndexCounter=0);this.originalText=(this.textElement.textContent??"").trim(),this.splitMode=i,this.cssVariables=n,this.dataAttributes=a,this.waitForFonts=o,this.fontReadyTimeout=l,this.stabilizeLayout=h,this.nowrapWords=d,this.charIndexCounter=0,this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText)}async init(){this.textElement&&(this.waitForFonts&&await s.waitFontsReady(this.fontReadyTimeout).catch(()=>{}),await s.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(),e=this.originalText.split(" "),i=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",String(e.length)),this.textElement.style.setProperty("--char-total",String(i))),this.textElement.setAttribute("aria-hidden","false")}splitWords(t,e){e.forEach((i,n)=>{if(this.splitMode==="both"){const a=this.createWordSpan(n,i);for(const o of i)a.append(this.createCharSpan(o));t.append(a)}else{const a=this.createWordSpan(n);a.append(document.createTextNode(i)),t.append(a)}n<e.length-1&&t.append(s.createSpaceSpan())})}splitChars(t){for(const e of this.originalText)t.append(this.createCharSpan(e))}createWordSpan(t,e=""){const i=document.createElement("span");return i.classList.add("word"),this.dataAttributes&&i.setAttribute("data-word",e),this.cssVariables&&i.style.setProperty("--word-index",String(t)),this.stabilizeLayout&&(s.applyStableInlineBox(i),this.nowrapWords&&(i.style.whiteSpace="nowrap")),i}createCharSpan(t){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&&s.applyStableInlineBox(e),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 applyStableInlineBox(t){t.style.display="inline-block",t.style.verticalAlign="baseline",t.style.lineHeight="1em",t.style.backfaceVisibility="hidden",t.style.willChange="transform"}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 e=s.getFontFaceSet();return e&&e.ready!==void 0?new Promise(i=>{let n=!1;const a=()=>{n||(n=!0,i())};e.ready.then(()=>a()).catch(()=>a()),t>0&&window.setTimeout(()=>a(),t)}):Promise.resolve()}}return s});
1
+ (function(i,o){typeof exports=="object"&&typeof module<"u"?module.exports=o():typeof define=="function"&&define.amd?define(o):(i=typeof globalThis<"u"?globalThis:i||self).TextSlicer=o()})(this,function(){"use strict";class i{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:a=!1,waitForFonts:r=!1,fontReadyTimeout:l=1500,stabilizeLayout:h=!1,nowrapWords:d=!1,useFlexWords:c=!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=a,this.waitForFonts=r,this.fontReadyTimeout=l,this.stabilizeLayout=h,this.nowrapWords=d,this.useFlexWords=c,this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText)}async init(){this.textElement&&(this.waitForFonts&&await i.waitFontsReady(this.fontReadyTimeout).catch(()=>{}),await i.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),i.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 a=this.createWordSpan(n,e);for(const r of e)a.append(this.createCharSpan(r,!0));t.append(a)}else{const a=this.createWordSpan(n);a.append(document.createTextNode(e)),t.append(a)}n<s.length-1&&t.append(i.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)&&(i.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)&&i.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=i.getFontFaceSet();return s&&s.ready!==void 0?new Promise(e=>{let n=!1;const a=()=>{n||(n=!0,e())};s.ready.then(()=>a()).catch(()=>a()),t>0&&window.setTimeout(()=>a(),t)}):Promise.resolve()}}return i});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "text-slicer",
3
- "version": "1.4.0-dev.1",
3
+ "version": "1.4.0-dev.3",
4
4
  "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.",
5
5
  "author": "ux-ui.pro",
6
6
  "license": "MIT",