text-slicer 1.5.0-dev.2 → 1.5.0-dev.4
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.es.js +27 -21
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},r=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),a=" ",h="--container-height",c="ts-measuring",m=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,l=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),i=>i.segment)}return Array.from(t)},p=t=>t.split(a),o=t=>{const e={};return Object.keys(t).forEach(s=>{const i=t[s];i!==void 0&&(e[s]=i)}),e};exports.CLASSNAMES=r,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;constructor(t={},e){const s=m(t.container);this.el=s,this.original=(i=>!!i&&typeof HTMLElement<"u"&&i instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...g,...o(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const t=this.original;return{wordTotal:t.length?p(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(t,e){this.el&&(typeof t=="string"&&(this.original=t),e&&(this.opts={...this.opts,...o(e)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=p(t);this.opts.splitMode==="chars"?this.appendChars(e,t):this.appendWords(e,s),this.el.appendChild(e),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(t.length))),this.opts.containerHeightVar&&this.applyContainerHeightVar(),this.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.opts.containerHeightVar&&this.el.style.removeProperty(h),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...o(t)},this.mounted&&this.split()}lockHeight(){if(!this.el)return;const t=this.measureHeight();t>0&&(this.el.style.height=`${t}px`,this.heightLocked=!0)}unlockHeight(){this.el&&(this.el.style.removeProperty("height"),this.heightLocked=!1)}appendWords(t,e){e.forEach((s,i)=>{if(this.opts.splitMode==="both"){const n=this.createWordSpan(i,s);for(const d of l(s)){const u=this.createCharSpan(d);n.append(u)}t.append(n)}else{const n=this.createWordSpan(i);n.append(document.createTextNode(s)),t.append(n)}i<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of l(e)){const i=this.createCharSpan(s);t.append(i)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(r.word),this.opts.dataAttributes&&e&&s.setAttribute("data-word",e),this.opts.cssVariables&&s.style.setProperty("--word-index",String(t)),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.opts.dataAttributes&&e.setAttribute("data-char",t),t===a?(e.classList.add(r.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=a)):(e.classList.add(r.char),this.opts.cssVariables&&e.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),e}createSpaceSpan(){const t=document.createElement("span");return t.classList.add(r.whitespace),t.textContent=a,t}measureHeight(){if(!this.el)return 0;this.el.classList.add(c),this.el.offsetHeight;let t=this.el.offsetHeight||this.el.clientHeight||0;return t||(t=Math.round(this.el.getBoundingClientRect().height)),this.el.classList.remove(c),Math.max(0,Math.ceil(t))}applyContainerHeightVar(){if(!this.el)return;const t=()=>{const e=this.measureHeight();this.el.style.setProperty(h,`${e}px`)};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>requestAnimationFrame(t)):t()}};
|
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const
|
|
1
|
+
const m = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, containerHeightVar: !1 }, a = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), h = " ", c = "--container-height", l = "ts-measuring", f = (i) => typeof window > "u" || typeof document > "u" ? null : i ? typeof i == "string" ? document.querySelector(i) : i : null, p = (i) => {
|
|
2
2
|
const t = Intl.Segmenter;
|
|
3
3
|
if (typeof t == "function") {
|
|
4
4
|
const e = new t("en", { granularity: "grapheme" });
|
|
5
5
|
return Array.from(e.segment(i), (s) => s.segment);
|
|
6
6
|
}
|
|
7
7
|
return Array.from(i);
|
|
8
|
-
},
|
|
8
|
+
}, d = (i) => i.split(h), o = (i) => {
|
|
9
9
|
const t = {};
|
|
10
10
|
return Object.keys(i).forEach((e) => {
|
|
11
11
|
const s = i[e];
|
|
@@ -21,12 +21,12 @@ class y {
|
|
|
21
21
|
mounted;
|
|
22
22
|
heightLocked;
|
|
23
23
|
constructor(t = {}, e) {
|
|
24
|
-
const s =
|
|
25
|
-
this.el = s, this.original = ((
|
|
24
|
+
const s = f(t.container);
|
|
25
|
+
this.el = s, this.original = ((n) => !!n && typeof HTMLElement < "u" && n instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...m, ...o(t) }, this.callbacks = e, this.charIndex = 0, this.mounted = !1, this.heightLocked = !1;
|
|
26
26
|
}
|
|
27
27
|
get metrics() {
|
|
28
28
|
const t = this.original;
|
|
29
|
-
return { wordTotal: t.length ?
|
|
29
|
+
return { wordTotal: t.length ? d(t).length : 0, charTotal: t.length, renderedAt: Date.now() };
|
|
30
30
|
}
|
|
31
31
|
init() {
|
|
32
32
|
this.el && (this.mounted = !0, this.split());
|
|
@@ -40,7 +40,7 @@ class y {
|
|
|
40
40
|
split() {
|
|
41
41
|
if (!this.el) return;
|
|
42
42
|
this.clear(), this.charIndex = 0;
|
|
43
|
-
const t = this.original, e = document.createDocumentFragment(), s =
|
|
43
|
+
const t = this.original, e = document.createDocumentFragment(), s = d(t);
|
|
44
44
|
this.opts.splitMode === "chars" ? this.appendChars(e, t) : this.appendWords(e, s), this.el.appendChild(e), this.opts.cssVariables && (this.el.style.setProperty("--word-total", String(s.length)), this.el.style.setProperty("--char-total", String(t.length))), this.opts.containerHeightVar && this.applyContainerHeightVar(), this.callbacks?.onAfterRender?.(this.metrics);
|
|
45
45
|
}
|
|
46
46
|
destroy() {
|
|
@@ -58,25 +58,25 @@ class y {
|
|
|
58
58
|
this.el && (this.el.style.removeProperty("height"), this.heightLocked = !1);
|
|
59
59
|
}
|
|
60
60
|
appendWords(t, e) {
|
|
61
|
-
e.forEach((s,
|
|
61
|
+
e.forEach((s, n) => {
|
|
62
62
|
if (this.opts.splitMode === "both") {
|
|
63
|
-
const
|
|
64
|
-
for (const
|
|
65
|
-
const g = this.createCharSpan(
|
|
66
|
-
|
|
63
|
+
const r = this.createWordSpan(n, s);
|
|
64
|
+
for (const u of p(s)) {
|
|
65
|
+
const g = this.createCharSpan(u);
|
|
66
|
+
r.append(g);
|
|
67
67
|
}
|
|
68
|
-
t.append(
|
|
68
|
+
t.append(r);
|
|
69
69
|
} else {
|
|
70
|
-
const
|
|
71
|
-
|
|
70
|
+
const r = this.createWordSpan(n);
|
|
71
|
+
r.append(document.createTextNode(s)), t.append(r);
|
|
72
72
|
}
|
|
73
|
-
|
|
73
|
+
n < e.length - 1 && t.append(this.createSpaceSpan());
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
76
|
appendChars(t, e) {
|
|
77
|
-
for (const s of
|
|
78
|
-
const
|
|
79
|
-
t.append(
|
|
77
|
+
for (const s of p(e)) {
|
|
78
|
+
const n = this.createCharSpan(s);
|
|
79
|
+
t.append(n);
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
createWordSpan(t, e = "") {
|
|
@@ -92,12 +92,18 @@ class y {
|
|
|
92
92
|
return t.classList.add(a.whitespace), t.textContent = h, t;
|
|
93
93
|
}
|
|
94
94
|
measureHeight() {
|
|
95
|
-
|
|
95
|
+
if (!this.el) return 0;
|
|
96
|
+
this.el.classList.add(l), this.el.offsetHeight;
|
|
97
|
+
let t = this.el.offsetHeight || this.el.clientHeight || 0;
|
|
98
|
+
return t || (t = Math.round(this.el.getBoundingClientRect().height)), this.el.classList.remove(l), Math.max(0, Math.ceil(t));
|
|
96
99
|
}
|
|
97
100
|
applyContainerHeightVar() {
|
|
98
101
|
if (!this.el) return;
|
|
99
|
-
const t =
|
|
100
|
-
|
|
102
|
+
const t = () => {
|
|
103
|
+
const e = this.measureHeight();
|
|
104
|
+
this.el.style.setProperty(c, `${e}px`);
|
|
105
|
+
};
|
|
106
|
+
typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => requestAnimationFrame(t)) : t();
|
|
101
107
|
}
|
|
102
108
|
}
|
|
103
109
|
export {
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):r((n=typeof globalThis<"u"?globalThis:n||self).TextSlicer={})})(this,function(n){"use strict";const r={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},o=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),h=" ",l="--container-height",
|
|
1
|
+
(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):r((n=typeof globalThis<"u"?globalThis:n||self).TextSlicer={})})(this,function(n){"use strict";const r={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},o=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),h=" ",l="--container-height",p="ts-measuring",g=t=>typeof window>"u"||typeof document>"u"?null:t?typeof t=="string"?document.querySelector(t):t:null,d=t=>{const e=Intl.Segmenter;if(typeof e=="function"){const s=new e("en",{granularity:"grapheme"});return Array.from(s.segment(t),i=>i.segment)}return Array.from(t)},u=t=>t.split(h),c=t=>{const e={};return Object.keys(t).forEach(s=>{const i=t[s];i!==void 0&&(e[s]=i)}),e};n.CLASSNAMES=o,n.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;constructor(t={},e){const s=g(t.container);this.el=s,this.original=(i=>!!i&&typeof HTMLElement<"u"&&i instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...r,...c(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const t=this.original;return{wordTotal:t.length?u(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split())}reinit(t,e){this.el&&(typeof t=="string"&&(this.original=t),e&&(this.opts={...this.opts,...c(e)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const t=this.original,e=document.createDocumentFragment(),s=u(t);this.opts.splitMode==="chars"?this.appendChars(e,t):this.appendWords(e,s),this.el.appendChild(e),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(t.length))),this.opts.containerHeightVar&&this.applyContainerHeightVar(),this.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.opts.containerHeightVar&&this.el.style.removeProperty(l),this.mounted=!1)}updateOptions(t){this.opts={...this.opts,...c(t)},this.mounted&&this.split()}lockHeight(){if(!this.el)return;const t=this.measureHeight();t>0&&(this.el.style.height=`${t}px`,this.heightLocked=!0)}unlockHeight(){this.el&&(this.el.style.removeProperty("height"),this.heightLocked=!1)}appendWords(t,e){e.forEach((s,i)=>{if(this.opts.splitMode==="both"){const a=this.createWordSpan(i,s);for(const f of d(s)){const m=this.createCharSpan(f);a.append(m)}t.append(a)}else{const a=this.createWordSpan(i);a.append(document.createTextNode(s)),t.append(a)}i<e.length-1&&t.append(this.createSpaceSpan())})}appendChars(t,e){for(const s of d(e)){const i=this.createCharSpan(s);t.append(i)}}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add(o.word),this.opts.dataAttributes&&e&&s.setAttribute("data-word",e),this.opts.cssVariables&&s.style.setProperty("--word-index",String(t)),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.opts.dataAttributes&&e.setAttribute("data-char",t),t===h?(e.classList.add(o.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=h)):(e.classList.add(o.char),this.opts.cssVariables&&e.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),e}createSpaceSpan(){const t=document.createElement("span");return t.classList.add(o.whitespace),t.textContent=h,t}measureHeight(){if(!this.el)return 0;this.el.classList.add(p),this.el.offsetHeight;let t=this.el.offsetHeight||this.el.clientHeight||0;return t||(t=Math.round(this.el.getBoundingClientRect().height)),this.el.classList.remove(p),Math.max(0,Math.ceil(t))}applyContainerHeightVar(){if(!this.el)return;const t=()=>{const e=this.measureHeight();this.el.style.setProperty(l,`${e}px`)};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>requestAnimationFrame(t)):t()}},Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "text-slicer",
|
|
3
|
-
"version": "1.5.0-dev.
|
|
3
|
+
"version": "1.5.0-dev.4",
|
|
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",
|