<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css">
<script src="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.min.js"></script>
<style>
.ausblenden{
display:none;
}
#farbuswahl{
font-weight:900;
color:white;
}
</style>
</head>
<body>
<form>
<label for="h-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
<label for="v-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br><label> Farbauswahl</label>
<input type="text" id="farbuswahl" placeholder="auswahl...">
</form>
<div id="colormodal" class="container ausblenden">
<div class="colorjoe"></div>
</div>
<script>
class ColorPicker {
constructor(root){
this.root = root;
this.colorjoe = colorjoe.rgb(this.root.querySelector('.colorjoe'));
this.selectedColor = null;
this.savedColors = this.getSavedColors();
this.colorjoe.show();
this.setSelectedColor('#009578');
this.colorjoe.on('change',color => {
this.setSelectedColor(color.hex(),true);
});
this.root.querySelectorAll('.saved-color').forEach((element,index) => {
this.showSavedColor(element,this.savedColors[index]);
element.addEventListener('mouseup',event => {
if(event.button == 1){
this.saveColor(this.selectedColor,index);
this.showSavedColor(element,this.selectedColor);
} this.setSelectedColor(element.dataset.color);
});
});
}
setSelectedColor(color,skipCjUpdate = false){
this.selectedColor = color;
document.querySelector('#farbuswahl').value = color; document.querySelector('#farbuswahl').style.backgroundColor = color;
if(!skipCjUpdate){
this.colorjoe.set(color);
}
}
getSavedColors(){
const saved = JSON.parse(localStorage.getItem('colorpicker-saved') || '[]');
return new Array(5).fill('#ffffff').map((defaultColor,index) => {
return saved[index] || defaultColor;
});
}
showSavedColor(element,color){
element.style.backgroundColor = color;
element.dataset.color = color;
}
saveColor(color,index){
this.savedColors[index] = color;
localStorage.setItem('colorpicker-saved',JSON.stringify(this.savedColors));
}
}
const colorPicker = new ColorPicker(document.querySelector('.container'));
document.querySelector('#farbuswahl').addEventListener('click',function(){
let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
})
</script>
</body>
</html>