Color Picker 2

Color Picker in Textfelder. Klick ins Feld öffnet Picker. Nach klicken auf Farbe wird er wieder geschlossen

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> <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>

Add Comment

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

Comments

No comments yet. Be the first!