text-slicer 1.0.0 → 1.3.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 +1 -1
- package/dist/index.umd.js +1 -1
- package/package.json +5 -4
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>
|
|
13
|
+
<p align="center"><sup>1kB 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.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(s,
|
|
1
|
+
(function(s,n){typeof exports=="object"&&typeof module<"u"?module.exports=n():typeof define=="function"&&define.amd?define(n):(s=typeof globalThis<"u"?globalThis:s||self).TextSlicer=n()})(this,function(){"use strict";var l=Object.defineProperty;var d=(s,n,t)=>n in s?l(s,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[n]=t;var a=(s,n,t)=>d(s,typeof n!="symbol"?n+"":n,t);class s{constructor(t={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter");var e;if(this.textElement=t.container instanceof HTMLElement?t.container:document.querySelector(t.container||".text-slicer"),!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((e=this.textElement.textContent)==null?void 0:e.trim())||"",this.splitMode=t.splitMode||"both",this.cssVariables=t.cssVariables||!1,this.dataAttributes=t.dataAttributes||!1,this.charIndexCounter=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",e.length.toString()),this.textElement.style.setProperty("--char-total",i.toString()))}splitWords(t,e){e.forEach((i,o)=>{if(this.splitMode==="both"){const r=this.createWordSpan(o,i);i.split("").forEach(c=>{const h=this.createCharSpan(c);r.append(h)}),t.append(r)}else{const r=this.createWordSpan(o);r.append(document.createTextNode(i)),t.append(r)}o<e.length-1&&t.append(s.createSpaceSpan())})}splitChars(t){this.originalText.split("").forEach(e=>{const i=this.createCharSpan(e);t.append(i)})}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",t.toString()),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",this.charIndexCounter.toString()),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="")}init(){this.split()}}return s});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "text-slicer",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.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",
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
"source": "src/index.ts",
|
|
25
25
|
"main": "dist/index.cjs.js",
|
|
26
26
|
"module": "dist/index.es.js",
|
|
27
|
+
"browser": "./dist/index.umd.js",
|
|
27
28
|
"types": "dist/index.d.ts",
|
|
28
29
|
"exports": {
|
|
29
|
-
"types": "./dist/index.d.ts",
|
|
30
30
|
"import": "./dist/index.es.js",
|
|
31
31
|
"require": "./dist/index.cjs.js"
|
|
32
32
|
},
|
|
@@ -43,11 +43,12 @@
|
|
|
43
43
|
"eslint-config-prettier": "10.0.2",
|
|
44
44
|
"eslint-import-resolver-typescript": "3.8.3",
|
|
45
45
|
"eslint-plugin-import": "2.31.0",
|
|
46
|
+
"globals": "16.0.0",
|
|
46
47
|
"prettier": "3.5.2",
|
|
48
|
+
"rimraf": "6.0.1",
|
|
47
49
|
"typescript": "5.8.2",
|
|
48
50
|
"vite": "6.2.0",
|
|
49
|
-
"vite-plugin-dts": "4.5.1"
|
|
50
|
-
"rimraf": "6.0.1"
|
|
51
|
+
"vite-plugin-dts": "4.5.1"
|
|
51
52
|
},
|
|
52
53
|
"keywords": [
|
|
53
54
|
"text",
|