Verschiebung nach anderem RePo - nun pro Projekt getrennt
This commit is contained in:
237
bin/main/static/js/image-viewer.js
Normal file
237
bin/main/static/js/image-viewer.js
Normal file
@@ -0,0 +1,237 @@
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// image-viewer.js – Universelle Bild-Lightbox
|
||||
//
|
||||
// Einbinden: <script src="/js/shared.js"></script> (vorher)
|
||||
// <script src="/js/image-viewer.js"></script>
|
||||
//
|
||||
// Zwei Modi:
|
||||
// Modus A – Nur Bild (kein Like, keine Kommentare):
|
||||
// imageViewer.open({ images: [{ src }] })
|
||||
//
|
||||
// Modus B – Galerie mit Like + Kommentare:
|
||||
// imageViewer.open({
|
||||
// images: [{ src, id, likedByMe, likeCount }],
|
||||
// index: 0,
|
||||
// showLike: true,
|
||||
// showComments: true,
|
||||
// myUserId: '...',
|
||||
// onLike: async (img) => {} // optional; sonst POST /social/profile-images/{id}/like
|
||||
// })
|
||||
//
|
||||
// Globale Instanz: window.imageViewer
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
class ImageViewer {
|
||||
constructor() {
|
||||
this._cfg = null;
|
||||
this._idx = 0;
|
||||
this.isOpen = false;
|
||||
this._injectStyles();
|
||||
this._injectHTML();
|
||||
this._bindEvents();
|
||||
}
|
||||
|
||||
// ── Öffentliche API ───────────────────────────────────────────────────────
|
||||
|
||||
open(cfg) {
|
||||
this._cfg = cfg;
|
||||
this._idx = cfg.index || 0;
|
||||
this.isOpen = true;
|
||||
|
||||
const multi = cfg.images.length > 1;
|
||||
const showLike = !!cfg.showLike;
|
||||
const showCom = !!cfg.showComments;
|
||||
|
||||
this._q('ivPrev').style.display = multi ? '' : 'none';
|
||||
this._q('ivNext').style.display = multi ? '' : 'none';
|
||||
this._q('ivCounter').style.display = multi ? '' : 'none';
|
||||
this._q('ivLikeBtn').style.display = showLike ? '' : 'none';
|
||||
this._q('ivComments').style.display = showCom ? '' : 'none';
|
||||
|
||||
this._render();
|
||||
this._q('imageViewer').classList.add('open');
|
||||
this._updateLayout();
|
||||
}
|
||||
|
||||
close() {
|
||||
this._q('imageViewer').classList.remove('open');
|
||||
this.isOpen = false;
|
||||
this._cfg = null;
|
||||
}
|
||||
|
||||
/** Kommentare im offenen Viewer neu laden (z.B. nach externem Löschen) */
|
||||
reloadComments() {
|
||||
if (this.isOpen && this._cfg?.showComments) this._loadComments();
|
||||
}
|
||||
|
||||
// ── Internes Rendering ────────────────────────────────────────────────────
|
||||
|
||||
_q(id) { return document.getElementById(id); }
|
||||
|
||||
_render() {
|
||||
const img = this._cfg.images[this._idx];
|
||||
this._q('ivImg').src = img.src;
|
||||
|
||||
const total = this._cfg.images.length;
|
||||
this._q('ivCounter').textContent = `${this._idx + 1} / ${total}`;
|
||||
this._q('ivPrev').disabled = this._idx === 0;
|
||||
this._q('ivNext').disabled = this._idx === total - 1;
|
||||
|
||||
if (this._cfg.showLike) this._syncLike();
|
||||
if (this._cfg.showComments) this._loadComments();
|
||||
}
|
||||
|
||||
_syncLike() {
|
||||
const img = this._cfg.images[this._idx];
|
||||
const btn = this._q('ivLikeBtn');
|
||||
btn.className = 'btn-like' + (img.likedByMe ? ' liked' : '');
|
||||
this._q('ivLikeCount').textContent = img.likeCount;
|
||||
}
|
||||
|
||||
async _loadComments() {
|
||||
const img = this._cfg.images[this._idx];
|
||||
const res = await fetch(`/social/kommentare?targetType=IMAGE&targetId=${img.id}`);
|
||||
const comments = await res.json();
|
||||
const myUserId = this._cfg.myUserId || null;
|
||||
this._q('ivCommentsList').innerHTML = comments.length === 0
|
||||
? '<p style="color:var(--color-muted);font-size:0.82rem;margin-bottom:0.4rem;">Noch keine Kommentare.</p>'
|
||||
: comments.map(k => renderKommentarHtml(k, 'IMAGE', img.id, { myUserId, showReplies: true })).join('');
|
||||
}
|
||||
|
||||
async _postComment() {
|
||||
const input = this._q('ivCommentInput');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
const img = this._cfg.images[this._idx];
|
||||
await fetch('/social/kommentare', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ targetType: 'IMAGE', targetId: img.id, text })
|
||||
});
|
||||
input.value = '';
|
||||
await this._loadComments();
|
||||
}
|
||||
|
||||
async _toggleLike() {
|
||||
const img = this._cfg.images[this._idx];
|
||||
const onLike = this._cfg.onLike;
|
||||
img.likedByMe = !img.likedByMe;
|
||||
img.likeCount += img.likedByMe ? 1 : -1;
|
||||
this._syncLike();
|
||||
try {
|
||||
if (onLike) await onLike(img);
|
||||
else await fetch('/social/profile-images/' + img.id + '/like', { method: 'POST' });
|
||||
} catch {
|
||||
img.likedByMe = !img.likedByMe;
|
||||
img.likeCount += img.likedByMe ? 1 : -1;
|
||||
this._syncLike();
|
||||
}
|
||||
}
|
||||
|
||||
_prev() { if (this._idx > 0) { this._idx--; this._render(); } }
|
||||
_next() { if (this._idx < this._cfg.images.length - 1) { this._idx++; this._render(); } }
|
||||
|
||||
_updateLayout() {
|
||||
const el = this._q('ivLayout');
|
||||
if (!el) return;
|
||||
const bp = parseInt(getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--breakpoint-mobile').trim()) || 768;
|
||||
el.classList.toggle('iv-narrow', window.innerWidth <= bp);
|
||||
}
|
||||
|
||||
// ── CSS + HTML Injection ──────────────────────────────────────────────────
|
||||
|
||||
_injectStyles() {
|
||||
if (document.getElementById('iv-styles')) return;
|
||||
const s = document.createElement('style');
|
||||
s.id = 'iv-styles';
|
||||
s.textContent = `
|
||||
#imageViewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:500;align-items:center;justify-content:center;padding:2rem}
|
||||
#imageViewer.open{display:flex}
|
||||
#ivLayout{display:flex;flex-direction:row;gap:1rem;height:min(78vh,660px);max-width:calc(100vw - 4rem);align-items:stretch}
|
||||
#ivImageSide{width:660px;flex-shrink:1;min-width:0;display:flex;flex-direction:column}
|
||||
.iv-image-box{flex:1;position:relative;background:var(--color-card);border:1px solid var(--color-secondary);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
|
||||
#ivImg{width:100%;height:100%;object-fit:contain;display:block}
|
||||
.iv-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.6));border-radius:0 0 12px 12px;padding:2rem 0.75rem 0.6rem;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}
|
||||
.iv-nav-btn{background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.2);border-radius:6px;color:#fff;padding:0.3rem 0.75rem;cursor:pointer;margin:0;width:auto;font-size:1rem;flex-shrink:0;transition:background 0.15s}
|
||||
.iv-nav-btn:hover{background:rgba(0,0,0,0.65)}
|
||||
.iv-nav-btn:disabled{opacity:.25;cursor:default}
|
||||
.iv-overlay-center{display:flex;align-items:center;gap:0.6rem;flex:1;justify-content:center}
|
||||
#ivCounter{font-size:0.8rem;color:rgba(255,255,255,0.75)}
|
||||
.iv-close{position:fixed;top:1rem;right:1rem;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:1.1rem;width:2.2rem;height:2.2rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;z-index:502;transition:background 0.15s}
|
||||
.iv-close:hover{background:rgba(180,30,30,0.8)}
|
||||
#ivComments{background:var(--color-card);border:1px solid var(--color-secondary);border-radius:12px;width:280px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}
|
||||
.iv-comments-header{font-size:0.78rem;font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:0.06em;padding:0.7rem 1rem;border-bottom:1px solid var(--color-secondary);flex-shrink:0}
|
||||
#ivCommentsList{flex:1;overflow-y:auto;padding:0.65rem 0.75rem;scrollbar-width:thin;scrollbar-color:var(--color-secondary) transparent}
|
||||
.iv-comment-compose{display:flex;gap:0.4rem;padding:0.65rem 0.75rem;border-top:1px solid var(--color-secondary);flex-shrink:0;align-items:center}
|
||||
.iv-comment-compose input{flex:1;padding:0.4rem 0.65rem;font-size:0.85rem}
|
||||
.iv-comment-compose button{width:auto;padding:0.4rem 0.7rem;font-size:0.82rem;white-space:nowrap}
|
||||
#ivLayout.iv-narrow{flex-direction:column;height:auto;max-height:90vh;overflow-y:auto;width:calc(100vw - 1rem);max-width:calc(100vw - 1rem)}
|
||||
#ivLayout.iv-narrow #ivImageSide{width:100%;flex-shrink:0}
|
||||
#ivLayout.iv-narrow .iv-image-box{height:min(45vh,360px);flex:none}
|
||||
#ivLayout.iv-narrow #ivComments{width:100%;max-height:40vh;flex-shrink:0}
|
||||
`;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
|
||||
_injectHTML() {
|
||||
if (document.getElementById('imageViewer')) return;
|
||||
const div = document.createElement('div');
|
||||
div.id = 'imageViewer';
|
||||
div.innerHTML = `
|
||||
<button class="iv-close" id="ivClose">✕</button>
|
||||
<div id="ivLayout">
|
||||
<div id="ivImageSide">
|
||||
<div class="iv-image-box">
|
||||
<img id="ivImg" src="" alt="">
|
||||
<div class="iv-overlay">
|
||||
<button class="iv-nav-btn" id="ivPrev">←</button>
|
||||
<div class="iv-overlay-center">
|
||||
<span id="ivCounter"></span>
|
||||
<button class="btn-like" id="ivLikeBtn">♥ <span id="ivLikeCount">0</span></button>
|
||||
</div>
|
||||
<button class="iv-nav-btn" id="ivNext">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ivComments">
|
||||
<div class="iv-comments-header">Kommentare</div>
|
||||
<div id="ivCommentsList"></div>
|
||||
<div class="iv-comment-compose">
|
||||
<input type="text" id="ivCommentInput" placeholder="Kommentar schreiben…" maxlength="500">
|
||||
<button type="button" onclick="toggleEmojiPicker(this,'ivCommentInput')" title="Emoji"
|
||||
style="background:none;border:1px solid var(--color-secondary);color:var(--color-muted);border-radius:6px;padding:0.35rem 0.6rem;font-size:0.95rem;cursor:pointer;margin:0;width:auto;">😊</button>
|
||||
<button id="ivCommentSend">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
const init = () => {
|
||||
this._q('ivClose').addEventListener('click', () => this.close());
|
||||
this._q('imageViewer').addEventListener('click', e => {
|
||||
if (e.target === this._q('imageViewer')) this.close();
|
||||
});
|
||||
this._q('ivPrev').addEventListener('click', () => this._prev());
|
||||
this._q('ivNext').addEventListener('click', () => this._next());
|
||||
this._q('ivLikeBtn').addEventListener('click', () => this._toggleLike());
|
||||
this._q('ivCommentSend').addEventListener('click', () => this._postComment());
|
||||
this._q('ivCommentInput').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') this._postComment();
|
||||
});
|
||||
window.addEventListener('resize', () => this._updateLayout());
|
||||
};
|
||||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
|
||||
else init();
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (!this.isOpen) return;
|
||||
if (e.key === 'Escape') this.close();
|
||||
if (e.key === 'ArrowLeft') this._prev();
|
||||
if (e.key === 'ArrowRight') this._next();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.imageViewer = new ImageViewer();
|
||||
Reference in New Issue
Block a user