situs-kit 0.1.0 → 0.1.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/README.md +138 -7
- package/package.json +1 -1
- package/dist/chunk-6q0gpfmg.js +0 -2
- package/dist/chunk-hw9vz8sc.js +0 -2
- package/dist/chunk-jsnqy01r.js +0 -2
- package/dist/chunk-mxm1ec0e.js +0 -2
package/README.md
CHANGED
|
@@ -1,15 +1,146 @@
|
|
|
1
|
-
#
|
|
1
|
+
# situs-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A zero-dependency creative developer toolkit for text splitting and DOM animation.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
4
6
|
|
|
5
7
|
```bash
|
|
6
|
-
|
|
8
|
+
npm install situs-kit
|
|
7
9
|
```
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
## SplitText
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
Split text into characters, words, and lines while preserving inline HTML elements like `<a>`, `<em>`, `<strong>`, and `<u>`.
|
|
14
|
+
|
|
15
|
+
### Basic Usage
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { SplitText } from "situs-kit/split-text";
|
|
19
|
+
|
|
20
|
+
const split = new SplitText("#my-text", {
|
|
21
|
+
type: ["chars", "words", "lines"],
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
// Animate each character
|
|
25
|
+
split.chars.forEach((char, i) => {
|
|
26
|
+
char.animate(
|
|
27
|
+
[
|
|
28
|
+
{ opacity: 0, transform: "translateY(100%)" },
|
|
29
|
+
{ opacity: 1, transform: "translateY(0)" },
|
|
30
|
+
],
|
|
31
|
+
{ duration: 400, delay: i * 30, easing: "ease", fill: "both" }
|
|
32
|
+
);
|
|
33
|
+
});
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Options
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
new SplitText(element, {
|
|
40
|
+
type: ["chars", "words", "lines"], // which levels to split
|
|
41
|
+
tag: "span", // wrapper element tag
|
|
42
|
+
mask: true, // wrap in overflow:hidden containers
|
|
43
|
+
resize: true, // auto-reflow lines on resize
|
|
44
|
+
style: {
|
|
45
|
+
chars: { color: "red" },
|
|
46
|
+
words: {},
|
|
47
|
+
lines: {},
|
|
48
|
+
mask: {},
|
|
49
|
+
},
|
|
50
|
+
class: {
|
|
51
|
+
chars: "my-char",
|
|
52
|
+
words: "my-word",
|
|
53
|
+
lines: "my-line",
|
|
54
|
+
mask: "my-mask",
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
| Option | Type | Default | Description |
|
|
60
|
+
|--------|------|---------|-------------|
|
|
61
|
+
| `type` | `string \| string[]` | `["chars", "words", "lines"]` | Split granularity |
|
|
62
|
+
| `tag` | `string` | `"span"` | Wrapper element tag |
|
|
63
|
+
| `mask` | `boolean \| string[]` | `false` | Create overflow-hidden wrappers |
|
|
64
|
+
| `resize` | `boolean` | `true` | Auto-reflow lines on window resize |
|
|
65
|
+
| `style` | `object` | — | Inline styles per split type |
|
|
66
|
+
| `class` | `object` | — | CSS classes per split type |
|
|
67
|
+
|
|
68
|
+
### Properties
|
|
69
|
+
|
|
70
|
+
| Property | Type | Description |
|
|
71
|
+
|----------|------|-------------|
|
|
72
|
+
| `dom` | `HTMLElement` | The original element |
|
|
73
|
+
| `chars` | `HTMLElement[]` | Character elements |
|
|
74
|
+
| `words` | `HTMLElement[]` | Word elements |
|
|
75
|
+
| `lines` | `HTMLElement[]` | Line elements |
|
|
76
|
+
| `masks` | `{ chars, words, lines }` | Mask wrapper elements |
|
|
77
|
+
|
|
78
|
+
### Methods
|
|
79
|
+
|
|
80
|
+
#### `reflow()`
|
|
81
|
+
|
|
82
|
+
Recalculate line groupings without re-splitting. Called automatically on resize.
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
split.reflow();
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
#### `revert()`
|
|
89
|
+
|
|
90
|
+
Restore the element to its original HTML.
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
split.revert();
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
#### `destroy()`
|
|
97
|
+
|
|
98
|
+
Remove resize observers and event listeners.
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
split.destroy();
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Styling with CSS
|
|
105
|
+
|
|
106
|
+
Split elements have data attributes for easy targeting:
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
[data-char] { display: inline-block; }
|
|
110
|
+
[data-word] { display: inline-block; }
|
|
111
|
+
[data-line] { display: block; }
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### HTML Preservation
|
|
115
|
+
|
|
116
|
+
Inline elements like `<a>`, `<em>`, `<strong>`, `<u>`, `<i>`, and `<b>` are preserved and cloned around split elements. Opaque elements like `<svg>`, `<img>`, and `<br>` are treated as single units.
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<!-- Input -->
|
|
120
|
+
<p id="text">Hello <strong>world</strong></p>
|
|
121
|
+
|
|
122
|
+
<!-- After split, <strong> wraps are preserved -->
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Masking
|
|
126
|
+
|
|
127
|
+
Masks wrap split elements in `overflow: hidden` containers, useful for reveal animations:
|
|
128
|
+
|
|
129
|
+
```ts
|
|
130
|
+
const split = new SplitText("#text", {
|
|
131
|
+
type: ["words", "lines"],
|
|
132
|
+
mask: ["lines"],
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
// Slide words up from behind line masks
|
|
136
|
+
split.lines.forEach((line, i) => {
|
|
137
|
+
line.animate(
|
|
138
|
+
[{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
|
|
139
|
+
{ duration: 500, delay: i * 60, easing: "ease", fill: "both" }
|
|
140
|
+
);
|
|
141
|
+
});
|
|
13
142
|
```
|
|
14
143
|
|
|
15
|
-
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
MIT
|
package/package.json
CHANGED
package/dist/chunk-6q0gpfmg.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
function X(q,y){return typeof globalThis.getComputedStyle==="function"?globalThis.getComputedStyle(q,y??null):null}var P=1,u=2,Z=4,f="inline-block",I="nowrap",A="baseline",_="0px",g="block",E=/^\s+$/,p=/(\s+)/,r=",div,span,svg,img,br,hr,canvas,video,audio,iframe,input,textarea,select,button,picture,figure,",L={u:"underline",ins:"underline",s:"line-through",strike:"line-through",del:"line-through"};class i{dom;chars;words;lines;_o;_i;_j;_p;_k;_q;_b=[];_l=new Map;_f=null;_e=0;_g=!1;_a="";_c;_d;constructor(q,y={}){let z=typeof q==="string"?document.querySelector(q):q;if(!z)throw Error("SplitText: element not found");this.dom=z,this._o=z.innerHTML,this.chars=[],this.words=[],this.lines=[];let J=y.type?Array.isArray(y.type)?y.type:[y.type]:["chars","words","lines"],H=0;for(let M of J)if(M==="chars")H|=P;else if(M==="words")H|=u;else if(M==="lines")H|=Z;if(this._i=H,this._j=y.tag??"span",this._p=y.charsClass??"char",this._k=y.wordsClass??"word",this._q=y.linesClass??"line",this._c=y.style,this._d=y.class,this._t(),(y.resize??!0)&&H&Z)this._u()}_m(q,y){let z=document.createElement(this._j);if(z.className=q,z.style.display=f,y!==void 0)z.textContent=y;return z}_h(q,y,z,J){if(z){let{outer:H,inner:M}=z();if(M.appendChild(y),J)this._l.set(J,H);q.appendChild(H)}else q.appendChild(y)}_n(q,y,z){if(q.style.textDecoration=y,z)q.style.textDecorationColor=z}_t(){this._g=!0;let q=this.dom,y=X(q),z=y?parseFloat(y.letterSpacing)||0:0;if(this._a=y?y.textIndent:"",this._a&&this._a!==_)q.style.textIndent="0";let J=this._i,H=!!(J&P),M=!!(J&u),b=!!(J&Z),Q=M||b,U=new Map,V=(R)=>{for(let $ of Array.from(R.childNodes))if($.nodeType===1){let S=$.tagName.toLowerCase();if(L[S]){let G=X($)?.textDecorationColor;if(G)U.set($,G)}V($)}};V(q);let N=Array.from(q.childNodes),D=document.createDocumentFragment();q.replaceChildren();let v=(R,$,S,G)=>{if(R.nodeType===3){let K=(R.textContent??"").split(p);for(let Y of K){if(!Y)continue;if(E.test(Y)){D.appendChild(document.createTextNode(Y));continue}let F=Q?this._m(M?this._k:""):null;if(F){if(F.style.whiteSpace=I,S&&!H)this._n(F,S,G)}if(H){let j=[...Y];for(let T=0;T<j.length;T++){let k=this._m(this._p,j[T]);if(z&&T<j.length-1)k.style.marginRight=`${z}px`;if(S)this._n(k,S,G);if(this.chars.push(k),this._c?.chars)Object.assign(k.style,this._c.chars);if(this._d?.chars)k.classList.add(this._d.chars);if(F)F.appendChild(k)}if(!F)if($){let{outer:T,inner:k}=$();for(let h of this.chars.slice(-j.length))k.appendChild(h);D.appendChild(T)}else for(let T of this.chars.slice(-j.length))D.appendChild(T)}else if(F){if(F.textContent=Y,z)F.style.letterSpacing=`${z}px`}if(F){if(M){if(this.words.push(F),this._c?.words)Object.assign(F.style,this._c.words);if(this._d?.words)F.classList.add(this._d.words)}this._b.push(F),this._h(D,F,$,F)}else if(!H)this._h(D,document.createTextNode(Y),$)}return}if(R.nodeType!==1)return;let O=R,C=O.tagName.toLowerCase();if(r.includes(","+C+",")){let K=O.cloneNode(!0);if(S)this._n(K,S,G);let Y=X(O)?.verticalAlign;if(Y&&Y!==A)K.style.verticalAlign=Y;if(Q){let F=this._m(M?this._k:"");if(F.style.whiteSpace=I,Y&&Y!==A)F.style.verticalAlign=Y;if(F.appendChild(K),M){if(this.words.push(F),this._c?.words)Object.assign(F.style,this._c.words);if(this._d?.words)F.classList.add(this._d.words)}this._b.push(F),this._h(D,F,$,F)}else this._h(D,K,$);return}let W=()=>{let K=O.cloneNode(!1);if($){let{outer:Y,inner:F}=$();return F.appendChild(K),{outer:Y,inner:K}}return{outer:K,inner:K}},x=L[C],a=x?S?`${S} ${x}`:x:S,m=x?U.get(O)||G:G;for(let K of Array.from(O.childNodes))v(K,W,a,m)};for(let R of N)v(R,null,"","");q.appendChild(D);let B=!!(this._a&&this._a!==_);if(b)this._v(B);else if(B){let R=M?this.words[0]:H?this.chars[0]:null;if(R)R.style.marginLeft=this._a,q.style.textIndent="0"}this._g=!1}_v(q){if(q&&this._b[0])this._b[0].style.marginLeft=this._a;this._r();let y=[];if(typeof document.fonts?.status==="string"&&document.fonts.status!=="loaded")y.push(document.fonts.ready);let z=this.dom.querySelectorAll("img");for(let J=0;J<z.length;J++){let H=z[J];if(!H.complete)y.push(new Promise((M)=>{H.addEventListener("load",M,{once:!0}),H.addEventListener("error",M,{once:!0})}))}if(y.length){let J=this.dom.offsetHeight;Promise.all(y).then(()=>{if(this.dom.offsetHeight!==J)this.reflow()})}}_s(q){return this._l.get(q)??q}_r(){let q=this._b;if(!q.length)return;let y=q[0].offsetTop,z=y+q[0].offsetHeight,J=[],H=[];for(let Q of q){let U=Q.offsetTop,V=U+Q.offsetHeight;if(U<z&&V>y)y=Math.min(y,U),z=Math.max(z,V);else H.push(J),J=[],y=U,z=V;J.push(Q)}if(J.length)H.push(J);let M=!!(this._a&&this._a!==_);if(M&&q[0])q[0].style.marginLeft="";let b=document.createDocumentFragment();for(let Q=0;Q<H.length;Q++){let U=H[Q],V=document.createElement(this._j);if(V.className=this._q,V.style.display=g,Q===0&&M)V.style.paddingLeft=this._a;for(let N=0;N<U.length;N++){if(N>0)V.appendChild(document.createTextNode(" "));V.appendChild(this._s(U[N]))}if(this.lines.push(V),this._c?.lines)Object.assign(V.style,this._c.lines);if(this._d?.lines)V.classList.add(this._d.lines);b.appendChild(V)}this.dom.replaceChildren(b)}_u(){let q=this.dom.offsetParent?this.dom.offsetParent.offsetWidth:window.innerWidth,y=()=>{if(this._g)return;let J=this.dom.offsetParent,H=J?J.offsetWidth:window.innerWidth;if(H===q)return;if(q=H,this._e)cancelAnimationFrame(this._e);this._e=requestAnimationFrame(()=>this.reflow())};this._f=new ResizeObserver(y);let z=this.dom.offsetParent??this.dom.parentElement;if(z)this._f.observe(z);else this._f.observe(this.dom)}reflow(){if(!(this._i&Z)||this._g)return;let q=document.createDocumentFragment();for(let y=0;y<this._b.length;y++){if(y>0)q.appendChild(document.createTextNode(" "));q.appendChild(this._s(this._b[y]))}if(this.dom.replaceChildren(q),this.lines.length=0,this._a&&this._a!==_&&this._b[0])this._b[0].style.marginLeft=this._a;this._r()}revert(){this.destroy(),this.dom.innerHTML=this._o,this.chars.length=0,this.words.length=0,this._b.length=0,this._l.clear(),this.lines.length=0}destroy(){if(this._e)cancelAnimationFrame(this._e),this._e=0;if(this._f)this._f.disconnect(),this._f=null}}
|
|
2
|
-
export{i as a};
|
package/dist/chunk-hw9vz8sc.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
function X(q,y){return typeof globalThis.getComputedStyle==="function"?globalThis.getComputedStyle(q,y??null):null}var P=1,u=2,Z=4,f="inline-block",I="nowrap",A="baseline",_="0px",g="block",E=/^\s+$/,p=/(\s+)/,i=",div,span,svg,img,br,hr,canvas,video,audio,iframe,input,textarea,select,button,picture,figure,",L={u:"underline",ins:"underline",s:"line-through",strike:"line-through",del:"line-through"};class r{dom;chars;words;lines;_m;_g;_h;_n;_i;_o;_b=[];_j=new Map;_d=null;_c=0;_e=!1;_a="";constructor(q,y={}){let z=typeof q==="string"?document.querySelector(q):q;if(!z)throw Error("SplitText: element not found");this.dom=z,this._m=z.innerHTML,this.chars=[],this.words=[],this.lines=[];let J=y.type?Array.isArray(y.type)?y.type:[y.type]:["chars","words","lines"],F=0;for(let M of J)if(M==="chars")F|=P;else if(M==="words")F|=u;else if(M==="lines")F|=Z;if(this._g=F,this._h=y.tag??"span",this._n=y.charsClass??"char",this._i=y.wordsClass??"word",this._o=y.linesClass??"line",this._r(),(y.resize??!0)&&F&Z)this._s()}_k(q,y){let z=document.createElement(this._h);if(z.className=q,z.style.display=f,y!==void 0)z.textContent=y;return z}_f(q,y,z,J){if(z){let{outer:F,inner:M}=z();if(M.appendChild(y),J)this._j.set(J,F);q.appendChild(F)}else q.appendChild(y)}_l(q,y,z){if(q.style.textDecoration=y,z)q.style.textDecorationColor=z}_r(){this._e=!0;let q=this.dom,y=X(q),z=y?parseFloat(y.letterSpacing)||0:0;if(this._a=y?y.textIndent:"",this._a&&this._a!==_)q.style.textIndent="0";let J=this._g,F=!!(J&P),M=!!(J&u),b=!!(J&Z),Q=M||b,U=new Map,Y=(R)=>{for(let $ of Array.from(R.childNodes))if($.nodeType===1){let S=$.tagName.toLowerCase();if(L[S]){let G=X($)?.textDecorationColor;if(G)U.set($,G)}Y($)}};Y(q);let k=Array.from(q.childNodes),D=document.createDocumentFragment();q.replaceChildren();let v=(R,$,S,G)=>{if(R.nodeType===3){let K=(R.textContent??"").split(p);for(let V of K){if(!V)continue;if(E.test(V)){D.appendChild(document.createTextNode(V));continue}let H=Q?this._k(M?this._i:""):null;if(H){if(H.style.whiteSpace=I,S&&!F)this._l(H,S,G)}if(F){let j=[...V];for(let T=0;T<j.length;T++){let O=this._k(this._n,j[T]);if(z&&T<j.length-1)O.style.marginRight=`${z}px`;if(S)this._l(O,S,G);if(this.chars.push(O),H)H.appendChild(O)}if(!H)if($){let{outer:T,inner:O}=$();for(let h of this.chars.slice(-j.length))O.appendChild(h);D.appendChild(T)}else for(let T of this.chars.slice(-j.length))D.appendChild(T)}else if(H){if(H.textContent=V,z)H.style.letterSpacing=`${z}px`}if(H){if(M)this.words.push(H);this._b.push(H),this._f(D,H,$,H)}else if(!F)this._f(D,document.createTextNode(V),$)}return}if(R.nodeType!==1)return;let N=R,C=N.tagName.toLowerCase();if(i.includes(","+C+",")){let K=N.cloneNode(!0);if(S)this._l(K,S,G);let V=X(N)?.verticalAlign;if(V&&V!==A)K.style.verticalAlign=V;if(Q){let H=this._k(M?this._i:"");if(H.style.whiteSpace=I,V&&V!==A)H.style.verticalAlign=V;if(H.appendChild(K),M)this.words.push(H);this._b.push(H),this._f(D,H,$,H)}else this._f(D,K,$);return}let W=()=>{let K=N.cloneNode(!1);if($){let{outer:V,inner:H}=$();return H.appendChild(K),{outer:V,inner:K}}return{outer:K,inner:K}},x=L[C],a=x?S?`${S} ${x}`:x:S,m=x?U.get(N)||G:G;for(let K of Array.from(N.childNodes))v(K,W,a,m)};for(let R of k)v(R,null,"","");q.appendChild(D);let B=!!(this._a&&this._a!==_);if(b)this._t(B);else if(B){let R=M?this.words[0]:F?this.chars[0]:null;if(R)R.style.marginLeft=this._a,q.style.textIndent="0"}this._e=!1}_t(q){if(q&&this._b[0])this._b[0].style.marginLeft=this._a;this._p();let y=[];if(typeof document.fonts?.status==="string"&&document.fonts.status!=="loaded")y.push(document.fonts.ready);let z=this.dom.querySelectorAll("img");for(let J=0;J<z.length;J++){let F=z[J];if(!F.complete)y.push(new Promise((M)=>{F.addEventListener("load",M,{once:!0}),F.addEventListener("error",M,{once:!0})}))}if(y.length){let J=this.dom.offsetHeight;Promise.all(y).then(()=>{if(this.dom.offsetHeight!==J)this.reflow()})}}_q(q){return this._j.get(q)??q}_p(){let q=this._b;if(!q.length)return;let y=q[0].offsetTop,z=y+q[0].offsetHeight,J=[],F=[];for(let Q of q){let U=Q.offsetTop,Y=U+Q.offsetHeight;if(U<z&&Y>y)y=Math.min(y,U),z=Math.max(z,Y);else F.push(J),J=[],y=U,z=Y;J.push(Q)}if(J.length)F.push(J);let M=!!(this._a&&this._a!==_);if(M&&q[0])q[0].style.marginLeft="";let b=document.createDocumentFragment();for(let Q=0;Q<F.length;Q++){let U=F[Q],Y=document.createElement(this._h);if(Y.className=this._o,Y.style.display=g,Q===0&&M)Y.style.paddingLeft=this._a;for(let k=0;k<U.length;k++){if(k>0)Y.appendChild(document.createTextNode(" "));Y.appendChild(this._q(U[k]))}this.lines.push(Y),b.appendChild(Y)}this.dom.replaceChildren(b)}_s(){let q=this.dom.offsetParent?this.dom.offsetParent.offsetWidth:window.innerWidth,y=()=>{if(this._e)return;let J=this.dom.offsetParent,F=J?J.offsetWidth:window.innerWidth;if(F===q)return;if(q=F,this._c)cancelAnimationFrame(this._c);this._c=requestAnimationFrame(()=>this.reflow())};this._d=new ResizeObserver(y);let z=this.dom.offsetParent??this.dom.parentElement;if(z)this._d.observe(z);else this._d.observe(this.dom)}reflow(){if(!(this._g&Z)||this._e)return;let q=document.createDocumentFragment();for(let y=0;y<this._b.length;y++){if(y>0)q.appendChild(document.createTextNode(" "));q.appendChild(this._q(this._b[y]))}if(this.dom.replaceChildren(q),this.lines.length=0,this._a&&this._a!==_&&this._b[0])this._b[0].style.marginLeft=this._a;this._p()}revert(){this.destroy(),this.dom.innerHTML=this._m,this.chars.length=0,this.words.length=0,this._b.length=0,this._j.clear(),this.lines.length=0}destroy(){if(this._c)cancelAnimationFrame(this._c),this._c=0;if(this._d)this._d.disconnect(),this._d=null}}
|
|
2
|
-
export{r as a};
|
package/dist/chunk-jsnqy01r.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
function v(z,q){return typeof globalThis.getComputedStyle==="function"?globalThis.getComputedStyle(z,q??null):null}var P=1,Z=2,x=4,u="inline-block",A="nowrap",W="baseline",k="0px",h="block",i=/^\s+$/,p=/(\s+)/,r=",div,span,svg,img,br,hr,canvas,video,audio,iframe,input,textarea,select,button,picture,figure,",g={u:"underline",ins:"underline",s:"line-through",strike:"line-through",del:"line-through"};class c{dom;chars;words;lines;masks;_o;_k;_p;_g;_d=[];_l=new Map;_f=null;_e=0;_h=!1;_a="";_b;_c;constructor(z,q={}){let F=typeof z==="string"?document.querySelector(z):z;if(!F)throw Error("SplitText: element not found");this.dom=F,this._o=F.innerHTML,this.chars=[],this.words=[],this.lines=[],this.masks={chars:[],words:[],lines:[]};let M=q.type?Array.isArray(q.type)?q.type:[q.type]:["chars","words","lines"],H=0;for(let R of M)if(R==="chars")H|=P;else if(R==="words")H|=Z;else if(R==="lines")H|=x;this._k=H,this._g=q.tag??"span";let V=0;if(q.mask===!0)V=H;else if(Array.isArray(q.mask)){for(let R of q.mask)if(R==="chars")V|=P;else if(R==="words")V|=Z;else if(R==="lines")V|=x}if(this._p=V,this._b=q.style,this._c=q.class,this._s(),(q.resize??!0)&&H&x)this._t()}_m(z,q){let F=document.createElement(this._g);if(z)F.dataset[z]="";if(F.style.display=u,q!==void 0)F.textContent=q;return F}_u(z){let q=document.createElement(this._g);if(q.dataset.mask="",q.style.overflow="hidden",q.style.display=z,this._b?.mask)Object.assign(q.style,this._b.mask);if(this._c?.mask)q.classList.add(this._c.mask);return q}_i(z,q,F,M){if(this._p&q){let H=this._u(F);return H.appendChild(z),M.push(H),H}return z}_j(z,q,F,M){if(F){let{outer:H,inner:V}=F();if(V.appendChild(q),M)this._l.set(M,H);z.appendChild(H)}else z.appendChild(q)}_n(z,q,F){if(z.style.textDecoration=q,F)z.style.textDecorationColor=F}_s(){this._h=!0;let z=this.dom,q=v(z),F=q?parseFloat(q.letterSpacing)||0:0;if(this._a=q?q.textIndent:"",this._a&&this._a!==k)z.style.textIndent="0";let M=this._k,H=!!(M&P),V=!!(M&Z),R=!!(M&x),D=V||R,T=new Map,Y=(G)=>{for(let Q of Array.from(G.childNodes))if(Q.nodeType===1){let K=Q.tagName.toLowerCase();if(g[K]){let b=v(Q)?.textDecorationColor;if(b)T.set(Q,b)}Y(Q)}};Y(z);let C=Array.from(z.childNodes),S=document.createDocumentFragment();z.replaceChildren();let B=(G,Q,K,b)=>{if(G.nodeType===3){let U=(G.textContent??"").split(p);for(let $ of U){if(!$)continue;if(i.test($)){S.appendChild(document.createTextNode($));continue}let J=D?this._m(V?"word":""):null;if(J){if(J.style.whiteSpace=A,K&&!H)this._n(J,K,b)}if(H){let O=[...$];for(let y=0;y<O.length;y++){let N=this._m("char",O[y]);if(F&&y<O.length-1)N.style.marginRight=`${F}px`;if(K)this._n(N,K,b);if(this.chars.push(N),this._b?.chars)Object.assign(N.style,this._b.chars);if(this._c?.chars)N.classList.add(this._c.chars);let X=this._i(N,P,u,this.masks.chars);if(J)J.appendChild(X)}if(!J)if(Q){let{outer:y,inner:N}=Q();for(let X of this.chars.slice(-O.length)){let a=X.parentElement?.dataset?.mask!==void 0?X.parentElement:X;N.appendChild(a)}S.appendChild(y)}else for(let y of this.chars.slice(-O.length)){let N=y.parentElement?.dataset?.mask!==void 0?y.parentElement:y;S.appendChild(N)}}else if(J){if(J.textContent=$,F)J.style.letterSpacing=`${F}px`}if(J){if(V){if(this.words.push(J),this._b?.words)Object.assign(J.style,this._b.words);if(this._c?.words)J.classList.add(this._c.words)}this._d.push(J);let O=this._i(J,Z,u,this.masks.words);this._j(S,O,Q,J)}else if(!H)this._j(S,document.createTextNode($),Q)}return}if(G.nodeType!==1)return;let j=G,L=j.tagName.toLowerCase();if(r.includes(","+L+",")){let U=j.cloneNode(!0);if(K)this._n(U,K,b);let $=v(j)?.verticalAlign;if($&&$!==W)U.style.verticalAlign=$;if(D){let J=this._m(V?"word":"");if(J.style.whiteSpace=A,$&&$!==W)J.style.verticalAlign=$;if(J.appendChild(U),V){if(this.words.push(J),this._b?.words)Object.assign(J.style,this._b.words);if(this._c?.words)J.classList.add(this._c.words)}this._d.push(J);let O=this._i(J,Z,u,this.masks.words);this._j(S,O,Q,J)}else this._j(S,U,Q);return}let m=()=>{let U=j.cloneNode(!1);if(Q){let{outer:$,inner:J}=Q();return J.appendChild(U),{outer:$,inner:U}}return{outer:U,inner:U}},_=g[L],f=_?K?`${K} ${_}`:_:K,E=_?T.get(j)||b:b;for(let U of Array.from(j.childNodes))B(U,m,f,E)};for(let G of C)B(G,null,"","");z.appendChild(S);let I=!!(this._a&&this._a!==k);if(R)this._v(I);else if(I){let G=V?this.words[0]:H?this.chars[0]:null;if(G)G.style.marginLeft=this._a,z.style.textIndent="0"}this._h=!1}_v(z){if(z&&this._d[0])this._d[0].style.marginLeft=this._a;this._q();let q=[];if(typeof document.fonts?.status==="string"&&document.fonts.status!=="loaded")q.push(document.fonts.ready);let F=this.dom.querySelectorAll("img");for(let M=0;M<F.length;M++){let H=F[M];if(!H.complete)q.push(new Promise((V)=>{H.addEventListener("load",V,{once:!0}),H.addEventListener("error",V,{once:!0})}))}if(q.length){let M=this.dom.offsetHeight;Promise.all(q).then(()=>{if(this.dom.offsetHeight!==M)this.reflow()})}}_r(z){return this._l.get(z)??z}_q(){let z=this._d;if(!z.length)return;let q=z[0].offsetTop,F=q+z[0].offsetHeight,M=[],H=[];for(let D of z){let T=D.offsetTop,Y=T+D.offsetHeight;if(T<F&&Y>q)q=Math.min(q,T),F=Math.max(F,Y);else H.push(M),M=[],q=T,F=Y;M.push(D)}if(M.length)H.push(M);let V=!!(this._a&&this._a!==k);if(V&&z[0])z[0].style.marginLeft="";let R=document.createDocumentFragment();for(let D=0;D<H.length;D++){let T=H[D],Y=document.createElement(this._g);if(Y.dataset.line="",Y.style.display=h,D===0&&V)Y.style.paddingLeft=this._a;for(let S=0;S<T.length;S++){if(S>0)Y.appendChild(document.createTextNode(" "));Y.appendChild(this._r(T[S]))}if(this.lines.push(Y),this._b?.lines)Object.assign(Y.style,this._b.lines);if(this._c?.lines)Y.classList.add(this._c.lines);let C=this._i(Y,x,h,this.masks.lines);R.appendChild(C)}this.dom.replaceChildren(R)}_t(){let z=this.dom.offsetParent?this.dom.offsetParent.offsetWidth:window.innerWidth,q=()=>{if(this._h)return;let M=this.dom.offsetParent,H=M?M.offsetWidth:window.innerWidth;if(H===z)return;if(z=H,this._e)cancelAnimationFrame(this._e);this._e=requestAnimationFrame(()=>this.reflow())};this._f=new ResizeObserver(q);let F=this.dom.offsetParent??this.dom.parentElement;if(F)this._f.observe(F);else this._f.observe(this.dom)}reflow(){if(!(this._k&x)||this._h)return;let z=document.createDocumentFragment();for(let q=0;q<this._d.length;q++){if(q>0)z.appendChild(document.createTextNode(" "));z.appendChild(this._r(this._d[q]))}if(this.dom.replaceChildren(z),this.lines.length=0,this.masks.lines.length=0,this._a&&this._a!==k&&this._d[0])this._d[0].style.marginLeft=this._a;this._q()}revert(){this.destroy(),this.dom.innerHTML=this._o,this.chars.length=0,this.words.length=0,this._d.length=0,this._l.clear(),this.lines.length=0,this.masks.chars.length=0,this.masks.words.length=0,this.masks.lines.length=0}destroy(){if(this._e)cancelAnimationFrame(this._e),this._e=0;if(this._f)this._f.disconnect(),this._f=null}}
|
|
2
|
-
export{c as a};
|
package/dist/chunk-mxm1ec0e.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
function B(q,y){return typeof globalThis.getComputedStyle==="function"?globalThis.getComputedStyle(q,y??null):null}var P=1,I=2,X=4,E="inline-block",A="nowrap",L="baseline",Z="0px",p=/^\s+$/,g=/(\s+)/,f=",div,span,svg,img,br,hr,canvas,video,audio,iframe,input,textarea,select,button,picture,figure,",u={u:"underline",ins:"underline",s:"line-through",strike:"line-through",del:"line-through"};class i{dom;chars;words;lines;_k;_g;_h;_l;_i;_m;_b=[];_f=new Map;_d=null;_c=0;_e=!1;_a="";constructor(q,y={}){let F=typeof q==="string"?document.querySelector(q):q;if(!F)throw Error("SplitText: element not found");this.dom=F,this._k=F.innerHTML,this.chars=[],this.words=[],this.lines=[];let J=y.type?Array.isArray(y.type)?y.type:[y.type]:["chars","words","lines"],H=0;for(let M of J)if(M==="chars")H|=P;else if(M==="words")H|=I;else if(M==="lines")H|=X;if(this._g=H,this._h=y.tag??"span",this._l=y.charsClass??"char",this._i=y.wordsClass??"word",this._m=y.linesClass??"line",this._p(),(y.resize??!0)&&H&X)this._q()}_j(q,y){let F=document.createElement(this._h);if(F.className=q,F.style.display=E,y!==void 0)F.textContent=y;return F}_p(){this._e=!0;let q=this.dom,y=B(q),F=y?parseFloat(y.letterSpacing)||0:0;if(this._a=y?y.textIndent:"",this._a&&this._a!==Z)q.style.textIndent="0";let J=this._g,H=!!(J&P),M=!!(J&I),j=!!(J&X),U=M||j,k=new Map,Q=(D)=>{for(let K of Array.from(D.childNodes))if(K.nodeType===1){let G=K.tagName.toLowerCase();if(u[G]){let T=B(K)?.textDecorationColor;if(T)k.set(K,T)}Q(K)}};Q(q);let O=Array.from(q.childNodes),S=document.createDocumentFragment();q.replaceChildren();let _=(D,K,G,T)=>{if(D.nodeType===3){let Y=(D.textContent??"").split(g);for(let $ of Y){if(!$)continue;if(p.test($)){S.appendChild(document.createTextNode($));continue}let z=U?this._j(M?this._i:""):null;if(z){if(z.style.whiteSpace=A,G&&!H){if(z.style.textDecoration=G,T)z.style.textDecorationColor=T}}if(H){let V=[...$];for(let R=0;R<V.length;R++){let N=this._j(this._l,V[R]);if(F&&R<V.length-1)N.style.marginRight=`${F}px`;if(G){if(N.style.textDecoration=G,T)N.style.textDecorationColor=T}if(this.chars.push(N),z)z.appendChild(N)}if(!z)if(K){let{outer:R,inner:N}=K();for(let h of this.chars.slice(-V.length))N.appendChild(h);S.appendChild(R)}else for(let R of this.chars.slice(-V.length))S.appendChild(R)}else if(z){if(z.textContent=$,F)z.style.letterSpacing=`${F}px`}if(z){if(M)this.words.push(z);if(this._b.push(z),K){let{outer:V,inner:R}=K();R.appendChild(z),this._f.set(z,V),S.appendChild(V)}else S.appendChild(z)}else if(!H){let V=document.createTextNode($);if(K){let{outer:R,inner:N}=K();N.appendChild(V),S.appendChild(R)}else S.appendChild(V)}}return}if(D.nodeType!==1)return;let b=D,C=b.tagName.toLowerCase();if(f.includes(","+C+",")){let Y=b.cloneNode(!0);if(G){if(Y.style.textDecoration=G,T)Y.style.textDecorationColor=T}let $=B(b)?.verticalAlign;if($&&$!==L)Y.style.verticalAlign=$;if(U){let z=this._j(M?this._i:"");if(z.style.whiteSpace=A,$&&$!==L)z.style.verticalAlign=$;if(z.appendChild(Y),M)this.words.push(z);if(this._b.push(z),K){let{outer:V,inner:R}=K();R.appendChild(z),this._f.set(z,V),S.appendChild(V)}else S.appendChild(z)}else if(K){let{outer:z,inner:V}=K();V.appendChild(Y),S.appendChild(z)}else S.appendChild(Y);return}let W=()=>{let Y=b.cloneNode(!1);if(K){let{outer:$,inner:z}=K();return z.appendChild(Y),{outer:$,inner:Y}}return{outer:Y,inner:Y}},x=u[C],a=x?G?`${G} ${x}`:x:G,m=x?k.get(b)||T:T;for(let Y of Array.from(b.childNodes))_(Y,W,a,m)};for(let D of O)_(D,null,"","");q.appendChild(S);let v=!!(this._a&&this._a!==Z);if(j)this._r(v);else if(v){let D=M?this.words[0]:H?this.chars[0]:null;if(D)D.style.marginLeft=this._a,q.style.textIndent="0"}this._e=!1}_r(q){if(q&&this._b[0])this._b[0].style.marginLeft=this._a;this._n();let y=[];if(typeof document.fonts?.status==="string"&&document.fonts.status!=="loaded")y.push(document.fonts.ready);let F=this.dom.querySelectorAll("img");for(let J=0;J<F.length;J++){let H=F[J];if(!H.complete)y.push(new Promise((M)=>{H.addEventListener("load",M,{once:!0}),H.addEventListener("error",M,{once:!0})}))}if(y.length){let J=this.dom.offsetHeight;Promise.all(y).then(()=>{if(this.dom.offsetHeight!==J)this.reflow()})}}_o(q){return this._f.get(q)??q}_n(){let q=this._b.length?this._b:Array.from(this.dom.children);if(!q.length)return;let y=q[0].offsetTop,F=y+q[0].offsetHeight,J=[],H=[];for(let U of q){let k=U.offsetTop,Q=k+U.offsetHeight;if(k<F&&Q>y)y=Math.min(y,k),F=Math.max(F,Q);else H.push(J),J=[],y=k,F=Q;J.push(U)}if(J.length)H.push(J);let M=!!(this._a&&this._a!==Z);if(M&&this._b[0])this._b[0].style.marginLeft="";let j=document.createDocumentFragment();for(let U=0;U<H.length;U++){let k=H[U],Q=document.createElement(this._h);if(Q.className=this._m,Q.style.display="block",U===0&&M)Q.style.paddingLeft=this._a;for(let O=0;O<k.length;O++){if(O>0)Q.appendChild(document.createTextNode(" "));Q.appendChild(this._o(k[O]))}this.lines.push(Q),j.appendChild(Q)}this.dom.replaceChildren(j)}_q(){let q=this.dom.offsetParent?this.dom.offsetParent.offsetWidth:window.innerWidth,y=()=>{if(this._e)return;let J=this.dom.offsetParent,H=J?J.offsetWidth:window.innerWidth;if(H===q)return;if(q=H,this._c)cancelAnimationFrame(this._c);this._c=requestAnimationFrame(()=>this.reflow())};this._d=new ResizeObserver(y);let F=this.dom.offsetParent??this.dom.parentElement;if(F)this._d.observe(F);else this._d.observe(this.dom)}reflow(){if(!(this._g&X)||this._e)return;let q=document.createDocumentFragment();for(let y=0;y<this._b.length;y++){if(y>0)q.appendChild(document.createTextNode(" "));q.appendChild(this._o(this._b[y]))}if(this.dom.replaceChildren(q),this.lines.length=0,this._a&&this._a!==Z&&this._b[0])this._b[0].style.marginLeft=this._a;this._n()}revert(){this.destroy(),this.dom.innerHTML=this._k,this.chars.length=0,this.words.length=0,this._b.length=0,this._f.clear(),this.lines.length=0}destroy(){if(this._c)cancelAnimationFrame(this._c),this._c=0;if(this._d)this._d.disconnect(),this._d=null}}
|
|
2
|
-
export{i as a};
|