1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import { emojiSafeSplit, getText, splitInnerHTML } from "./utils/strings.js";
|
13 |
|
14 | var gsap,
|
15 | _tempDiv,
|
16 | _getGSAP = function _getGSAP() {
|
17 | return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap;
|
18 | };
|
19 |
|
20 | export var TextPlugin = {
|
21 | version: "3.4.2",
|
22 | name: "text",
|
23 | init: function init(target, value, tween) {
|
24 | var i = target.nodeName.toUpperCase(),
|
25 | data = this,
|
26 | _short,
|
27 | text,
|
28 | original,
|
29 | j,
|
30 | condensedText,
|
31 | condensedOriginal,
|
32 | aggregate,
|
33 | s;
|
34 |
|
35 | data.svg = target.getBBox && (i === "TEXT" || i === "TSPAN");
|
36 |
|
37 | if (!("innerHTML" in target) && !data.svg) {
|
38 | return false;
|
39 | }
|
40 |
|
41 | data.target = target;
|
42 |
|
43 | if (typeof value !== "object") {
|
44 | value = {
|
45 | value: value
|
46 | };
|
47 | }
|
48 |
|
49 | if (!("value" in value)) {
|
50 | data.text = data.original = [""];
|
51 | return;
|
52 | }
|
53 |
|
54 | data.delimiter = value.delimiter || "";
|
55 | original = splitInnerHTML(target, data.delimiter);
|
56 |
|
57 | if (!_tempDiv) {
|
58 | _tempDiv = document.createElement("div");
|
59 | }
|
60 |
|
61 | _tempDiv.innerHTML = value.value;
|
62 | text = splitInnerHTML(_tempDiv, data.delimiter);
|
63 | data.from = tween._from;
|
64 |
|
65 | if (data.from) {
|
66 | i = original;
|
67 | original = text;
|
68 | text = i;
|
69 | }
|
70 |
|
71 | data.hasClass = !!(value.newClass || value.oldClass);
|
72 | data.newClass = value.newClass;
|
73 | data.oldClass = value.oldClass;
|
74 | i = original.length - text.length;
|
75 | _short = i < 0 ? original : text;
|
76 | data.fillChar = value.fillChar || (value.padSpace ? " " : "");
|
77 |
|
78 | if (i < 0) {
|
79 | i = -i;
|
80 | }
|
81 |
|
82 | while (--i > -1) {
|
83 | _short.push(data.fillChar);
|
84 | }
|
85 |
|
86 | if (value.type === "diff") {
|
87 | j = 0;
|
88 | condensedText = [];
|
89 | condensedOriginal = [];
|
90 | aggregate = "";
|
91 |
|
92 | for (i = 0; i < text.length; i++) {
|
93 | s = text[i];
|
94 |
|
95 | if (s === original[i]) {
|
96 | aggregate += s;
|
97 | } else {
|
98 | condensedText[j] = aggregate + s;
|
99 | condensedOriginal[j++] = aggregate + original[i];
|
100 | aggregate = "";
|
101 | }
|
102 | }
|
103 |
|
104 | text = condensedText;
|
105 | original = condensedOriginal;
|
106 |
|
107 | if (aggregate) {
|
108 | text.push(aggregate);
|
109 | original.push(aggregate);
|
110 | }
|
111 | }
|
112 |
|
113 | if (value.speed) {
|
114 | tween.duration(Math.min(0.05 / value.speed * _short.length, value.maxDuration || 9999));
|
115 | }
|
116 |
|
117 | this.original = original;
|
118 | this.text = text;
|
119 |
|
120 | this._props.push("text");
|
121 | },
|
122 | render: function render(ratio, data) {
|
123 | if (ratio > 1) {
|
124 | ratio = 1;
|
125 | } else if (ratio < 0) {
|
126 | ratio = 0;
|
127 | }
|
128 |
|
129 | if (data.from) {
|
130 | ratio = 1 - ratio;
|
131 | }
|
132 |
|
133 | var text = data.text,
|
134 | hasClass = data.hasClass,
|
135 | newClass = data.newClass,
|
136 | oldClass = data.oldClass,
|
137 | delimiter = data.delimiter,
|
138 | target = data.target,
|
139 | fillChar = data.fillChar,
|
140 | original = data.original,
|
141 | l = text.length,
|
142 | i = ratio * l + 0.5 | 0,
|
143 | applyNew,
|
144 | applyOld,
|
145 | str;
|
146 |
|
147 | if (hasClass) {
|
148 | applyNew = newClass && i;
|
149 | applyOld = oldClass && i !== l;
|
150 | str = (applyNew ? "<span class='" + newClass + "'>" : "") + text.slice(0, i).join(delimiter) + (applyNew ? "</span>" : "") + (applyOld ? "<span class='" + oldClass + "'>" : "") + delimiter + original.slice(i).join(delimiter) + (applyOld ? "</span>" : "");
|
151 | } else {
|
152 | str = text.slice(0, i).join(delimiter) + delimiter + original.slice(i).join(delimiter);
|
153 | }
|
154 |
|
155 | if (data.svg) {
|
156 |
|
157 | target.textContent = str;
|
158 | } else {
|
159 | target.innerHTML = fillChar === " " && ~str.indexOf(" ") ? str.split(" ").join(" ") : str;
|
160 | }
|
161 | }
|
162 | };
|
163 | TextPlugin.splitInnerHTML = splitInnerHTML;
|
164 | TextPlugin.emojiSafeSplit = emojiSafeSplit;
|
165 | TextPlugin.getText = getText;
|
166 | _getGSAP() && gsap.registerPlugin(TextPlugin);
|
167 | export { TextPlugin as default }; |
\ | No newline at end of file |