autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: Include theme checker tool in Hubl

Browse Source
This commit is contained in:
Fabien Quatravaux
2021-01-04 09:36:41 +00:00
committed by Jean-Baptiste Pasquier
parent fae3025cc2
commit aada18ac52
5 changed files with 134 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/scripts/theme-checker.js Normal file
View File

@ -0,0 +1,97 @@
document.addEventListener("DOMContentLoaded", () => {
if( !document.querySelector('.input-color') ) return
const params = new URLSearchParams(window.location.search);
const currentPrimary = getComputedStyle(document.documentElement).getPropertyValue('--color-primary')
const defaultPrimary = params.has('p') ? "#" + params.get('p') : currentPrimary ? currentPrimary.trim() : "#FF0055";
document.documentElement.style.setProperty('--color-primary', defaultPrimary);
const cP = Pickr.create({
el: '.input-color#color-primary',
theme: 'nano',
default: defaultPrimary,
defaultRepresentation: 'HEX',
swatches: null,
components: {
hue: true,
preview: true,
palette: true,
interaction: {
input: true
}
}
});
cP.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-primary', color.toHEXA());
params.set('p', String(color.toHEXA()).substr(1));
cP.applyColor();
});
const currentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-secondary')
const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#314560";
document.documentElement.style.setProperty('--color-secondary', defaultSecondary);
const cS = Pickr.create({
el: '.input-color#color-secondary',
theme: 'nano',
default: defaultSecondary,
defaultRepresentation: 'HEX',
swatches: null,
components: {
hue: true,
preview: true,
palette: true,
interaction: {
input: true
}
}
});
cS.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-secondary', color.toHEXA());
params.set('s', String(color.toHEXA()).substr(1));
cS.applyColor();
});
const currentComplementary = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary')
const defaultComplementary = params.has('c') ? "#" + params.get('c') : currentComplementary ? currentComplementary.trim() : "#00E3B4";
document.documentElement.style.setProperty('--color-complementary', defaultComplementary);
const cC = Pickr.create({
el: '.input-color#color-complementary',
theme: 'nano',
default: defaultComplementary,
defaultRepresentation: 'HEX',
swatches: null,
components: {
hue: true,
preview: true,
palette: true,
interaction: {
input: true
}
}
});
cC.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-complementary', color.toHEXA());
params.set('c', String(color.toHEXA()).substr(1));
cC.applyColor();
});
const currentComplementaryDarken = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary-darken')
const defaultComplementaryDarken = params.has('cd') ? "#" + params.get('cd') : currentComplementaryDarken ? currentComplementaryDarken.trim() : "#0068FF";
document.documentElement.style.setProperty('--color-complementary-darken', defaultComplementaryDarken);
const cCd = Pickr.create({
el: '.input-color#color-complementary-darken',
theme: 'nano',
default: defaultComplementaryDarken,
defaultRepresentation: 'HEX',
swatches: null,
components: {
hue: true,
preview: true,
palette: true,
interaction: {
input: true
}
}
});
cCd.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-complementary-darken', color.toHEXA());
params.set('cd', String(color.toHEXA()).substr(1));
cCd.applyColor();
});
});