text-slicer 0.0.1-alpha.1 → 0.1.0
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/README.md +10 -13
- package/dist/index.js +22 -12
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +22 -12
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/TextSlicer.js +30 -13
package/README.md
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
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>
|
|
14
|
-
<p align="center"><a href="https://codepen.io/ux-ui/
|
|
13
|
+
<p align="center"><sup>850B gzipped</sup></p>
|
|
14
|
+
<p align="center"><a href="https://codepen.io/ux-ui/full/vYMoGoG">Demo</a></p>
|
|
15
15
|
<br>
|
|
16
16
|
|
|
17
17
|
➤ **Install**
|
|
@@ -35,10 +35,8 @@ const textSlicer = new TextSlicer();
|
|
|
35
35
|
|
|
36
36
|
textSlicer.init();
|
|
37
37
|
```
|
|
38
|
-
<br>
|
|
39
|
-
Initialization with specified parameters
|
|
40
|
-
<br>
|
|
41
38
|
|
|
39
|
+
<sub>Initialization with specified parameters</sub>
|
|
42
40
|
```javascript
|
|
43
41
|
document.addEventListener('DOMContentLoaded', () => {
|
|
44
42
|
const textSlicer = new TextSlicer({
|
|
@@ -50,10 +48,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
50
48
|
textSlicer.init();
|
|
51
49
|
});
|
|
52
50
|
```
|
|
53
|
-
<br>
|
|
54
|
-
How to apply the TextSlicer class to all elements on a page
|
|
55
|
-
<br>
|
|
56
51
|
|
|
52
|
+
<sub>How to apply the TextSlicer class to all elements on a page</sub>
|
|
57
53
|
```javascript
|
|
58
54
|
document.addEventListener('DOMContentLoaded', () => {
|
|
59
55
|
document.querySelectorAll('.text-slicer').forEach((element) => {
|
|
@@ -69,11 +65,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
69
65
|
|
|
70
66
|
➤ **Parameters**
|
|
71
67
|
|
|
72
|
-
|
|
|
73
|
-
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
68
|
+
| Option | Type | Default | Description |
|
|
69
|
+
|:-----------------:|:-----------------------:|:--------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
70
|
+
| `container` | `HTMLElement \| string` | `.text-slicer` | The container element or a selector for the element containing the text to be split. You can pass either a DOM element or a CSS selector string. |
|
|
71
|
+
| `splitMode` | `string` | `both` | Determines how the text will be split: 'words' to split into words, 'chars' to split into characters, 'both' to split into both words and characters. |
|
|
72
|
+
| `cssVariables` | `boolean` | `false` | If `true`, CSS variables for word and character indexes will be added to the spans. |
|
|
73
|
+
| `dataAttributes` | `boolean` | `false` | If `true`, `data-word` and `data-char` attributes will be added to the generated word and character spans for additional data handling or styling. |
|
|
77
74
|
<br>
|
|
78
75
|
|
|
79
76
|
➤ **License**
|
package/dist/index.js
CHANGED
|
@@ -15,41 +15,50 @@ class $70cf2c47938f006f$var$TextSlicer {
|
|
|
15
15
|
#originalText;
|
|
16
16
|
#splitMode;
|
|
17
17
|
#cssVariables;
|
|
18
|
+
#dataAttributes;
|
|
18
19
|
#charIndexCounter;
|
|
19
20
|
/**
|
|
20
21
|
* @param {Object} options - Configuration options for the TextSlicer.
|
|
21
22
|
* @param {HTMLElement|string} [options.container] - The container element or a selector for the text to split.
|
|
22
|
-
* @param {string} [options.
|
|
23
|
+
* @param {string} [options.splitMode='both'] - The splitMode, can be 'words', 'chars', or 'both'.
|
|
23
24
|
* @param {boolean} [options.cssVariables=false] - Whether to use CSS variables for indices.
|
|
25
|
+
* @param {boolean} [options.dataAttributes=false] - Whether to add data attributes for words and chars.
|
|
24
26
|
*/ constructor(options = {}){
|
|
25
|
-
this.#textElement = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".text-
|
|
27
|
+
this.#textElement = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".text-slicer");
|
|
26
28
|
if (!this.#textElement) return;
|
|
27
29
|
this.#originalText = this.#textElement.textContent.trim();
|
|
28
|
-
this.#splitMode = options.
|
|
30
|
+
this.#splitMode = options.splitMode || "both";
|
|
29
31
|
this.#cssVariables = options.cssVariables || false;
|
|
30
|
-
this.#
|
|
32
|
+
this.#dataAttributes = options.dataAttributes || false;
|
|
33
|
+
this.#charIndexCounter = 0;
|
|
31
34
|
}
|
|
32
35
|
split() {
|
|
33
36
|
if (!this.#textElement) return;
|
|
34
37
|
this.#clear();
|
|
35
|
-
this.#charIndexCounter =
|
|
38
|
+
this.#charIndexCounter = 0;
|
|
36
39
|
const fragment = document.createDocumentFragment();
|
|
37
|
-
|
|
40
|
+
const words = this.#originalText.split(" ");
|
|
41
|
+
const charCount = this.#originalText.length;
|
|
42
|
+
if (this.#splitMode === "words" || this.#splitMode === "both") this.#splitWords(fragment, words);
|
|
38
43
|
else if (this.#splitMode === "chars") this.#splitChars(fragment);
|
|
39
44
|
this.#textElement.appendChild(fragment);
|
|
45
|
+
if (this.#cssVariables) {
|
|
46
|
+
this.#textElement.style.setProperty("--word-total", words.length);
|
|
47
|
+
this.#textElement.style.setProperty("--char-total", charCount);
|
|
48
|
+
}
|
|
40
49
|
}
|
|
41
|
-
#splitWords(fragment) {
|
|
42
|
-
const words = this.#originalText.split(" ");
|
|
50
|
+
#splitWords(fragment, words) {
|
|
43
51
|
words.forEach((word, wordIndex)=>{
|
|
44
52
|
if (this.#splitMode === "both") {
|
|
45
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
53
|
+
const wordSpan = this.#createWordSpan(wordIndex, word);
|
|
46
54
|
word.split("").forEach((char)=>{
|
|
47
55
|
const charSpan = this.#createCharSpan(char);
|
|
48
56
|
wordSpan.append(charSpan);
|
|
49
57
|
});
|
|
50
58
|
fragment.append(wordSpan);
|
|
51
59
|
} else {
|
|
52
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
60
|
+
const wordSpan = this.#createWordSpan(wordIndex);
|
|
61
|
+
wordSpan.append(document.createTextNode(word));
|
|
53
62
|
fragment.append(wordSpan);
|
|
54
63
|
}
|
|
55
64
|
if (wordIndex < words.length - 1) fragment.append($70cf2c47938f006f$var$TextSlicer.#createSpaceSpan());
|
|
@@ -61,16 +70,17 @@ class $70cf2c47938f006f$var$TextSlicer {
|
|
|
61
70
|
fragment.append(charSpan);
|
|
62
71
|
});
|
|
63
72
|
}
|
|
64
|
-
#createWordSpan(index,
|
|
73
|
+
#createWordSpan(index, word = "") {
|
|
65
74
|
const wordSpan = document.createElement("span");
|
|
66
75
|
wordSpan.classList.add("word");
|
|
67
|
-
wordSpan.
|
|
76
|
+
if (this.#dataAttributes) wordSpan.setAttribute("data-word", word);
|
|
68
77
|
if (this.#cssVariables) wordSpan.style.setProperty("--word-index", index);
|
|
69
78
|
return wordSpan;
|
|
70
79
|
}
|
|
71
80
|
#createCharSpan(char) {
|
|
72
81
|
const charSpan = document.createElement("span");
|
|
73
82
|
charSpan.textContent = char;
|
|
83
|
+
if (this.#dataAttributes) charSpan.setAttribute("data-char", char);
|
|
74
84
|
if (char === " ") charSpan.classList.add("whitespace");
|
|
75
85
|
else {
|
|
76
86
|
charSpan.classList.add("char");
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACJ,CAAC,WAAW,CAAC;IAEb,CAAC,YAAY,CAAC;IAEd,CAAC,SAAS,CAAC;IAEX,CAAC,YAAY,CAAC;IAEd,CAAC,gBAAgB,CAAC;IAElB
|
|
1
|
+
{"mappings":"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","sources":["src/TextSlicer.js"],"sourcesContent":["class TextSlicer {\n #textElement;\n\n #originalText;\n\n #splitMode;\n\n #cssVariables;\n\n #dataAttributes;\n\n #charIndexCounter;\n\n /**\n * @param {Object} options - Configuration options for the TextSlicer.\n * @param {HTMLElement|string} [options.container] - The container element or a selector for the text to split.\n * @param {string} [options.splitMode='both'] - The splitMode, can be 'words', 'chars', or 'both'.\n * @param {boolean} [options.cssVariables=false] - Whether to use CSS variables for indices.\n * @param {boolean} [options.dataAttributes=false] - Whether to add data attributes for words and chars.\n */\n\n constructor(options = {}) {\n this.#textElement = options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.text-slicer');\n\n if (!this.#textElement) {\n return;\n }\n\n this.#originalText = this.#textElement.textContent.trim();\n this.#splitMode = options.splitMode || 'both';\n this.#cssVariables = options.cssVariables || false;\n this.#dataAttributes = options.dataAttributes || false;\n this.#charIndexCounter = 0;\n }\n\n split() {\n if (!this.#textElement) return;\n\n this.#clear();\n this.#charIndexCounter = 0;\n\n const fragment = document.createDocumentFragment();\n const words = this.#originalText.split(' ');\n const charCount = this.#originalText.length;\n\n if (this.#splitMode === 'words' || this.#splitMode === 'both') {\n this.#splitWords(fragment, words);\n } else if (this.#splitMode === 'chars') {\n this.#splitChars(fragment);\n }\n\n this.#textElement.appendChild(fragment);\n\n if (this.#cssVariables) {\n this.#textElement.style.setProperty('--word-total', words.length);\n this.#textElement.style.setProperty('--char-total', charCount);\n }\n }\n\n #splitWords(fragment, words) {\n words.forEach((word, wordIndex) => {\n if (this.#splitMode === 'both') {\n const wordSpan = this.#createWordSpan(wordIndex, word);\n\n word.split('').forEach((char) => {\n const charSpan = this.#createCharSpan(char);\n\n wordSpan.append(charSpan);\n });\n\n fragment.append(wordSpan);\n } else {\n const wordSpan = this.#createWordSpan(wordIndex);\n\n wordSpan.append(document.createTextNode(word));\n fragment.append(wordSpan);\n }\n\n if (wordIndex < words.length - 1) {\n fragment.append(TextSlicer.#createSpaceSpan());\n }\n });\n }\n\n #splitChars(fragment) {\n this.#originalText.split('').forEach((char) => {\n const charSpan = this.#createCharSpan(char);\n\n fragment.append(charSpan);\n });\n }\n\n #createWordSpan(index, word = '') {\n const wordSpan = document.createElement('span');\n\n wordSpan.classList.add('word');\n\n if (this.#dataAttributes) {\n wordSpan.setAttribute('data-word', word);\n }\n\n if (this.#cssVariables) {\n wordSpan.style.setProperty('--word-index', index);\n }\n\n return wordSpan;\n }\n\n #createCharSpan(char) {\n const charSpan = document.createElement('span');\n\n charSpan.textContent = char;\n\n if (this.#dataAttributes) {\n charSpan.setAttribute('data-char', char);\n }\n\n if (char === ' ') {\n charSpan.classList.add('whitespace');\n } else {\n charSpan.classList.add('char');\n\n if (this.#cssVariables) {\n charSpan.style.setProperty('--char-index', this.#charIndexCounter);\n }\n\n this.#charIndexCounter += 1;\n }\n\n return charSpan;\n }\n\n static #createSpaceSpan() {\n const spaceSpan = document.createElement('span');\n\n spaceSpan.classList.add('whitespace');\n spaceSpan.textContent = ' ';\n\n return spaceSpan;\n }\n\n #clear() {\n this.#textElement.innerHTML = '';\n }\n\n init() {\n this.split();\n }\n}\n\nexport default TextSlicer;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -3,41 +3,50 @@ class $fe8af0fdf983f603$var$TextSlicer {
|
|
|
3
3
|
#originalText;
|
|
4
4
|
#splitMode;
|
|
5
5
|
#cssVariables;
|
|
6
|
+
#dataAttributes;
|
|
6
7
|
#charIndexCounter;
|
|
7
8
|
/**
|
|
8
9
|
* @param {Object} options - Configuration options for the TextSlicer.
|
|
9
10
|
* @param {HTMLElement|string} [options.container] - The container element or a selector for the text to split.
|
|
10
|
-
* @param {string} [options.
|
|
11
|
+
* @param {string} [options.splitMode='both'] - The splitMode, can be 'words', 'chars', or 'both'.
|
|
11
12
|
* @param {boolean} [options.cssVariables=false] - Whether to use CSS variables for indices.
|
|
13
|
+
* @param {boolean} [options.dataAttributes=false] - Whether to add data attributes for words and chars.
|
|
12
14
|
*/ constructor(options = {}){
|
|
13
|
-
this.#textElement = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".text-
|
|
15
|
+
this.#textElement = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".text-slicer");
|
|
14
16
|
if (!this.#textElement) return;
|
|
15
17
|
this.#originalText = this.#textElement.textContent.trim();
|
|
16
|
-
this.#splitMode = options.
|
|
18
|
+
this.#splitMode = options.splitMode || "both";
|
|
17
19
|
this.#cssVariables = options.cssVariables || false;
|
|
18
|
-
this.#
|
|
20
|
+
this.#dataAttributes = options.dataAttributes || false;
|
|
21
|
+
this.#charIndexCounter = 0;
|
|
19
22
|
}
|
|
20
23
|
split() {
|
|
21
24
|
if (!this.#textElement) return;
|
|
22
25
|
this.#clear();
|
|
23
|
-
this.#charIndexCounter =
|
|
26
|
+
this.#charIndexCounter = 0;
|
|
24
27
|
const fragment = document.createDocumentFragment();
|
|
25
|
-
|
|
28
|
+
const words = this.#originalText.split(" ");
|
|
29
|
+
const charCount = this.#originalText.length;
|
|
30
|
+
if (this.#splitMode === "words" || this.#splitMode === "both") this.#splitWords(fragment, words);
|
|
26
31
|
else if (this.#splitMode === "chars") this.#splitChars(fragment);
|
|
27
32
|
this.#textElement.appendChild(fragment);
|
|
33
|
+
if (this.#cssVariables) {
|
|
34
|
+
this.#textElement.style.setProperty("--word-total", words.length);
|
|
35
|
+
this.#textElement.style.setProperty("--char-total", charCount);
|
|
36
|
+
}
|
|
28
37
|
}
|
|
29
|
-
#splitWords(fragment) {
|
|
30
|
-
const words = this.#originalText.split(" ");
|
|
38
|
+
#splitWords(fragment, words) {
|
|
31
39
|
words.forEach((word, wordIndex)=>{
|
|
32
40
|
if (this.#splitMode === "both") {
|
|
33
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
41
|
+
const wordSpan = this.#createWordSpan(wordIndex, word);
|
|
34
42
|
word.split("").forEach((char)=>{
|
|
35
43
|
const charSpan = this.#createCharSpan(char);
|
|
36
44
|
wordSpan.append(charSpan);
|
|
37
45
|
});
|
|
38
46
|
fragment.append(wordSpan);
|
|
39
47
|
} else {
|
|
40
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
48
|
+
const wordSpan = this.#createWordSpan(wordIndex);
|
|
49
|
+
wordSpan.append(document.createTextNode(word));
|
|
41
50
|
fragment.append(wordSpan);
|
|
42
51
|
}
|
|
43
52
|
if (wordIndex < words.length - 1) fragment.append($fe8af0fdf983f603$var$TextSlicer.#createSpaceSpan());
|
|
@@ -49,16 +58,17 @@ class $fe8af0fdf983f603$var$TextSlicer {
|
|
|
49
58
|
fragment.append(charSpan);
|
|
50
59
|
});
|
|
51
60
|
}
|
|
52
|
-
#createWordSpan(index,
|
|
61
|
+
#createWordSpan(index, word = "") {
|
|
53
62
|
const wordSpan = document.createElement("span");
|
|
54
63
|
wordSpan.classList.add("word");
|
|
55
|
-
wordSpan.
|
|
64
|
+
if (this.#dataAttributes) wordSpan.setAttribute("data-word", word);
|
|
56
65
|
if (this.#cssVariables) wordSpan.style.setProperty("--word-index", index);
|
|
57
66
|
return wordSpan;
|
|
58
67
|
}
|
|
59
68
|
#createCharSpan(char) {
|
|
60
69
|
const charSpan = document.createElement("span");
|
|
61
70
|
charSpan.textContent = char;
|
|
71
|
+
if (this.#dataAttributes) charSpan.setAttribute("data-char", char);
|
|
62
72
|
if (char === " ") charSpan.classList.add("whitespace");
|
|
63
73
|
else {
|
|
64
74
|
charSpan.classList.add("char");
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;IACJ,CAAC,WAAW,CAAC;IAEb,CAAC,YAAY,CAAC;IAEd,CAAC,SAAS,CAAC;IAEX,CAAC,YAAY,CAAC;IAEd,CAAC,gBAAgB,CAAC;IAElB
|
|
1
|
+
{"mappings":"AAAA,MAAM;IACJ,CAAC,WAAW,CAAC;IAEb,CAAC,YAAY,CAAC;IAEd,CAAC,SAAS,CAAC;IAEX,CAAC,YAAY,CAAC;IAEd,CAAC,cAAc,CAAC;IAEhB,CAAC,gBAAgB,CAAC;IAElB;;;;;;GAMC,GAED,YAAY,UAAU,CAAC,CAAC,CAAE;QACxB,IAAI,CAAC,CAAC,WAAW,GAAG,QAAQ,SAAS,YAAY,cAC7C,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;QAEhD,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EACpB;QAGF,IAAI,CAAC,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI;QACvD,IAAI,CAAC,CAAC,SAAS,GAAG,QAAQ,SAAS,IAAI;QACvC,IAAI,CAAC,CAAC,YAAY,GAAG,QAAQ,YAAY,IAAI;QAC7C,IAAI,CAAC,CAAC,cAAc,GAAG,QAAQ,cAAc,IAAI;QACjD,IAAI,CAAC,CAAC,gBAAgB,GAAG;IAC3B;IAEA,QAAQ;QACN,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;QAExB,IAAI,CAAC,CAAC,KAAK;QACX,IAAI,CAAC,CAAC,gBAAgB,GAAG;QAEzB,MAAM,WAAW,SAAS,sBAAsB;QAChD,MAAM,QAAQ,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;QACvC,MAAM,YAAY,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM;QAE3C,IAAI,IAAI,CAAC,CAAC,SAAS,KAAK,WAAW,IAAI,CAAC,CAAC,SAAS,KAAK,QACrD,IAAI,CAAC,CAAC,UAAU,CAAC,UAAU;aACtB,IAAI,IAAI,CAAC,CAAC,SAAS,KAAK,SAC7B,IAAI,CAAC,CAAC,UAAU,CAAC;QAGnB,IAAI,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC;QAE9B,IAAI,IAAI,CAAC,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,MAAM,MAAM;YAChE,IAAI,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB;QACtD;IACF;IAEA,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK;QACzB,MAAM,OAAO,CAAC,CAAC,MAAM;YACnB,IAAI,IAAI,CAAC,CAAC,SAAS,KAAK,QAAQ;gBAC9B,MAAM,WAAW,IAAI,CAAC,CAAC,cAAc,CAAC,WAAW;gBAEjD,KAAK,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC;oBACtB,MAAM,WAAW,IAAI,CAAC,CAAC,cAAc,CAAC;oBAEtC,SAAS,MAAM,CAAC;gBAClB;gBAEA,SAAS,MAAM,CAAC;YAClB,OAAO;gBACL,MAAM,WAAW,IAAI,CAAC,CAAC,cAAc,CAAC;gBAEtC,SAAS,MAAM,CAAC,SAAS,cAAc,CAAC;gBACxC,SAAS,MAAM,CAAC;YAClB;YAEA,IAAI,YAAY,MAAM,MAAM,GAAG,GAC7B,SAAS,MAAM,CAAC,iCAAW,CAAC,eAAe;QAE/C;IACF;IAEA,CAAC,UAAU,CAAC,QAAQ;QAClB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC;YACpC,MAAM,WAAW,IAAI,CAAC,CAAC,cAAc,CAAC;YAEtC,SAAS,MAAM,CAAC;QAClB;IACF;IAEA,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE;QAC9B,MAAM,WAAW,SAAS,aAAa,CAAC;QAExC,SAAS,SAAS,CAAC,GAAG,CAAC;QAEvB,IAAI,IAAI,CAAC,CAAC,cAAc,EACtB,SAAS,YAAY,CAAC,aAAa;QAGrC,IAAI,IAAI,CAAC,CAAC,YAAY,EACpB,SAAS,KAAK,CAAC,WAAW,CAAC,gBAAgB;QAG7C,OAAO;IACT;IAEA,CAAC,cAAc,CAAC,IAAI;QAClB,MAAM,WAAW,SAAS,aAAa,CAAC;QAExC,SAAS,WAAW,GAAG;QAEvB,IAAI,IAAI,CAAC,CAAC,cAAc,EACtB,SAAS,YAAY,CAAC,aAAa;QAGrC,IAAI,SAAS,KACX,SAAS,SAAS,CAAC,GAAG,CAAC;aAClB;YACL,SAAS,SAAS,CAAC,GAAG,CAAC;YAEvB,IAAI,IAAI,CAAC,CAAC,YAAY,EACpB,SAAS,KAAK,CAAC,WAAW,CAAC,gBAAgB,IAAI,CAAC,CAAC,gBAAgB;YAGnE,IAAI,CAAC,CAAC,gBAAgB,IAAI;QAC5B;QAEA,OAAO;IACT;IAEA,OAAO,CAAC,eAAe;QACrB,MAAM,YAAY,SAAS,aAAa,CAAC;QAEzC,UAAU,SAAS,CAAC,GAAG,CAAC;QACxB,UAAU,WAAW,GAAG;QAExB,OAAO;IACT;IAEA,CAAC,KAAK;QACJ,IAAI,CAAC,CAAC,WAAW,CAAC,SAAS,GAAG;IAChC;IAEA,OAAO;QACL,IAAI,CAAC,KAAK;IACZ;AACF;IAEA,2CAAe","sources":["src/TextSlicer.js"],"sourcesContent":["class TextSlicer {\n #textElement;\n\n #originalText;\n\n #splitMode;\n\n #cssVariables;\n\n #dataAttributes;\n\n #charIndexCounter;\n\n /**\n * @param {Object} options - Configuration options for the TextSlicer.\n * @param {HTMLElement|string} [options.container] - The container element or a selector for the text to split.\n * @param {string} [options.splitMode='both'] - The splitMode, can be 'words', 'chars', or 'both'.\n * @param {boolean} [options.cssVariables=false] - Whether to use CSS variables for indices.\n * @param {boolean} [options.dataAttributes=false] - Whether to add data attributes for words and chars.\n */\n\n constructor(options = {}) {\n this.#textElement = options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.text-slicer');\n\n if (!this.#textElement) {\n return;\n }\n\n this.#originalText = this.#textElement.textContent.trim();\n this.#splitMode = options.splitMode || 'both';\n this.#cssVariables = options.cssVariables || false;\n this.#dataAttributes = options.dataAttributes || false;\n this.#charIndexCounter = 0;\n }\n\n split() {\n if (!this.#textElement) return;\n\n this.#clear();\n this.#charIndexCounter = 0;\n\n const fragment = document.createDocumentFragment();\n const words = this.#originalText.split(' ');\n const charCount = this.#originalText.length;\n\n if (this.#splitMode === 'words' || this.#splitMode === 'both') {\n this.#splitWords(fragment, words);\n } else if (this.#splitMode === 'chars') {\n this.#splitChars(fragment);\n }\n\n this.#textElement.appendChild(fragment);\n\n if (this.#cssVariables) {\n this.#textElement.style.setProperty('--word-total', words.length);\n this.#textElement.style.setProperty('--char-total', charCount);\n }\n }\n\n #splitWords(fragment, words) {\n words.forEach((word, wordIndex) => {\n if (this.#splitMode === 'both') {\n const wordSpan = this.#createWordSpan(wordIndex, word);\n\n word.split('').forEach((char) => {\n const charSpan = this.#createCharSpan(char);\n\n wordSpan.append(charSpan);\n });\n\n fragment.append(wordSpan);\n } else {\n const wordSpan = this.#createWordSpan(wordIndex);\n\n wordSpan.append(document.createTextNode(word));\n fragment.append(wordSpan);\n }\n\n if (wordIndex < words.length - 1) {\n fragment.append(TextSlicer.#createSpaceSpan());\n }\n });\n }\n\n #splitChars(fragment) {\n this.#originalText.split('').forEach((char) => {\n const charSpan = this.#createCharSpan(char);\n\n fragment.append(charSpan);\n });\n }\n\n #createWordSpan(index, word = '') {\n const wordSpan = document.createElement('span');\n\n wordSpan.classList.add('word');\n\n if (this.#dataAttributes) {\n wordSpan.setAttribute('data-word', word);\n }\n\n if (this.#cssVariables) {\n wordSpan.style.setProperty('--word-index', index);\n }\n\n return wordSpan;\n }\n\n #createCharSpan(char) {\n const charSpan = document.createElement('span');\n\n charSpan.textContent = char;\n\n if (this.#dataAttributes) {\n charSpan.setAttribute('data-char', char);\n }\n\n if (char === ' ') {\n charSpan.classList.add('whitespace');\n } else {\n charSpan.classList.add('char');\n\n if (this.#cssVariables) {\n charSpan.style.setProperty('--char-index', this.#charIndexCounter);\n }\n\n this.#charIndexCounter += 1;\n }\n\n return charSpan;\n }\n\n static #createSpaceSpan() {\n const spaceSpan = document.createElement('span');\n\n spaceSpan.classList.add('whitespace');\n spaceSpan.textContent = ' ';\n\n return spaceSpan;\n }\n\n #clear() {\n this.#textElement.innerHTML = '';\n }\n\n init() {\n this.split();\n }\n}\n\nexport default TextSlicer;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "text-slicer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0",
|
|
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",
|
package/src/TextSlicer.js
CHANGED
|
@@ -7,53 +7,62 @@ class TextSlicer {
|
|
|
7
7
|
|
|
8
8
|
#cssVariables;
|
|
9
9
|
|
|
10
|
+
#dataAttributes;
|
|
11
|
+
|
|
10
12
|
#charIndexCounter;
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
15
|
* @param {Object} options - Configuration options for the TextSlicer.
|
|
14
16
|
* @param {HTMLElement|string} [options.container] - The container element or a selector for the text to split.
|
|
15
|
-
* @param {string} [options.
|
|
17
|
+
* @param {string} [options.splitMode='both'] - The splitMode, can be 'words', 'chars', or 'both'.
|
|
16
18
|
* @param {boolean} [options.cssVariables=false] - Whether to use CSS variables for indices.
|
|
19
|
+
* @param {boolean} [options.dataAttributes=false] - Whether to add data attributes for words and chars.
|
|
17
20
|
*/
|
|
18
21
|
|
|
19
22
|
constructor(options = {}) {
|
|
20
23
|
this.#textElement = options.container instanceof HTMLElement
|
|
21
24
|
? options.container
|
|
22
|
-
: document.querySelector(options.container || '.text-
|
|
25
|
+
: document.querySelector(options.container || '.text-slicer');
|
|
23
26
|
|
|
24
27
|
if (!this.#textElement) {
|
|
25
28
|
return;
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
this.#originalText = this.#textElement.textContent.trim();
|
|
29
|
-
this.#splitMode = options.
|
|
32
|
+
this.#splitMode = options.splitMode || 'both';
|
|
30
33
|
this.#cssVariables = options.cssVariables || false;
|
|
31
|
-
this.#
|
|
34
|
+
this.#dataAttributes = options.dataAttributes || false;
|
|
35
|
+
this.#charIndexCounter = 0;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
split() {
|
|
35
39
|
if (!this.#textElement) return;
|
|
36
40
|
|
|
37
41
|
this.#clear();
|
|
38
|
-
this.#charIndexCounter =
|
|
42
|
+
this.#charIndexCounter = 0;
|
|
39
43
|
|
|
40
44
|
const fragment = document.createDocumentFragment();
|
|
45
|
+
const words = this.#originalText.split(' ');
|
|
46
|
+
const charCount = this.#originalText.length;
|
|
41
47
|
|
|
42
48
|
if (this.#splitMode === 'words' || this.#splitMode === 'both') {
|
|
43
|
-
this.#splitWords(fragment);
|
|
49
|
+
this.#splitWords(fragment, words);
|
|
44
50
|
} else if (this.#splitMode === 'chars') {
|
|
45
51
|
this.#splitChars(fragment);
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
this.#textElement.appendChild(fragment);
|
|
49
|
-
}
|
|
50
55
|
|
|
51
|
-
|
|
52
|
-
|
|
56
|
+
if (this.#cssVariables) {
|
|
57
|
+
this.#textElement.style.setProperty('--word-total', words.length);
|
|
58
|
+
this.#textElement.style.setProperty('--char-total', charCount);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
53
61
|
|
|
62
|
+
#splitWords(fragment, words) {
|
|
54
63
|
words.forEach((word, wordIndex) => {
|
|
55
64
|
if (this.#splitMode === 'both') {
|
|
56
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
65
|
+
const wordSpan = this.#createWordSpan(wordIndex, word);
|
|
57
66
|
|
|
58
67
|
word.split('').forEach((char) => {
|
|
59
68
|
const charSpan = this.#createCharSpan(char);
|
|
@@ -63,8 +72,9 @@ class TextSlicer {
|
|
|
63
72
|
|
|
64
73
|
fragment.append(wordSpan);
|
|
65
74
|
} else {
|
|
66
|
-
const wordSpan = this.#createWordSpan(wordIndex
|
|
75
|
+
const wordSpan = this.#createWordSpan(wordIndex);
|
|
67
76
|
|
|
77
|
+
wordSpan.append(document.createTextNode(word));
|
|
68
78
|
fragment.append(wordSpan);
|
|
69
79
|
}
|
|
70
80
|
|
|
@@ -82,11 +92,14 @@ class TextSlicer {
|
|
|
82
92
|
});
|
|
83
93
|
}
|
|
84
94
|
|
|
85
|
-
#createWordSpan(index,
|
|
95
|
+
#createWordSpan(index, word = '') {
|
|
86
96
|
const wordSpan = document.createElement('span');
|
|
87
97
|
|
|
88
98
|
wordSpan.classList.add('word');
|
|
89
|
-
|
|
99
|
+
|
|
100
|
+
if (this.#dataAttributes) {
|
|
101
|
+
wordSpan.setAttribute('data-word', word);
|
|
102
|
+
}
|
|
90
103
|
|
|
91
104
|
if (this.#cssVariables) {
|
|
92
105
|
wordSpan.style.setProperty('--word-index', index);
|
|
@@ -100,6 +113,10 @@ class TextSlicer {
|
|
|
100
113
|
|
|
101
114
|
charSpan.textContent = char;
|
|
102
115
|
|
|
116
|
+
if (this.#dataAttributes) {
|
|
117
|
+
charSpan.setAttribute('data-char', char);
|
|
118
|
+
}
|
|
119
|
+
|
|
103
120
|
if (char === ' ') {
|
|
104
121
|
charSpan.classList.add('whitespace');
|
|
105
122
|
} else {
|