Revert "Merge branch 'master' into dev"

This reverts commit 6a6d67dbab, reversing
changes made to ba4bd765d8.

docs/js/src/aside.js

@@ -1,30 +0,0 @@
-/*
- * Aside adjustment
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-export const aside = {
-  // Config
-  minWidth: '992px',
-  targets: {
-    nav: 'aside nav',
-    details: 'aside details',
-  },
-
-  // Init
-  init() {
-    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
-      let nav = document.querySelector(this.targets.nav);
-      let details = document.querySelectorAll(this.targets.details);
-      if (nav.clientHeight < nav.scrollHeight) {
-        details.forEach(function (detail) {
-          detail.removeAttribute('open');
-        });
-      }
-    }
-  },
-};
-
-export default aside;

docs/js/src/color-picker.js

@@ -6,6 +6,7 @@
  */
 
 export const colorPicker = {
+  
   // Config
   colors: null,
   buttonsTarget: '#customization article[data-theme="generated"]',
@@ -30,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 += `
@@ -61,19 +57,13 @@ export const colorPicker = {
 
     // Buttons listeners
     this.buttons = document.querySelectorAll(this.selectorButton);
-    this.buttons.forEach(
-      function (button) {
-        button.addEventListener(
-          'click',
-          function (event) {
-            let color = event.target.getAttribute('data-color');
-            this.setActiveButton(color);
-            this.generateTheme(color);
-          }.bind(this),
-          false
-        );
-      }.bind(this)
-    );
+    this.buttons.forEach( button => { 
+      button.addEventListener('click', event => {
+        let color = event.target.getAttribute('data-color');
+        this.setActiveButton(color);
+        this.generateTheme(color);
+      }, false);
+    });
 
     // Insert CSS Styles
     let containerStyles = document.createElement('STYLE');
@@ -86,16 +76,12 @@ export const colorPicker = {
   // Set active button
   setActiveButton(color) {
     // Remove all active states
-    this.buttons.forEach(
-      function (button) {
-        button.removeAttribute('class');
-      }.bind(this)
-    );
+    this.buttons.forEach( button => {
+      button.removeAttribute('class');
+    });
 
     // 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');
   },
 
@@ -115,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) {
-            target.innerHTML = swaps[swap];
-          }.bind(this)
-        );
-      }.bind(this)
-    );
+    Object.keys(swaps).forEach( swap => {
+      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
+      targets.forEach( target => {
+        target.innerHTML = swaps[swap];
+      });
+    });
 
     // 2. Update CSS Styles
     const innerStyles = `

docs/js/src/grid.js

@@ -1,106 +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: '#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;

docs/js/src/scrollspy.js

@@ -1,74 +0,0 @@
-/*
- * Scrollspy
- * Automatically update nav targets based on scroll position
- *
- * Require `most-visible.js` (https://github.com/andyexeter/most-visible)
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-export const scrollspy = {
-  
-  // Config
-  minWidth: '992px',
-  interval: 75,
-  targets: {
-    sections: '[role="document"] > section',
-    nav: 'main aside nav',
-    active: 'active',
-  },
-
-  // Init
-  init() {
-    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
-      this.setActiveNav();
-      this.scrollStop();
-    }
-  },
-
-  // Set active section in nav
-  setActiveNav() {
-    // Get active section
-    let currentSection = mostVisible(this.targets.sections).getAttribute('id');
-
-    // Remove all active states
-    let links = document.querySelectorAll(
-      this.targets.nav + ' a.' + this.targets.active
-    );
-    links.forEach(
-      function (link) {
-        link.classList.remove(this.targets.active);
-      }.bind(this)
-    );
-
-    // Set active state
-    let activeLink = document.querySelector(
-      this.targets.nav + ' a[href="#' + currentSection + '"]'
-    );
-    activeLink.classList.add(this.targets.active);
-
-    // Open details parent
-    activeLink.closest('details').setAttribute('open', '');
-  },
-
-  // Scroll stop
-  scrollStop() {
-    let isScrolling;
-    window.addEventListener(
-      'scroll',
-      function (event) {
-        window.clearTimeout(isScrolling);
-        isScrolling = setTimeout(
-          function () {
-            this.setActiveNav();
-          }.bind(this),
-          this.interval
-        );
-      }.bind(this),
-      false
-    );
-  },
-};
-
-export default scrollspy;

docs/js/src/theme-switcher.js

@@ -6,6 +6,7 @@
  */
 
 export const themeSwitcher = {
+  
   // Config
   _scheme: 'auto',
   change: {
@@ -22,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);
@@ -60,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();
   },
 
@@ -83,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

@@ -0,0 +1,42 @@
+/*
+ * Toggle navigation
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+export const toggleNavigation = {
+  
+  // Config
+  _state: 'closed-on-mobile',
+  toggleLink: document.getElementById('toggle-docs-navigation'),
+  nav: document.querySelector('main > aside > nav'),
+
+  // Init
+  init() {
+    this.onToggleClick()
+  },
+
+  onToggleClick() {
+    this.toggleLink.addEventListener('click', event => {
+      event.preventDefault();
+      this.state == 'closed-on-mobile' 
+        ? this.state = 'open' 
+        : this.state = 'closed-on-mobile';
+      this.nav.removeAttribute('class');
+      this.nav.classList.add(this.state);
+    }, false);
+  },
+
+  // Get state
+  get state() {
+    return this._state;
+  },
+
+  // Set state
+  set state(state) {
+    this._state = state;
+  },
+};
+
+export default toggleNavigation;