You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.2 KiB
114 lines
3.2 KiB
// Get the modal
|
|
var modal = document.getElementById("optionsModal");
|
|
|
|
// Get the button that opens the modal
|
|
var btn = document.getElementById("btn_options");
|
|
|
|
// Get the <span> element that closes the modal
|
|
var span = document.getElementsByClassName("close")[0];
|
|
|
|
// When the user clicks the button, open the modal
|
|
btn.onclick = function() {
|
|
modal.style.display = "block";
|
|
}
|
|
|
|
// When the user clicks on <span> (x), close the modal
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
// When the user clicks anywhere outside of the modal, close it
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|
|
|
|
var slider = document.getElementById("range_dots");
|
|
var output = document.getElementById("dotsNumber");
|
|
output.innerHTML = slider.value;
|
|
|
|
slider.oninput = function() {
|
|
output.innerHTML = this.value;
|
|
}
|
|
|
|
function saveOptions() {
|
|
setCookie("dotsAmount",document.getElementById("range_dots").value,30);
|
|
setCookie("displayMode",document.getElementById("displays").value,30);
|
|
setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
|
|
}
|
|
|
|
//initialisation des valeurs des préférences
|
|
|
|
if(getCookie("pause")!=1)
|
|
document.getElementById("no_pause").checked=true;
|
|
else
|
|
document.getElementById("yes_pause").checked=true;
|
|
|
|
document.getElementById((getCookie("displayMode")!="" ? getCookie("displayMode")+"_disp" : "gems_disp")).selected=true;
|
|
|
|
document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
|
|
output.innerHTML = (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4);
|
|
|
|
// Simple example, see optional options for more configuration.
|
|
const pickr = Pickr.create({
|
|
el: '.color-picker',
|
|
theme: 'monolith', // or 'monolith', or 'nano'
|
|
|
|
swatches: [
|
|
'rgba(244, 67, 54, 1)',
|
|
'rgba(233, 30, 99, 0.95)',
|
|
'rgba(156, 39, 176, 0.9)',
|
|
'rgba(103, 58, 183, 0.85)',
|
|
'rgba(63, 81, 181, 0.8)',
|
|
'rgba(33, 150, 243, 0.75)',
|
|
'rgba(3, 169, 244, 0.7)',
|
|
'rgba(0, 188, 212, 0.7)',
|
|
'rgba(0, 150, 136, 0.75)',
|
|
'rgba(76, 175, 80, 0.8)',
|
|
'rgba(139, 195, 74, 0.85)',
|
|
'rgba(205, 220, 57, 0.9)',
|
|
'rgba(255, 235, 59, 0.95)',
|
|
'rgba(255, 193, 7, 1)'
|
|
],
|
|
|
|
components: {
|
|
|
|
// Main components
|
|
preview: true,
|
|
opacity: true,
|
|
hue: true,
|
|
|
|
// Input / output Options
|
|
interaction: {
|
|
hex: true,
|
|
rgba: true,
|
|
hsla: true,
|
|
hsva: true,
|
|
cmyk: true,
|
|
input: true,
|
|
clear: true,
|
|
save: true
|
|
}
|
|
}
|
|
});
|
|
|
|
pickr.on('init', instance => {
|
|
console.log('init', instance);
|
|
}).on('hide', instance => {
|
|
console.log('hide', instance);
|
|
}).on('show', (color, instance) => {
|
|
console.log('show', color, instance);
|
|
}).on('save', (color, instance) => {
|
|
console.log('save', color, instance);
|
|
}).on('clear', instance => {
|
|
console.log('clear', instance);
|
|
}).on('change', (color, instance) => {
|
|
console.log('change', color, instance);
|
|
}).on('changestop', instance => {
|
|
console.log('changestop', instance);
|
|
}).on('cancel', instance => {
|
|
console.log('cancel', instance);
|
|
}).on('swatchselect', (color, instance) => {
|
|
console.log('swatchselect', color, instance);
|
|
}); |