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

feat: favorites preview in result view before export

Browse Source 
Shows amber banner with up to 4 thumbnails, overflow count,
and favorite total — only visible when favorites exist.
Built with DOM methods (no innerHTML) to avoid XSS risk.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand Urban
2026-04-23 12:54:26 +00:00
parent 1aded7ff0d
commit 029d6a566a
1 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+43
View File
@@ -227,6 +227,13 @@
.feat-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.35rem; }
.feat-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text); cursor: pointer; }
.feat-check input[type=checkbox] { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; }
/* Favorites preview */
.fav-preview { display: flex; align-items: center; gap: 0.75rem; background: rgba(245,158,11,0.08); border: 1.5px solid rgba(245,158,11,0.3); border-radius: 10px; padding: 0.65rem 0.9rem; margin-bottom: 1rem; }
.fav-preview-thumbs { display: flex; gap: 0.3rem; flex-shrink: 0; }
.fav-preview-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; border: 1.5px solid rgba(245,158,11,0.4); }
.fav-preview-more { width: 36px; height: 36px; border-radius: 5px; background: rgba(245,158,11,0.15); color: #B45309; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fav-preview-text { font-size: 0.83rem; color: #92400E; line-height: 1.4; }
.fav-preview-text strong { color: #B45309; }
/* ── Ordner-Auswahl-Button in Drop-Zone ── */
#folder-picker-btn:hover { border-color: var(--blue); color: var(--blue); }
@@ -418,6 +425,9 @@
<!-- Schnell-Download (ohne Verarbeitung) -->
<a class="primary" id="download-btn" style="display:none; text-decoration:none; text-align:center;">⬇ Schnell-Download (Original)</a>
<!-- Favoriten-Vorschau -->
<div id="fav-preview" class="fav-preview" style="display:none"></div>
<!-- Exportoptionen -->
<details class="export-opts" id="export-opts">
<summary>⚙ Exportoptionen — Umbenennen · Bildeditor · Wasserzeichen</summary>
@@ -1505,6 +1515,39 @@
dlBtn.style.display = "";
}
// Favorites preview
const favArr = [...favoritePaths];
const favBox = el("fav-preview");
favBox.textContent = "";
if (favArr.length > 0) {
const MAX_THUMBS = 4;
const thumbWrap = document.createElement("div");
thumbWrap.className = "fav-preview-thumbs";
favArr.slice(0, MAX_THUMBS).forEach(p => {
const img = document.createElement("img");
img.src = "preview?path=" + encodeURIComponent(p);
img.alt = "";
thumbWrap.appendChild(img);
});
if (favArr.length > MAX_THUMBS) {
const more = document.createElement("div");
more.className = "fav-preview-more";
more.textContent = "+" + (favArr.length - MAX_THUMBS);
thumbWrap.appendChild(more);
}
const textWrap = document.createElement("div");
textWrap.className = "fav-preview-text";
const strong = document.createElement("strong");
strong.textContent = "★ " + favArr.length + (favArr.length === 1 ? " Favorit" : " Favoriten");
textWrap.appendChild(strong);
textWrap.appendChild(document.createTextNode(" — erhalten beim Export das FAV_-Präfix"));
favBox.appendChild(thumbWrap);
favBox.appendChild(textWrap);
favBox.style.display = "flex";
} else {
favBox.style.display = "none";
}
showView("view-result");
}