1 / 0
0s

Untitled Story

zubair007tanoli@gmail.com Oct 28, 2025
0 0
progressBar.style.width = progress + '%'; // Update progress indicators updateProgressIndicators(); // Reset slide timer slideStartTime = Date.now(); document.getElementById('slide-timer').textContent = '0'; // Increment view count on first view if (index === 0 && viewCount === 0) { viewCount++; updateStats(); } } } function nextSlide() { const nextIndex = (currentSlideIndex + 1) % totalSlides; showSlide(nextIndex); if (isPlaying) { startSlideTimer(); } } function prevSlide() { const prevIndex = currentSlideIndex === 0 ? totalSlides - 1 : currentSlideIndex - 1; showSlide(prevIndex); if (isPlaying) { startSlideTimer(); } } function startSlideTimer() { if (slideTimer) { clearTimeout(slideTimer); } const currentSlide = slides[currentSlideIndex]; const duration = currentSlide ? parseInt(currentSlide.dataset.duration) || 5000 : 5000; slideTimer = setTimeout(() => { if (isPlaying) { nextSlide(); } }, duration); } function togglePlayPause() { isPlaying = !isPlaying; const icon = playPauseBtn.querySelector('i'); if (isPlaying) { icon.className = 'fas fa-pause'; startSlideTimer(); } else { icon.className = 'fas fa-play'; if (slideTimer) { clearTimeout(slideTimer); } } } // Event listeners playPauseBtn.addEventListener('click', togglePlayPause); nextBtn.addEventListener('click', () => { nextSlide(); }); prevBtn.addEventListener('click', () => { prevSlide(); }); closeBtn.addEventListener('click', () => { window.history.back(); }); // Keyboard navigation document.addEventListener('keydown', function(e) { switch(e.key) { case 'ArrowRight': case ' ': e.preventDefault(); nextSlide(); break; case 'ArrowLeft': e.preventDefault(); prevSlide(); break; case 'Escape': window.history.back(); break; } }); // Touch/swipe navigation let startX = 0; let startY = 0; storyViewer.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }); storyViewer.addEventListener('touchend', function(e) { const endX = e.changedTouches[0].clientX; const endY = e.changedTouches[0].clientY; const diffX = startX - endX; const diffY = startY - endY; // Only handle horizontal swipes if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) { if (diffX > 0) { nextSlide(); // Swipe left - next slide } else { prevSlide(); // Swipe right - previous slide } } }); // Auto-hide controls let hideControlsTimer = null; function showControls() { document.querySelector('.story-controls').style.opacity = '1'; document.querySelector('.story-info').style.opacity = '1'; document.querySelector('.close-btn').style.opacity = '1'; if (hideControlsTimer) { clearTimeout(hideControlsTimer); } hideControlsTimer = setTimeout(() => { document.querySelector('.story-controls').style.opacity = '0.3'; document.querySelector('.story-info').style.opacity = '0.3'; document.querySelector('.close-btn').style.opacity = '0.3'; }, 3000); } function hideControls() { document.querySelector('.story-controls').style.opacity = '0'; document.querySelector('.story-info').style.opacity = '0'; document.querySelector('.close-btn').style.opacity = '0'; } // Show controls on interaction storyViewer.addEventListener('click', showControls); storyViewer.addEventListener('touchstart', showControls); // Initialize controls visibility showControls(); // Initialize action buttons initializeActionButtons(); // Helper functions function initializeProgressIndicators() { const indicatorsContainer = document.getElementById('progress-indicators'); if (!indicatorsContainer) return; // Clear using safe method (not innerHTML) while (indicatorsContainer.firstChild) { indicatorsContainer.removeChild(indicatorsContainer.firstChild); } for (let i = 0; i < totalSlides; i++) { const indicator = document.createElement('div'); indicator.className = 'progress-indicator'; if (i === 0) indicator.classList.add('active'); indicatorsContainer.appendChild(indicator); } } function updateProgressIndicators() { const indicators = document.querySelectorAll('.progress-indicator'); indicators.forEach((indicator, index) => { indicator.classList.toggle('active', index === currentSlideIndex); }); } function updateStats() { document.getElementById('view-count').textContent = viewCount; document.getElementById('like-count').textContent = likeCount; } function initializeActionButtons() { // Share button document.getElementById('share-btn')?.addEventListener('click', () => { if (navigator.share) { navigator.share({ title: document.querySelector('.story-title').textContent, text: document.querySelector('.story-description')?.textContent || '', url: window.location.href }); } else { // Fallback to copying URL navigator.clipboard.writeText(window.location.href); showNotification('Link copied to clipboard!'); } }); // Like button document.getElementById('like-btn')?.addEventListener('click', () => { isLiked = !isLiked; likeCount += isLiked ? 1 : -1; updateStats(); const likeBtn = document.getElementById('like-btn'); likeBtn.style.color = isLiked ? '#ff6b6b' : 'white'; likeBtn.style.transform = isLiked ? 'scale(1.2)' : 'scale(1)'; showNotification(isLiked ? 'Story liked!' : 'Story unliked!'); }); // Bookmark button document.getElementById('bookmark-btn')?.addEventListener('click', () => { isBookmarked = !isBookmarked; const bookmarkBtn = document.getElementById('bookmark-btn'); bookmarkBtn.style.color = isBookmarked ? '#ffd700' : 'white'; bookmarkBtn.style.transform = isBookmarked ? 'scale(1.2)' : 'scale(1)'; showNotification(isBookmarked ? 'Story bookmarked!' : 'Story unbookmarked!'); }); } function showNotification(message) { // Create notification element const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.8); color: white; padding: 1rem 1.5rem; border-radius: 10px; z-index: 10001; font-size: 0.9rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); `; notification.textContent = message; document.body.appendChild(notification); // Remove after 3 seconds setTimeout(() => { notification.remove(); }, 3000); } function updateSlideTimer() { if (slideStartTime) { const elapsed = Math.floor((Date.now() - slideStartTime) / 1000); document.getElementById('slide-timer').textContent = elapsed; } }