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

feat: Klick auf Farbswatch übernimmt Farbe als Ausgangsfarbe

Browse Source 
- Sammlung (Verlauf/Favoriten/Schemata): Klick → Farbe setzen → Harmonien-Tab
- Harmonien: Klick auf Swatch → als neue Ausgangsfarbe, bleibt auf Harmonien
- switchTab() Hilfsfunktion in app.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-03 17:52:59 +02:00
parent 1753af0bfc
commit a58058b96c
3 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
js/harmonien.js
View File

@@ -8,7 +8,7 @@ const DESCRIPTIONS = {
'Split-Komplementär': 'Die zwei Farben neben der Komplementärfarbe (150°/210°). Weniger Spannung als Komplementär, mehr Vielfalt.',
};
function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
function renderHarmony(label, colors, onSaveFavorit, onSaveSchema, onSetColor) {
const row = document.createElement('div');
row.className = 'harmony-row';
@@ -48,6 +48,10 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
swatch.className = 'swatch';
swatch.style.background = hex;
swatch.title = hex;
if (onSetColor) {
swatch.style.cursor = 'pointer';
swatch.addEventListener('click', () => onSetColor(hsl));
}
const hexLabel = document.createElement('span');
hexLabel.textContent = hex;
@@ -80,7 +84,7 @@ function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
return row;
}
function render(onSaveFavorit, onSaveSchema) {
function render(onSaveFavorit, onSaveSchema, onSetColor) {
const hsl = state.color;
const hex = hslToHex(hsl);
@@ -91,13 +95,13 @@ function render(onSaveFavorit, onSaveSchema) {
grid.textContent = '';
const h = getHarmonies(hsl);
grid.appendChild(renderHarmony('Komplementär', h.komplementaer, onSaveFavorit, onSaveSchema));
grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema));
grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema));
grid.appendChild(renderHarmony('Split-Komplementär', h.splitKomplementaer, onSaveFavorit, onSaveSchema));
grid.appendChild(renderHarmony('Komplementär', h.komplementaer, onSaveFavorit, onSaveSchema, onSetColor));
grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema, onSetColor));
grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema, onSetColor));
grid.appendChild(renderHarmony('Split-Komplementär', h.splitKomplementaer, onSaveFavorit, onSaveSchema, onSetColor));
}
export function initHarmonien(onSaveFavorit, onSaveSchema) {
document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema));
render(onSaveFavorit, onSaveSchema);
export function initHarmonien(onSaveFavorit, onSaveSchema, onSetColor) {
document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema, onSetColor));
render(onSaveFavorit, onSaveSchema, onSetColor);
}