Vars naming & clean

docs/js/src/aside.js

@@ -8,8 +8,8 @@
 export const aside = {
 
   // Config
-  _minWidth: '992px',
-  _targets: {
+  minWidth: '992px',
+  targets: {
     nav: 'aside nav',
     details: 'aside details',
   },
@@ -17,9 +17,9 @@ export const aside = {
 
   // 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 (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");

docs/js/src/color-picker.js

@@ -8,17 +8,12 @@
 export const colorPicker = {
 
   // Config
-  _colors: null,
-  _buttonsTarget: '#customization article[data-theme="generated"]',
-  _selectorButton: '#customization button[data-color]',
-  _selectorSection: '#customization',
-  _buttons: null,
-  _generatedStyles: null,
-
-   // Set colors
-   set colors(colors) {
-     this._colors = colors;
-   },
+  colors: null,
+  buttonsTarget: '#customization article[data-theme="generated"]',
+  selectorButton: '#customization button[data-color]',
+  selectorSection: '#customization',
+  buttons: null,
+  generatedStyles: null,
 
   // Init
   init() {
@@ -36,24 +31,24 @@ export const colorPicker = {
 
 
     // Loop colors
-    for (const color in this._colors) {
+    for (const color in this.colors) {
       // Buttons
       innerButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
 
       // Styles
       innerStyles += `
         button[data-color="${color}"] {
-          background-color: ${this._colors[color]['600']};
+          background-color: ${this.colors[color]['600']};
         }
         [data-theme="light"] button[data-color="${color}"]:hover,
         [data-theme="light"] button[data-color="${color}"]:active,
         [data-theme="light"] button[data-color="${color}"]:focus {
-          background-color: ${this._colors[color]['700']}; '
+          background-color: ${this.colors[color]['700']}; '
         }
         [data-theme="dark"] button[data-color="${color}"]:hover,
         [data-theme="dark"] button[data-color="${color}"]:active,
         [data-theme="dark"] button[data-color="${color}"]:focus {
-          background-color: ${this._colors[color]['500']};
+          background-color: ${this.colors[color]['500']};
         }`;
     }
 
@@ -61,11 +56,11 @@ export const colorPicker = {
     // Insert buttons
     let containerButtons = document.createElement('FIGURE');
     containerButtons.innerHTML = innerButtons;
-    document.querySelector(this._buttonsTarget).before(containerButtons);
+    document.querySelector(this.buttonsTarget).before(containerButtons);
 
     // Buttons listeners
-    this._buttons = document.querySelectorAll(this._selectorButton);
-    this._buttons.forEach(function(button) {
+    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);
@@ -76,8 +71,8 @@ export const colorPicker = {
     // Insert CSS Styles
     let containerStyles = document.createElement('STYLE');
     containerStyles.setAttribute('title', 'color-picker');
-    this._generatedStyles = this.minifyCSS(innerStyles);
-    containerStyles.innerHTML = this._generatedStyles;
+    this.generatedStyles = this.minifyCSS(innerStyles);
+    containerStyles.innerHTML = this.generatedStyles;
     document.querySelector('head').appendChild(containerStyles);
   },
 
@@ -86,12 +81,12 @@ export const colorPicker = {
   setActiveButton(color) {
 
     // Remove all active states
-    this._buttons.forEach(function(button) {
+    this.buttons.forEach(function(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');
   },
 
@@ -99,7 +94,7 @@ export const colorPicker = {
   // Set active button
   generateTheme(color) {
     let name = color;
-    let data = this._colors[color];
+    let data = this.colors[color];
 
     // 1. Update name and colors in demo code
     let swaps = {
@@ -113,7 +108,7 @@ export const colorPicker = {
     }
 
     Object.keys(swaps).forEach(function(swap) {
-      let targets = document.querySelectorAll(this._selectorSection + ' ' + swap);
+      let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
       targets.forEach(function(target) {
         target.innerHTML = swaps[swap];
       }.bind(this));
@@ -151,7 +146,7 @@ export const colorPicker = {
       --switch-checked-background-color: var(--primary);
     }`;
 
-    document.querySelector('style[title="color-picker"]').innerHTML = this._generatedStyles + this.minifyCSS(innerStyles);
+    document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
   },
 
 
@@ -163,13 +158,13 @@ export const colorPicker = {
 
   // Hexadecimal to Rgba
   hexToRgbA(hex, alpha) {
-    var c;
-    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-      c= hex.substring(1).split('');
-      if(c.length== 3) {
-        c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+    let c;
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length == 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
       }
-      c= '0x' + c.join('');
+      c = '0x' + c.join('');
       return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
     }
     throw new Error('Bad Hex');

docs/js/src/grid.js

@@ -8,14 +8,14 @@
 export const grid = {
 
   // Config
-  _buttons: {
+  buttons: {
     text: {
       add: 'Add column',
       remove: 'Remove column'
     },
     target:  '#grids article'
   },
-  _grid: {
+  grid: {
     current: 4,
     min: 1,
     max: 12,
@@ -42,16 +42,16 @@ export const grid = {
           <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}
+        ${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}
+        ${this.buttons.text.remove}
       </button>`;
-    document.querySelector(this._buttons.target).before(buttons);
+    document.querySelector(this.buttons.target).before(buttons);
 
     // Add button listener
     document.querySelector('#grids button.add').addEventListener('click', function() {
@@ -73,22 +73,22 @@ export const grid = {
     let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
 
     // Build
-    for (let col = 0; col < this._grid.current; col++) {
+    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;
+    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++;
+    if (this.grid.current < this.grid.max) {
+      this.grid.current++;
       this.generateGrid();
     }
   },
@@ -96,8 +96,8 @@ export const grid = {
 
   // Remove column
   removeColumn() {
-    if (this._grid.current > this._grid.min) {
-      this._grid.current--;
+    if (this.grid.current > this.grid.min) {
+      this.grid.current--;
       this.generateGrid();
     }
   }

docs/js/src/scrollspy.js

@@ -11,9 +11,9 @@
 export const scrollspy = {
 
   // Config
-  _minWidth: '992px',
-  _interval: 75,
-  _targets: {
+  minWidth: '992px',
+  interval: 75,
+  targets: {
     sections: '[role="document"] > section',
     nav: 'main aside nav',
     active: 'active',
@@ -22,7 +22,7 @@ export const scrollspy = {
 
   // Init
   init() {
-    if (window.matchMedia('(min-width: ' + this._minWidth + ')').matches) {
+    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
       this.setActiveNav();
       this.scrollStop();
     }
@@ -33,17 +33,17 @@ export const scrollspy = {
   setActiveNav() {
 
     // Get active section
-    let currentSection = mostVisible(this._targets.sections).getAttribute('id');
+    let currentSection = mostVisible(this.targets.sections).getAttribute('id');
 
     // Remove all active states
-    let links = document.querySelectorAll(this._targets.nav + ' a.' + this._targets.active);
+    let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
     links.forEach(function(link) {
-      link.classList.remove(this._targets.active);
+      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);
+    let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
+    activeLink.classList.add(this.targets.active);
 
     // Open details parent
     activeLink.closest('details').setAttribute('open', '');
@@ -57,7 +57,7 @@ export const scrollspy = {
       window.clearTimeout(isScrolling);
       isScrolling = setTimeout(function() {
         this.setActiveNav();
-      }.bind(this), this._interval);
+      }.bind(this), this.interval);
     }.bind(this), false);
   }
 }

docs/js/src/theme-switcher.js

@@ -8,12 +8,13 @@
 export const themeSwitcher = {
 
   // Config
-  _change: {
+  _scheme: 'auto',
+  change: {
     light: '<i>Turn on dark mode</i>',
     dark: '<i>Turn off dark mode</i>'
   },
-  _buttonsTarget: '.theme-switcher',
-  _scheme: 'auto',
+  buttonsTarget: '.theme-switcher',
+
 
 
   // Init
@@ -36,10 +37,10 @@ export const themeSwitcher = {
 
   // Init switchers
   initSwitchers() {
-    const buttons = document.querySelectorAll(this._buttonsTarget);
+    const buttons = document.querySelectorAll(this.buttonsTarget);
     buttons.forEach(function(button) {
       button.addEventListener('click', function(event) {
-        if (this._scheme == 'dark') {
+        if (this.scheme == 'dark') {
           this.scheme = 'light';
         }
         else {
@@ -82,21 +83,27 @@ export const themeSwitcher = {
   },
 
 
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+
   // Apply scheme
   applyScheme() {
 
     // Root attribute
-    document.querySelector('html').setAttribute('data-theme', this._scheme);
+    document.querySelector('html').setAttribute('data-theme', this.scheme);
 
     // Buttons text
-    const buttons = document.querySelectorAll(this._buttonsTarget);
+    const buttons = document.querySelectorAll(this.buttonsTarget);
     let text;
     buttons.forEach(function(button) {
-      if (this._scheme == 'dark') {
-        text = this._change.dark;
+      if (this.scheme == 'dark') {
+        text = this.change.dark;
       }
       else {
-        text = this._change.light;
+        text = this.change.light;
       }
       button.innerHTML = text;
       button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));