Skip to content

Commit 9d42da9

Browse files
shshawshshaw
committed
Build process & package support
1 parent 179b6e7 commit 9d42da9

File tree

4 files changed

+242
-122
lines changed

4 files changed

+242
-122
lines changed

‎index.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
(function (global, factory) {
2+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3+
typeof define === 'function' && define.amd ? define(factory) :
4+
(global.Splitting = factory());
5+
}(this, (function () { 'use strict';
6+
7+
/**
8+
* # Splitting
9+
* CSS vars for split words & chars!
10+
* `Splitting` fn handles array-ifying the
11+
* @param {*} els
12+
*/
13+
function Splitting(els) {
14+
return $(els).map(function(el, i) {
15+
if (!el._splitting) {
16+
el._splitting = {
17+
el: el
18+
};
19+
el.className += " splitting";
20+
}
21+
return el._splitting;
22+
});
23+
}
24+
25+
/**
26+
* # Splitting.$
27+
* Convert selector or NodeList to array for easier manipulation.
28+
*
29+
* @param {*} els - Elements or selector
30+
* @param {*} parent
31+
*/
32+
function $(els, parent) {
33+
return Array.prototype.slice.call(
34+
els.nodeName
35+
? [els]
36+
: els[0].nodeName ? els : (parent || document).querySelectorAll(els),
37+
0
38+
);
39+
}
40+
Splitting.$ = $;
41+
42+
/**
43+
* # Splitting.index
44+
* Index split elements and add them to a Splitting instance.
45+
*
46+
* @param {*} s
47+
* @param {*} key
48+
* @param {*} splits
49+
*/
50+
function index(s, key, splits) {
51+
if (splits) {
52+
s[key + "s"] = splits;
53+
s.el.style.setProperty("--total-" + key + "s", splits.length);
54+
splits.map(function(el, i) {
55+
el.style.setProperty("--" + key + "-index", i);
56+
});
57+
}
58+
return s;
59+
}
60+
Splitting.index = index;
61+
62+
/**
63+
* # Splitting.split
64+
* Split an element's innerText into individual elements
65+
* @param {Node} el - Element to split
66+
* @param {String} key -
67+
* @param {String|RegEx} splitBy - string or regex to split the innerText by
68+
* @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
69+
*/
70+
function split(el, key, splitBy, space) {
71+
var text = el.innerText;
72+
el.innerHTML = "";
73+
74+
return text.split(splitBy).map(function(split, i) {
75+
var splitEl = document.createElement("i");
76+
splitEl.className = key;
77+
splitEl.setAttribute("data-" + key, split);
78+
splitEl.innerText = (space && i > 0 ? " " : "") + split;
79+
el.appendChild(splitEl);
80+
return splitEl;
81+
});
82+
}
83+
Splitting.split = split;
84+
85+
/**
86+
* # Splitting.children
87+
* Add CSS Var indexes to a DOM element's children. Useful for lists.
88+
* @param {String|NodeList} parent - Parent element(s) or selector
89+
* @param {String|NodeList} children - Child element(s) or selector
90+
* @param {String} key -
91+
* @example `Splitting.children('ul','li','item'); // Index every unordered list's items with the --item CSS var.`
92+
*/
93+
Splitting.children = function(parent, children, key) {
94+
return Splitting(parent).map(function(s) {
95+
return index(s, key, $(children, s.el));
96+
});
97+
};
98+
99+
Splitting.words = function(els) {
100+
return Splitting(els).map(function(s, i) {
101+
return s.words ? s : index(s, "word", split(s.el, "word", /\s+/, true));
102+
});
103+
};
104+
105+
/**
106+
* # Splitting.chars
107+
* Split an element into words and those words into chars
108+
*/
109+
Splitting.chars = function(els) {
110+
return Splitting.words(els).map(function(s) {
111+
return s.chars
112+
? s
113+
: index(
114+
s,
115+
"char",
116+
s.words.reduce(function(val, word, i) {
117+
return val.concat(split(word, "char", ""));
118+
}, [])
119+
);
120+
});
121+
};
122+
123+
return Splitting;
124+
125+
})));

