Skip to content

Commit e9ae1ac

Browse files
shshawshshaw
committed
Using classList for class addition
1 parent eacf144 commit e9ae1ac

File tree

4 files changed

+83
-55
lines changed

4 files changed

+83
-55
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "splitting",
3-
"version": "0.9.11",
3+
"version": "0.9.12",
44
"description":
55
"Microlibrary to split a DOM element's words & chars into elements populated with CSS vars.",
66
"main": "splitting.js",

‎splitting.js‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@
1111
* @param {*} els
1212
*/
1313
function Splitting(els) {
14-
return $(els).map(function(el, i) {
14+
return $(els).map(function (el, i) {
1515
if (!el._splitting) {
1616
el._splitting = {
1717
el: el
1818
};
19-
el.className += " splitting";
19+
if (el.classList) {
20+
el.classList.add("splitting");
21+
}
2022
}
2123
return el._splitting;
2224
});
@@ -31,9 +33,8 @@ function Splitting(els) {
3133
*/
3234
function $(els, parent) {
3335
return Array.prototype.slice.call(
34-
els.nodeName
35-
? [els]
36-
: els[0].nodeName ? els : (parent || document).querySelectorAll(els),
36+
els.nodeName ? [els] :
37+
els[0].nodeName ? els : (parent || document).querySelectorAll(els),
3738
0
3839
);
3940
}
@@ -51,7 +52,7 @@ function index(s, key, splits) {
5152
if (splits) {
5253
s[key + "s"] = splits;
5354
s.el.style.setProperty("--" + key + "-total", splits.length);
54-
splits.map(function(el, i) {
55+
splits.map(function (el, i) {
5556
el.style.setProperty("--" + key + "-index", i);
5657
});
5758
}
@@ -68,34 +69,46 @@ Splitting.index = index;
6869
* @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
6970
*/
7071
function split(el, key, splitBy, space) {
72+
// Remove element from DOM to prevent unnecessary thrashing.
7173
var parent = el.parentNode;
7274
if (parent) {
7375
var temp = document.createTextNode("");
7476
parent.replaceChild(temp, el);
7577
}
7678

79+
// Get all the children and clear out the innerHTML
7780
var children = $(el.childNodes);
7881
el.innerHTML = "";
7982

80-
children = children.reduce(function(val, child) {
81-
// Recursively run through child nodes.
83+
// Loop through all children to split them up.
84+
children = children.reduce(function (val, child) {
85+
// Recursively run through child nodes
8286
if (child && child.childNodes && child.childNodes.length) {
8387
el.appendChild(child);
8488
return val.concat(split(child, key, splitBy, space));
8589
}
8690

91+
// Get the text to split, trimming out the whitespace
8792
var text = (child.wholeText || "").trim();
93+
94+
// If there's no text left after trimming whitespace, continue the loop
8895
if (!text.length) {
8996
return val;
9097
}
9198

99+
// Concatenate the split text children back into the full array
92100
return val.concat(
93-
text.split(splitBy).map(function(split) {
101+
text.split(splitBy).map(function (split) {
102+
// Create a span
94103
var splitEl = document.createElement("span");
104+
// Give it the key as a class
95105
splitEl.className = key;
96-
splitEl.setAttribute("data-" + key, split);
97106
splitEl.innerText = split;
107+
// Populate data-{{key}} with the split value
108+
splitEl.setAttribute("data-" + key, split);
98109
el.appendChild(splitEl);
110+
// If items should be spaced out (Splitting.words, primarily), insert
111+
// the space into the parent before the element.
99112
if (space) {
100113
splitEl.insertAdjacentText("beforebegin", " ");
101114
}
@@ -104,6 +117,7 @@ function split(el, key, splitBy, space) {
104117
);
105118
}, []);
106119

120+
// Put the element back into the DOM
107121
if (parent) {
108122
parent.replaceChild(el, temp);
109123
}
@@ -120,8 +134,8 @@ Splitting.split = split;
120134
* @param {String} key -
121135
* @example `Splitting.children('ul','li','item'); // Index every unordered list's items with the --item CSS var.`
122136
*/
123-
Splitting.children = function(parent, children, key) {
124-
return Splitting(parent).map(function(s) {
137+
Splitting.children = function (parent, children, key) {
138+
return Splitting(parent).map(function (s) {
125139
return index(s, key, $(children, s.el));
126140
});
127141
};
@@ -131,8 +145,8 @@ Splitting.children = function(parent, children, key) {
131145
* Split an element into words and those words into chars.
132146
* @param {String|Node|NodeList|Array} els - Element(s) or selector to target.
133147
*/
134-
Splitting.words = function(els) {
135-
return Splitting(els).map(function(s, i) {
148+
Splitting.words = function (els) {
149+
return Splitting(els).map(function (s, i) {
136150
return s.words ? s : index(s, "word", split(s.el, "word", /\s+/, true));
137151
});
138152
};
@@ -142,17 +156,17 @@ Splitting.words = function(els) {
142156
* Split an element into words and those words into chars.
143157
* @param {String|Node|NodeList|Array} els - Element(s) or selector to target.
144158
*/
145-
Splitting.chars = function(els) {
146-
return Splitting.words(els).map(function(s) {
147-
return s.chars
148-
? s
149-
: index(
150-
s,
151-
"char",
152-
s.words.reduce(function(val, word, i) {
153-
return val.concat(split(word, "char", ""));
154-
}, [])
155-
);
159+
Splitting.chars = function (els) {
160+
return Splitting.words(els).map(function (s) {
161+
return s.chars ?
162+
s :
163+
index(
164+
s,
165+
"char",
166+
s.words.reduce(function (val, word, i) {
167+
return val.concat(split(word, "char", ""));
168+
}, [])
169+
);
156170
});
157171
};
158172

@@ -165,7 +179,7 @@ Splitting.chars = function(els) {
165179
* @param {Boolean} opts.element - Return an element. Defaults to `false` to receive a string
166180
* default is chars
167181
*/
168-
Splitting.fromString = function(str, opts) {
182+
Splitting.fromString = function (str, opts) {
169183
opts = opts || {};
170184
var el = document.createElement("span");
171185
el.innerHTML = str;

‎splitting.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/splitting.js‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@
55
* @param {*} els
66
*/
77
function Splitting(els) {
8-
return $(els).map(function(el, i) {
8+
return $(els).map(function (el, i) {
99
if (!el._splitting) {
1010
el._splitting = {
1111
el: el
1212
};
13-
el.className += " splitting";
13+
if (el.classList) {
14+
el.classList.add("splitting");
15+
}
1416
}
1517
return el._splitting;
1618
});
@@ -25,9 +27,8 @@ function Splitting(els) {
2527
*/
2628
function $(els, parent) {
2729
return Array.prototype.slice.call(
28-
els.nodeName
29-
? [els]
30-
: els[0].nodeName ? els : (parent || document).querySelectorAll(els),
30+
els.nodeName ? [els] :
31+
els[0].nodeName ? els : (parent || document).querySelectorAll(els),
3132
0
3233
);
3334
}
@@ -45,7 +46,7 @@ function index(s, key, splits) {
4546
if (splits) {
4647
s[key + "s"] = splits;
4748
s.el.style.setProperty("--" + key + "-total", splits.length);
48-
splits.map(function(el, i) {
49+
splits.map(function (el, i) {
4950
el.style.setProperty("--" + key + "-index", i);
5051
});
5152
}
@@ -62,34 +63,46 @@ Splitting.index = index;
6263
* @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
6364
*/
6465
function split(el, key, splitBy, space) {
66+
// Remove element from DOM to prevent unnecessary thrashing.
6567
var parent = el.parentNode;
6668
if (parent) {
6769
var temp = document.createTextNode("");
6870
parent.replaceChild(temp, el);
6971
}
7072

73+
// Get all the children and clear out the innerHTML
7174
var children = $(el.childNodes);
7275
el.innerHTML = "";
7376

74-
children = children.reduce(function(val, child) {
75-
// Recursively run through child nodes.
77+
// Loop through all children to split them up.
78+
children = children.reduce(function (val, child) {
79+
// Recursively run through child nodes
7680
if (child && child.childNodes && child.childNodes.length) {
7781
el.appendChild(child);
7882
return val.concat(split(child, key, splitBy, space));
7983
}
8084

85+
// Get the text to split, trimming out the whitespace
8186
var text = (child.wholeText || "").trim();
87+
88+
// If there's no text left after trimming whitespace, continue the loop
8289
if (!text.length) {
8390
return val;
8491
}
8592

93+
// Concatenate the split text children back into the full array
8694
return val.concat(
87-
text.split(splitBy).map(function(split) {
95+
text.split(splitBy).map(function (split) {
96+
// Create a span
8897
var splitEl = document.createElement("span");
98+
// Give it the key as a class
8999
splitEl.className = key;
90-
splitEl.setAttribute("data-" + key, split);
91100
splitEl.innerText = split;
101+
// Populate data-{{key}} with the split value
102+
splitEl.setAttribute("data-" + key, split);
92103
el.appendChild(splitEl);
104+
// If items should be spaced out (Splitting.words, primarily), insert
105+
// the space into the parent before the element.
93106
if (space) {
94107
splitEl.insertAdjacentText("beforebegin", " ");
95108
}
@@ -98,6 +111,7 @@ function split(el, key, splitBy, space) {
98111
);
99112
}, []);
100113

114+
// Put the element back into the DOM
101115
if (parent) {
102116
parent.replaceChild(el, temp);
103117
}
@@ -114,8 +128,8 @@ Splitting.split = split;
114128
* @param {String} key -
115129
* @example `Splitting.children('ul','li','item'); // Index every unordered list's items with the --item CSS var.`
116130
*/
117-
Splitting.children = function(parent, children, key) {
118-
return Splitting(parent).map(function(s) {
131+
Splitting.children = function (parent, children, key) {
132+
return Splitting(parent).map(function (s) {
119133
return index(s, key, $(children, s.el));
120134
});
121135
};
@@ -125,8 +139,8 @@ Splitting.children = function(parent, children, key) {
125139
* Split an element into words and those words into chars.
126140
* @param {String|Node|NodeList|Array} els - Element(s) or selector to target.
127141
*/
128-
Splitting.words = function(els) {
129-
return Splitting(els).map(function(s, i) {
142+
Splitting.words = function (els) {
143+
return Splitting(els).map(function (s, i) {
130144
return s.words ? s : index(s, "word", split(s.el, "word", /\s+/, true));
131145
});
132146
};
@@ -136,17 +150,17 @@ Splitting.words = function(els) {
136150
* Split an element into words and those words into chars.
137151
* @param {String|Node|NodeList|Array} els - Element(s) or selector to target.
138152
*/
139-
Splitting.chars = function(els) {
140-
return Splitting.words(els).map(function(s) {
141-
return s.chars
142-
? s
143-
: index(
144-
s,
145-
"char",
146-
s.words.reduce(function(val, word, i) {
147-
return val.concat(split(word, "char", ""));
148-
}, [])
149-
);
153+
Splitting.chars = function (els) {
154+
return Splitting.words(els).map(function (s) {
155+
return s.chars ?
156+
s :
157+
index(
158+
s,
159+
"char",
160+
s.words.reduce(function (val, word, i) {
161+
return val.concat(split(word, "char", ""));
162+
}, [])
163+
);
150164
});
151165
};
152166

@@ -159,12 +173,12 @@ Splitting.chars = function(els) {
159173
* @param {Boolean} opts.element - Return an element. Defaults to `false` to receive a string
160174
* default is chars
161175
*/
162-
Splitting.fromString = function(str, opts) {
176+
Splitting.fromString = function (str, opts) {
163177
opts = opts || {};
164178
var el = document.createElement("span");
165179
el.innerHTML = str;
166180
var s = Splitting[opts.type || "chars"](el);
167181
return opts.element ? el : el.outerHTML;
168182
};
169183

170-
export default Splitting;
184+
export default Splitting;

0 commit comments

Comments
 (0)