](https://splitting.js.org)
2 |
3 | ### _CSS Vars for split words, chars & more!_
4 |
5 | 
6 | 
7 | 
8 | 
9 |
10 | Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!
11 |
12 | Most Splitting methods utilize a series of `
7 | 
8 |
9 | `
10 |
11 | var actual = Splitting({
12 | target: el,
13 | by: 'cells',
14 | rows: 4,
15 | columns: 3,
16 | image: true
17 | })[0];
18 |
19 | expect(actual.el.style.backgroundImage).toBe('url(http://placehold.it/1/1)');
20 |
21 | expect(actual.cells.length).toBe(12);
22 | expect(actual.cellColumns.length).toBe(3);
23 | expect(actual.cellRows.length).toBe(4);
24 | expect(actual.cells[0].classList.contains('cell')).toBeTruthy();
25 | });
26 |
27 | test('initializes multiple cell zones', function() {
28 | var els = [
29 | $create`
30 |
31 |
`,
32 | $create`
33 |
34 |
`
35 | ];
36 |
37 | debugger;
38 |
39 | var actual = Splitting({
40 | target: els,
41 | image: true
42 | });
43 |
44 | expect(actual[0].cells.length).toBe(3);
45 | expect(actual[0].cellRows.length).toBe(3);
46 | expect(actual[0].cellColumns.length).toBe(1);
47 |
48 | expect(actual[1].cells.length).toBe(4);
49 | expect(actual[1].cellColumns.length).toBe(4);
50 | expect(actual[1].cellRows.length).toBe(1);
51 | });
--------------------------------------------------------------------------------
/tests/features/splitting.chars.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 | import { $create } from '../utils/dom';
3 |
4 | test('an empty element', function() {
5 | var $el = document.createElement('div');
6 |
7 | var els = Splitting({ target: $el, by: 'chars' });
8 | expect(els.length).toBe(1);
9 | expect(els[0].words.length).toBe(0);
10 | expect(els[0].chars.length).toBe(0);
11 | });
12 |
13 | test('an element with a single character', function() {
14 | var el = $create`C
`
15 |
16 | var actual = Splitting({ target: el, by: 'chars' });
17 | expect(actual.length).toBe(1);
18 | expect(actual[0].words[0].textContent).toBe('C');
19 | });
20 |
21 | test('an element with a single word', function() {
22 | var $el = document.createElement('div');
23 | $el.innerHTML = 'SPLITTING';
24 |
25 | var els = Splitting({ target: $el, by: 'chars' });
26 | expect(els.length).toBe(1);
27 | expect(els[0].words[0].textContent).toBe('SPLITTING');
28 | });
29 |
30 | test('an element with a multiple words', function() {
31 | var input = $create`with multiple words
`;
32 |
33 | var actual = Splitting({ target: input, by: 'chars' });
34 | expect(actual.length).toBe(1);
35 | expect(actual[0].words[0].textContent).toBe('with');
36 | expect(actual[0].words[1].textContent).toBe('multiple');
37 | expect(actual[0].words[2].textContent).toBe('words');
38 | });
39 |
40 | test('an element with a multiple words with spaces', function() {
41 | var input = document.createElement('div');
42 | input.innerHTML = 'with many';
43 |
44 | var actual = Splitting({ target: input, by: 'chars' });
45 | expect(actual.length).toBe(1);
46 | expect(actual[0].chars.length).toBe(8);
47 | expect(actual[0].chars[0].textContent).toBe('w');
48 | expect(actual[0].chars[1].textContent).toBe('i');
49 | expect(actual[0].chars[2].textContent).toBe('t');
50 | expect(actual[0].chars[3].textContent).toBe('h');
51 | expect(actual[0].chars[4].textContent).toBe('m');
52 | expect(actual[0].chars[5].textContent).toBe('a');
53 | expect(actual[0].chars[6].textContent).toBe('n');
54 | expect(actual[0].chars[7].textContent).toBe('y');
55 | });
56 |
57 | test('an element with a multiple words with spaces', function() {
58 | var input = document.createElement('div');
59 | input.textContent = 'with many';
60 |
61 | var actual = Splitting({ target: input, by: 'chars', whitespace: true });
62 | expect(actual.length).toBe(1);
63 | expect(actual[0].chars[0].textContent).toBe('w');
64 | expect(actual[0].chars[1].textContent).toBe('i');
65 | expect(actual[0].chars[2].textContent).toBe('t');
66 | expect(actual[0].chars[3].textContent).toBe('h');
67 | expect(actual[0].chars[4].textContent).toBe(' ');
68 | expect(actual[0].chars[5].textContent).toBe('m');
69 | expect(actual[0].chars[6].textContent).toBe('a');
70 | expect(actual[0].chars[7].textContent).toBe('n');
71 | expect(actual[0].chars[8].textContent).toBe('y');
72 | });
73 |
74 | test('a nested empty element', function() {
75 | var $el = document.createElement('div');
76 | var $el2 = document.createElement('div');
77 | $el.appendChild($el2)
78 | $el2.innerHTML = ''
79 |
80 | var results = Splitting({ target: $el, by: 'chars' });
81 |
82 | expect(results.length).toBe(1)
83 | expect(results[0].words.length).toBe(0);
84 | });
85 |
86 | test('an element with emojis', function () {
87 | var $el = document.createElement("div");
88 | $el.innerHTML = "Hello 👨👩👧👦⭐️";
89 |
90 | var results = Splitting({ target: $el, by: 'chars' });
91 |
92 | expect(results.length).toBe(1);
93 | expect(results[0].chars.length).toBe(7);
94 | expect(results[0].words.length).toBe(2);
95 | });
96 |
97 | test('a multi-level nested empty element', function() {
98 | // todo
99 | });
100 |
101 | test('a multi-level nested element', function() {
102 | // todo
103 | });
104 |
105 | test('retriggering on already split element', function() {
106 | // todo
107 | });
108 |
--------------------------------------------------------------------------------
/tests/features/splitting.grid.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 | import { $create } from '../utils/dom';
3 |
4 | test('an empty element', function () {
5 | var el = document.createElement('div');
6 | var results = Splitting({ target: el, by: 'grid' });
7 |
8 | expect(results.length).toBe(1)
9 | expect(results[0].cols.length).toBe(0);
10 | expect(results[0].rows.length).toBe(0);
11 | });
12 |
13 | test('an element with one element', function () {
14 | var el = $create`
15 |
16 | `
17 |
18 | var results = Splitting({ target: el, by: 'grid' });
19 |
20 | expect(results.length).toBe(1)
21 | expect(results[0].cols.length).toBe(1);
22 | expect(results[0].rows.length).toBe(1);
23 | });
24 |
25 | test('an element with multiple elements', function () {
26 | var el = $create`
27 |
28 |
`
31 |
32 | el.children[1].offsetTop = 10;
33 |
34 | var results = Splitting({ target: el, by: 'grid' });
35 |
36 | expect(results.length).toBe(1)
37 | expect(results[0].rows.length).toBe(2);
38 | expect(results[0].cols.length).toBe(1);
39 | });
40 |
41 | test('an element with nested elements', function () {
42 | var el = $create`
43 | 1
29 | 2
30 |
44 |
47 | `
48 |
49 | el.children[1].offsetTop = 10;
50 |
51 | document.body.appendChild(el);
52 |
53 | var results = Splitting({ target: el, by: 'grid', matching: '.item2' });
54 |
55 | expect(results.length).toBe(1)
56 | expect(results[0].rows.length).toBe(2);
57 | expect(results[0].cols.length).toBe(1);
58 |
59 | document.body.removeChild(el);
60 | });
61 |
62 | test('no child selector', function () {
63 | // todo
64 | });
65 |
66 | test('no key', function () {
67 | // todo
68 | });
69 |
--------------------------------------------------------------------------------
/tests/features/splitting.html.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 |
3 | test('basic test', function () {
4 | const content = "1
45 | 2
46 | Hello World!
";
5 | const actual = Splitting.html({ content });
6 |
7 | // jsdom isn't outputting css custom properties, so this is as correct as we can go
8 | const expected =
9 | `` +
10 | '' +
11 | '' +
12 | 'H' +
13 | 'e' +
14 | 'l' +
15 | 'l' +
16 | 'o' +
17 | '' +
18 | ' ' +
19 | '' +
20 | 'W' +
21 | 'o' +
22 | 'r' +
23 | 'l' +
24 | 'd' +
25 | '!' +
26 | '' +
27 | '
' +
28 | ``;
29 |
30 | expect(actual).toBe(expected);
31 | });
32 |
33 | test('splitting textContent works properly', () => {
34 | const content = "Hello!";
35 | const actual = Splitting.html({ content });
36 |
37 | const expected = ``
38 | + ``
39 | + `H`
40 | + `e`
41 | + `l`
42 | + `l`
43 | + `o`
44 | + `!`
45 | + ``
46 | + ``;
47 |
48 | expect(actual).toBe(expected);
49 | });
50 |
--------------------------------------------------------------------------------
/tests/features/splitting.items.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 |
3 | test('an empty element', function () {
4 | var el = document.createElement('div');
5 | var results = Splitting({ target: el, by: 'items' });
6 |
7 | expect(results.length).toBe(1)
8 | expect(results[0].items.length).toBe(0);
9 | });
10 |
11 | test('an element with one element', function () {
12 | var el = document.createElement('div');
13 | var el2 = document.createElement('div');
14 | el.appendChild(el2);
15 | var results = Splitting({ target: el, by: 'items' });
16 |
17 | expect(results.length).toBe(1)
18 | expect(results[0].items.length).toBe(1);
19 | });
20 |
21 | test('an element with multiple elements', function () {
22 | var el = document.createElement('div');
23 | var el2 = document.createElement('div');
24 | var el3 = document.createElement('div');
25 | el.appendChild(el2);
26 | el.appendChild(el3);
27 | var results = Splitting({ target: el, by: 'items' });
28 |
29 | expect(results.length).toBe(1)
30 | expect(results[0].items.length).toBe(2);
31 | });
32 |
33 | test('an element with nested elements', function () {
34 | var el = document.createElement('div');
35 | var el1 = document.createElement('div');
36 | el.appendChild(el1);
37 |
38 | var el2 = document.createElement('div');
39 | el2.classList.add('item')
40 | el1.appendChild(el2);
41 |
42 | var el3 = document.createElement('div');
43 | el3.classList.add('item')
44 | el1.appendChild(el3);
45 |
46 | var results = Splitting({ target: el, by: 'items', matching: '.item' });
47 |
48 | expect(results.length).toBe(1)
49 | expect(results[0].items.length).toBe(2);
50 | });
51 |
52 | test('no child selector', function () {
53 | // todo
54 | });
55 |
56 | test('no key', function () {
57 | // todo
58 | });
59 |
--------------------------------------------------------------------------------
/tests/features/splitting.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 |
3 | test("no arguments", function () {
4 | var result = Splitting();
5 | expect(result).toEqual([]);
6 | });
7 |
8 |
9 | test("passing an element", function () {
10 | var el = document.createElement("div");
11 | var els = Splitting({ target: el });
12 | expect(els.length).toEqual(1);
13 | expect(els[0].el).toBe(el);
14 | });
15 |
16 | test("passing a nodelist", function () {
17 |
18 | var id = 'test-element';
19 | var el = document.createElement("div");
20 | el.setAttribute('id', id);
21 | document.body.appendChild(el);
22 |
23 | var els = Splitting({ target: document.querySelectorAll("#" + id) });
24 | expect(els.length).toEqual(1);
25 | expect(els[0].el).toBe(el);
26 |
27 | document.body.removeChild(el);
28 | });
29 |
30 | test("passing a class selector", function () {
31 | var className = "passing-class-selector"
32 | var el = document.createElement("div");
33 | el.className = className;
34 | document.body.appendChild(el);
35 |
36 | var els = Splitting({ target: "." + className });
37 | expect(els.length).toEqual(1);
38 | expect(els[0].el).toBe(el);
39 |
40 | document.body.removeChild(el);
41 | });
42 |
43 | test("passing a non-existant selector", function () {
44 |
45 | var els = Splitting({ target: ".nonexistant-class-selector" });
46 | expect(els.length).toEqual(0);
47 |
48 | });
49 |
50 | test("passing an attribute selector", function () {
51 | var el = document.createElement("span");
52 | el.setAttribute("data-attribute", true);
53 | document.body.appendChild(el);
54 |
55 | var els = Splitting({ target: "[data-attribute]" });
56 | expect(els.length).toEqual(1);
57 | expect(els[0].el).toBe(el);
58 |
59 | document.body.removeChild(el);
60 | });
61 |
62 | test("returns the same thing if split more than once", function () {
63 | var el = document.createElement("span");
64 | el.innerHTML = "Hello World";
65 |
66 | var els1 = Splitting({ target: el });
67 | var els2 = Splitting({ target: el });
68 | expect(els1[0]).toBe(els2[0]);
69 | });
70 |
71 | test("returns a different thing if force split", function () {
72 | var el = document.createElement("span");
73 | el.innerHTML = "Hello World";
74 |
75 | var els1 = Splitting({ target: el, by: 'grid' });
76 | var els2 = Splitting({ target: el, by: 'grid', force: true });
77 | expect(els1[0]).not.toBe(els2[0]);
78 | });
79 |
80 | test("A plugin of \"true\" is assumed to be the default value", () => {
81 | var el = document.createElement("span");
82 | el.setAttribute("data-splitting", "true");
83 | el.innerHTML = "TEST";
84 |
85 | var els1 = Splitting({ target: el });
86 | expect(els1[0].chars.length).toBe(4);
87 | });
88 |
89 | test("throw a specific error when the plugin is not loaded", () => {
90 | var el = document.createElement("span");
91 | el.setAttribute("data-splitting", "not-valid");
92 |
93 | try {
94 | Splitting({ target: el })
95 | throw new Error("did not throw");
96 | } catch (err) {
97 | expect(err.message).toBe("plugin not loaded: not-valid")
98 | }
99 | });
--------------------------------------------------------------------------------
/tests/features/splitting.lines.js:
--------------------------------------------------------------------------------
1 | import Splitting from '../../src/all';
2 |
3 | test('an empty element', function () {
4 | var $el = document.createElement('div')
5 |
6 | var els = Splitting({ target: $el, by: 'lines' })
7 | expect(els.length).toBe(1)
8 | expect(els[0].lines.length).toBe(0)
9 | expect(els[0].words.length).toBe(0)
10 | })
11 |
12 | test('an element with a single line', function () {
13 | var $el = document.createElement('div')
14 | $el.innerHTML = 'SPLITTING'
15 |
16 | var els = Splitting({ target: $el, by: 'lines' })
17 | expect(els.length).toBe(1)
18 | expect(els[0].words[0].textContent).toBe('SPLITTING')
19 | })
20 |
21 | test('a nested empty element', function () {
22 | // todo
23 | })
24 |
25 | test('a multi-level nested empty element', function () {
26 | // todo
27 | })
28 |
29 | test('a multi-level nested element', function () {
30 | // todo
31 | })
32 |
33 | test('retriggering on already split element', function () {
34 | // todo
35 | })
36 |
--------------------------------------------------------------------------------
/tests/features/splitting.words.js:
--------------------------------------------------------------------------------
1 | import Splitting from "../../src/all";
2 |
3 | test("an empty element", () => {
4 | var $el = document.createElement("div");
5 |
6 | var els = Splitting({ target: $el, by: "words" });
7 | expect(els.length).toBe(1);
8 | expect(els[0].words.length).toBe(0);
9 | });
10 |
11 | test("an element with a single word", () => {
12 | var $el = document.createElement("div");
13 | $el.innerHTML = "SPLITTING";
14 |
15 | var els = Splitting({ target: $el, by: "words" });
16 | expect(els.length).toBe(1);
17 | expect(els[0].words[0].textContent).toBe("SPLITTING");
18 | });
19 |
20 | test("an element with a multiple words", () => {
21 | var $el = document.createElement("div");
22 | $el.innerHTML = "with multiple words";
23 |
24 | var els = Splitting({ target: $el, by: "words" });
25 | expect(els.length).toBe(1);
26 | expect(els[0].words.length).toBe(3);
27 | expect(els[0].words[0].textContent).toBe("with");
28 | expect(els[0].words[1].textContent).toBe("multiple");
29 | expect(els[0].words[2].textContent).toBe("words");
30 | });
31 |
32 | test("mixed content with spaces around words", () => {
33 | const input = 'Are We Good?
'
34 | const actual = Splitting.html({ content: input, by: 'words' });
35 | // prettier-ignore
36 | const expected =
37 | ``
38 | + ``
39 | + `Are`
40 | + ' ' // <- space preserved
41 | + ``
42 | + `We`
43 | + ``
44 | + ' ' // <- space preserved
45 | + `Good?`
46 | + `
`
47 | + ``;
48 |
49 | expect(actual).toBe(expected);
50 | });
51 |
52 | test("an element with a multiple words and emojis", () => {
53 | var $el = document.createElement("div");
54 | $el.innerHTML = "with multiple words and 🤔 🍌bananas! 👨👩👧👦";
55 |
56 | var els = Splitting({ target: $el, by: "words" });
57 | expect(els.length).toBe(1);
58 | expect(els[0].words.length).toBe(7);
59 | expect(els[0].words[0].textContent).toBe("with");
60 | expect(els[0].words[1].textContent).toBe("multiple");
61 | expect(els[0].words[2].textContent).toBe("words");
62 | expect(els[0].words[3].textContent).toBe("and");
63 | expect(els[0].words[4].textContent).toBe("🤔");
64 | expect(els[0].words[5].textContent).toBe("🍌bananas!");
65 | expect(els[0].words[6].textContent).toBe("👨👩👧👦");
66 | });
67 |
68 | test("a nested empty element", () => {
69 | // todo
70 | });
71 |
72 | test("a multi-level nested empty element", () => {
73 | // todo
74 | });
75 |
76 | test("a multi-level nested element", () => {
77 | // todo
78 | });
79 |
80 | test("retriggering on already split element", () => {
81 | // todo
82 | });
83 |
--------------------------------------------------------------------------------
/tests/utils/dom.js:
--------------------------------------------------------------------------------
1 | export function $create(content) {
2 | var el = document.createElement('div');
3 | el.innerHTML = content;
4 | return el.firstElementChild;
5 | }
--------------------------------------------------------------------------------