78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
import { getHarmonies, hslToHex } from './converter.js';
|
|
import { state } from './app.js';
|
|
|
|
function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
|
|
const row = document.createElement('div');
|
|
row.className = 'harmony-row';
|
|
|
|
const heading = document.createElement('h3');
|
|
heading.textContent = label;
|
|
row.appendChild(heading);
|
|
|
|
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.style.cssText = 'display:flex;gap:0.25rem';
|
|
|
|
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('Komplementar', h.komplementaer, onSaveFavorit, onSaveSchema));
|
|
grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema));
|
|
grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema));
|
|
grid.appendChild(renderHarmony('Split-Komplementar', h.splitKomplementaer, onSaveFavorit, onSaveSchema));
|
|
}
|
|
|
|
export function initHarmonien(onSaveFavorit, onSaveSchema) {
|
|
document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema));
|
|
render(onSaveFavorit, onSaveSchema);
|
|
}
|