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

feat: Vorschaubild für Farbschemata hochladen und anzeigen

Browse Source
This commit is contained in:
Ferdinand
2026-04-02 14:31:10 +02:00
parent 447473c6f5
commit 7f50f40a5b
4 changed files with 109 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
js/schema-modal.js
View File

@@ -1,14 +1,38 @@
import { hexToHsl, hslToHex, rgbToHsl, rgbToHex } from './converter.js';
const MAX_FARBEN = 4;
const THUMB_SIZE = 120; // max px für Vorschaubild
// Aktuell gesammelter Zustand des Modals
let farben = []; // Array von HSL-Objekten
let aktuelleHex = ''; // Hex-Wert des aktuellen Eingabefelds
let farben = []; // Array von HSL-Objekten
let aktuelleHex = ''; // Hex-Wert des aktuellen Eingabefelds
let vorschaubild = null; // Base64-String des Thumbnails oder null
function compressToThumbnail(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const scale = Math.min(THUMB_SIZE / img.width, THUMB_SIZE / img.height, 1);
const w = Math.round(img.width * scale);
const h = Math.round(img.height * scale);
const c = document.createElement('canvas');
c.width = w;
c.height = h;
c.getContext('2d').drawImage(img, 0, 0, w, h);
resolve(c.toDataURL('image/jpeg', 0.8));
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
}
function resetModal() {
farben = [];
aktuelleHex = '';
vorschaubild = null;
document.getElementById('schema-name-input').value = '';
document.getElementById('schema-hex-input').value = '';
document.getElementById('schema-hex-preview').style.background = '#eee';
@@ -17,6 +41,12 @@ function resetModal() {
document.getElementById('schema-canvas').getContext('2d').clearRect(0, 0, 1, 1);
document.getElementById('schema-farbe-eingabe').style.display = 'block';
document.getElementById('schema-abschliessen-btn').disabled = true;
// Vorschaubild-UI zurücksetzen
const preview = document.getElementById('schema-bild-preview');
preview.style.backgroundImage = '';
preview.classList.remove('hat-bild');
document.getElementById('schema-bild-input').value = '';
document.getElementById('schema-bild-entfernen-btn').style.display = 'none';
updateFarbeLabel();
}
@@ -186,7 +216,31 @@ export function initSchemaModal(onSave) {
}
if (farben.length === 0) return;
onSave(name, farben);
onSave(name, farben, vorschaubild);
document.getElementById('schema-modal-overlay').style.display = 'none';
});
// Vorschaubild hochladen
document.getElementById('schema-bild-trigger').addEventListener('click', () => {
document.getElementById('schema-bild-input').click();
});
document.getElementById('schema-bild-input').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
vorschaubild = await compressToThumbnail(file);
const preview = document.getElementById('schema-bild-preview');
preview.style.backgroundImage = 'url(' + vorschaubild + ')';
preview.classList.add('hat-bild');
document.getElementById('schema-bild-entfernen-btn').style.display = 'inline-block';
});
document.getElementById('schema-bild-entfernen-btn').addEventListener('click', () => {
vorschaubild = null;
const preview = document.getElementById('schema-bild-preview');
preview.style.backgroundImage = '';
preview.classList.remove('hat-bild');
document.getElementById('schema-bild-input').value = '';
document.getElementById('schema-bild-entfernen-btn').style.display = 'none';
});
}