├── LICENSE
├── README.md
├── demo
└── basic.html
├── index.js
└── package.json
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Luigi De Rosa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # split-in-lines
2 | Take an HTML element with text, and split it in lines.
3 | Useful to achieve some effects, like this:
4 |
5 | 
6 |
7 | # Usage
8 | ```
9 | npm install split-in-lines
10 | ```
11 |
12 | ```javascript
13 | new SplitInLines(HTMLElement);
14 | ```
15 |
16 |
--------------------------------------------------------------------------------
/demo/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
18 | Hello this is just an example test!
19 |
20 |
21 |
22 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var SplitInLines = class SplitInLines {
2 | constructor(el) {
3 | this.el = el;
4 | this.init();
5 | }
6 |
7 | init() {
8 | this.lines = [];
9 | this.chars = [];
10 |
11 | this.text = this.el.textContent;
12 | this.empty();
13 |
14 | this.text.split('').forEach((text) => {
15 | const span = document.createElement('span');
16 | span.textContent = text;
17 |
18 | this.chars.push(span);
19 | this.el.appendChild(span);
20 | });
21 |
22 | this.parseChars();
23 | this.writeLines();
24 | }
25 |
26 | parseChars() {
27 | let oldTop = null;
28 | let index = -1;
29 |
30 | this.chars.forEach((span) => {
31 | const top = span.getBoundingClientRect().top;
32 |
33 | if (top !== oldTop) {
34 | this.lines.push([]);
35 | index++;
36 | }
37 |
38 | this.lines[index].push(span.textContent);
39 | oldTop = top;
40 | });
41 | }
42 |
43 | writeLines() {
44 | this.empty();
45 |
46 | this.lines.forEach((line) => {
47 | const outerWrapper = document.createElement('div');
48 | const wrapper = document.createElement('span');
49 |
50 | outerWrapper.classList.add('split-lines-outer');
51 | wrapper.classList.add('split-lines-inner');
52 |
53 | wrapper.textContent = line.join('');
54 |
55 | outerWrapper.appendChild(wrapper);
56 | this.el.appendChild(outerWrapper);
57 | });
58 | }
59 |
60 | empty() {
61 | this.el.textContent = '';
62 | }
63 |
64 | clear() {
65 | this.el.textContent = this.text;
66 | }
67 | }
68 |
69 | if (typeof module !== 'undefined') {
70 | module.exports = SplitInLines;
71 | }
72 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "split-in-lines",
3 | "version": "1.0.0",
4 | "description": "Take an HTML element with text, and split it in lines.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/luruke/split-in-lines.git"
12 | },
13 | "keywords": [
14 | "split",
15 | "text",
16 | "animation"
17 | ],
18 | "author": "luruke",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/luruke/split-in-lines/issues"
22 | },
23 | "homepage": "https://github.com/luruke/split-in-lines"
24 | }
25 |
--------------------------------------------------------------------------------