title-switcher 2.1.17 → 2.1.18
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/browser/titleSwitcher.js +1464 -1510
- package/browser/titleSwitcher.min.js +1 -1
- package/dist/main.d.ts +80 -80
- package/dist/main.js +179 -191
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
'use strict'
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
require(
|
|
4
|
-
|
|
5
|
-
if (kind ===
|
|
6
|
-
if (kind ===
|
|
7
|
-
if (typeof state ===
|
|
8
|
-
return kind ===
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
if (kind ===
|
|
12
|
-
if (typeof state ===
|
|
13
|
-
return kind ===
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
Object.defineProperty(exports,
|
|
3
|
+
require("core-js/modules/esnext.weak-map.delete-all.js");
|
|
4
|
+
var __classPrivateFieldSet = void 0 && (void 0).__classPrivateFieldSet || function (receiver, state, value, kind, f) {
|
|
5
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
6
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
7
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
8
|
+
return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
|
|
9
|
+
};
|
|
10
|
+
var __classPrivateFieldGet = void 0 && (void 0).__classPrivateFieldGet || function (receiver, state, kind, f) {
|
|
11
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
12
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
13
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
14
|
+
};
|
|
15
|
+
var _TitleSwitcher_active, _TitleSwitcher_currentClass, _TitleSwitcher_currentIndex, _TitleSwitcher_delayEffect, _TitleSwitcher_delaySwitch, _TitleSwitcher_isRandom, _TitleSwitcher_titles, _TitleSwitcher_titlesContainer, _TitleSwitcher_switchStyle, _TitleSwitcher_typeSurface;
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
17
|
value: true
|
|
18
|
-
})
|
|
18
|
+
});
|
|
19
19
|
class TitleSwitcher {
|
|
20
20
|
/**
|
|
21
21
|
* Instantiate this as a class to get an instance of TitleSwitcher
|
|
@@ -23,89 +23,80 @@ class TitleSwitcher {
|
|
|
23
23
|
* @param switchStyle - The function or function name for the effect to apply
|
|
24
24
|
* @constructor
|
|
25
25
|
*/
|
|
26
|
-
constructor
|
|
27
|
-
_TitleSwitcher_active.set(this, false)
|
|
28
|
-
_TitleSwitcher_currentClass.set(this, 'displayTitle')
|
|
29
|
-
_TitleSwitcher_currentIndex.set(this, 0)
|
|
30
|
-
_TitleSwitcher_delayEffect.set(this, 200)
|
|
31
|
-
_TitleSwitcher_delaySwitch.set(this, 400)
|
|
32
|
-
_TitleSwitcher_isRandom.set(this, false)
|
|
33
|
-
_TitleSwitcher_titles.set(this, [])
|
|
34
|
-
_TitleSwitcher_titlesContainer.set(this, '')
|
|
35
|
-
_TitleSwitcher_switchStyle.set(this, void 0)
|
|
36
|
-
_TitleSwitcher_typeSurface.set(this, void 0)
|
|
37
|
-
__classPrivateFieldSet(this, _TitleSwitcher_currentClass, 'displayTitle',
|
|
26
|
+
constructor(titlesContainer = '', switchStyle = 'typingEffect') {
|
|
27
|
+
_TitleSwitcher_active.set(this, false);
|
|
28
|
+
_TitleSwitcher_currentClass.set(this, 'displayTitle');
|
|
29
|
+
_TitleSwitcher_currentIndex.set(this, 0);
|
|
30
|
+
_TitleSwitcher_delayEffect.set(this, 200);
|
|
31
|
+
_TitleSwitcher_delaySwitch.set(this, 400);
|
|
32
|
+
_TitleSwitcher_isRandom.set(this, false);
|
|
33
|
+
_TitleSwitcher_titles.set(this, []);
|
|
34
|
+
_TitleSwitcher_titlesContainer.set(this, '');
|
|
35
|
+
_TitleSwitcher_switchStyle.set(this, void 0);
|
|
36
|
+
_TitleSwitcher_typeSurface.set(this, void 0);
|
|
37
|
+
__classPrivateFieldSet(this, _TitleSwitcher_currentClass, 'displayTitle', "f");
|
|
38
38
|
if (typeof switchStyle === 'string') {
|
|
39
39
|
// @ts-ignore Obnoxious error "type 'string' can't be used to index type 'TitleSwitcher'"
|
|
40
|
-
__classPrivateFieldSet(this, _TitleSwitcher_switchStyle, typeof this[switchStyle] === 'function' ? this[switchStyle] : this.typingEffect,
|
|
40
|
+
__classPrivateFieldSet(this, _TitleSwitcher_switchStyle, typeof this[switchStyle] === 'function' ? this[switchStyle] : this.typingEffect, "f");
|
|
41
41
|
} else {
|
|
42
|
-
__classPrivateFieldSet(this, _TitleSwitcher_switchStyle, switchStyle,
|
|
42
|
+
__classPrivateFieldSet(this, _TitleSwitcher_switchStyle, switchStyle, "f");
|
|
43
43
|
}
|
|
44
|
-
__classPrivateFieldSet(this, _TitleSwitcher_titlesContainer, titlesContainer,
|
|
45
|
-
__classPrivateFieldSet(this, _TitleSwitcher_titles, [],
|
|
46
|
-
const foundContainers = titlesContainer ? document.querySelectorAll(titlesContainer) : []
|
|
44
|
+
__classPrivateFieldSet(this, _TitleSwitcher_titlesContainer, titlesContainer, "f");
|
|
45
|
+
__classPrivateFieldSet(this, _TitleSwitcher_titles, [], "f");
|
|
46
|
+
const foundContainers = titlesContainer ? document.querySelectorAll(titlesContainer) : [];
|
|
47
47
|
if (foundContainers && foundContainers[0]) {
|
|
48
|
-
__classPrivateFieldSet(this, _TitleSwitcher_titlesContainer, foundContainers[0],
|
|
49
|
-
__classPrivateFieldSet(this, _TitleSwitcher_titles, foundContainers[0].children,
|
|
48
|
+
__classPrivateFieldSet(this, _TitleSwitcher_titlesContainer, foundContainers[0], "f");
|
|
49
|
+
__classPrivateFieldSet(this, _TitleSwitcher_titles, foundContainers[0].children, "f");
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
|
|
53
52
|
/**
|
|
54
53
|
* Retrieve active
|
|
55
54
|
*/
|
|
56
|
-
get active
|
|
57
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_active,
|
|
55
|
+
get active() {
|
|
56
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_active, "f");
|
|
58
57
|
}
|
|
59
|
-
|
|
60
58
|
/**
|
|
61
59
|
* Retrieve currentClass
|
|
62
60
|
*/
|
|
63
|
-
get currentClass
|
|
64
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_currentClass,
|
|
61
|
+
get currentClass() {
|
|
62
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_currentClass, "f");
|
|
65
63
|
}
|
|
66
|
-
|
|
67
64
|
/**
|
|
68
65
|
* Retrieve currentIndex
|
|
69
66
|
*/
|
|
70
|
-
get currentIndex
|
|
71
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_currentIndex,
|
|
67
|
+
get currentIndex() {
|
|
68
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_currentIndex, "f");
|
|
72
69
|
}
|
|
73
|
-
|
|
74
70
|
/**
|
|
75
71
|
* Retrieve delayEffect
|
|
76
72
|
*/
|
|
77
|
-
get delayEffect
|
|
78
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_delayEffect,
|
|
73
|
+
get delayEffect() {
|
|
74
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_delayEffect, "f");
|
|
79
75
|
}
|
|
80
|
-
|
|
81
76
|
/**
|
|
82
77
|
* Retrieve delaySwitch
|
|
83
78
|
*/
|
|
84
|
-
get delaySwitch
|
|
85
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_delaySwitch,
|
|
79
|
+
get delaySwitch() {
|
|
80
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_delaySwitch, "f");
|
|
86
81
|
}
|
|
87
|
-
|
|
88
82
|
/**
|
|
89
83
|
* Retrieve switchStyle
|
|
90
84
|
*/
|
|
91
|
-
get switchStyle
|
|
92
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_switchStyle,
|
|
85
|
+
get switchStyle() {
|
|
86
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_switchStyle, "f");
|
|
93
87
|
}
|
|
94
|
-
|
|
95
88
|
/**
|
|
96
89
|
* Retrieve list of titles DOM elements
|
|
97
90
|
*/
|
|
98
|
-
get titles
|
|
99
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
91
|
+
get titles() {
|
|
92
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_titles, "f");
|
|
100
93
|
}
|
|
101
|
-
|
|
102
94
|
/**
|
|
103
95
|
* Retrieve typeSurface used
|
|
104
96
|
*/
|
|
105
|
-
get typeSurface
|
|
106
|
-
return __classPrivateFieldGet(this, _TitleSwitcher_typeSurface,
|
|
97
|
+
get typeSurface() {
|
|
98
|
+
return __classPrivateFieldGet(this, _TitleSwitcher_typeSurface, "f");
|
|
107
99
|
}
|
|
108
|
-
|
|
109
100
|
/**
|
|
110
101
|
* This is the function to begin the switching titles
|
|
111
102
|
* @param settings
|
|
@@ -114,75 +105,72 @@ class TitleSwitcher {
|
|
|
114
105
|
* @param settings.isRandom
|
|
115
106
|
* @param settings.immediatePause
|
|
116
107
|
*/
|
|
117
|
-
startTitles
|
|
108
|
+
startTitles({
|
|
118
109
|
delaySwitch = 400,
|
|
119
110
|
delayEffect = 200,
|
|
120
111
|
isRandom = false,
|
|
121
112
|
immediatePause = false
|
|
122
113
|
} = {}) {
|
|
123
|
-
const typeSurface = 'typeSurface'
|
|
124
|
-
__classPrivateFieldSet(this, _TitleSwitcher_delaySwitch, delaySwitch,
|
|
125
|
-
__classPrivateFieldSet(this, _TitleSwitcher_delayEffect, delayEffect,
|
|
126
|
-
__classPrivateFieldSet(this, _TitleSwitcher_isRandom, isRandom,
|
|
127
|
-
__classPrivateFieldSet(this, _TitleSwitcher_active, !immediatePause,
|
|
128
|
-
if (__classPrivateFieldGet(this, _TitleSwitcher_currentIndex,
|
|
129
|
-
__classPrivateFieldSet(this, _TitleSwitcher_active, false,
|
|
130
|
-
console.warn(`No titles found for '${__classPrivateFieldGet(this, _TitleSwitcher_titlesContainer,
|
|
131
|
-
return this
|
|
114
|
+
const typeSurface = 'typeSurface';
|
|
115
|
+
__classPrivateFieldSet(this, _TitleSwitcher_delaySwitch, delaySwitch, "f");
|
|
116
|
+
__classPrivateFieldSet(this, _TitleSwitcher_delayEffect, delayEffect, "f");
|
|
117
|
+
__classPrivateFieldSet(this, _TitleSwitcher_isRandom, isRandom, "f");
|
|
118
|
+
__classPrivateFieldSet(this, _TitleSwitcher_active, !immediatePause, "f");
|
|
119
|
+
if (__classPrivateFieldGet(this, _TitleSwitcher_currentIndex, "f") >= __classPrivateFieldGet(this, _TitleSwitcher_titles, "f").length || typeof __classPrivateFieldGet(this, _TitleSwitcher_titlesContainer, "f") === 'string') {
|
|
120
|
+
__classPrivateFieldSet(this, _TitleSwitcher_active, false, "f");
|
|
121
|
+
console.warn(`No titles found for '${__classPrivateFieldGet(this, _TitleSwitcher_titlesContainer, "f")}'`);
|
|
122
|
+
return this;
|
|
132
123
|
}
|
|
133
|
-
if (__classPrivateFieldGet(this, _TitleSwitcher_isRandom,
|
|
134
|
-
__classPrivateFieldSet(this, _TitleSwitcher_currentIndex, Math.round(Math.random() * (__classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
124
|
+
if (__classPrivateFieldGet(this, _TitleSwitcher_isRandom, "f")) {
|
|
125
|
+
__classPrivateFieldSet(this, _TitleSwitcher_currentIndex, Math.round(Math.random() * (__classPrivateFieldGet(this, _TitleSwitcher_titles, "f").length - 2)) + 1, "f");
|
|
135
126
|
}
|
|
136
|
-
const currentTitle = __classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
127
|
+
const currentTitle = __classPrivateFieldGet(this, _TitleSwitcher_titles, "f")[__classPrivateFieldGet(this, _TitleSwitcher_currentIndex, "f")];
|
|
137
128
|
if (currentTitle.classList) {
|
|
138
|
-
currentTitle.classList.add(__classPrivateFieldGet(this, _TitleSwitcher_currentClass,
|
|
129
|
+
currentTitle.classList.add(__classPrivateFieldGet(this, _TitleSwitcher_currentClass, "f"));
|
|
139
130
|
} else {
|
|
140
|
-
currentTitle.className += ' ' + __classPrivateFieldGet(this, _TitleSwitcher_currentClass,
|
|
131
|
+
currentTitle.className += ' ' + __classPrivateFieldGet(this, _TitleSwitcher_currentClass, "f");
|
|
141
132
|
}
|
|
142
133
|
// @ts-ignore The Node returned is of type Element, or it should be
|
|
143
|
-
const typeElement = __classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
134
|
+
const typeElement = __classPrivateFieldGet(this, _TitleSwitcher_titles, "f")[0].cloneNode(true);
|
|
144
135
|
if (typeElement.classList) {
|
|
145
|
-
typeElement.classList.add(typeSurface)
|
|
136
|
+
typeElement.classList.add(typeSurface);
|
|
146
137
|
} else {
|
|
147
|
-
typeElement.className += ' ' + typeSurface
|
|
138
|
+
typeElement.className += ' ' + typeSurface;
|
|
148
139
|
}
|
|
149
140
|
if (typeElement.classList) {
|
|
150
|
-
typeElement.classList.remove(__classPrivateFieldGet(this, _TitleSwitcher_currentClass,
|
|
141
|
+
typeElement.classList.remove(__classPrivateFieldGet(this, _TitleSwitcher_currentClass, "f"));
|
|
151
142
|
} else {
|
|
152
|
-
typeElement.className = typeElement.className.replace(new RegExp('(^|\\b)' + typeElement.className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')
|
|
143
|
+
typeElement.className = typeElement.className.replace(new RegExp('(^|\\b)' + typeElement.className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
|
153
144
|
}
|
|
154
|
-
__classPrivateFieldGet(this, _TitleSwitcher_titlesContainer,
|
|
145
|
+
__classPrivateFieldGet(this, _TitleSwitcher_titlesContainer, "f").insertBefore(typeElement, __classPrivateFieldGet(this, _TitleSwitcher_titlesContainer, "f").firstChild);
|
|
155
146
|
// @ts-ignore the returned Node is a type of HTMLElement
|
|
156
|
-
__classPrivateFieldSet(this, _TitleSwitcher_typeSurface, __classPrivateFieldGet(this, _TitleSwitcher_titlesContainer,
|
|
157
|
-
__classPrivateFieldGet(this, _TitleSwitcher_typeSurface,
|
|
158
|
-
__classPrivateFieldGet(this, _TitleSwitcher_typeSurface,
|
|
159
|
-
Array.prototype.forEach.call(__classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
160
|
-
title.style.display = 'none'
|
|
161
|
-
})
|
|
147
|
+
__classPrivateFieldSet(this, _TitleSwitcher_typeSurface, __classPrivateFieldGet(this, _TitleSwitcher_titlesContainer, "f").querySelectorAll('.' + typeSurface)[0], "f");
|
|
148
|
+
__classPrivateFieldGet(this, _TitleSwitcher_typeSurface, "f").innerHTML = '';
|
|
149
|
+
__classPrivateFieldGet(this, _TitleSwitcher_typeSurface, "f").style.display = 'block';
|
|
150
|
+
Array.prototype.forEach.call(__classPrivateFieldGet(this, _TitleSwitcher_titles, "f"), function (title) {
|
|
151
|
+
title.style.display = 'none';
|
|
152
|
+
});
|
|
162
153
|
// currentTitle, not this.#titles[this.#currentIndex]: inserting typeElement above shifted every later index by
|
|
163
154
|
// one, so #currentIndex (computed before that insert) no longer points at the title it was set for - switchTitle
|
|
164
155
|
// would remove the 'displayTitle' class from whatever title now happens to sit at that stale index instead of
|
|
165
156
|
// from currentTitle, leaving more than one title carrying the class at once.
|
|
166
|
-
return this.switchTitle(currentTitle, __classPrivateFieldGet(this, _TitleSwitcher_switchStyle,
|
|
157
|
+
return this.switchTitle(currentTitle, __classPrivateFieldGet(this, _TitleSwitcher_switchStyle, "f"), this);
|
|
167
158
|
}
|
|
168
|
-
|
|
169
159
|
/**
|
|
170
160
|
* This is the function to pause between switching
|
|
171
161
|
*/
|
|
172
|
-
pause
|
|
173
|
-
__classPrivateFieldSet(this, _TitleSwitcher_active, false,
|
|
162
|
+
pause() {
|
|
163
|
+
__classPrivateFieldSet(this, _TitleSwitcher_active, false, "f");
|
|
174
164
|
}
|
|
175
|
-
|
|
176
165
|
/**
|
|
177
166
|
* This is the function to resume after a pause.
|
|
178
167
|
*/
|
|
179
|
-
resume
|
|
180
|
-
if (!__classPrivateFieldGet(this, _TitleSwitcher_active,
|
|
181
|
-
__classPrivateFieldSet(this, _TitleSwitcher_active, true,
|
|
182
|
-
this.switchTitle(__classPrivateFieldGet(this, _TitleSwitcher_titles,
|
|
168
|
+
resume() {
|
|
169
|
+
if (!__classPrivateFieldGet(this, _TitleSwitcher_active, "f")) {
|
|
170
|
+
__classPrivateFieldSet(this, _TitleSwitcher_active, true, "f");
|
|
171
|
+
this.switchTitle(__classPrivateFieldGet(this, _TitleSwitcher_titles, "f")[__classPrivateFieldGet(this, _TitleSwitcher_currentIndex, "f")], __classPrivateFieldGet(this, _TitleSwitcher_switchStyle, "f"), this);
|
|
183
172
|
}
|
|
184
173
|
}
|
|
185
|
-
|
|
186
174
|
/**
|
|
187
175
|
* This is the core function for switching titles
|
|
188
176
|
* @param currentTitle
|
|
@@ -190,53 +178,53 @@ class TitleSwitcher {
|
|
|
190
178
|
* @param self
|
|
191
179
|
* @param runOnce
|
|
192
180
|
*/
|
|
193
|
-
switchTitle
|
|
194
|
-
self = self || this
|
|
195
|
-
let currentIndex = 1
|
|
196
|
-
const size = __classPrivateFieldGet(self, _TitleSwitcher_titles,
|
|
181
|
+
switchTitle(currentTitle, callBackFunction, self, runOnce = false) {
|
|
182
|
+
self = self || this;
|
|
183
|
+
let currentIndex = 1;
|
|
184
|
+
const size = __classPrivateFieldGet(self, _TitleSwitcher_titles, "f").length;
|
|
197
185
|
for (let i = 1; i < size; ++i) {
|
|
198
|
-
if (__classPrivateFieldGet(self, _TitleSwitcher_titles,
|
|
199
|
-
currentIndex = i
|
|
200
|
-
break
|
|
186
|
+
if (__classPrivateFieldGet(self, _TitleSwitcher_titles, "f")[i] === currentTitle) {
|
|
187
|
+
currentIndex = i;
|
|
188
|
+
break;
|
|
201
189
|
}
|
|
202
190
|
}
|
|
203
|
-
if (!__classPrivateFieldGet(self, _TitleSwitcher_active,
|
|
204
|
-
__classPrivateFieldSet(self, _TitleSwitcher_currentIndex, currentIndex,
|
|
205
|
-
return self
|
|
191
|
+
if (!__classPrivateFieldGet(self, _TitleSwitcher_active, "f")) {
|
|
192
|
+
__classPrivateFieldSet(self, _TitleSwitcher_currentIndex, currentIndex, "f");
|
|
193
|
+
return self;
|
|
206
194
|
}
|
|
207
|
-
const maxIndex = __classPrivateFieldGet(self, _TitleSwitcher_titles,
|
|
208
|
-
let nextIndex = 1
|
|
195
|
+
const maxIndex = __classPrivateFieldGet(self, _TitleSwitcher_titles, "f").length - 1;
|
|
196
|
+
let nextIndex = 1;
|
|
209
197
|
if (maxIndex === 1) {
|
|
210
|
-
return callBackFunction(currentTitle, runOnce ? () => self : self.switchTitle, self, runOnce)
|
|
198
|
+
return callBackFunction(currentTitle, runOnce ? () => self : self.switchTitle, self, runOnce);
|
|
211
199
|
}
|
|
212
|
-
if (__classPrivateFieldGet(self, _TitleSwitcher_isRandom,
|
|
200
|
+
if (__classPrivateFieldGet(self, _TitleSwitcher_isRandom, "f")) {
|
|
213
201
|
if (!self.typeSurface.textContent.trim()) {
|
|
214
|
-
currentIndex = -1
|
|
202
|
+
currentIndex = -1;
|
|
215
203
|
}
|
|
216
204
|
do {
|
|
217
|
-
nextIndex = Math.round(Math.random() * (maxIndex - 1)) + 1
|
|
218
|
-
} while (nextIndex === currentIndex)
|
|
205
|
+
nextIndex = Math.round(Math.random() * (maxIndex - 1)) + 1;
|
|
206
|
+
} while (nextIndex === currentIndex);
|
|
219
207
|
} else {
|
|
220
208
|
if (!self.typeSurface.textContent.trim()) {
|
|
221
|
-
currentIndex = maxIndex
|
|
209
|
+
currentIndex = maxIndex;
|
|
222
210
|
}
|
|
223
|
-
nextIndex = currentIndex < maxIndex ? currentIndex + 1 : 1
|
|
211
|
+
nextIndex = currentIndex < maxIndex ? currentIndex + 1 : 1;
|
|
224
212
|
}
|
|
225
|
-
const nextTitle = __classPrivateFieldGet(self, _TitleSwitcher_titles,
|
|
213
|
+
const nextTitle = __classPrivateFieldGet(self, _TitleSwitcher_titles, "f")[nextIndex];
|
|
226
214
|
if (currentTitle.classList) {
|
|
227
|
-
currentTitle.classList.remove(self.currentClass)
|
|
215
|
+
currentTitle.classList.remove(self.currentClass);
|
|
228
216
|
} else {
|
|
229
|
-
currentTitle.className = currentTitle.className.replace(new RegExp('(^|\\b)' + currentTitle.className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')
|
|
217
|
+
currentTitle.className = currentTitle.className.replace(new RegExp('(^|\\b)' + currentTitle.className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
|
230
218
|
}
|
|
231
219
|
if (nextTitle.classList) {
|
|
232
|
-
nextTitle.classList.add(self.currentClass)
|
|
220
|
+
nextTitle.classList.add(self.currentClass);
|
|
233
221
|
} else {
|
|
234
|
-
nextTitle.className += ' ' + self.currentClass
|
|
222
|
+
nextTitle.className += ' ' + self.currentClass;
|
|
235
223
|
}
|
|
236
|
-
return callBackFunction(nextTitle, runOnce ? () => self : self.switchTitle, self, runOnce)
|
|
224
|
+
return callBackFunction(nextTitle, runOnce ? () => self : self.switchTitle, self, runOnce);
|
|
237
225
|
}
|
|
238
226
|
}
|
|
239
|
-
_TitleSwitcher_active = new WeakMap(), _TitleSwitcher_currentClass = new WeakMap(), _TitleSwitcher_currentIndex = new WeakMap(), _TitleSwitcher_delayEffect = new WeakMap(), _TitleSwitcher_delaySwitch = new WeakMap(), _TitleSwitcher_isRandom = new WeakMap(), _TitleSwitcher_titles = new WeakMap(), _TitleSwitcher_titlesContainer = new WeakMap(), _TitleSwitcher_switchStyle = new WeakMap(), _TitleSwitcher_typeSurface = new WeakMap()
|
|
227
|
+
_TitleSwitcher_active = new WeakMap(), _TitleSwitcher_currentClass = new WeakMap(), _TitleSwitcher_currentIndex = new WeakMap(), _TitleSwitcher_delayEffect = new WeakMap(), _TitleSwitcher_delaySwitch = new WeakMap(), _TitleSwitcher_isRandom = new WeakMap(), _TitleSwitcher_titles = new WeakMap(), _TitleSwitcher_titlesContainer = new WeakMap(), _TitleSwitcher_switchStyle = new WeakMap(), _TitleSwitcher_typeSurface = new WeakMap();
|
|
240
228
|
/**
|
|
241
229
|
* This is a helper function to improve the default 'typingEffect'
|
|
242
230
|
* @param blinkOn
|
|
@@ -244,15 +232,15 @@ _TitleSwitcher_active = new WeakMap(), _TitleSwitcher_currentClass = new WeakMap
|
|
|
244
232
|
*/
|
|
245
233
|
TitleSwitcher.prototype.cursorBlink = (blinkOn, self) => {
|
|
246
234
|
// display cursor effect
|
|
247
|
-
self = self || void 0
|
|
235
|
+
self = self || void 0;
|
|
248
236
|
if (blinkOn) {
|
|
249
|
-
self.typeSurface.innerHTML = self.typeSurface.innerHTML.replace(/\|| *(<\/span>)?$/, '$1').trim()
|
|
250
|
-
self.typeSurface.innerHTML = self.typeSurface.innerHTML + '<span style="display: inline-block;font-weight: normal; color: black; text-decoration: none">|</span>'
|
|
237
|
+
self.typeSurface.innerHTML = self.typeSurface.innerHTML.replace(/\|| *(<\/span>)?$/, '$1').trim();
|
|
238
|
+
self.typeSurface.innerHTML = self.typeSurface.innerHTML + '<span style="display: inline-block;font-weight: normal; color: black; text-decoration: none">|</span>';
|
|
251
239
|
} else {
|
|
252
|
-
self.typeSurface.innerHTML = self.typeSurface.innerHTML.replace(/\|(<\/span>)$/, ' $1')
|
|
240
|
+
self.typeSurface.innerHTML = self.typeSurface.innerHTML.replace(/\|(<\/span>)$/, ' $1');
|
|
253
241
|
}
|
|
254
|
-
return self
|
|
255
|
-
}
|
|
242
|
+
return self;
|
|
243
|
+
};
|
|
256
244
|
/**
|
|
257
245
|
* Count how many typed "units" domObject's text takes to fully reveal via typedPartialHtml - one unit per
|
|
258
246
|
* non-whitespace character, but a whole run of consecutive whitespace (most often the newline and indentation
|
|
@@ -263,27 +251,27 @@ TitleSwitcher.prototype.cursorBlink = (blinkOn, self) => {
|
|
|
263
251
|
* @param domObject
|
|
264
252
|
*/
|
|
265
253
|
const typedLength = domObject => {
|
|
266
|
-
let length = 0
|
|
254
|
+
let length = 0;
|
|
267
255
|
Array.prototype.forEach.call(domObject.childNodes, child => {
|
|
268
256
|
if (child.nodeType === 3) {
|
|
269
|
-
const text = child.textContent || ''
|
|
270
|
-
let position = 0
|
|
257
|
+
const text = child.textContent || '';
|
|
258
|
+
let position = 0;
|
|
271
259
|
while (position < text.length) {
|
|
272
260
|
if (/\s/.test(text[position])) {
|
|
273
261
|
while (position < text.length && /\s/.test(text[position])) {
|
|
274
|
-
++position
|
|
262
|
+
++position;
|
|
275
263
|
}
|
|
276
264
|
} else {
|
|
277
|
-
++position
|
|
265
|
+
++position;
|
|
278
266
|
}
|
|
279
|
-
++length
|
|
267
|
+
++length;
|
|
280
268
|
}
|
|
281
269
|
} else if (child.nodeType === 1) {
|
|
282
|
-
length += typedLength(child)
|
|
270
|
+
length += typedLength(child);
|
|
283
271
|
}
|
|
284
|
-
})
|
|
285
|
-
return length
|
|
286
|
-
}
|
|
272
|
+
});
|
|
273
|
+
return length;
|
|
274
|
+
};
|
|
287
275
|
/**
|
|
288
276
|
* Build the markup for the first `remaining` typed units of domObject's text (see typedLength), keeping
|
|
289
277
|
* whichever of its nested tags (em, strong, ...) that content falls under. This lets the typing effect reveal
|
|
@@ -293,43 +281,43 @@ const typedLength = domObject => {
|
|
|
293
281
|
* @param remaining
|
|
294
282
|
*/
|
|
295
283
|
const typedPartialHtml = (domObject, remaining) => {
|
|
296
|
-
let html = ''
|
|
297
|
-
const children = Array.prototype.slice.call(domObject.childNodes)
|
|
284
|
+
let html = '';
|
|
285
|
+
const children = Array.prototype.slice.call(domObject.childNodes);
|
|
298
286
|
for (let i = 0; i < children.length && remaining > 0; ++i) {
|
|
299
|
-
const child = children[i]
|
|
287
|
+
const child = children[i];
|
|
300
288
|
if (child.nodeType === 3) {
|
|
301
|
-
const text = child.textContent || ''
|
|
302
|
-
let position = 0
|
|
303
|
-
let taken = ''
|
|
289
|
+
const text = child.textContent || '';
|
|
290
|
+
let position = 0;
|
|
291
|
+
let taken = '';
|
|
304
292
|
while (position < text.length && remaining > 0) {
|
|
305
293
|
if (/\s/.test(text[position])) {
|
|
306
|
-
const runStart = position
|
|
294
|
+
const runStart = position;
|
|
307
295
|
while (position < text.length && /\s/.test(text[position])) {
|
|
308
|
-
++position
|
|
296
|
+
++position;
|
|
309
297
|
}
|
|
310
|
-
taken += text.slice(runStart, position)
|
|
298
|
+
taken += text.slice(runStart, position);
|
|
311
299
|
} else {
|
|
312
|
-
taken += text[position]
|
|
313
|
-
++position
|
|
300
|
+
taken += text[position];
|
|
301
|
+
++position;
|
|
314
302
|
}
|
|
315
|
-
--remaining
|
|
303
|
+
--remaining;
|
|
316
304
|
}
|
|
317
|
-
html += taken
|
|
305
|
+
html += taken;
|
|
318
306
|
} else if (child.nodeType === 1) {
|
|
319
|
-
const result = typedPartialHtml(child, remaining)
|
|
307
|
+
const result = typedPartialHtml(child, remaining);
|
|
320
308
|
if (result.html) {
|
|
321
|
-
const wrapper = child.cloneNode(false)
|
|
322
|
-
wrapper.innerHTML = result.html
|
|
323
|
-
html += wrapper.outerHTML
|
|
309
|
+
const wrapper = child.cloneNode(false);
|
|
310
|
+
wrapper.innerHTML = result.html;
|
|
311
|
+
html += wrapper.outerHTML;
|
|
324
312
|
}
|
|
325
|
-
remaining = result.remaining
|
|
313
|
+
remaining = result.remaining;
|
|
326
314
|
}
|
|
327
315
|
}
|
|
328
316
|
return {
|
|
329
317
|
html,
|
|
330
318
|
remaining
|
|
331
|
-
}
|
|
332
|
-
}
|
|
319
|
+
};
|
|
320
|
+
};
|
|
333
321
|
/**
|
|
334
322
|
* This is the default and example of an effect being implemented when Titles are switched
|
|
335
323
|
* These functions take the currentElement in focus, the switchTitle function as a callback
|
|
@@ -340,70 +328,70 @@ const typedPartialHtml = (domObject, remaining) => {
|
|
|
340
328
|
* @param runOnce
|
|
341
329
|
*/
|
|
342
330
|
TitleSwitcher.prototype.typingEffect = (domObject, callBackFunction, self, runOnce = false) => {
|
|
343
|
-
self = self || void 0
|
|
344
|
-
const size = self.titles.length
|
|
345
|
-
let currentIndex = 0
|
|
331
|
+
self = self || void 0;
|
|
332
|
+
const size = self.titles.length;
|
|
333
|
+
let currentIndex = 0;
|
|
346
334
|
for (let i = 1; i < size; ++i) {
|
|
347
335
|
if (self.titles[i] === domObject) {
|
|
348
|
-
currentIndex = i
|
|
349
|
-
break
|
|
336
|
+
currentIndex = i;
|
|
337
|
+
break;
|
|
350
338
|
}
|
|
351
339
|
}
|
|
352
|
-
domObject = domObject || self.titles[currentIndex + 1]
|
|
353
|
-
let blinkOn = true
|
|
354
|
-
const numBlinks = 4
|
|
340
|
+
domObject = domObject || self.titles[currentIndex + 1];
|
|
341
|
+
let blinkOn = true;
|
|
342
|
+
const numBlinks = 4;
|
|
355
343
|
if (self.typeSurface.hasAttribute('style')) {
|
|
356
|
-
self.typeSurface.removeAttribute('style')
|
|
344
|
+
self.typeSurface.removeAttribute('style');
|
|
357
345
|
}
|
|
358
346
|
if (domObject.hasAttribute('style')) {
|
|
359
|
-
self.typeSurface.setAttribute('style', domObject.getAttribute('style'))
|
|
347
|
+
self.typeSurface.setAttribute('style', domObject.getAttribute('style'));
|
|
360
348
|
}
|
|
361
349
|
// If we copied the title style, then display:none is set, so we need to ensure the surface is display:block
|
|
362
|
-
self.typeSurface.innerHTML = ''
|
|
363
|
-
self.typeSurface.style.display = 'block'
|
|
350
|
+
self.typeSurface.innerHTML = '';
|
|
351
|
+
self.typeSurface.style.display = 'block';
|
|
364
352
|
// Initialize with a few cursor blinks
|
|
365
353
|
for (let i = 0; i < numBlinks; ++i) {
|
|
366
354
|
setTimeout(() => {
|
|
367
|
-
self.cursorBlink(blinkOn, self)
|
|
368
|
-
blinkOn = !blinkOn
|
|
369
|
-
}, i * self.delaySwitch)
|
|
355
|
+
self.cursorBlink(blinkOn, self);
|
|
356
|
+
blinkOn = !blinkOn;
|
|
357
|
+
}, i * self.delaySwitch);
|
|
370
358
|
}
|
|
371
359
|
setTimeout(() => {
|
|
372
360
|
// Empty the surface, and display the cursor (cursor is always solid while typing / not flashing)
|
|
373
|
-
self.typeSurface.innerHTML = ''
|
|
374
|
-
self.cursorBlink(true, self)
|
|
361
|
+
self.typeSurface.innerHTML = '';
|
|
362
|
+
self.cursorBlink(true, self);
|
|
375
363
|
// Copy each letter from the current title, keeping whichever tags (em, strong, ...) it falls under
|
|
376
|
-
const totalLength = typedLength(domObject)
|
|
364
|
+
const totalLength = typedLength(domObject);
|
|
377
365
|
for (let i = 0; i < totalLength; ++i) {
|
|
378
366
|
setTimeout(() => {
|
|
379
367
|
// Reveal one more character, wrapped in whatever tags its position in the title falls under,
|
|
380
368
|
// then append a formatted cursor on the end
|
|
381
|
-
self.typeSurface.innerHTML = typedPartialHtml(domObject, i + 1).html + '<span style="font-weight: normal; color: black; text-decoration: none">|</span>'
|
|
369
|
+
self.typeSurface.innerHTML = typedPartialHtml(domObject, i + 1).html + '<span style="font-weight: normal; color: black; text-decoration: none">|</span>';
|
|
382
370
|
// If the text content equals the title content with a cursor appended then we reached the end.
|
|
383
371
|
if (domObject.textContent + '|' === self.typeSurface.textContent) {
|
|
384
372
|
// Replace html with old html on last letter, so we get all the html formatting applied
|
|
385
|
-
self.typeSurface.innerHTML = domObject.innerHTML + '<span style="font-weight: normal; color: black; text-decoration: none">|</span>'
|
|
373
|
+
self.typeSurface.innerHTML = domObject.innerHTML + '<span style="font-weight: normal; color: black; text-decoration: none">|</span>';
|
|
386
374
|
// Run the blinking cursor two times the regular time in order to let the text be readable before switching
|
|
387
375
|
for (let j = 0; j < numBlinks * 2; ++j) {
|
|
388
376
|
setTimeout(() => {
|
|
389
|
-
--j
|
|
390
|
-
self.cursorBlink(blinkOn, self)
|
|
377
|
+
--j;
|
|
378
|
+
self.cursorBlink(blinkOn, self);
|
|
391
379
|
if (j === 0) {
|
|
392
|
-
callBackFunction(domObject, runOnce ? () => self : self.switchStyle, self, runOnce)
|
|
380
|
+
callBackFunction(domObject, runOnce ? () => self : self.switchStyle, self, runOnce);
|
|
393
381
|
}
|
|
394
|
-
}, j * self.delaySwitch)
|
|
382
|
+
}, j * self.delaySwitch);
|
|
395
383
|
}
|
|
396
384
|
}
|
|
397
|
-
}, i * self.delayEffect)
|
|
385
|
+
}, i * self.delayEffect);
|
|
398
386
|
}
|
|
399
|
-
}, numBlinks * self.delaySwitch)
|
|
400
|
-
return self
|
|
401
|
-
}
|
|
402
|
-
exports.default = TitleSwitcher
|
|
387
|
+
}, numBlinks * self.delaySwitch);
|
|
388
|
+
return self;
|
|
389
|
+
};
|
|
390
|
+
exports.default = TitleSwitcher;
|
|
403
391
|
if (void 0) {
|
|
404
392
|
// @ts-ignore 'this' is used in node as the global, and the key CAN be referenced by string
|
|
405
|
-
(void 0)
|
|
393
|
+
(void 0)['TitleSwitcher'] = TitleSwitcher;
|
|
406
394
|
} else if (typeof window !== 'undefined') {
|
|
407
395
|
// @ts-ignore YES, we can use a string to add a property to Window
|
|
408
|
-
window
|
|
409
|
-
}
|
|
396
|
+
window['TitleSwitcher'] = TitleSwitcher;
|
|
397
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "title-switcher",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.18",
|
|
4
4
|
"description": "Add typing effect to titles and also switch through several titles.",
|
|
5
5
|
"main": "dist/main.min.js",
|
|
6
6
|
"types": "dist/main.d.ts",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"homepage": "https://github.com/jheagle/title-switcher-v2#readme",
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"js-build-tools": "^
|
|
37
|
+
"js-build-tools": "^6.1.0",
|
|
38
38
|
"typedoc": "^0.28.20"
|
|
39
39
|
},
|
|
40
40
|
"files": [
|