Einfacher Color Picker
Code
<!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>
<main class="Pattern-Creator">
<label> Farbauswahl</label>
<input type="text" id="farbuswahl" placeholder="auswahl...">
<div id="colormodal" class="container ausblenden">
<div class="colorjoe"></div>
</div>
</main>
<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;
let fa=document.getElementById('farbuswahl').value;
// this.style.backgroundColor = fa;
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');
});
let Cells = document.querySelectorAll('td');
var x=0;
Cells.forEach(function(elem) {
elem.addEventListener("click", function() {
}
)
});
</script>
</body>
</html>