-
Notifications
You must be signed in to change notification settings - Fork 6
/
splt.js
65 lines (57 loc) 路 2.08 KB
/
splt.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
function splt({ target = '.splt', reveal = false }) {
let saveOriginal = [];
//grab instances
const inst = document.querySelectorAll(target);
for (let a = 0; a < inst.length; a++) {
inst[a].setAttribute('id', 'i' + [a + 1]);
//saves original text to an array for revert functionality
saveOriginal.push(inst[a].innerHTML);
//split instance text
const instChars = inst[a].innerHTML.split('');
for (let b = 0; b < instChars.length; b++) {
//nest child span
const span = document.createElement('span');
inst[a].appendChild(span);
span.setAttribute('id', 'c' + [b + 1]);
//check if child = char or whitespace
if (instChars[b] == ' ') {
span.classList.add('whtSpc');
} else {
span.classList.add('char');
//add char styles
const char = document.querySelectorAll('.char');
for (let c = 0; c < char.length; c++) {
char[c].style.display = 'inline-block';
char[c].style.overflow = 'hidden';
char[c].style.verticalAlign = 'top';
}
}
//reveal init
if (reveal == true) {
//nest grandchild span
const spanChild = document.createElement('span');
spanChild.innerHTML = instChars[b]; //set text to grandchild span
span.appendChild(spanChild);
spanChild.setAttribute('id', 'r');
spanChild.classList.add('reveal');
//add charReveal styles
const charReveal = document.querySelectorAll('.reveal');
for (let d = 0; d < charReveal.length; d++) {
charReveal[d].style.display = 'inherit';
charReveal[d].style.overflow = 'inherit';
charReveal[d].style.verticalAlign = 'inherit';
}
} else {
span.innerHTML = instChars[b]; //set text to child span
}
}
inst[a].removeChild(inst[a].childNodes[0]); // remove initial text input
}
//undo text splitting
splt.revert = () => {
for (let e = 0; e < inst.length; e++) {
inst[e].removeAttribute('id');
inst[e].innerHTML = saveOriginal[e]; //sets text to original value
}
};
}