ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent double updateUI, move imports to top, label for attributes

Browse Source
This commit is contained in:
Ferdinand
2026-04-01 16:22:37 +02:00
parent cf9cdb2f6e
commit 36d0253668
3 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -26,15 +26,15 @@
<div id="eingabe-preview" class="color-preview" style="background:#3a8fc1"></div> <div id="eingabe-preview" class="color-preview" style="background:#3a8fc1"></div>
<div class="color-codes"> <div class="color-codes">
<div class="color-code-group"> <div class="color-code-group">
<label>Hex</label> <label for="eingabe-hex">Hex</label>
<input id="eingabe-hex" type="text" value="#3a8fc1" maxlength="7"> <input id="eingabe-hex" type="text" value="#3a8fc1" maxlength="7">
</div> </div>
<div class="color-code-group"> <div class="color-code-group">
<label>RGB</label> <label for="eingabe-rgb">RGB</label>
<input id="eingabe-rgb" type="text" value="58, 143, 193"> <input id="eingabe-rgb" type="text" value="58, 143, 193">
</div> </div>
<div class="color-code-group"> <div class="color-code-group">
<label>HSL</label> <label for="eingabe-hsl">HSL</label>
<input id="eingabe-hsl" type="text" value="204, 54%, 49%"> <input id="eingabe-hsl" type="text" value="204, 54%, 49%">
</div> </div>
</div> </div>

4
js/app.js
View File

@@ -1,3 +1,5 @@
import { initEingabe } from './eingabe.js';
// Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100) // Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100)
// state.color is read-only from outside — always use setColor() to update, // state.color is read-only from outside — always use setColor() to update,
// so that the colorChanged event is dispatched to all listening modules. // so that the colorChanged event is dispatched to all listening modules.
@@ -22,8 +24,6 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
}); });
}); });
import { initEingabe } from './eingabe.js';
function addFavorit(hsl) { console.log('addFavorit', hsl); } function addFavorit(hsl) { console.log('addFavorit', hsl); }
function addColorToSchema(hsl) { console.log('addColorToSchema', hsl); } function addColorToSchema(hsl) { console.log('addColorToSchema', hsl); }

13
js/eingabe.js
View File

@@ -1,4 +1,4 @@
import { hexToRgb, rgbToHex, hexToHsl, hslToHex, hslToRgb, rgbToHsl } from './converter.js'; import { hexToHsl, hslToHex, hslToRgb, rgbToHsl } from './converter.js';
import { state } from './app.js'; import { state } from './app.js';
function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; } function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }
@@ -39,7 +39,6 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
if (/^#[0-9a-fA-F]{6}$/.test(val)) { if (/^#[0-9a-fA-F]{6}$/.test(val)) {
const hsl = hexToHsl(val); const hsl = hexToHsl(val);
state.setColor(hsl); state.setColor(hsl);
updateUI(hsl);
} }
}); });
@@ -48,7 +47,6 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
if (rgb) { if (rgb) {
const hsl = rgbToHsl(rgb); const hsl = rgbToHsl(rgb);
state.setColor(hsl); state.setColor(hsl);
updateUI(hsl);
} }
}); });
@@ -56,11 +54,16 @@ export function initEingabe(onSaveFavorit, onSaveSchema) {
const hsl = parseHsl(hslInput.value); const hsl = parseHsl(hslInput.value);
if (hsl) { if (hsl) {
state.setColor(hsl); state.setColor(hsl);
updateUI(hsl);
} }
}); });
document.addEventListener('colorChanged', () => updateUI(state.color)); document.addEventListener('colorChanged', () => {
if (document.activeElement !== hexInput &&
document.activeElement !== rgbInput &&
document.activeElement !== hslInput) {
updateUI(state.color);
}
});
document.getElementById('eingabe-fav-btn').addEventListener('click', () => { document.getElementById('eingabe-fav-btn').addEventListener('click', () => {
onSaveFavorit(state.color); onSaveFavorit(state.color);