diff --git a/docs/js/customization.js b/docs/js/customization.js
index 101923c9..32f23f4e 100644
--- a/docs/js/customization.js
+++ b/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
diff --git a/docs/js/grid.js b/docs/js/grid.js
index 164f4702..938d6fb9 100644
--- a/docs/js/grid.js
+++ b/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 = {
+
+ // 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',
+ },
-// Grid Interaction
+ // Init
+ init() {
+ this.addButtons();
+ this.generateGrid();
+ },
+
+ // Add buttons
+ addButtons() {
+ // Insert buttons
+ let buttons = document.createElement('P');
+ buttons.innerHTML = `
+
+
+ `;
+ 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 = '<div class="grid">\n';
+
+ // Build
+ for (let col = 0; col < this.grid.current; col++) {
+ htmlInner += '' + (col + 1) + '
';
+ codeInner += ' <div>' + (col + 1) + '</div>\n';
+ }
+
+ // Display
+ codeInner += '</div>';
+ 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();
\ No newline at end of file
diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js
index c65effd1..6842e42f 100644
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@@ -31,12 +31,7 @@ export const colorPicker = {
// Loop colors
for (const color in this.colors) {
// Buttons
- innerButtons +=
- '';
+ innerButtons += ``;
// 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) {
- 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');
@@ -87,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');
},
@@ -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) {
- 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 = `
diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js
deleted file mode 100644
index 3b1cd726..00000000
--- a/docs/js/src/grid.js
+++ /dev/null
@@ -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 = `
-
-
- `;
- 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 = '<div class="grid">\n';
-
- // Build
- for (let col = 0; col < this.grid.current; col++) {
- htmlInner += '' + (col + 1) + '
';
- codeInner += ' <div>' + (col + 1) + '</div>\n';
- }
-
- // Display
- codeInner += '</div>';
- 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;
diff --git a/docs/js/src/theme-switcher.js b/docs/js/src/theme-switcher.js
index a28b2bab..bb872cae 100644
--- a/docs/js/src/theme-switcher.js
+++ b/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)
+ }
);
},
};
diff --git a/docs/js/src/toggle-navigation.js b/docs/js/src/toggle-navigation.js
index 939d6da5..f51b76fb 100644
--- a/docs/js/src/toggle-navigation.js
+++ b/docs/js/src/toggle-navigation.js
@@ -18,25 +18,14 @@ export const toggleNavigation = {
},
onToggleClick() {
- this.toggleLink.addEventListener(
- 'click',
- function (event) {
- event.preventDefault();
- if (this.state == 'closed-on-mobile') {
- this.state = 'open';
- } else {
- this.state = 'closed-on-mobile';
- }
- this.nav.removeAttribute('class');
- this.nav.classList.add(this.state);
- }.bind(this),
- false
- );
- },
-
- // Apply navigation state
- applyState() {
-
+ 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