| 71 | * Class representing the TypeShuffle object |
| 72 | */ |
| 73 | export class TypeShuffle { |
| 74 | // DOM elements |
| 75 | DOM = { |
| 76 | // the main text element |
| 77 | el: null, |
| 78 | }; |
| 79 | // array of Line objs |
| 80 | lines = []; |
| 81 | // array of letters and symbols |
| 82 | lettersAndSymbols = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '!', '@', '#', '$', '&', '*', '(', ')', '-', '_', '+', '=', '/', '[', ']', '{', '}', ';', ':', '<', '>', ',', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; |
| 83 | // effects and respective methods |
| 84 | effects = { |
| 85 | 'fx1': () => this.fx1(), |
| 86 | 'fx2': () => this.fx2(), |
| 87 | 'fx3': () => this.fx3(), |
| 88 | 'fx4': () => this.fx4(), |
| 89 | 'fx5': () => this.fx5(), |
| 90 | 'fx6': () => this.fx6(), |
| 91 | }; |
| 92 | totalChars = 0; |
| 93 | |
| 94 | /** |
| 95 | * Constructor. |
| 96 | * @param {Element} DOM_el - main text element |
| 97 | */ |
| 98 | constructor(DOM_el) { |
| 99 | this.DOM.el = DOM_el; |
| 100 | // Apply Splitting (two times to have lines, words and chars) |
| 101 | const results = Splitting({ |
| 102 | target: this.DOM.el, |
| 103 | by: 'lines' |
| 104 | }) |
| 105 | results.forEach(s => Splitting({ target: s.words })); |
| 106 | |
| 107 | // for every line |
| 108 | for (const [linePosition, lineArr] of results[0].lines.entries()) { |
| 109 | // create a new Line |
| 110 | const line = new Line(linePosition); |
| 111 | let cells = []; |
| 112 | let charCount = 0; |
| 113 | // for every word of each line |
| 114 | for (const word of lineArr) { |
| 115 | // for every character of each line |
| 116 | for (const char of [...word.querySelectorAll('.char')]) { |
| 117 | cells.push( |
| 118 | new Cell(char, { |
| 119 | position: charCount, |
| 120 | previousCellPosition: charCount === 0 ? -1 : charCount-1 |
| 121 | }) |
| 122 | ); |
| 123 | ++charCount; |
| 124 | } |
| 125 | } |
| 126 | line.cells = cells; |
| 127 | this.lines.push(line); |
| 128 | this.totalChars += charCount; |
| 129 | } |
| 130 |