104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
import { getHarmonies, hslToHex } from './converter.js';
|
||
import { state } from './app.js';
|
||
|
||
const DESCRIPTIONS = {
|
||
'Komplementär': 'Die Farbe gegenüber auf dem Farbrad (180°). Starker Kontrast — gut für Akzente.',
|
||
'Analog': 'Zwei Nachbarfarben (±30°). Wirkt harmonisch und ruhig — gut für Hintergründe.',
|
||
'Triade': 'Drei gleichmäßig verteilte Farben (120° Abstand). Lebendig, aber ausgewogen.',
|
||
'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) {
|
||
const row = document.createElement('div');
|
||
row.className = 'harmony-row';
|
||
|
||
const headerRow = document.createElement('div');
|
||
headerRow.className = 'harmony-header';
|
||
|
||
const heading = document.createElement('h3');
|
||
heading.textContent = label;
|
||
|
||
const infoWrap = document.createElement('span');
|
||
infoWrap.className = 'harmony-info';
|
||
|
||
const infoIcon = document.createElement('span');
|
||
infoIcon.className = 'harmony-info-icon';
|
||
infoIcon.textContent = 'ℹ';
|
||
|
||
const tooltip = document.createElement('span');
|
||
tooltip.className = 'harmony-tooltip';
|
||
tooltip.textContent = DESCRIPTIONS[label] || '';
|
||
|
||
infoWrap.appendChild(infoIcon);
|
||
infoWrap.appendChild(tooltip);
|
||
headerRow.appendChild(heading);
|
||
headerRow.appendChild(infoWrap);
|
||
row.appendChild(headerRow);
|
||
|
||
const swatchesDiv = document.createElement('div');
|
||
swatchesDiv.className = 'harmony-swatches';
|
||
|
||
colors.forEach(hsl => {
|
||
const hex = hslToHex(hsl);
|
||
|
||
const div = document.createElement('div');
|
||
div.className = 'harmony-swatch';
|
||
|
||
const swatch = document.createElement('div');
|
||
swatch.className = 'swatch';
|
||
swatch.style.background = hex;
|
||
swatch.title = hex;
|
||
|
||
const hexLabel = document.createElement('span');
|
||
hexLabel.textContent = hex;
|
||
|
||
const btnRow = document.createElement('div');
|
||
btnRow.className = 'harmony-btn-row';
|
||
|
||
const favBtn = document.createElement('button');
|
||
favBtn.className = 'action-btn';
|
||
favBtn.textContent = 'Fav';
|
||
favBtn.style.fontSize = '0.7rem';
|
||
favBtn.addEventListener('click', () => onSaveFavorit(hsl));
|
||
|
||
const schemaBtn = document.createElement('button');
|
||
schemaBtn.className = 'action-btn';
|
||
schemaBtn.textContent = '+Schema';
|
||
schemaBtn.style.fontSize = '0.7rem';
|
||
schemaBtn.addEventListener('click', () => onSaveSchema(hsl));
|
||
|
||
btnRow.appendChild(favBtn);
|
||
btnRow.appendChild(schemaBtn);
|
||
|
||
div.appendChild(swatch);
|
||
div.appendChild(hexLabel);
|
||
div.appendChild(btnRow);
|
||
swatchesDiv.appendChild(div);
|
||
});
|
||
|
||
row.appendChild(swatchesDiv);
|
||
return row;
|
||
}
|
||
|
||
function render(onSaveFavorit, onSaveSchema) {
|
||
const hsl = state.color;
|
||
const hex = hslToHex(hsl);
|
||
|
||
document.getElementById('harmonien-base-hex').textContent = hex;
|
||
document.getElementById('harmonien-base-preview').style.background = hex;
|
||
|
||
const grid = document.getElementById('harmonien-grid');
|
||
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));
|
||
}
|
||
|
||
export function initHarmonien(onSaveFavorit, onSaveSchema) {
|
||
document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema));
|
||
render(onSaveFavorit, onSaveSchema);
|
||
}
|