David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PostCounter

Browse Source
This commit is contained in:
David
2026-01-29 12:52:41 +11:00
parent 6774ff272d
commit f67099f5b0
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
script.js
View File

@@ -309,6 +309,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
const paginationHTML = media.length > 1 ? `<div class="carousel-dots">${dotsHTML}</div>` : ''; const paginationHTML = media.length > 1 ? `<div class="carousel-dots">${dotsHTML}</div>` : '';
const counterHTML = media.length > 1 ? `<div class="media-counter">1/${media.length}</div>` : '';
article.innerHTML = ` article.innerHTML = `
<div class="post-header"> <div class="post-header">
@@ -319,9 +320,10 @@ document.addEventListener('DOMContentLoaded', () => {
${optionsHTML} ${optionsHTML}
</div> </div>
<div class="post-image-wrapper post-media-wrapper"> <div class="post-image-wrapper post-media-wrapper">
<div class="media-carousel" onscroll="updateDots(this)"> <div class="media-carousel" onscroll="updateCarouselState(this)">
${slidesHTML} ${slidesHTML}
</div> </div>
${counterHTML}
${paginationHTML} ${paginationHTML}
</div> </div>
<div class="post-actions"> <div class="post-actions">
@@ -381,14 +383,22 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
// Global helper for dots // Global helper for dots and counter
window.updateDots = function (carousel) { window.updateCarouselState = function (carousel) {
const index = Math.round(carousel.scrollLeft / carousel.offsetWidth); const index = Math.round(carousel.scrollLeft / carousel.offsetWidth);
// Update Dots
const dots = carousel.parentElement.querySelectorAll('.dot'); const dots = carousel.parentElement.querySelectorAll('.dot');
dots.forEach((dot, i) => { dots.forEach((dot, i) => {
if (i === index) dot.classList.add('active'); if (i === index) dot.classList.add('active');
else dot.classList.remove('active'); else dot.classList.remove('active');
}); });
// Update Counter
const counter = carousel.parentElement.querySelector('.media-counter');
if (counter) {
counter.innerText = `${index + 1}/${dots.length}`;
}
} }
// --- FEED LISTENERS --- // --- FEED LISTENERS ---
@@ -594,7 +604,7 @@ document.addEventListener('DOMContentLoaded', () => {
wrapper.appendChild(dotsContainer); wrapper.appendChild(dotsContainer);
// Attach Listeners // Attach Listeners
mediaPreviewContainer.onscroll = () => window.updateDots(mediaPreviewContainer); mediaPreviewContainer.onscroll = () => window.updateCarouselState(mediaPreviewContainer);
enableDragScroll(mediaPreviewContainer); // Desktop Swipe Support enableDragScroll(mediaPreviewContainer); // Desktop Swipe Support
} }
} }

17
styles/main.css
View File

@@ -870,3 +870,20 @@ p {
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
} }
/* --- MEDIA COUNTER BADGE --- */
.media-counter {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 12px;
pointer-events: none;
z-index: 10;
font-weight: 500;
backdrop-filter: blur(4px);
}