From a58058b96c54e752b7bfc2874631a6dc8dac7bd2 Mon Sep 17 00:00:00 2001 From: Ferdinand Date: Fri, 3 Apr 2026 17:52:59 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Klick=20auf=20Farbswatch=20=C3=BCbernim?= =?UTF-8?q?mt=20Farbe=20als=20Ausgangsfarbe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- js/app.js | 15 +++++++++++++-- js/collection.js | 8 ++++++++ js/harmonien.js | 22 +++++++++++++--------- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/js/app.js b/js/app.js index cf95ace..5441885 100644 --- a/js/app.js +++ b/js/app.js @@ -1,7 +1,7 @@ import { initEingabe } from './eingabe.js'; import { initPicker } from './picker.js'; import { initHarmonien } from './harmonien.js'; -import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler } from './collection.js'; +import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler, setSwatchClickHandler } from './collection.js'; import { initSchemaModal, openForEdit } from './schema-modal.js'; // state.color is read-only from outside — always use setColor() to update, @@ -15,6 +15,16 @@ export const state = { } }; +function switchTab(name) { + document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); + document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active')); + const btn = document.querySelector(`.tab-btn[data-tab="${name}"]`); + if (btn) { btn.classList.add('active'); document.getElementById('menu-active-label').textContent = btn.textContent; } + const section = document.getElementById('tab-' + name); + if (section) section.classList.add('active'); + document.getElementById('menu-dropdown').classList.remove('open'); +} + // Hamburger-Menü const menuToggle = document.getElementById('menu-toggle'); const menuDropdown = document.getElementById('menu-dropdown'); @@ -53,7 +63,7 @@ document.addEventListener('colorChanged', (e) => { initEingabe(addFavorit, addColorToSchema); initPicker(addFavorit, addColorToSchema); -initHarmonien(addFavorit, addColorToSchema); +initHarmonien(addFavorit, addColorToSchema, (hsl) => state.setColor(hsl)); document.getElementById('sammlung-export-btn').addEventListener('click', exportCollection); document.getElementById('sammlung-import-btn').addEventListener('click', importCollection); @@ -61,3 +71,4 @@ document.getElementById('sammlung-import-btn').addEventListener('click', importC renderSammlung(); initSchemaModal(saveSchema); setEditSchemaHandler(openForEdit); +setSwatchClickHandler((hsl) => { state.setColor(hsl); switchTab('harmonien'); }); diff --git a/js/collection.js b/js/collection.js index f818cc9..ae0cd22 100644 --- a/js/collection.js +++ b/js/collection.js @@ -4,6 +4,9 @@ const STORAGE_KEY = 'pigmento'; let editSchemaHandler = null; export function setEditSchemaHandler(fn) { editSchemaHandler = fn; } + +let swatchClickHandler = null; +export function setSwatchClickHandler(fn) { swatchClickHandler = fn; } const HISTORY_MAX = 20; function load() { @@ -325,6 +328,11 @@ function makeSwatch(hsl) { swatch.style.background = hex; swatch.title = hex; + if (swatchClickHandler) { + swatch.style.cursor = 'pointer'; + swatch.addEventListener('click', () => swatchClickHandler(hsl)); + } + const label = document.createElement('span'); label.style.cssText = 'font-size:0.75rem;font-family:Poppins,sans-serif'; label.textContent = hex; diff --git a/js/harmonien.js b/js/harmonien.js index 9c5e74f..311d36f 100644 --- a/js/harmonien.js +++ b/js/harmonien.js @@ -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); }