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

Vars naming & clean

Browse source
This commit is contained in:
Lucas Larroche 2021-07-09 18:18:39 +07:00
parent 1e1413b5aa
commit 59c54298d5
6 changed files with 71 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

10
docs/js/src/aside.js
View file

@ -8,8 +8,8 @@
export const aside = { export const aside = {
// Config // Config
_minWidth: '992px', minWidth: '992px',
_targets: { targets: {
nav: 'aside nav', nav: 'aside nav',
details: 'aside details', details: 'aside details',
}, },
@ -17,9 +17,9 @@ export const aside = {
// Init // Init
init() { init() {
if (window.matchMedia('(min-width: ' + this._minWidth + ')').matches) { if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
let nav = document.querySelector(this._targets.nav); let nav = document.querySelector(this.targets.nav);
let details = document.querySelectorAll(this._targets.details); let details = document.querySelectorAll(this.targets.details);
if (nav.clientHeight < nav.scrollHeight) { if (nav.clientHeight < nav.scrollHeight) {
details.forEach(function(detail) { details.forEach(function(detail) {
detail.removeAttribute("open"); detail.removeAttribute("open");

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

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

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

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

20
docs/js/src/scrollspy.js
View file

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

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

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