JavaScript modularization

2025-04-20 16:46:14 -04:00 · 2021-07-09 17:42:10 +07:00 · 2021-07-09 17:42:10 +07:00 · 9575624834
commit 9575624834
parent 366e0a55d6
21 changed files with 1629 additions and 1048 deletions
--- a/docs/js/components/grid.js
+++ b/docs/js/components/grid.js
@ -0,0 +1,104 @@
+/*
+ * Grid Interaction
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+export const grid = {
+
+  // Config
+  _buttons: {
+    text: {
+      add: 'Add column',
+      remove: 'Remove column'
+    },
+    target:  '#grids article'
+  },
+  _grid: {
+    current: 4,
+    min: 1,
+    max: 12,
+    gridTarget: '#grids .grid',
+    codeTarget: '#grids pre code'
+  },
+
+
+  // Init
+  init() {
+    this.addButtons();
+    this.generateGrid()
+  },
+
+
+  // Add buttons
+  addButtons() {
+
+    // Insert buttons
+    let buttons = document.createElement('P');
+    buttons.innerHTML = `
+      <button class="secondary add">
+        <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">
+          <line x1="12" y1="5" x2="12" y2="19"></line>
+          <line x1="5" y1="12" x2="19" y2="12">'</line>
+        </svg>
+        ${this._buttons.text.add}
+      </button>
+
+      <button class="secondary remove">
+        <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">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+        </svg>
+        ${this._buttons.text.remove}
+      </button>`;
+    document.querySelector(this._buttons.target).before(buttons);
+
+    // Add button listener
+    document.querySelector('#grids button.add').addEventListener('click', function() {
+      this.addColumn();
+    }.bind(this), false);
+
+    // Remove button listener
+    document.querySelector('#grids button.remove').addEventListener('click', function() {
+      this.removeColumn();
+    }.bind(this), false);
+  },
+
+
+  // Generate grid
+  generateGrid() {
+
+    // Config
+    let htmlInner = '';
+    let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
+
+    // Build
+    for (let col = 0; col < this._grid.current; col++) {
+     htmlInner += '<div>' + (col + 1) + '</div>';
+     codeInner += '  &lt;<b>div</b>&gt;' + (col+1) + '&lt;/<b>div</b>&gt;\n';
+    }
+
+    // Display
+    codeInner += '&lt;/<b>div</b>&gt;';
+    document.querySelector(this._grid.gridTarget).innerHTML = htmlInner;
+    document.querySelector(this._grid.codeTarget).innerHTML = codeInner;
+  },
+
+
+  // Add column
+  addColumn() {
+    if (this._grid.current < this._grid.max) {
+      this._grid.current++;
+      this.generateGrid();
+    }
+  },
+
+
+  // Remove column
+  removeColumn() {
+    if (this._grid.current > this._grid.min) {
+      this._grid.current--;
+      this.generateGrid();
+    }
+  }
+};