picocss/docs/js/components/grid.js

/*
 * 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();
    }
  }
};