diff --git a/assets/css/comments.css b/assets/css/comments.css index 43abfda..b98858c 100644 --- a/assets/css/comments.css +++ b/assets/css/comments.css @@ -222,4 +222,50 @@ input:checked+.slider:before { z-index: 100001; pointer-events: auto !important; /* Żeby dało się w nie klikać nawet w trybie blokady */ +} + +/* Ukrywanie pinesek */ +body.comments-hidden .comment-marker { + display: none !important; +} + +/* Dialog listy wszystkich komentarzy */ +#all-comments-dialog { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); + z-index: 100005; + width: 500px; + max-width: 90vw; + display: none; +} + +#all-comments-dialog-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 100004; + display: none; + backdrop-filter: blur(2px); +} + +.comment-list-item { + padding: 10px; + border-bottom: 1px solid #f0f0f0; +} + +.comment-list-item:last-child { + border-bottom: none; +} + +.comment-list-item:hover { + background: #f9f9f9; } \ No newline at end of file diff --git a/assets/js/comments.js b/assets/js/comments.js index 058157f..5872dcd 100644 --- a/assets/js/comments.js +++ b/assets/js/comments.js @@ -17,15 +17,35 @@ const bar = document.createElement('div'); bar.id = 'prototype-topbar'; bar.innerHTML = ` -
- Magico Feedback +
+
+ Magico Feedback +
-
- Tryb Komentowania - + +
+ +
+ Komentarzy: + 0 +
+ + +
+ + +
+ +
+ + +
+ Tryb Komentowania + +
`; document.body.appendChild(bar); @@ -42,10 +62,19 @@
+ + +
+
+
+
Wszystkie komentarze
+ +
+
+
`; document.body.insertAdjacentHTML('beforeend', modalHtml); - // Listenery UI // Listenery UI const toggle = document.getElementById('comment-toggle'); @@ -68,6 +97,31 @@ } }); + // Toggle visibility + const visToggle = document.getElementById('comments-visibility-toggle'); + const savedVis = localStorage.getItem('magico_markers_visible'); + if (savedVis === 'false') { + visToggle.checked = false; + document.body.classList.add('comments-hidden'); + } + + visToggle.addEventListener('change', (e) => { + if (e.target.checked) { + document.body.classList.remove('comments-hidden'); + localStorage.setItem('magico_markers_visible', 'true'); + } else { + document.body.classList.add('comments-hidden'); + localStorage.setItem('magico_markers_visible', 'false'); + } + }); + + // Open list dialog + document.getElementById('comments-count-badge').addEventListener('click', showAllCommentsDialog); + document.getElementById('close-all-comments').addEventListener('click', () => { + document.getElementById('all-comments-dialog').style.display = 'none'; + document.getElementById('all-comments-dialog-overlay').style.display = 'none'; + }); + // --- RESTORE SESSION --- const savedMode = localStorage.getItem('magico_comment_mode'); if (savedMode === 'true') { @@ -314,7 +368,11 @@ // Grupowanie komentarzy po selektorze const grouped = {}; + let activeCount = 0; + markersData.forEach((c) => { + if (c.is_resolved == 0) activeCount++; + // Pomiń rozwiązane, jeśli chcemy je ukrywać (na razie pokazujemy wszystkie, albo tylko nierozwiązane?) // User: "archiwum zmienia flagę is_resolved". Zakładamy że archiwum = ukryte? // "Archiwum" zwykle oznacza ukryte. Ukryjmy rozwiązane. @@ -324,6 +382,10 @@ grouped[c.dom_selector].push(c); }); + // Aktualizacja licznika na pasku + const cntEl = document.getElementById('comments-count-val'); + if (cntEl) cntEl.textContent = activeCount; + Object.keys(grouped).forEach((selector, index) => { const commentsList = grouped[selector]; if (!commentsList.length) return; @@ -610,4 +672,68 @@ attributeFilter: ['class', 'style', 'hidden'] }); + // --- 7. DIALOG Z LISTĄ WSZYSTKICH --- + function showAllCommentsDialog() { + const dialog = document.getElementById('all-comments-dialog'); + const overlay = document.getElementById('all-comments-dialog-overlay'); + const list = document.getElementById('all-comments-list'); + + // Budowanie listy + // Filtrujemy tylko nierozwiązane??? W sumie user chciał "wszystkimi zebranymi z tego ekranu". + // Pokażmy wszystkie uporządkowane od najnowszych, z oznaczeniem rozwiązanych. + + // Kopia i sortowanie + const sorted = [...markersData].sort((a, b) => b.id - a.id); + + if (sorted.length === 0) { + list.innerHTML = '

Brak komentarzy na tym ekranie.

'; + } else { + let html = ''; + sorted.forEach(c => { + const bg = c.is_resolved == 1 ? '#f0fff0' : '#fff'; + const status = c.is_resolved == 1 ? 'Rozwiązany' : ''; + + html += ` +
+
+
+ ${c.author || 'Anonim'} + ${status} +
+ ${c.created_at} +
+

${c.comment}

+
+ Element: ${c.dom_selector.substring(0, 30)}... +
+
+ ${c.is_resolved == 0 ? `` : ''} + +
+
+ `; + }); + list.innerHTML = html; + + // Listenery w liście + list.querySelectorAll('.btn-resolve-list').forEach(btn => { + btn.addEventListener('click', () => resolveComment(btn.dataset.id)); + }); + list.querySelectorAll('.btn-delete-list').forEach(btn => { + btn.addEventListener('click', () => deleteComment(btn.dataset.id)); + }); + } + + dialog.style.display = 'block'; + overlay.style.display = 'block'; + } + + // Dodajmy do renderMarkers aktualizację licznika + // Musimy przechwycić oryginalny renderMarkers wyżej + // Ale jesteśmy w module, więc po prostu dopiszmy to do renderMarkers + + // W renderMarkers (linia ~300) dodać: + // document.getElementById('comments-count-val').textContent = markersData.filter(c => c.is_resolved == 0).length; + // Albo wszystkich? "Liczba komentarzy". Raczej wszystkich aktywnych. + })(); \ No newline at end of file