From 0c64ec721ac7ac8b7fa64c6f09b7eaa4cae29d5c Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 8 Nov 2021 00:06:11 +0700 Subject: [PATCH] Refactor: JS syntax --- docs/js/customization.js | 2 +- docs/js/grid.js | 96 +++++++++++++++++++++++++-- docs/js/src/color-picker.js | 57 ++++++---------- docs/js/src/grid.js | 107 ------------------------------- docs/js/src/theme-switcher.js | 51 +++------------ docs/js/src/toggle-navigation.js | 27 +++----- 6 files changed, 129 insertions(+), 211 deletions(-) delete mode 100644 docs/js/src/grid.js 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