99 lines
4.7 KiB
JavaScript
99 lines
4.7 KiB
JavaScript
/**
|
||
* Bildvorschau für Anhänge im Ticket: Ein Klick auf ein Vorschaubild zeigt das Bild groß über der Seite, ohne es herunterzuladen.
|
||
* Pfeil links/rechts (oder die Knöpfe) blättern durch alle Bilder des Tickets, Esc oder ein Klick daneben schließt. Ohne JavaScript
|
||
* öffnet der Link das Bild wie bisher in einem neuen Tab.
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
var links = Array.prototype.slice.call(document.querySelectorAll('a[data-lightbox]'));
|
||
if (!links.length) return;
|
||
|
||
var EN = /^en/i.test(document.documentElement.lang || '');
|
||
var TXT = EN ? { dialog: 'Image preview', prev: 'Previous image (←)', next: 'Next image (→)', download: '⬇ Download', close: '✕ Close', closeTitle: 'Close (Esc)' }
|
||
: { dialog: 'Bildvorschau', prev: 'Vorheriges Bild (←)', next: 'Nächstes Bild (→)', download: '⬇ Herunterladen', close: '✕ Schließen', closeTitle: 'Schließen (Esc)' };
|
||
var overlay = null, img = null, caption = null, counter = null, index = 0;
|
||
|
||
function build() {
|
||
overlay = document.createElement('div');
|
||
overlay.setAttribute('role', 'dialog');
|
||
overlay.setAttribute('aria-modal', 'true');
|
||
overlay.setAttribute('aria-label', TXT.dialog);
|
||
overlay.style.cssText = 'position:fixed;inset:0;z-index:2147483500;background:rgba(2,6,23,.88);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:10px';
|
||
img = document.createElement('img');
|
||
img.alt = '';
|
||
img.style.cssText = 'max-width:96vw;max-height:80vh;object-fit:contain;border-radius:6px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)';
|
||
caption = document.createElement('div');
|
||
caption.style.cssText = 'color:#e2e8f0;font:14px system-ui,sans-serif;text-align:center;max-width:90vw;word-break:break-all';
|
||
counter = document.createElement('span');
|
||
counter.style.cssText = 'color:#94a3b8;margin-left:8px';
|
||
var bar = document.createElement('div');
|
||
bar.style.cssText = 'display:flex;gap:8px;flex-wrap:wrap;justify-content:center';
|
||
function btn(label, title, fn) {
|
||
var b = document.createElement('button');
|
||
b.type = 'button';
|
||
b.textContent = label;
|
||
b.title = title;
|
||
b.style.cssText = 'background:#1e293b;color:#fff;border:1px solid #475569;border-radius:8px;padding:7px 14px;cursor:pointer;font:600 14px system-ui,sans-serif';
|
||
b.addEventListener('click', function (e) { e.stopPropagation(); fn(); });
|
||
return b;
|
||
}
|
||
var download = document.createElement('a');
|
||
download.textContent = TXT.download;
|
||
download.style.cssText = 'background:#1e293b;color:#fff;border:1px solid #475569;border-radius:8px;padding:7px 14px;text-decoration:none;font:600 14px system-ui,sans-serif';
|
||
download.addEventListener('click', function (e) { e.stopPropagation(); });
|
||
overlay._download = download;
|
||
bar.appendChild(btn('‹', TXT.prev, function () { show(index - 1); }));
|
||
bar.appendChild(btn('›', TXT.next, function () { show(index + 1); }));
|
||
bar.appendChild(download);
|
||
bar.appendChild(btn(TXT.close, TXT.closeTitle, close));
|
||
caption.appendChild(document.createTextNode(''));
|
||
overlay.appendChild(img);
|
||
overlay.appendChild(caption);
|
||
overlay.appendChild(bar);
|
||
overlay.addEventListener('click', close);
|
||
document.body.appendChild(overlay);
|
||
}
|
||
|
||
function show(i) {
|
||
if (!links.length) return;
|
||
index = (i + links.length) % links.length;
|
||
var a = links[index];
|
||
img.src = a.getAttribute('href');
|
||
img.alt = a.getAttribute('title') || '';
|
||
caption.textContent = a.getAttribute('title') || '';
|
||
counter.textContent = links.length > 1 ? '(' + (index + 1) + ' / ' + links.length + ')' : '';
|
||
caption.appendChild(counter);
|
||
overlay._download.href = a.getAttribute('data-download') || a.getAttribute('href');
|
||
overlay._download.setAttribute('download', a.getAttribute('title') || '');
|
||
}
|
||
|
||
function open(i) {
|
||
if (!overlay) build();
|
||
overlay.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
show(i);
|
||
}
|
||
|
||
function close() {
|
||
if (!overlay) return;
|
||
overlay.style.display = 'none';
|
||
img.removeAttribute('src');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
links.forEach(function (a, i) {
|
||
a.addEventListener('click', function (e) {
|
||
if (e.ctrlKey || e.metaKey || e.shiftKey || e.button === 1) return; // neuer Tab bleibt möglich
|
||
e.preventDefault();
|
||
open(i);
|
||
});
|
||
});
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
if (!overlay || overlay.style.display === 'none') return;
|
||
if (e.key === 'Escape') { e.preventDefault(); close(); }
|
||
else if (e.key === 'ArrowLeft') { e.preventDefault(); show(index - 1); }
|
||
else if (e.key === 'ArrowRight') { e.preventDefault(); show(index + 1); }
|
||
});
|
||
})();
|