mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Documentation
This commit is contained in:
Lucas
parent
0b93083ca1
commit
34e330a537
18 changed files with 2920 additions and 0 deletions
4
docs/js/pico.docs.js
Normal file
4
docs/js/pico.docs.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
//@prepros-append src/theme-switcher.js
|
||||
//@prepros-append src/internal-scroll.js
|
||||
//@prepros-append src/grid.js
|
||||
//@prepros-append src/color-picker.js
|
||||
1
docs/js/pico.docs.min.js
vendored
Normal file
1
docs/js/pico.docs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
265
docs/js/src/color-picker.js
Normal file
265
docs/js/src/color-picker.js
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
/*!
|
||||
* Color Picker
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
/**
|
||||
* Config
|
||||
*/
|
||||
|
||||
var colors = {
|
||||
list: 'json/material-colors.json',
|
||||
target: '#customization h5', // Buttons inserted after target
|
||||
selectorButton: '#customization button[data-color]', // Button selector in Dom
|
||||
selectorTheme: '#customization', // Theme selector in Dom
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
|
||||
colorPicker();
|
||||
|
||||
|
||||
/**
|
||||
* Color Picker
|
||||
*/
|
||||
|
||||
function colorPicker() {
|
||||
|
||||
// Load colors
|
||||
loadJson(colors.list, function(data) {
|
||||
generateButtons(data);
|
||||
pickColor('pink', data['pink']);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Load Json
|
||||
*
|
||||
* @param {url} json
|
||||
* @param {function} callback
|
||||
* @return {object}
|
||||
*/
|
||||
|
||||
function loadJson(json, callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', json, true);
|
||||
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
callback(data);
|
||||
}
|
||||
else {
|
||||
return 'error';
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
return 'error';
|
||||
};
|
||||
request.send();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Generate Buttons
|
||||
*
|
||||
* @param {object} data
|
||||
*/
|
||||
|
||||
function generateButtons(data) {
|
||||
|
||||
// Vars
|
||||
var colorButtons = '';
|
||||
var colorStyles = '';
|
||||
|
||||
// Colors
|
||||
for (var color in data) {
|
||||
if (data.hasOwnProperty(color)) {
|
||||
|
||||
// Buttons
|
||||
colorButtons += '<button data-color="'+ color +'"></button>';
|
||||
|
||||
// CSS Styles
|
||||
colorStyles += 'button[data-color="'+ color +'"] {'
|
||||
+ 'background-color: '+ data[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: '+ data[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: '+ data[color]['500'] +'; '
|
||||
+ '}'
|
||||
}
|
||||
}
|
||||
|
||||
// Insert buttons
|
||||
var buttons = document.createElement('FIGURE');
|
||||
buttons.innerHTML = colorButtons;
|
||||
document.querySelector(colors.target).after(buttons);
|
||||
|
||||
// Buttons listeners
|
||||
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
||||
for (var i = 0; i < buttonsAll.length; i++) {
|
||||
buttonsAll[i].addEventListener('click', function(event) {
|
||||
buttonColor = event.target.getAttribute('data-color');
|
||||
pickColor(buttonColor, data[buttonColor]);
|
||||
}, false);
|
||||
}
|
||||
|
||||
// Insert CSS Styles
|
||||
var styles = document.createElement('STYLE');
|
||||
styles.setAttribute('title', 'color-picker');
|
||||
styles.innerHTML = colorStyles;
|
||||
document.querySelector('head link').after(styles);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Pick Color
|
||||
*
|
||||
* @param {string} name
|
||||
* @param {object} data
|
||||
*/
|
||||
|
||||
function pickColor(name, data) {
|
||||
|
||||
// Generate theme
|
||||
generateTheme(name, data);
|
||||
|
||||
// Clear picked state
|
||||
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
||||
for (var i = 0; i < buttonsAll.length; i++) {
|
||||
buttonsAll[i].removeAttribute("class");
|
||||
}
|
||||
|
||||
// Set Picked state
|
||||
var buttonPicked = document.querySelector(colors.selectorButton + '[data-color="' + name + '"]');
|
||||
buttonPicked.setAttribute('class', 'picked');
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Generate theme
|
||||
*
|
||||
* @param {string} name
|
||||
* @param {object} data
|
||||
*/
|
||||
|
||||
function generateTheme(name, data) {
|
||||
|
||||
// Code and Color name
|
||||
// TODO: Create a function
|
||||
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
|
||||
for (var i = 0; i < cName.length; ++i) {
|
||||
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
|
||||
}
|
||||
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
|
||||
for (var i = 0; i < c500.length; ++i) {
|
||||
c500[i].innerHTML = data[500];
|
||||
}
|
||||
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
|
||||
for (var i = 0; i < c600.length; ++i) {
|
||||
c600[i].innerHTML = data[600];
|
||||
}
|
||||
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
|
||||
for (var i = 0; i < c700.length; ++i) {
|
||||
c700[i].innerHTML = data[700];
|
||||
}
|
||||
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
|
||||
for (var i = 0; i < c600OutlineLight.length; ++i) {
|
||||
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
|
||||
}
|
||||
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
|
||||
for (var i = 0; i < c600OutlineDark.length; ++i) {
|
||||
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
|
||||
}
|
||||
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
|
||||
for (var i = 0; i < inverse.length; ++i) {
|
||||
inverse[i].innerHTML = data['inverse'];
|
||||
}
|
||||
|
||||
// CSS Style
|
||||
var generatedStyles = '[data-theme="generated"] {'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--h4:' + data[700] + ';'
|
||||
+ '--primary-hover:' + data[700] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||
+ '}'
|
||||
|
||||
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--h4:' + data[300] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||
+ '}'
|
||||
+ '}'
|
||||
|
||||
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--h4:' + data[300] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||
+ '}';
|
||||
|
||||
// Insert CSS Styles
|
||||
var selectorGenerated = document.querySelector('style:not([title="color-picker"])');
|
||||
if(typeof(selectorGenerated) != 'undefined' && selectorGenerated != null) {
|
||||
selectorGenerated.innerHTML = generatedStyles;
|
||||
}
|
||||
else {
|
||||
var styles = document.createElement('STYLE');
|
||||
styles.innerHTML = generatedStyles;
|
||||
document.querySelector('head link').after(styles);
|
||||
}
|
||||
document.querySelector(colors.selectorTheme + ' .grid').setAttribute('data-theme', name);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Hexadecimal to Rgba
|
||||
*
|
||||
* @param {string} hex
|
||||
* @param {number} alpha
|
||||
* @return {rgba}
|
||||
*/
|
||||
|
||||
function 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]];
|
||||
}
|
||||
c= '0x' + c.join('');
|
||||
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
|
||||
}
|
||||
throw new Error('Bad Hex');
|
||||
}
|
||||
|
||||
|
||||
})();
|
||||
131
docs/js/src/grid.js
Normal file
131
docs/js/src/grid.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
/*!
|
||||
* Grid Interaction
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
/**
|
||||
* Config
|
||||
*/
|
||||
|
||||
var grid = {
|
||||
columnsCurrent: 4,
|
||||
columnsMin: 1,
|
||||
columnsMax: 12,
|
||||
targetButtons: '#grids article', // Buttons inserted before target
|
||||
targetGrid: '#grids .grid', // Grid target
|
||||
targetCode: '#grids pre code', // Code target
|
||||
selectorAdd: '#grids button.add', // Add button selector in Dom
|
||||
selectorRemove: '#grids button.remove', // Remove Button selector in Dom
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
|
||||
initGridInteraction();
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Init grid interaction
|
||||
*/
|
||||
|
||||
function initGridInteraction() {
|
||||
|
||||
// Add buttons
|
||||
addButtons();
|
||||
|
||||
// Add button listener
|
||||
document.querySelector(grid.selectorAdd).addEventListener('click', function() {
|
||||
addColumn();
|
||||
}, false);
|
||||
|
||||
// Remove button listener
|
||||
document.querySelector(grid.selectorRemove).addEventListener('click', function() {
|
||||
removeColumn();
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Add buttons
|
||||
*/
|
||||
|
||||
function addButtons() {
|
||||
var buttons = document.createElement('P');
|
||||
buttons.innerHTML = '<button class="secondary add">'
|
||||
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>'
|
||||
+ ' Add column'
|
||||
+ '</button>'
|
||||
|
||||
+ '<button class="secondary remove">'
|
||||
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
|
||||
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
|
||||
+ '</svg>'
|
||||
+ ' Remove column'
|
||||
+ '</button>';
|
||||
document.querySelector(grid.targetButtons).before(buttons);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Add column
|
||||
*/
|
||||
|
||||
function addColumn() {
|
||||
if (grid.columnsCurrent < grid.columnsMax) {
|
||||
grid.columnsCurrent++;
|
||||
generateGrid(grid.columnsCurrent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Remove column
|
||||
*/
|
||||
|
||||
function removeColumn() {
|
||||
if (grid.columnsCurrent > grid.columnsMin) {
|
||||
grid.columnsCurrent--;
|
||||
generateGrid(grid.columnsCurrent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Generate grid
|
||||
*
|
||||
* @param {number} cols
|
||||
*/
|
||||
|
||||
function generateGrid(cols) {
|
||||
|
||||
var colsHTML = '';
|
||||
var colsCode = '';
|
||||
var colsCodePref = '<<b>section</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||
var colsCodeSuff = '</<b>section</b>>';
|
||||
|
||||
for (var i=0; i<cols; i++) {
|
||||
colsHTML += '<div>' + (i+1) + '</div>';
|
||||
colsCode += ' <<b>div</b>>' + (i+1) + '</<b>div</b>>\n';
|
||||
}
|
||||
|
||||
document.querySelector(grid.targetGrid).innerHTML = colsHTML;
|
||||
document.querySelector(grid.targetCode).innerHTML = colsCodePref+colsCode+colsCodeSuff;
|
||||
}
|
||||
|
||||
})();
|
||||
95
docs/js/src/internal-scroll.js
Normal file
95
docs/js/src/internal-scroll.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/*!
|
||||
* Internal Scroll
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
|
||||
smoothInternalClicks(
|
||||
document.querySelectorAll('a:not([href^="https://picocss.com"])')
|
||||
);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Smooth internal clicks
|
||||
*
|
||||
* @param {querySelector} links
|
||||
*/
|
||||
|
||||
function smoothInternalClicks(links) {
|
||||
for (var i=0; i<links.length; i++) {
|
||||
if (links[i].href.indexOf('#') != -1) {
|
||||
links[i].addEventListener('click', function(event) {
|
||||
internalClick(event.target);
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Internal Click
|
||||
*
|
||||
* @param {element} link
|
||||
*/
|
||||
|
||||
function internalClick(link) {
|
||||
event.preventDefault();
|
||||
var anchor = link.href.split("#");
|
||||
anchor = setAnchor(anchor[1]);
|
||||
anchor = document.getElementById(anchor);
|
||||
scrollToAnchor(anchor);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Set anchor
|
||||
* Change anchor if needed
|
||||
* @param {string} anchor
|
||||
*/
|
||||
|
||||
function setAnchor(anchor) {
|
||||
mobile = window.matchMedia("(max-width: 991.99px)");
|
||||
if (!mobile.matches) {
|
||||
if (anchor == "docs") {
|
||||
anchor = "start";
|
||||
}
|
||||
}
|
||||
return anchor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Scroll to anchor
|
||||
*
|
||||
* @param {element} anchor
|
||||
*/
|
||||
|
||||
function scrollToAnchor(anchor) {
|
||||
var top = distanceToTop(anchor);
|
||||
window.scrollBy({ top: top, left: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Get distance to top
|
||||
*
|
||||
* @param {element} target
|
||||
*/
|
||||
|
||||
function distanceToTop(target) {
|
||||
return Math.floor(target.getBoundingClientRect().top);
|
||||
}
|
||||
|
||||
})();
|
||||
119
docs/js/src/theme-switcher.js
Normal file
119
docs/js/src/theme-switcher.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/*!
|
||||
* Theme Switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
/**
|
||||
* Config
|
||||
*/
|
||||
|
||||
var switcher = {
|
||||
button: {
|
||||
element: 'BUTTON',
|
||||
class: 'secondary switcher',
|
||||
on: '<i>Turn on dark mode</i>',
|
||||
off: '<i>Turn off dark mode</i>'
|
||||
},
|
||||
target: 'main', // Button inserted after target
|
||||
selector: 'button.switcher', // Button selector in Dom
|
||||
currentTheme: systemColorScheme()
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Init
|
||||
*/
|
||||
|
||||
themeSwitcher();
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Get System Color Scheme
|
||||
*
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function systemColorScheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
}
|
||||
else {
|
||||
return 'light';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Display Theme Switcher
|
||||
*/
|
||||
|
||||
function themeSwitcher() {
|
||||
|
||||
// Insert Switcher
|
||||
var button = document.createElement(switcher.button.element);
|
||||
button.className = switcher.button.class;
|
||||
document.querySelector(switcher.target).after(button);
|
||||
|
||||
// Set Current Theme
|
||||
setTheme(switcher.currentTheme);
|
||||
|
||||
// Click Listener on Switcher
|
||||
document.querySelector(switcher.selector).addEventListener('click', function() {
|
||||
|
||||
// Switch Theme
|
||||
if (switcher.currentTheme == 'light') {
|
||||
setTheme('dark');
|
||||
}
|
||||
else {
|
||||
setTheme('light');
|
||||
}
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Set Theme
|
||||
*
|
||||
* @param {string} set
|
||||
*/
|
||||
|
||||
function setTheme(set) {
|
||||
|
||||
// Text toggle
|
||||
if (set == 'light') {
|
||||
var label = switcher.button.on;
|
||||
}
|
||||
else {
|
||||
var label = switcher.button.off;
|
||||
}
|
||||
|
||||
// Apply theme
|
||||
document.querySelector('html').setAttribute('data-theme', set);
|
||||
document.querySelector(switcher.selector).innerHTML = label;
|
||||
document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label));
|
||||
switcher.currentTheme = set;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Strip tags
|
||||
*
|
||||
* @param {string} html
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
function stripTags(html) {
|
||||
return html.replace(/<[^>]*>?/gm, '');
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue