text-slicer 1.5.0-dev.3 → 1.5.0-dev.5
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 +2 -6
- package/dist/index.es.js +16 -14
- 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 u={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},n=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},n=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),h=" ",a="--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)},d=t=>t.split(h),o=t=>{const e={};return Object.keys(t).forEach(s=>{const i=t[s];i!==void 0&&(e[s]=i)}),e};exports.CLASSNAMES=n,exports.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;resizeObserver;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={...u,...o(t)},this.callbacks=e,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const t=this.original;return{wordTotal:t.length?d(t).length:0,charTotal:t.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split(),this.opts.containerHeightVar&&this.initHeightObserver())}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=d(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.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.opts.containerHeightVar&&this.el.style.removeProperty(a),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 r=this.createWordSpan(i,s);for(const p of l(s)){const g=this.createCharSpan(p);r.append(g)}t.append(r)}else{const r=this.createWordSpan(i);r.append(document.createTextNode(s)),t.append(r)}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(n.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(n.whitespace),this.opts.keepWhitespaceNodes||(e.textContent=h)):(e.classList.add(n.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(n.whitespace),t.textContent=h,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))}initHeightObserver(){this.el&&(this.resizeObserver=new ResizeObserver(()=>{const t=this.measureHeight();t>0&&this.el.style.setProperty(a,`${t}px`)}),this.resizeObserver.observe(this.el))}};
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ export interface TextSlicerOptions {
|
|
|
5
5
|
cssVariables?: boolean;
|
|
6
6
|
dataAttributes?: boolean;
|
|
7
7
|
keepWhitespaceNodes?: boolean;
|
|
8
|
-
/** Добавлять CSS-переменную с высотой контейнера: --container-height */
|
|
9
8
|
containerHeightVar?: boolean;
|
|
10
9
|
}
|
|
11
10
|
export interface TextSlicerMetrics {
|
|
@@ -29,6 +28,7 @@ export declare class TextSlicer {
|
|
|
29
28
|
private charIndex;
|
|
30
29
|
private mounted;
|
|
31
30
|
private heightLocked;
|
|
31
|
+
private resizeObserver?;
|
|
32
32
|
constructor(options?: TextSlicerOptions, callbacks?: TextSlicerCallbacks);
|
|
33
33
|
get metrics(): TextSlicerMetrics;
|
|
34
34
|
init(): void;
|
|
@@ -37,17 +37,13 @@ export declare class TextSlicer {
|
|
|
37
37
|
split(): void;
|
|
38
38
|
destroy(): void;
|
|
39
39
|
updateOptions(next: Partial<TextSlicerOptions>): void;
|
|
40
|
-
/** Зафиксировать текущую высоту контейнера */
|
|
41
40
|
lockHeight(): void;
|
|
42
|
-
/** Снять фиксацию высоты контейнера */
|
|
43
41
|
unlockHeight(): void;
|
|
44
42
|
private appendWords;
|
|
45
43
|
private appendChars;
|
|
46
44
|
private createWordSpan;
|
|
47
45
|
private createCharSpan;
|
|
48
46
|
private createSpaceSpan;
|
|
49
|
-
/** Измеряем layout-высоту, игнорируя визуальные трансформы потомков (фиксы для iOS Safari) */
|
|
50
47
|
private measureHeight;
|
|
51
|
-
|
|
52
|
-
private applyContainerHeightVar;
|
|
48
|
+
private initHeightObserver;
|
|
53
49
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
const m = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, containerHeightVar: !1 },
|
|
1
|
+
const m = { splitMode: "both", cssVariables: !1, dataAttributes: !1, keepWhitespaceNodes: !0, containerHeightVar: !1 }, h = Object.freeze({ word: "ts-word", char: "ts-char", whitespace: "ts-whitespace" }), a = " ", 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
|
-
}, d = (i) => i.split(
|
|
8
|
+
}, d = (i) => i.split(a), o = (i) => {
|
|
9
9
|
const t = {};
|
|
10
10
|
return Object.keys(i).forEach((e) => {
|
|
11
11
|
const s = i[e];
|
|
@@ -20,6 +20,7 @@ class y {
|
|
|
20
20
|
charIndex;
|
|
21
21
|
mounted;
|
|
22
22
|
heightLocked;
|
|
23
|
+
resizeObserver;
|
|
23
24
|
constructor(t = {}, e) {
|
|
24
25
|
const s = f(t.container);
|
|
25
26
|
this.el = s, this.original = ((r) => !!r && typeof HTMLElement < "u" && r instanceof HTMLElement)(s) ? s.textContent?.toString() ?? "" : "", this.opts = { ...m, ...o(t) }, this.callbacks = e, this.charIndex = 0, this.mounted = !1, this.heightLocked = !1;
|
|
@@ -29,7 +30,7 @@ class y {
|
|
|
29
30
|
return { wordTotal: t.length ? d(t).length : 0, charTotal: t.length, renderedAt: Date.now() };
|
|
30
31
|
}
|
|
31
32
|
init() {
|
|
32
|
-
this.el && (this.mounted = !0, this.split());
|
|
33
|
+
this.el && (this.mounted = !0, this.split(), this.opts.containerHeightVar && this.initHeightObserver());
|
|
33
34
|
}
|
|
34
35
|
reinit(t, e) {
|
|
35
36
|
this.el && (typeof t == "string" && (this.original = t), e && (this.opts = { ...this.opts, ...o(e) }), this.split());
|
|
@@ -41,10 +42,10 @@ class y {
|
|
|
41
42
|
if (!this.el) return;
|
|
42
43
|
this.clear(), this.charIndex = 0;
|
|
43
44
|
const t = this.original, e = document.createDocumentFragment(), s = d(t);
|
|
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.
|
|
45
|
+
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.callbacks?.onAfterRender?.(this.metrics);
|
|
45
46
|
}
|
|
46
47
|
destroy() {
|
|
47
|
-
this.el && (this.clear(), this.unlockHeight(), this.opts.containerHeightVar && this.el.style.removeProperty(c), this.mounted = !1);
|
|
48
|
+
this.el && (this.clear(), this.unlockHeight(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = void 0), this.opts.containerHeightVar && this.el.style.removeProperty(c), this.mounted = !1);
|
|
48
49
|
}
|
|
49
50
|
updateOptions(t) {
|
|
50
51
|
this.opts = { ...this.opts, ...o(t) }, this.mounted && this.split();
|
|
@@ -81,29 +82,30 @@ class y {
|
|
|
81
82
|
}
|
|
82
83
|
createWordSpan(t, e = "") {
|
|
83
84
|
const s = document.createElement("span");
|
|
84
|
-
return s.classList.add(
|
|
85
|
+
return s.classList.add(h.word), this.opts.dataAttributes && e && s.setAttribute("data-word", e), this.opts.cssVariables && s.style.setProperty("--word-index", String(t)), s;
|
|
85
86
|
}
|
|
86
87
|
createCharSpan(t) {
|
|
87
88
|
const e = document.createElement("span");
|
|
88
|
-
return e.textContent = t, this.opts.dataAttributes && e.setAttribute("data-char", t), t ===
|
|
89
|
+
return e.textContent = t, this.opts.dataAttributes && e.setAttribute("data-char", t), t === a ? (e.classList.add(h.whitespace), this.opts.keepWhitespaceNodes || (e.textContent = a)) : (e.classList.add(h.char), this.opts.cssVariables && e.style.setProperty("--char-index", String(this.charIndex)), this.charIndex += 1), e;
|
|
89
90
|
}
|
|
90
91
|
createSpaceSpan() {
|
|
91
92
|
const t = document.createElement("span");
|
|
92
|
-
return t.classList.add(
|
|
93
|
+
return t.classList.add(h.whitespace), t.textContent = a, t;
|
|
93
94
|
}
|
|
94
95
|
measureHeight() {
|
|
95
96
|
if (!this.el) return 0;
|
|
96
97
|
this.el.classList.add(l), this.el.offsetHeight;
|
|
97
|
-
let t = this.el.
|
|
98
|
+
let t = this.el.offsetHeight || this.el.clientHeight || 0;
|
|
98
99
|
return t || (t = Math.round(this.el.getBoundingClientRect().height)), this.el.classList.remove(l), Math.max(0, Math.ceil(t));
|
|
99
100
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
initHeightObserver() {
|
|
102
|
+
this.el && (this.resizeObserver = new ResizeObserver(() => {
|
|
103
|
+
const t = this.measureHeight();
|
|
104
|
+
t > 0 && this.el.style.setProperty(c, `${t}px`);
|
|
105
|
+
}), this.resizeObserver.observe(this.el));
|
|
104
106
|
}
|
|
105
107
|
}
|
|
106
108
|
export {
|
|
107
|
-
|
|
109
|
+
h as CLASSNAMES,
|
|
108
110
|
y as TextSlicer
|
|
109
111
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(n
|
|
1
|
+
(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):n((r=typeof globalThis<"u"?globalThis:r||self).TextSlicer={})})(this,function(r){"use strict";const n={splitMode:"both",cssVariables:!1,dataAttributes:!1,keepWhitespaceNodes:!0,containerHeightVar:!1},o=Object.freeze({word:"ts-word",char:"ts-char",whitespace:"ts-whitespace"}),a=" ",l="--container-height",d="ts-measuring",g=e=>typeof window>"u"||typeof document>"u"?null:e?typeof e=="string"?document.querySelector(e):e:null,p=e=>{const t=Intl.Segmenter;if(typeof t=="function"){const s=new t("en",{granularity:"grapheme"});return Array.from(s.segment(e),i=>i.segment)}return Array.from(e)},u=e=>e.split(a),c=e=>{const t={};return Object.keys(e).forEach(s=>{const i=e[s];i!==void 0&&(t[s]=i)}),t};r.CLASSNAMES=o,r.TextSlicer=class{el;original;opts;callbacks;charIndex;mounted;heightLocked;resizeObserver;constructor(e={},t){const s=g(e.container);this.el=s,this.original=(i=>!!i&&typeof HTMLElement<"u"&&i instanceof HTMLElement)(s)?s.textContent?.toString()??"":"",this.opts={...n,...c(e)},this.callbacks=t,this.charIndex=0,this.mounted=!1,this.heightLocked=!1}get metrics(){const e=this.original;return{wordTotal:e.length?u(e).length:0,charTotal:e.length,renderedAt:Date.now()}}init(){this.el&&(this.mounted=!0,this.split(),this.opts.containerHeightVar&&this.initHeightObserver())}reinit(e,t){this.el&&(typeof e=="string"&&(this.original=e),t&&(this.opts={...this.opts,...c(t)}),this.split())}clear(){this.el&&this.el.replaceChildren()}split(){if(!this.el)return;this.clear(),this.charIndex=0;const e=this.original,t=document.createDocumentFragment(),s=u(e);this.opts.splitMode==="chars"?this.appendChars(t,e):this.appendWords(t,s),this.el.appendChild(t),this.opts.cssVariables&&(this.el.style.setProperty("--word-total",String(s.length)),this.el.style.setProperty("--char-total",String(e.length))),this.callbacks?.onAfterRender?.(this.metrics)}destroy(){this.el&&(this.clear(),this.unlockHeight(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0),this.opts.containerHeightVar&&this.el.style.removeProperty(l),this.mounted=!1)}updateOptions(e){this.opts={...this.opts,...c(e)},this.mounted&&this.split()}lockHeight(){if(!this.el)return;const e=this.measureHeight();e>0&&(this.el.style.height=`${e}px`,this.heightLocked=!0)}unlockHeight(){this.el&&(this.el.style.removeProperty("height"),this.heightLocked=!1)}appendWords(e,t){t.forEach((s,i)=>{if(this.opts.splitMode==="both"){const h=this.createWordSpan(i,s);for(const f of p(s)){const m=this.createCharSpan(f);h.append(m)}e.append(h)}else{const h=this.createWordSpan(i);h.append(document.createTextNode(s)),e.append(h)}i<t.length-1&&e.append(this.createSpaceSpan())})}appendChars(e,t){for(const s of p(t)){const i=this.createCharSpan(s);e.append(i)}}createWordSpan(e,t=""){const s=document.createElement("span");return s.classList.add(o.word),this.opts.dataAttributes&&t&&s.setAttribute("data-word",t),this.opts.cssVariables&&s.style.setProperty("--word-index",String(e)),s}createCharSpan(e){const t=document.createElement("span");return t.textContent=e,this.opts.dataAttributes&&t.setAttribute("data-char",e),e===a?(t.classList.add(o.whitespace),this.opts.keepWhitespaceNodes||(t.textContent=a)):(t.classList.add(o.char),this.opts.cssVariables&&t.style.setProperty("--char-index",String(this.charIndex)),this.charIndex+=1),t}createSpaceSpan(){const e=document.createElement("span");return e.classList.add(o.whitespace),e.textContent=a,e}measureHeight(){if(!this.el)return 0;this.el.classList.add(d),this.el.offsetHeight;let e=this.el.offsetHeight||this.el.clientHeight||0;return e||(e=Math.round(this.el.getBoundingClientRect().height)),this.el.classList.remove(d),Math.max(0,Math.ceil(e))}initHeightObserver(){this.el&&(this.resizeObserver=new ResizeObserver(()=>{const e=this.measureHeight();e>0&&this.el.style.setProperty(l,`${e}px`)}),this.resizeObserver.observe(this.el))}},Object.defineProperty(r,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.5",
|
|
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",
|