text-slicer 1.3.1 → 1.4.0-dev.1
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.
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +17 -3
- package/dist/index.es.js +54 -32
- package/dist/index.umd.js +1 -1
- package/package.json +18 -18
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
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;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,22 +4,36 @@ export interface TextSlicerOptions {
|
|
|
4
4
|
splitMode?: SplitMode;
|
|
5
5
|
cssVariables?: boolean;
|
|
6
6
|
dataAttributes?: boolean;
|
|
7
|
+
waitForFonts?: boolean;
|
|
8
|
+
fontReadyTimeout?: number;
|
|
9
|
+
stabilizeLayout?: boolean;
|
|
10
|
+
nowrapWords?: boolean;
|
|
7
11
|
}
|
|
8
12
|
declare class TextSlicer {
|
|
9
13
|
private readonly textElement;
|
|
10
|
-
private originalText;
|
|
14
|
+
private readonly originalText;
|
|
11
15
|
private readonly splitMode;
|
|
12
16
|
private readonly cssVariables;
|
|
13
17
|
private readonly dataAttributes;
|
|
18
|
+
private readonly waitForFonts;
|
|
19
|
+
private readonly fontReadyTimeout;
|
|
20
|
+
private readonly stabilizeLayout;
|
|
21
|
+
private readonly nowrapWords;
|
|
14
22
|
private charIndexCounter;
|
|
23
|
+
private destroyed;
|
|
15
24
|
constructor(options?: TextSlicerOptions);
|
|
16
|
-
|
|
25
|
+
init(): Promise<void>;
|
|
26
|
+
destroy(): void;
|
|
27
|
+
private split;
|
|
17
28
|
private splitWords;
|
|
18
29
|
private splitChars;
|
|
19
30
|
private createWordSpan;
|
|
20
31
|
private createCharSpan;
|
|
21
32
|
private static createSpaceSpan;
|
|
22
33
|
private clear;
|
|
23
|
-
|
|
34
|
+
private static applyStableInlineBox;
|
|
35
|
+
private static nextFrame;
|
|
36
|
+
private static getFontFaceSet;
|
|
37
|
+
private static waitFontsReady;
|
|
24
38
|
}
|
|
25
39
|
export default TextSlicer;
|
package/dist/index.es.js
CHANGED
|
@@ -1,53 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
class n {
|
|
2
|
+
textElement;
|
|
3
|
+
originalText;
|
|
4
|
+
splitMode;
|
|
5
|
+
cssVariables;
|
|
6
|
+
dataAttributes;
|
|
7
|
+
waitForFonts;
|
|
8
|
+
fontReadyTimeout;
|
|
9
|
+
stabilizeLayout;
|
|
10
|
+
nowrapWords;
|
|
11
|
+
charIndexCounter;
|
|
12
|
+
destroyed = !1;
|
|
5
13
|
constructor(t = {}) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
this.
|
|
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);
|
|
17
|
+
}
|
|
18
|
+
async init() {
|
|
19
|
+
this.textElement && (this.waitForFonts && await n.waitFontsReady(this.fontReadyTimeout).catch(() => {
|
|
20
|
+
}), await n.nextFrame(), this.split());
|
|
21
|
+
}
|
|
22
|
+
destroy() {
|
|
23
|
+
this.textElement && !this.destroyed && (this.textElement.innerHTML = "", this.textElement.textContent = this.originalText, this.textElement.removeAttribute("aria-hidden"), this.destroyed = !0);
|
|
16
24
|
}
|
|
17
25
|
split() {
|
|
18
26
|
if (!this.textElement) return;
|
|
19
27
|
this.clear(), this.charIndexCounter = 0;
|
|
20
28
|
const t = document.createDocumentFragment(), e = this.originalText.split(" "), s = this.originalText.length;
|
|
21
|
-
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", e.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");
|
|
22
30
|
}
|
|
23
31
|
splitWords(t, e) {
|
|
24
|
-
e.forEach((s,
|
|
32
|
+
e.forEach((s, a) => {
|
|
25
33
|
if (this.splitMode === "both") {
|
|
26
|
-
const i = this.createWordSpan(
|
|
27
|
-
s.
|
|
28
|
-
|
|
29
|
-
i.append(c);
|
|
30
|
-
}), t.append(i);
|
|
34
|
+
const i = this.createWordSpan(a, s);
|
|
35
|
+
for (const r of s) i.append(this.createCharSpan(r));
|
|
36
|
+
t.append(i);
|
|
31
37
|
} else {
|
|
32
|
-
const i = this.createWordSpan(
|
|
38
|
+
const i = this.createWordSpan(a);
|
|
33
39
|
i.append(document.createTextNode(s)), t.append(i);
|
|
34
40
|
}
|
|
35
|
-
|
|
41
|
+
a < e.length - 1 && t.append(n.createSpaceSpan());
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
splitChars(t) {
|
|
39
|
-
this.originalText.
|
|
40
|
-
const s = this.createCharSpan(e);
|
|
41
|
-
t.append(s);
|
|
42
|
-
});
|
|
45
|
+
for (const e of this.originalText) t.append(this.createCharSpan(e));
|
|
43
46
|
}
|
|
44
47
|
createWordSpan(t, e = "") {
|
|
45
48
|
const s = document.createElement("span");
|
|
46
|
-
return s.classList.add("word"), this.dataAttributes && s.setAttribute("data-word", e), this.cssVariables && s.style.setProperty("--word-index", t.
|
|
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;
|
|
47
50
|
}
|
|
48
51
|
createCharSpan(t) {
|
|
49
52
|
const e = document.createElement("span");
|
|
50
|
-
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", this.charIndexCounter.
|
|
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;
|
|
51
54
|
}
|
|
52
55
|
static createSpaceSpan() {
|
|
53
56
|
const t = document.createElement("span");
|
|
@@ -56,10 +59,29 @@ class h {
|
|
|
56
59
|
clear() {
|
|
57
60
|
this.textElement && (this.textElement.innerHTML = "");
|
|
58
61
|
}
|
|
59
|
-
|
|
60
|
-
|
|
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";
|
|
64
|
+
}
|
|
65
|
+
static nextFrame() {
|
|
66
|
+
return new Promise((t) => {
|
|
67
|
+
requestAnimationFrame(() => t());
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
static getFontFaceSet() {
|
|
71
|
+
const t = document;
|
|
72
|
+
return typeof t.fonts == "object" && t.fonts ? t.fonts : null;
|
|
73
|
+
}
|
|
74
|
+
static waitFontsReady(t) {
|
|
75
|
+
const e = n.getFontFaceSet();
|
|
76
|
+
return e && e.ready !== void 0 ? new Promise((s) => {
|
|
77
|
+
let a = !1;
|
|
78
|
+
const i = () => {
|
|
79
|
+
a || (a = !0, s());
|
|
80
|
+
};
|
|
81
|
+
e.ready.then(() => i()).catch(() => i()), t > 0 && window.setTimeout(() => i(), t);
|
|
82
|
+
}) : Promise.resolve();
|
|
61
83
|
}
|
|
62
84
|
}
|
|
63
85
|
export {
|
|
64
|
-
|
|
86
|
+
n as default
|
|
65
87
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "text-slicer",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0-dev.1",
|
|
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",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"clean": "rimraf dist",
|
|
18
18
|
"build": "vite build",
|
|
19
|
-
"lint:
|
|
20
|
-
"lint:fix:
|
|
21
|
-
"format:
|
|
22
|
-
"lint:fix": "yarn lint:fix:
|
|
19
|
+
"lint:ts": "eslint src/**/*.ts",
|
|
20
|
+
"lint:fix:ts": "eslint src/**/*.ts --fix",
|
|
21
|
+
"format:ts": "prettier --write src/**/*.ts",
|
|
22
|
+
"lint:fix": "yarn lint:fix:ts && yarn format:ts"
|
|
23
23
|
},
|
|
24
24
|
"source": "src/index.ts",
|
|
25
25
|
"main": "dist/index.cjs.js",
|
|
@@ -38,21 +38,21 @@
|
|
|
38
38
|
"dist/"
|
|
39
39
|
],
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@eslint/js": "9.
|
|
41
|
+
"@eslint/js": "9.34.0",
|
|
42
42
|
"@rollup/plugin-terser": "0.4.4",
|
|
43
|
-
"@types/node": "
|
|
44
|
-
"@typescript-eslint/eslint-plugin": "8.
|
|
45
|
-
"@typescript-eslint/parser": "8.
|
|
46
|
-
"eslint": "9.
|
|
47
|
-
"eslint-config-prettier": "10.1.
|
|
48
|
-
"eslint-import-resolver-typescript": "
|
|
49
|
-
"eslint-plugin-import": "2.
|
|
50
|
-
"globals": "16.
|
|
51
|
-
"prettier": "3.
|
|
43
|
+
"@types/node": "24.3.0",
|
|
44
|
+
"@typescript-eslint/eslint-plugin": "8.40.0",
|
|
45
|
+
"@typescript-eslint/parser": "8.40.0",
|
|
46
|
+
"eslint": "9.34.0",
|
|
47
|
+
"eslint-config-prettier": "10.1.8",
|
|
48
|
+
"eslint-import-resolver-typescript": "4.4.4",
|
|
49
|
+
"eslint-plugin-import": "2.32.0",
|
|
50
|
+
"globals": "16.3.0",
|
|
51
|
+
"prettier": "3.6.2",
|
|
52
52
|
"rimraf": "6.0.1",
|
|
53
|
-
"typescript": "5.
|
|
54
|
-
"vite": "
|
|
55
|
-
"vite-plugin-dts": "4.5.
|
|
53
|
+
"typescript": "5.9.2",
|
|
54
|
+
"vite": "7.1.3",
|
|
55
|
+
"vite-plugin-dts": "4.5.4"
|
|
56
56
|
},
|
|
57
57
|
"keywords": [
|
|
58
58
|
"text",
|