Refactor: JS syntax

docs/js/customization.js

@@ -1,5 +1,5 @@
 /*
- * Add some magic to Pico docs
+ * Customization
  *
  * Pico.css - https://picocss.com
  * Copyright 2019-2021 - Licensed under MIT

docs/js/grid.js

@@ -1,12 +1,100 @@
 /*
- * Add some magic to Pico docs
+ * Grid
  *
  * Pico.css - https://picocss.com
  * Copyright 2019-2021 - Licensed under MIT
  */
 
-// Imports
-import grid from './src/grid.js';
+const grid = {
   
-// Grid Interaction
+  // Config
+  buttons: {
+    text: {
+      add: 'Add column',
+      remove: 'Remove column',
+    },
+    target: '#grid article',
+  },
+  grid: {
+    current: 4,
+    min: 1,
+    max: 12,
+    gridTarget: '#grid .grid',
+    codeTarget: '#grid 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('#grid button.add').addEventListener('click', () => {
+      this.addColumn();
+    }, false);
+
+    // Remove button listener
+    document.querySelector('#grid button.remove').addEventListener('click', () => {
+      this.removeColumn();
+    }, 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();
+    }
+  },
+};
+
+// Init
 grid.init();

docs/js/src/color-picker.js

@@ -31,12 +31,7 @@ export const colorPicker = {
     // Loop colors
     for (const color in this.colors) {
       // Buttons
-      innerButtons +=
-        '<button data-color="' +
-        color +
-        '" aria-label="Activate ' +
-        color +
-        ' theme"></button>';
+      innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
 
       // Styles
       innerStyles += `
@@ -62,19 +57,13 @@ export const colorPicker = {
 
     // Buttons listeners
     this.buttons = document.querySelectorAll(this.selectorButton);
-    this.buttons.forEach(
-      function (button) {
-        button.addEventListener(
-          'click',
-          function (event) {
+    this.buttons.forEach( button => { 
+      button.addEventListener('click', event => {
         let color = event.target.getAttribute('data-color');
         this.setActiveButton(color);
         this.generateTheme(color);
-          }.bind(this),
-          false
-        );
-      }.bind(this)
-    );
+      }, false);
+    });
 
     // Insert CSS Styles
     let containerStyles = document.createElement('STYLE');
@@ -87,16 +76,12 @@ export const colorPicker = {
   // Set active button
   setActiveButton(color) {
     // Remove all active states
-    this.buttons.forEach(
-      function (button) {
+    this.buttons.forEach( button => {
       button.removeAttribute('class');
-      }.bind(this)
-    );
+    });
 
     // Set active state
-    let buttonPicked = document.querySelector(
-      this.selectorButton + '[data-color="' + color + '"]'
-    );
+    let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
     buttonPicked.setAttribute('class', 'picked');
   },
 
@@ -116,18 +101,12 @@ export const colorPicker = {
       '.inverse': data['inverse'],
     };
 
-    Object.keys(swaps).forEach(
-      function (swap) {
-        let targets = document.querySelectorAll(
-          this.selectorSection + ' ' + swap
-        );
-        targets.forEach(
-          function (target) {
+    Object.keys(swaps).forEach( swap => {
+      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
+      targets.forEach( target => {
         target.innerHTML = swaps[swap];
-          }.bind(this)
-        );
-      }.bind(this)
-    );
+      });
+    });
 
     // 2. Update CSS Styles
     const innerStyles = `

docs/js/src/grid.js

@@ -1,107 +0,0 @@
-/*
- * 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: '#grid article',
-  },
-  grid: {
-    current: 4,
-    min: 1,
-    max: 12,
-    gridTarget: '#grid .grid',
-    codeTarget: '#grid 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('#grid button.add').addEventListener(
-      'click',
-      function () {
-        this.addColumn();
-      }.bind(this),
-      false
-    );
-
-    // Remove button listener
-    document.querySelector('#grid 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;

docs/js/src/theme-switcher.js

@@ -23,36 +23,21 @@ export const themeSwitcher = {
 
   // Prefered color scheme
   get preferedColorScheme() {
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    } else {
-      return 'light';
-    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   },
 
   // Init switchers
   initSwitchers() {
     const buttons = document.querySelectorAll(this.buttonsTarget);
-    buttons.forEach(
-      function (button) {
-        button.addEventListener(
-          'click',
-          function (event) {
-            if (this.scheme == 'dark') {
-              this.scheme = 'light';
-            } else {
-              this.scheme = 'dark';
-            }
-          }.bind(this),
-          false
-        );
-      }.bind(this)
-    );
+    buttons.forEach(button => {
+      button.addEventListener('click', () => {
+        this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
+      }, false);
+    });
   },
 
   // Add new button
   addButton(config) {
-    // Insert Switcher
     let button = document.createElement(config.tag);
     button.className = config.class;
     document.querySelector(config.target).appendChild(button);
@@ -61,19 +46,11 @@ export const themeSwitcher = {
   // Set scheme
   set scheme(scheme) {
     if (scheme == 'auto') {
-      if (this.preferedColorScheme == 'dark') {
-        this._scheme = 'dark';
-      } else {
-        this._scheme = 'light';
+      this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
     }
-    }
-
-    // Set to Dark
     else if (scheme == 'dark' || scheme == 'light') {
       this._scheme = scheme;
     }
-
-    // Set to Apply theme
     this.applyScheme();
   },
 
@@ -84,22 +61,14 @@ export const themeSwitcher = {
 
   // Apply scheme
   applyScheme() {
-    // Root attribute
     document.querySelector('html').setAttribute('data-theme', this.scheme);
-
-    // Buttons text
     const buttons = document.querySelectorAll(this.buttonsTarget);
-    let text;
     buttons.forEach(
-      function (button) {
-        if (this.scheme == 'dark') {
-          text = this.change.dark;
-        } else {
-          text = this.change.light;
-        }
+      button => {
+        const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
         button.innerHTML = text;
         button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
-      }.bind(this)
+      }
     );
   },
 };

docs/js/src/toggle-navigation.js

@@ -18,25 +18,14 @@ export const toggleNavigation = {
   },
 
   onToggleClick() {
-    this.toggleLink.addEventListener(
-      'click',
-      function (event) {
+    this.toggleLink.addEventListener('click', event => {
       event.preventDefault();
-        if (this.state == 'closed-on-mobile') {
-          this.state = 'open';
-        } else {
-          this.state = 'closed-on-mobile';
-        }
+      this.state == 'closed-on-mobile' 
+        ? this.state = 'open' 
+        : this.state = 'closed-on-mobile';
       this.nav.removeAttribute('class');
       this.nav.classList.add(this.state);
-      }.bind(this),
-      false
-    );
-  },
-
-  // Apply navigation state
-  applyState() {
-    
+    }, false);
   },
 
   // Get state