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.
124 lines
3.6 KiB
124 lines
3.6 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";
|
|
document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
|
|
}
|
|
|
|
// 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 output = document.getElementById("dotsNumber");
|
|
var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
|
|
output.innerHTML = amount;
|
|
|
|
document.getElementById("+").width=size/4;
|
|
document.getElementById("-").width=size/4;
|
|
|
|
function less()
|
|
{
|
|
if(amount > 2)
|
|
{
|
|
amount--;
|
|
}
|
|
output.innerHTML = amount;
|
|
}
|
|
|
|
function more()
|
|
{
|
|
if(amount<8)
|
|
{
|
|
amount++;
|
|
}
|
|
output.innerHTML = amount;
|
|
}
|
|
|
|
document.getElementById("displays").addEventListener("click", function(){
|
|
document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
|
|
})
|
|
|
|
function saveOptions() {
|
|
setCookie("dotsAmount",amount,30);
|
|
setCookie("displayMode",document.getElementById("displays").value,30);
|
|
setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
//initialisation des valeurs des préférences
|
|
|
|
document.getElementById("gems_di").width=size/6;
|
|
document.getElementById("points_di").style.height=size/6;
|
|
document.getElementById("points_di").style.width=size/6;
|
|
document.getElementById("both_di").style.height=size/6;
|
|
document.getElementById("both_di").style.width=size/6;
|
|
document.getElementById("both_di").style.backgroundSize=size/8+"px";
|
|
document.getElementById("btn_confirm").width=size/4;
|
|
|
|
if(getCookie("pause")!=1)
|
|
document.getElementById("no_pause").checked=true;
|
|
else
|
|
document.getElementById("yes_pause").checked=true;
|
|
|
|
function selectDisplay(e)
|
|
{
|
|
setCookie("displayMode",e,30);
|
|
document.getElementById("points_di").classList.remove("selected");
|
|
document.getElementById("gems_di").classList.remove("selected");
|
|
document.getElementById("both_di").classList.remove("selected");
|
|
document.getElementById(e+"_di").classList.add("selected");
|
|
}
|
|
|
|
var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];
|
|
|
|
|
|
for(var cpt=1;cpt<9;cpt++)
|
|
{
|
|
eval('pickr'+cpt+` = Pickr.create({
|
|
el: '.col`+cpt+`',
|
|
theme: 'monolith',
|
|
default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
|
|
useAsButton: true,
|
|
|
|
components: {
|
|
|
|
// Main components
|
|
preview: true,
|
|
hue: true,
|
|
|
|
// Input / output Options
|
|
interaction: {
|
|
hex: true,
|
|
input: true,
|
|
clear: true,
|
|
save: true
|
|
}
|
|
}
|
|
});`);
|
|
|
|
eval("pickr"+cpt+`.on('init', function() {
|
|
document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
|
|
}).on('save', function () {
|
|
document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
|
|
setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
|
|
pickr`+cpt+`.hide();
|
|
});`);
|
|
|
|
} |