Revert "Feature: modal"

docs/js/src/grid.js

@@ -0,0 +1,106 @@
+/*
+ * 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();
+    }
+  },
+};
+
+export default grid;