98 lines
3.9 KiB
JavaScript
98 lines
3.9 KiB
JavaScript
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();
|
|
});
|
|
});
|