// ─────────────────────────────────────────────────────────────────────────────
// shared.js – Gemeinsame Helfer & Komponenten
// Einbinden:
// (vor allen Seiten-Skripten, nach CSS-Links)
// ─────────────────────────────────────────────────────────────────────────────
// ── CSS-Injection (Comment + Carousel) ────────────────────────────────────────
(function injectSharedStyles() {
if (document.getElementById('shared-styles')) return;
const s = document.createElement('style');
s.id = 'shared-styles';
s.textContent = `
/* ── Karussell ── */
.post-carousel{position:relative;margin-top:0.5rem}
.car-slide{display:none}
.car-slide.active{display:block}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.55);border:none;color:#fff;font-size:2.2rem;width:auto;min-width:2.4rem;height:3.2rem;border-radius:8px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;padding:0 0.5rem;margin:0;line-height:1}
.car-prev{left:0.3rem}
.car-next{right:0.3rem}
.car-indicator{text-align:center;font-size:0.75rem;color:var(--color-muted);margin-top:0.25rem}
/* ── Bilder-Grid (nur im Feed) ── */
.post-img-grid{display:grid;gap:2px;margin:0.5rem auto 0;border-radius:6px;overflow:hidden;flex-shrink:0}
.pig-item{position:relative;overflow:hidden;min-width:0;min-height:0}
.pig-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pig-contain img{object-fit:contain}
.pig-dark{background:#111}.pig-dark .pig-item{background:#111}
.pig-more{position:absolute;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff;pointer-events:none}
/* ── Like / Löschen-Buttons ── */
.btn-like{background:none;border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:0.2rem 0.65rem;color:var(--color-muted);font-size:0.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:0.3rem;margin:0;width:auto;transition:border-color 0.15s,color 0.15s}
.btn-like:hover,.btn-like.liked{border-color:var(--color-primary);color:var(--color-primary)}
.btn-delete-small{background:none;border:none;color:rgba(200,50,50,0.6);font-size:0.78rem;cursor:pointer;margin:0;width:auto;padding:0}
.btn-delete-small:hover{color:var(--color-primary)}
.btn-text{background:none;border:none;color:var(--color-muted);font-size:0.78rem;cursor:pointer;margin:0;width:auto;padding:0;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.2)}
.btn-text:hover{color:var(--color-text)}
/* ── Kommentare ── */
.comment-item{display:flex;gap:0.5rem;margin-bottom:0.5rem}
.comment-avatar{width:28px;height:28px;border-radius:50%;background:var(--color-secondary);display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;overflow:hidden}
.comment-avatar img{width:100%;height:100%;object-fit:cover}
.comment-body{flex:1;background:rgba(255,255,255,0.04);border-radius:6px;padding:0.5rem 0.65rem}
.comment-author{font-size:0.8rem;font-weight:600;color:var(--color-text)}
.comment-date{font-size:0.72rem;color:var(--color-muted);margin-left:0.4rem}
.comment-text{font-size:0.85rem;color:rgba(255,255,255,0.75);margin-top:0.2rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.comment-actions{display:flex;gap:0.4rem;margin-top:0.3rem;align-items:center}
.replies-section{margin-top:0.5rem;padding-left:0.5rem;border-left:2px solid rgba(255,255,255,0.06)}
.comment-write{display:flex;gap:0.4rem;margin-top:0.5rem}
.comment-write input{flex:1;padding:0.4rem 0.75rem;font-size:0.85rem}
.comment-write button{width:auto;padding:0.4rem 0.75rem;font-size:0.82rem;white-space:nowrap}
`;
document.head.appendChild(s);
})();
// ── HTML-Escape ────────────────────────────────────────────────────────────────
function esc(str) {
if (!str) return '';
return str.replace(/&/g, '&').replace(//g, '>')
.replace(/"/g, '"').replace(/\n/g, '
');
}
// ── Datum-Format ──────────────────────────────────────────────────────────────
function fmtDate(iso) {
if (!iso) return '';
const d = new Date(iso);
return d.toLocaleDateString('de-DE') + ' ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
}
// ── Emoji-Picker ──────────────────────────────────────────────────────────────
const EMOJIS = ['😊','😂','❤️','😍','🔥','👍','🥰','😎','🤔','😘','💕','🎉','✨','💋','😈','🫦','🍑','🍆','🔞','🥵','😭','😢','😤','🙄','🤦','🤷','🙏','💪','😏','🤩'];
let _emojiTarget = null;
function toggleEmojiPicker(btn, targetId) {
_emojiTarget = document.getElementById(targetId);
let picker = document.getElementById('sharedEmojiPicker');
if (!picker) {
picker = document.createElement('div');
picker.id = 'sharedEmojiPicker';
picker.style.cssText = 'position:fixed;z-index:9000;background:var(--color-card);border:1px solid var(--color-secondary);border-radius:10px;padding:0.5rem;display:flex;flex-wrap:wrap;gap:0.2rem;max-width:260px;box-shadow:0 4px 20px rgba(0,0,0,0.5);';
EMOJIS.forEach(em => {
const b = document.createElement('button');
b.textContent = em;
b.style.cssText = 'background:none;border:none;font-size:1.3rem;cursor:pointer;padding:0.2rem;margin:0;width:auto;line-height:1;';
b.onclick = e => { e.stopPropagation(); insertEmoji(em); };
picker.appendChild(b);
});
document.body.appendChild(picker);
}
if (picker.style.display === 'flex') { picker.style.display = 'none'; return; }
picker.style.display = 'flex';
requestAnimationFrame(() => {
const rect = btn.getBoundingClientRect();
const ph = picker.offsetHeight, pw = picker.offsetWidth;
let top = rect.top - ph - 8;
let left = rect.left;
if (top < 8) top = rect.bottom + 8;
if (left + pw > window.innerWidth - 8) left = window.innerWidth - pw - 8;
picker.style.top = top + 'px';
picker.style.left = left + 'px';
});
}
function insertEmoji(emoji) {
if (!_emojiTarget) return;
const start = _emojiTarget.selectionStart ?? _emojiTarget.value.length;
const end = _emojiTarget.selectionEnd ?? start;
_emojiTarget.value = _emojiTarget.value.slice(0, start) + emoji + _emojiTarget.value.slice(end);
_emojiTarget.selectionStart = _emojiTarget.selectionEnd = start + emoji.length;
_emojiTarget.focus();
}
document.addEventListener('click', e => {
const picker = document.getElementById('sharedEmojiPicker');
if (picker && picker.style.display === 'flex'
&& !picker.contains(e.target)
&& !e.target.closest('[onclick*="toggleEmojiPicker"]')) {
picker.style.display = 'none';
}
});
// ── Bild-Karussell (Lightbox/Detail-Ansicht) ─────────────────────────────────
function bilderCarousel(bilder) {
if (!bilder || bilder.length === 0) return '';
const slides = bilder.map((b, i) =>
`
Noch keine Antworten.
' : replies.map(r => renderReplyHtml(r, kommentarId)).join('')) + `Noch keine Kommentare.
' : comments.map(k => renderKommentarHtml(k, targetType, postId, { myUserId: _lbMyUserId })).join(''); } catch (_) {} } async function postLbComment() { if (!_lbPostId) return; const input = document.getElementById('lbCommentInput'); const text = input.value.trim(); if (!text) return; const targetType = _lbPostType === 'GROUP' ? 'GROUP_POST' : 'FEED_POST'; await fetch('/social/kommentare', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ targetType, targetId: _lbPostId, text }) }); input.value = ''; await loadLbComments(_lbPostId, _lbPostType); const kcEl = document.getElementById('kc-' + _lbPostId) || document.getElementById('hkc-' + _lbPostId); if (kcEl) kcEl.textContent = parseInt(kcEl.textContent || '0') + 1; } async function deleteKommentar(kommentarId, targetType, targetId) { await fetch('/social/kommentare/' + kommentarId, { method: 'DELETE' }); await loadLbComments(targetId, _lbPostType); } // ───────────────────────────────────────────────────────────────────────────── // Bild-Verarbeitung (Compose & Edit) // ───────────────────────────────────────────────────────────────────────────── /** Liest eine Bilddatei, skaliert auf max. 1024px, komprimiert auf JPEG 85 % * und hängt den Base64-String an bilderArr an, dann ruft renderFn() auf. */ function processImageFile(file, bilderArr, renderFn) { if (!file || !file.type.startsWith('image/')) return; const reader = new FileReader(); reader.onload = e => { const img = new Image(); img.onload = () => { const MAX = 1024, canvas = document.createElement('canvas'); const s = Math.min(MAX / img.width, MAX / img.height, 1); canvas.width = Math.round(img.width * s); canvas.height = Math.round(img.height * s); canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height); bilderArr.push(canvas.toDataURL('image/jpeg', 0.85).split(',')[1]); renderFn(); }; img.src = e.target.result; }; reader.readAsDataURL(file); } /** Rendert Vorschau-Thumbnails in containerId; rmCallback(idx) wird beim ✕ aufgerufen. */ function renderBilderThumbs(bilderArr, containerId, rmCallback) { const c = document.getElementById(containerId); if (!c) return; c.innerHTML = ''; bilderArr.forEach((b, i) => { const div = document.createElement('div'); div.className = 'compose-thumb'; const img = document.createElement('img'); img.src = `data:image/jpeg;base64,${b}`; const btn = document.createElement('button'); btn.className = 'compose-thumb-remove'; btn.textContent = '✕'; btn.title = 'Entfernen'; btn.onclick = ev => { ev.stopPropagation(); rmCallback(i); }; div.appendChild(img); div.appendChild(btn); c.appendChild(div); }); c.style.display = bilderArr.length > 0 ? 'flex' : 'none'; } // ───────────────────────────────────────────────────────────────────────────── // Post-Bearbeitung (gemeinsam, über Präfix parametrisiert) // Präfixe: 'p' (feed), 'hp' (userhome), 'gp' (gruppe) // IDs-Muster: ${prefix}va-, ${prefix}bi-, ${prefix}ea-, ${prefix}um-, // ${prefix}m-, ${prefix}et-, ${prefix}et-tb-, ${prefix}eo-, ${prefix}mc- // ───────────────────────────────────────────────────────────────────────────── /** * cfg: { postId, prefix, data, editBilderMap, * saveFn, cancelFn, addImgFn, addOptionFn, rmImgFn } * Alle Fn-Namen sind Strings (globale Funktionsnamen auf der jeweiligen Seite). */ function startPostEdit(cfg) { const { postId, prefix, data, editBilderMap, saveFn, cancelFn, addImgFn, addOptionFn, rmImgFn } = cfg; editBilderMap.set(postId, [...(data.bilder || [])]); document.getElementById(`${prefix}va-${postId}`).style.display = 'none'; document.getElementById(`${prefix}um-${postId}`).style.display = 'none'; const isUmfrage = data.beitragTyp === 'UMFRAGE'; const optionenHtml = isUmfrage ? `