mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor: JS syntax

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 00:06:11 +07:00
parent 5557876fce
commit 0c64ec721a
6 changed files with 129 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

57
docs/js/src/color-picker.js
View file

@ -31,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 += `
@ -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 = `

107
docs/js/src/grid.js
View file

@ -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 = `
<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('#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 = '&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;

51
docs/js/src/theme-switcher.js
View file

@ -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)
}
);
},
};

27
docs/js/src/toggle-navigation.js
View file

@ -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