‎package.json‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
{
22
"name": "splitting",
3-
"version": "0.9.0",
4-
"description": "Microlibrary to split a DOM element's words & chars into elements populated with CSS vars.",
3+
"version": "0.9.2",
4+
"description":
5+
"Microlibrary to split a DOM element's words & chars into elements populated with CSS vars.",
56
"main": "index.js",
67
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
8+
"build":
9+
"rollup splitting.js --output.format umd --name 'Splitting' --output.file index.js && uglifyjs -c -m -o splitting.min.js -- index.js && npm run sizes",
10+
"sizes":
11+
"gzip -9 -c splitting.min.js | wc -c && cat splitting.min.js | wc -c"
812
},
913
"repository": {
1014
"type": "git",
1115
"url": "git+https://github.com/shshaw/splitting.git"
1216
},
13-
"keywords": [
14-
"split",
15-
"text",
16-
"char",
17-
"word",
18-
"splitting",
19-
"css",
20-
"vars"
21-
],
17+
"keywords": ["split", "text", "char", "word", "splitting", "css", "vars"],
2218
"author": "Stephen Shaw ([email protected])",
2319
"license": "MIT",
2420
"bugs": {

‎splitting.js‎

Lines changed: 108 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,117 @@
1-
var Splitting = (function() {
2-
/**
3-
* # Splitting.$
4-
* Convert selector or NodeList to array for easier manipulation.
5-
*
6-
* @param {*} els - Elements or selector
7-
* @param {*} parent
8-
*/
9-
function $(els, parent) {
10-
return Array.prototype.slice.call(
11-
els.nodeName
12-
? [els]
13-
: els[0].nodeName ? els : (parent || document).querySelectorAll(els),
14-
0
15-
);
16-
}
17-
18-
/**
19-
* # Splitting
20-
* CSS vars for split words & chars!
21-
* `Splitting` fn handles array-ifying the
22-
* @param {*} els
23-
*/
24-
function Splitting(els) {
25-
return $(els).map(function(el, i) {
26-
if (!el._splitting) {
27-
el._splitting = {
28-
el: el
29-
};
30-
el.className += " splitting";
31-
}
32-
return el._splitting;
33-
});
34-
}
35-
Splitting.$ = $;
36-
37-
/**
38-
* # Splitting.index
39-
* Index split elements and add them to a Splitting instance.
40-
*
41-
* @param {*} s
42-
* @param {*} key
43-
* @param {*} splits
44-
*/
45-
function index(s, key, splits) {
46-
if (splits) {
47-
s[key + "s"] = splits;
48-
s.el.style.setProperty("--total-" + key + "s", splits.length);
49-
splits.map(function(el, i) {
50-
el.style.setProperty("--" + key + "-index", i);
51-
});
1+
/**
2+
* # Splitting
3+
* CSS vars for split words & chars!
4+
* `Splitting` fn handles array-ifying the
5+
* @param {*} els
6+
*/
7+
function Splitting(els) {
8+
return $(els).map(function(el, i) {
9+
if (!el._splitting) {
10+
el._splitting = {
11+
el: el
12+
};
13+
el.className += " splitting";
5214
}
53-
return s;
54-
}
55-
Splitting.index = index;
15+
return el._splitting;
16+
});
17+
}
5618

57-
/**
58-
* # Splitting.split
59-
* Split an element's innerText into individual elements
60-
* @param {Node} el - Element to split
61-
* @param {String} key -
62-
* @param {String|RegEx} splitBy - string or regex to split the innerText by
63-
* @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
64-
*/
65-
function split(el, key, splitBy, space) {
66-
var text = el.innerText;
67-
el.innerHTML = "";
19+
/**
20+
* # Splitting.$
21+
* Convert selector or NodeList to array for easier manipulation.
22+
*
23+
* @param {*} els - Elements or selector
24+
* @param {*} parent
25+
*/
26+
function $(els, parent) {
27+
return Array.prototype.slice.call(
28+
els.nodeName
29+
? [els]
30+
: els[0].nodeName ? els : (parent || document).querySelectorAll(els),
31+
0
32+
);
33+
}
34+
Splitting.$ = $;
6835

69-
return text.split(splitBy).map(function(split, i) {
70-
var splitEl = document.createElement("i");
71-
splitEl.className = key;
72-
splitEl.setAttribute("data-" + key, split);
73-
splitEl.innerText = (space && i > 0 ? " " : "") + split;
74-
el.appendChild(splitEl);
75-
return splitEl;
36+
/**
37+
* # Splitting.index
38+
* Index split elements and add them to a Splitting instance.
39+
*
40+
* @param {*} s
41+
* @param {*} key
42+
* @param {*} splits
43+
*/
44+
function index(s, key, splits) {
45+
if (splits) {
46+
s[key + "s"] = splits;
47+
s.el.style.setProperty("--total-" + key + "s", splits.length);
48+
splits.map(function(el, i) {
49+
el.style.setProperty("--" + key + "-index", i);
7650
});
7751
}
78-
Splitting.split = split;
52+
return s;
53+
}
54+
Splitting.index = index;
7955

80-
/**
81-
* # Splitting.children
82-
* Add CSS Var indexes to a DOM element's children. Useful for lists.
83-
* @param {String|NodeList} parent - Parent element(s) or selector
84-
* @param {String|NodeList} children - Child element(s) or selector
85-
* @param {String} key -
86-
* @example `Splitting.children('ul','li','item'); // Index every unordered list's items with the --item CSS var.`
87-
*/
88-
Splitting.children = function(parent, children, key) {
89-
return Splitting(parent).map(function(s) {
90-
return index(s, key, $(chidlren, s.el));
91-
});
92-
};
56+
/**
57+
* # Splitting.split
58+
* Split an element's innerText into individual elements
59+
* @param {Node} el - Element to split
60+
* @param {String} key -
61+
* @param {String|RegEx} splitBy - string or regex to split the innerText by
62+
* @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
63+
*/
64+
function split(el, key, splitBy, space) {
65+
var text = el.innerText;
66+
el.innerHTML = "";
9367

94-
Splitting.words = function(els) {
95-
return Splitting(els).map(function(s, i) {
96-
return s.words ? s : index(s, "word", split(s.el, "word", /\s+/, true));
97-
});
98-
};
68+
return text.split(splitBy).map(function(split, i) {
69+
var splitEl = document.createElement("i");
70+
splitEl.className = key;
71+
splitEl.setAttribute("data-" + key, split);
72+
splitEl.innerText = (space && i > 0 ? " " : "") + split;
73+
el.appendChild(splitEl);
74+
return splitEl;
75+
});
76+
}
77+
Splitting.split = split;
9978

100-
/**
101-
* # Splitting.chars
102-
* Split an element into words and those words into chars
103-
*/
104-
Splitting.chars = function(els) {
105-
return Splitting.words(els).map(function(s) {
106-
return s.chars
107-
? s
108-
: index(
109-
s,
110-
"char",
111-
s.words.reduce(function(val, word, i) {
112-
return val.concat(split(word, "char", ""));
113-
}, [])
114-
);
115-
});
116-
};
79+
/**
80+
* # Splitting.children
81+
* Add CSS Var indexes to a DOM element's children. Useful for lists.
82+
* @param {String|NodeList} parent - Parent element(s) or selector
83+
* @param {String|NodeList} children - Child element(s) or selector
84+
* @param {String} key -
85+
* @example `Splitting.children('ul','li','item'); // Index every unordered list's items with the --item CSS var.`
86+
*/
87+
Splitting.children = function(parent, children, key) {
88+
return Splitting(parent).map(function(s) {
89+
return index(s, key, $(children, s.el));
90+
});
91+
};
92+
93+
Splitting.words = function(els) {
94+
return Splitting(els).map(function(s, i) {
95+
return s.words ? s : index(s, "word", split(s.el, "word", /\s+/, true));
96+
});
97+
};
98+
99+
/**
100+
* # Splitting.chars
101+
* Split an element into words and those words into chars
102+
*/
103+
Splitting.chars = function(els) {
104+
return Splitting.words(els).map(function(s) {
105+
return s.chars
106+
? s
107+
: index(
108+
s,
109+
"char",
110+
s.words.reduce(function(val, word, i) {
111+
return val.concat(split(word, "char", ""));
112+
}, [])
113+
);
114+
});
115+
};
117116

118-
return Splitting;
119-
})();
117+
export default Splitting;

‎splitting.min.js‎

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

0 commit comments

Comments
 (0)