Colorpicker

Einfacher Color Picker

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!