1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | const grid = {
|
9 |
|
10 |
|
11 | buttons: {
|
12 | text: {
|
13 | add: 'Add column',
|
14 | remove: 'Remove column',
|
15 | },
|
16 | target: '#grid article',
|
17 | },
|
18 | grid: {
|
19 | current: 4,
|
20 | min: 1,
|
21 | max: 12,
|
22 | gridTarget: '#grid .grid',
|
23 | codeTarget: '#grid pre code',
|
24 | },
|
25 |
|
26 |
|
27 | init() {
|
28 | this.addButtons();
|
29 | this.generateGrid();
|
30 | },
|
31 |
|
32 |
|
33 | addButtons() {
|
34 |
|
35 | let buttons = document.createElement('P');
|
36 | buttons.innerHTML = `
|
37 | <button class="secondary add">
|
38 | <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
39 | <line x1="12" y1="5" x2="12" y2="19"></line>
|
40 | <line x1="5" y1="12" x2="19" y2="12">'</line>
|
41 | </svg>
|
42 | ${this.buttons.text.add}
|
43 | </button>
|
44 |
|
45 | <button class="secondary remove">
|
46 | <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
47 | <line x1="5" y1="12" x2="19" y2="12"></line>
|
48 | </svg>
|
49 | ${this.buttons.text.remove}
|
50 | </button>`;
|
51 | document.querySelector(this.buttons.target).before(buttons);
|
52 |
|
53 |
|
54 | document.querySelector('#grid button.add').addEventListener('click', () => {
|
55 | this.addColumn();
|
56 | }, false);
|
57 |
|
58 |
|
59 | document.querySelector('#grid button.remove').addEventListener('click', () => {
|
60 | this.removeColumn();
|
61 | }, false);
|
62 | },
|
63 |
|
64 |
|
65 | generateGrid() {
|
66 |
|
67 | let htmlInner = '';
|
68 | let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
69 |
|
70 |
|
71 | for (let col = 0; col < this.grid.current; col++) {
|
72 | htmlInner += '<div>' + (col + 1) + '</div>';
|
73 | codeInner += ' <<b>div</b>>' + (col + 1) + '</<b>div</b>>\n';
|
74 | }
|
75 |
|
76 |
|
77 | codeInner += '</<b>div</b>>';
|
78 | document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
|
79 | document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
80 | },
|
81 |
|
82 |
|
83 | addColumn() {
|
84 | if (this.grid.current < this.grid.max) {
|
85 | this.grid.current++;
|
86 | this.generateGrid();
|
87 | }
|
88 | },
|
89 |
|
90 |
|
91 | removeColumn() {
|
92 | if (this.grid.current > this.grid.min) {
|
93 | this.grid.current--;
|
94 | this.generateGrid();
|
95 | }
|
96 | },
|
97 | };
|
98 |
|
99 |
|
100 | grid.init(); |
\ | No newline at end of file |