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

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
  1. package/dist/index.cjs.js +1 -1
  2. package/dist/index.d.ts +5 -5
  3. package/dist/index.es.js +38 -40
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1 +1 @@
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;
1
+ "use strict";class r{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;innerWrapper;charIndexCounter;destroyed;constructor(t={}){const{container:e=".text-slicer",splitMode:s="both",cssVariables:a=!1,dataAttributes:n=!1,waitForFonts:o=!1,fontReadyTimeout:l=1500,stabilizeLayout:h=!1,nowrapWords:c=!1,innerWrapper:i=!0}=t;this.textElement=typeof e=="string"?document.querySelector(e):e??null,this.originalText="",this.splitMode=s,this.cssVariables=a,this.dataAttributes=n,this.waitForFonts=o,this.fontReadyTimeout=l,this.stabilizeLayout=h,this.nowrapWords=c,this.innerWrapper=i,this.charIndexCounter=0,this.destroyed=!1,this.textElement&&(this.originalText=(this.textElement.textContent??"").trim(),this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText))}async init(){this.textElement&&(this.waitForFonts&&await r.waitFontsForElement(this.textElement,this.fontReadyTimeout).catch(()=>{}),await r.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.splitChars(t),this.textElement.appendChild(t),r.forceReflow(this.textElement),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 n=this.createWordSpan(a,s);for(const o of s)n.append(this.createCharSpan(o));t.append(n)}else{const n=this.createWordSpan(a);n.append(document.createTextNode(s)),t.append(n)}a<e.length-1&&t.append(r.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&&(r.applyStableInlineBox(s),this.nowrapWords&&(s.style.whiteSpace="nowrap")),s}createCharSpan(t){const e=document.createElement("span");if(t===" ")return e.classList.add("whitespace"),e.textContent=" ",e;if(e.classList.add("char"),e.textContent=t,e.style.position="relative",e.style.color="transparent",this.cssVariables&&e.style.setProperty("--char-index",String(this.charIndexCounter)),this.dataAttributes&&e.setAttribute("data-char",t),this.stabilizeLayout&&r.applyStableInlineBox(e),this.innerWrapper){const s=document.createElement("span");s.classList.add("char-inner"),s.textContent=t,s.style.position="absolute",s.style.left="0",s.style.top="0",s.style.right="auto",s.style.bottom="auto",e.appendChild(s)}return 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 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 async waitFontsForElement(t,e){const s=r.getFontFaceSet();if(!s)return;const a=getComputedStyle(t),n=a.fontFamily.split(",").map(i=>i.trim().replace(/^['"]|['"]$/g,"")).filter(i=>i.length>0),o=a.fontStyle||"normal",l=a.fontWeight||"400",h=a.fontStretch||"normal",c=n.map(i=>`${o} ${l} ${h} 1em ${i}`).map(i=>s.load(i));await Promise.race([Promise.all(c).then(()=>{}),new Promise(i=>window.setTimeout(i,e))])}}module.exports=r;
package/dist/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface TextSlicerOptions {
8
8
  fontReadyTimeout?: number;
9
9
  stabilizeLayout?: boolean;
10
10
  nowrapWords?: boolean;
11
- useFlexWords?: boolean;
11
+ innerWrapper?: boolean;
12
12
  }
13
13
  declare class TextSlicer {
14
14
  private readonly textElement;
@@ -20,7 +20,7 @@ declare class TextSlicer {
20
20
  private readonly fontReadyTimeout;
21
21
  private readonly stabilizeLayout;
22
22
  private readonly nowrapWords;
23
- private readonly useFlexWords;
23
+ private readonly innerWrapper;
24
24
  private charIndexCounter;
25
25
  private destroyed;
26
26
  constructor(options?: TextSlicerOptions);
@@ -33,11 +33,11 @@ declare class TextSlicer {
33
33
  private createCharSpan;
34
34
  private static createSpaceSpan;
35
35
  private clear;
36
- private static applyWordLayout;
37
- private static applyCharLayout;
36
+ private static applyStableInlineBox;
38
37
  private static forceReflow;
39
38
  private static nextFrame;
40
39
  private static getFontFaceSet;
41
- private static waitFontsReady;
40
+ /** Ждём именно те шрифты, что применяются к элементу */
41
+ private static waitFontsForElement;
42
42
  }
43
43
  export default TextSlicer;
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- class n {
1
+ class r {
2
2
  textElement;
3
3
  originalText;
4
4
  splitMode;
@@ -8,17 +8,16 @@ class n {
8
8
  fontReadyTimeout;
9
9
  stabilizeLayout;
10
10
  nowrapWords;
11
- useFlexWords;
12
- charIndexCounter = 0;
13
- destroyed = !1;
11
+ innerWrapper;
12
+ charIndexCounter;
13
+ destroyed;
14
14
  constructor(t = {}) {
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);
15
+ const { container: e = ".text-slicer", splitMode: s = "both", cssVariables: n = !1, dataAttributes: a = !1, waitForFonts: o = !1, fontReadyTimeout: l = 1500, stabilizeLayout: h = !1, nowrapWords: c = !1, innerWrapper: i = !0 } = t;
16
+ this.textElement = typeof e == "string" ? document.querySelector(e) : e ?? null, this.originalText = "", this.splitMode = s, this.cssVariables = n, this.dataAttributes = a, this.waitForFonts = o, this.fontReadyTimeout = l, this.stabilizeLayout = h, this.nowrapWords = c, this.innerWrapper = i, this.charIndexCounter = 0, this.destroyed = !1, this.textElement && (this.originalText = (this.textElement.textContent ?? "").trim(), this.originalText.length > 0 && this.textElement.setAttribute("aria-label", this.originalText));
18
17
  }
19
18
  async init() {
20
- this.textElement && (this.waitForFonts && await n.waitFontsReady(this.fontReadyTimeout).catch(() => {
21
- }), await n.nextFrame(), this.split());
19
+ this.textElement && (this.waitForFonts && await r.waitFontsForElement(this.textElement, this.fontReadyTimeout).catch(() => {
20
+ }), await r.nextFrame(), this.split());
22
21
  }
23
22
  destroy() {
24
23
  this.textElement && !this.destroyed && (this.textElement.innerHTML = "", this.textElement.textContent = this.originalText, this.textElement.removeAttribute("aria-hidden"), this.destroyed = !0);
@@ -26,32 +25,37 @@ class n {
26
25
  split() {
27
26
  if (!this.textElement) return;
28
27
  this.clear(), this.charIndexCounter = 0;
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");
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.splitChars(t), this.textElement.appendChild(t), r.forceReflow(this.textElement), 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");
31
30
  }
32
- splitWords(t, s) {
33
- s.forEach((e, a) => {
31
+ splitWords(t, e) {
32
+ e.forEach((s, n) => {
34
33
  if (this.splitMode === "both") {
35
- const i = this.createWordSpan(a, e);
36
- for (const r of e) i.append(this.createCharSpan(r, !0));
37
- t.append(i);
34
+ const a = this.createWordSpan(n, s);
35
+ for (const o of s) a.append(this.createCharSpan(o));
36
+ t.append(a);
38
37
  } else {
39
- const i = this.createWordSpan(a);
40
- i.append(document.createTextNode(e)), t.append(i);
38
+ const a = this.createWordSpan(n);
39
+ a.append(document.createTextNode(s)), t.append(a);
41
40
  }
42
- a < s.length - 1 && t.append(n.createSpaceSpan());
41
+ n < e.length - 1 && t.append(r.createSpaceSpan());
43
42
  });
44
43
  }
45
44
  splitChars(t) {
46
- for (const s of this.originalText) t.append(this.createCharSpan(s, !1));
45
+ for (const e of this.originalText) t.append(this.createCharSpan(e));
47
46
  }
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;
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 && (r.applyStableInlineBox(s), this.nowrapWords && (s.style.whiteSpace = "nowrap")), s;
51
50
  }
52
- createCharSpan(t, s) {
51
+ createCharSpan(t) {
53
52
  const e = document.createElement("span");
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;
53
+ if (t === " ") return e.classList.add("whitespace"), e.textContent = " ", e;
54
+ if (e.classList.add("char"), e.textContent = t, e.style.position = "relative", e.style.color = "transparent", this.cssVariables && e.style.setProperty("--char-index", String(this.charIndexCounter)), this.dataAttributes && e.setAttribute("data-char", t), this.stabilizeLayout && r.applyStableInlineBox(e), this.innerWrapper) {
55
+ const s = document.createElement("span");
56
+ s.classList.add("char-inner"), s.textContent = t, s.style.position = "absolute", s.style.left = "0", s.style.top = "0", s.style.right = "auto", s.style.bottom = "auto", e.appendChild(s);
57
+ }
58
+ return this.charIndexCounter += 1, e;
55
59
  }
56
60
  static createSpaceSpan() {
57
61
  const t = document.createElement("span");
@@ -60,11 +64,8 @@ class n {
60
64
  clear() {
61
65
  this.textElement && (this.textElement.innerHTML = "");
62
66
  }
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";
67
+ static applyStableInlineBox(t) {
68
+ t.style.display = "inline-block", t.style.verticalAlign = "baseline", t.style.lineHeight = "1em", t.style.backfaceVisibility = "hidden", t.style.willChange = "transform";
68
69
  }
69
70
  static forceReflow(t) {
70
71
  t.offsetHeight;
@@ -76,17 +77,14 @@ class n {
76
77
  const t = document;
77
78
  return typeof t.fonts == "object" && t.fonts ? t.fonts : null;
78
79
  }
79
- static waitFontsReady(t) {
80
- const s = n.getFontFaceSet();
81
- return s && s.ready !== void 0 ? new Promise((e) => {
82
- let a = !1;
83
- const i = () => {
84
- a || (a = !0, e());
85
- };
86
- s.ready.then(() => i()).catch(() => i()), t > 0 && window.setTimeout(() => i(), t);
87
- }) : Promise.resolve();
80
+ static async waitFontsForElement(t, e) {
81
+ const s = r.getFontFaceSet();
82
+ if (!s) return;
83
+ const n = getComputedStyle(t), a = n.fontFamily.split(",").map((i) => i.trim().replace(/^['"]|['"]$/g, "")).filter((i) => i.length > 0), o = n.fontStyle || "normal", l = n.fontWeight || "400", h = n.fontStretch || "normal", c = a.map((i) => `${o} ${l} ${h} 1em ${i}`).map((i) => s.load(i));
84
+ await Promise.race([Promise.all(c).then(() => {
85
+ }), new Promise((i) => window.setTimeout(i, e))]);
88
86
  }
89
87
  }
90
88
  export {
91
- n as default
89
+ r as default
92
90
  };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
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});
1
+ (function(s,l){typeof exports=="object"&&typeof module<"u"?module.exports=l():typeof define=="function"&&define.amd?define(l):(s=typeof globalThis<"u"?globalThis:s||self).TextSlicer=l()})(this,function(){"use strict";class s{textElement;originalText;splitMode;cssVariables;dataAttributes;waitForFonts;fontReadyTimeout;stabilizeLayout;nowrapWords;innerWrapper;charIndexCounter;destroyed;constructor(t={}){const{container:e=".text-slicer",splitMode:i="both",cssVariables:a=!1,dataAttributes:r=!1,waitForFonts:o=!1,fontReadyTimeout:h=1500,stabilizeLayout:c=!1,nowrapWords:d=!1,innerWrapper:n=!0}=t;this.textElement=typeof e=="string"?document.querySelector(e):e??null,this.originalText="",this.splitMode=i,this.cssVariables=a,this.dataAttributes=r,this.waitForFonts=o,this.fontReadyTimeout=h,this.stabilizeLayout=c,this.nowrapWords=d,this.innerWrapper=n,this.charIndexCounter=0,this.destroyed=!1,this.textElement&&(this.originalText=(this.textElement.textContent??"").trim(),this.originalText.length>0&&this.textElement.setAttribute("aria-label",this.originalText))}async init(){this.textElement&&(this.waitForFonts&&await s.waitFontsForElement(this.textElement,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.splitChars(t),this.textElement.appendChild(t),s.forceReflow(this.textElement),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,a)=>{if(this.splitMode==="both"){const r=this.createWordSpan(a,i);for(const o of i)r.append(this.createCharSpan(o));t.append(r)}else{const r=this.createWordSpan(a);r.append(document.createTextNode(i)),t.append(r)}a<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");if(t===" ")return e.classList.add("whitespace"),e.textContent=" ",e;if(e.classList.add("char"),e.textContent=t,e.style.position="relative",e.style.color="transparent",this.cssVariables&&e.style.setProperty("--char-index",String(this.charIndexCounter)),this.dataAttributes&&e.setAttribute("data-char",t),this.stabilizeLayout&&s.applyStableInlineBox(e),this.innerWrapper){const i=document.createElement("span");i.classList.add("char-inner"),i.textContent=t,i.style.position="absolute",i.style.left="0",i.style.top="0",i.style.right="auto",i.style.bottom="auto",e.appendChild(i)}return 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 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 async waitFontsForElement(t,e){const i=s.getFontFaceSet();if(!i)return;const a=getComputedStyle(t),r=a.fontFamily.split(",").map(n=>n.trim().replace(/^['"]|['"]$/g,"")).filter(n=>n.length>0),o=a.fontStyle||"normal",h=a.fontWeight||"400",c=a.fontStretch||"normal",d=r.map(n=>`${o} ${h} ${c} 1em ${n}`).map(n=>i.load(n));await Promise.race([Promise.all(d).then(()=>{}),new Promise(n=>window.setTimeout(n,e))])}}return s});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "text-slicer",
3
- "version": "1.4.0-dev.3",
3
+ "version": "1.4.0-dev.6",
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",