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

JS improvement

Browse source
This commit is contained in:
Lucas 2019-11-28 12:24:53 +07:00
parent f5e4d01cbb
commit afb22b9c3a
7 changed files with 46 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/index.html
View file

@ -16,7 +16,7 @@
<nav class="container-fluid">
<ul>
<li>
<a href="#">
<a href="https://picocss.com">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
</svg>
@ -25,7 +25,6 @@
<li>Documentation</li>
</ul>
<ul>
<li><a href="https://picocss.com/#examples" class="secondary">Examples</a></li>
<li><a href="#start" class="secondary">Start</a></li>
<li><a href="#docs" class="secondary">Docs</a></li>
<li>

1
docs/js/pico.docs.js
View file

@ -1,3 +1,4 @@
//@prepros-append src/aside.js
//@prepros-append src/theme-switcher.js
//@prepros-append src/internal-scroll.js
//@prepros-append src/grid.js

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

File diff suppressed because one or more lines are too long

19
docs/js/src/aside.js Normal file
View file

@ -0,0 +1,19 @@
/*!
* Aside adjustment
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
*/
(function() {
// Close details if aside > nav have a scrollbar
var navWidth = document.querySelector('aside nav').clientWidth;
if (navWidth < 200) {
var asideDetails = document.querySelectorAll("aside details");
for (var i = 1; i < asideDetails.length; i++) {
asideDetails[i].removeAttribute("open");
}
}
})();

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

@ -16,6 +16,7 @@
target: '#customization h5', // Buttons inserted after target
selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom
styles: '',
// Source: https://material.io/design/color/the-color-system.html
system: {
@ -354,7 +355,6 @@
// Vars
var colorButtons = '';
var colorStyles = '';
// Colors
for (var color in data) {
@ -364,21 +364,21 @@
colorButtons += '<button data-color="'+ color +'"></button>';
// CSS Styles
colorStyles += 'button[data-color="'+ color +'"] {'
+ 'background-color: '+ data[color]['600'] +'; '
+ '}'
colors.styles += '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="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'] +'; '
+ '}'
+ '[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'] +'; '
+ '}'
}
}
@ -399,8 +399,8 @@
// Insert CSS Styles
var styles = document.createElement('STYLE');
styles.setAttribute('title', 'color-picker');
styles.innerHTML = colorStyles;
document.querySelector('head link').after(styles);
styles.innerHTML = colors.styles;
document.querySelector('head').appendChild(styles);
}
@ -498,16 +498,7 @@
+ '}';
// 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);
document.querySelector('style[title="color-picker"]').innerHTML = colors.styles + generatedStyles;
}

8
docs/js/src/internal-scroll.js
View file

@ -44,9 +44,11 @@
function internalClick(link) {
event.preventDefault();
var anchor = link.href.split("#");
anchor = setAnchor(anchor[1]);
anchor = document.getElementById(anchor);
scrollToAnchor(anchor);
if (anchor[1] != '') {
anchor = setAnchor(anchor[1]);
anchor = document.getElementById(anchor);
scrollToAnchor(anchor);
}
}

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

@ -18,7 +18,7 @@
on: '<i>Turn on dark mode</i>',
off: '<i>Turn off dark mode</i>'
},
target: 'main', // Button inserted after target
target: 'body', // Button append in target
selector: 'button.switcher', // Button selector in Dom
currentTheme: systemColorScheme()
};
@ -59,7 +59,7 @@
// Insert Switcher
var button = document.createElement(switcher.button.element);
button.className = switcher.button.class;
document.querySelector(switcher.target).after(button);
document.querySelector(switcher.target).appendChild(button);
// Set Current Theme
setTheme(switcher.currentTheme);