Revert "Merge branch 'master' into dev"

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

docs/js/commons.js

@@ -0,0 +1,21 @@
+/*
+ * Add some magic to Pico docs
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Imports
+import themeSwitcher from './src/theme-switcher.js';
+import toggleNavigation from './src/toggle-navigation';
+
+// Theme switcher
+themeSwitcher.addButton({
+  tag: 'BUTTON',
+  class: 'contrast switcher theme-switcher',
+  target: 'body',
+});
+themeSwitcher.init();
+
+// Toggle navigation
+toggleNavigation.init();

docs/js/commons.min.js

@@ -0,0 +1 @@
+"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();

docs/js/customization.js

@@ -0,0 +1,14 @@
+/*
+ * Customization
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Imports
+import materialDesignColors from './src/material-design-colors.js';
+import colorPicker from './src/color-picker.js';
+
+// Color Picker
+colorPicker.colors = materialDesignColors;
+colorPicker.init();

docs/js/grid.js

@@ -1,25 +1,26 @@
 /*
- * Grid Interaction
+ * Grid
  *
  * Pico.css - https://picocss.com
  * Copyright 2019-2021 - Licensed under MIT
  */
 
-export const grid = {
+const grid = {
+  
   // Config
   buttons: {
     text: {
       add: 'Add column',
       remove: 'Remove column',
     },
-    target: '#grids article',
+    target: '#grid article',
   },
   grid: {
     current: 4,
     min: 1,
     max: 12,
-    gridTarget: '#grids .grid',
-    codeTarget: '#grids pre code',
+    gridTarget: '#grid .grid',
+    codeTarget: '#grid pre code',
   },
 
   // Init
@@ -50,22 +51,14 @@ export const grid = {
     document.querySelector(this.buttons.target).before(buttons);
 
     // Add button listener
-    document.querySelector('#grids button.add').addEventListener(
-      'click',
-      function () {
-        this.addColumn();
-      }.bind(this),
-      false
-    );
+    document.querySelector('#grid button.add').addEventListener('click', () => {
+      this.addColumn();
+    }, false);
 
     // Remove button listener
-    document.querySelector('#grids button.remove').addEventListener(
-      'click',
-      function () {
-        this.removeColumn();
-      }.bind(this),
-      false
-    );
+    document.querySelector('#grid button.remove').addEventListener('click', () => {
+      this.removeColumn();
+    }, false);
   },
 
   // Generate grid
@@ -103,4 +96,5 @@ export const grid = {
   },
 };
 
-export default grid;
+// Init
+grid.init();

docs/js/grid.min.js

@@ -0,0 +1 @@
+"use strict";var grid={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:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n      <button class="secondary add">\n        <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">\n          <line x1="12" y1="5" x2="12" y2="19"></line>\n          <line x1="5" y1="12" x2="19" y2="12">\'</line>\n        </svg>\n        '.concat(this.buttons.text.add,'\n      </button>\n\n      <button class="secondary remove">\n        <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">\n          <line x1="5" y1="12" x2="19" y2="12"></line>\n        </svg>\n        ').concat(this.buttons.text.remove,"\n      </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+="  &lt;<b>div</b>&gt;"+(n+1)+"&lt;/<b>div</b>&gt;\n";e+="&lt;/<b>div</b>&gt;",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();

docs/js/pico.docs.js

@@ -1,35 +0,0 @@
-/*
- * Add some magic to Pico docs
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2021 - Licensed under MIT
- */
-
-// Imports
-import aside from './src/aside.js';
-import themeSwitcher from './src/theme-switcher.js';
-import materialDesignColors from './src/material-design-colors.js';
-import colorPicker from './src/color-picker.js';
-import grid from './src/grid.js';
-import scrollspy from './src/scrollspy.js';
-
-// Aside initial state
-aside.init();
-
-// Theme switcher
-themeSwitcher.addButton({
-  tag: 'BUTTON',
-  class: 'contrast switcher theme-switcher',
-  target: 'body',
-});
-themeSwitcher.init();
-
-// Color Picker
-colorPicker.colors = materialDesignColors;
-colorPicker.init();
-
-// Grid Interaction
-grid.init();
-
-// Scrollspy
-scrollspy.init();

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/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;