2022 主题bug修复

themes/Ying/assets/js/main.js

@@ -2,7 +2,7 @@
 document.addEventListener('DOMContentLoaded', function() {
     // 文章图片灯箱
     if (window.ViewImage) {
-        ViewImage.init('.post-content img');
+        ViewImage.init('.post-content img:not(.amigo-music-card__cover):not(.amigo-voice-avatar):not(.amigo-livephoto-img)');
     }
 
     // 灯箱增强：滚动关闭 + fade scale 退回动画
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function() {
         var clickedImg = null;
 
         document.addEventListener('click', function(e) {
-            var img = e.target.closest('.post-content img');
+            var img = e.target.closest('.post-content img:not(.amigo-music-card__cover):not(.amigo-voice-avatar):not(.amigo-livephoto-img)');
             if (img) clickedImg = img;
         }, true);
 

themes/Ying/assets/js/shortcodes.js

@@ -8,34 +8,20 @@
 // ============================================================
 
 function initLivePhotoShortcodes() {
-    document.querySelectorAll('.live-photo').forEach(function(livePhoto) {
+    document.querySelectorAll('.amigo-livephoto').forEach(function(livePhoto) {
         if (livePhoto.__liveBound) return;
         livePhoto.__liveBound = true;
 
-        var video = livePhoto.querySelector('video.live-photo-video') || livePhoto.querySelector('video');
-        var posterImg = livePhoto.querySelector('img.live-photo-poster') || livePhoto.querySelector('img');
-        var toggleBtn = livePhoto.querySelector('.live-photo-toggle-btn');
-        var muteBtn = livePhoto.querySelector('.live-photo-mute-btn');
+        var video = livePhoto.querySelector('.amigo-livephoto-video');
+        var posterImg = livePhoto.querySelector('.amigo-livephoto-img');
+        var soundBtn = livePhoto.querySelector('.amigo-livephoto-sound');
 
-        if (!video || !toggleBtn || !muteBtn) return;
+        if (!video) return;
 
         var HOVER_DELAY = 500;
         var hoverTimer = null;
         var isLoaded = false;
-
-        function syncAspectFromPoster() {
-            if (!posterImg) return;
-            var w = posterImg.naturalWidth || 0;
-            var h = posterImg.naturalHeight || 0;
-            if (!w || !h) return;
-            livePhoto.style.setProperty('--live-photo-aspect', w + ' / ' + h);
-        }
-
-        if (posterImg && posterImg.complete) {
-            syncAspectFromPoster();
-        } else if (posterImg) {
-            posterImg.addEventListener('load', syncAspectFromPoster, { once: true });
-        }
+        var isUserToggled = false;
 
         function ensureLoaded() {
             if (isLoaded) return;
@@ -50,69 +36,66 @@ function initLivePhotoShortcodes() {
 
         function setMuted(isMuted) {
             video.muted = !!isMuted;
-            if (isMuted) video.setAttribute('muted', '');
-            else video.removeAttribute('muted');
-            muteBtn.setAttribute('data-muted', isMuted ? 'true' : 'false');
+            if (isMuted) {
+                video.setAttribute('muted', '');
+                livePhoto.classList.add('is-muted');
+            } else {
+                video.removeAttribute('muted');
+                livePhoto.classList.remove('is-muted');
+            }
         }
 
-        setMuted(true);
-
         function playVideo() {
             ensureLoaded();
             livePhoto.classList.add('is-playing');
-            toggleBtn.setAttribute('data-state', 'live');
             try { video.play(); } catch (e) {}
         }
 
         function stopVideo() {
             livePhoto.classList.remove('is-playing');
-            toggleBtn.setAttribute('data-state', 'static');
             try { video.pause(); video.currentTime = 0; } catch (e) {}
         }
 
-        // Toggle button click
-        toggleBtn.addEventListener('click', function(e) {
-            e.stopPropagation();
+        function togglePlay() {
             if (livePhoto.classList.contains('is-playing')) {
+                isUserToggled = false;
                 stopVideo();
             } else {
+                isUserToggled = true;
                 playVideo();
             }
+        }
+
+        // Click to toggle
+        livePhoto.addEventListener('click', function() {
+            togglePlay();
         });
 
-        // Mute button click
-        muteBtn.addEventListener('click', function(e) {
-            e.stopPropagation();
-            setMuted(!video.muted);
-        });
+        // Sound button click
+        if (soundBtn) {
+            soundBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                setMuted(!video.muted);
+            });
+        }
 
-        // Hover to play
-        livePhoto.addEventListener('mouseenter', function() {
-            hoverTimer = setTimeout(playVideo, HOVER_DELAY);
-        });
+        // Hover to play (desktop)
+        if ('ontouchstart' in window === false) {
+            livePhoto.addEventListener('mouseenter', function() {
+                if (isUserToggled) return;
+                hoverTimer = setTimeout(playVideo, HOVER_DELAY);
+            });
 
-        livePhoto.addEventListener('mouseleave', function() {
-            clearTimeout(hoverTimer);
-            if (toggleBtn.getAttribute('data-state') !== 'live') {
-                stopVideo();
-            }
-        });
+            livePhoto.addEventListener('mouseleave', function() {
+                clearTimeout(hoverTimer);
+                if (!isUserToggled) {
+                    stopVideo();
+                }
+            });
+        }
 
-        // Mobile touch
-        livePhoto.addEventListener('touchstart', function() {
-            if (livePhoto.classList.contains('is-playing')) {
-                stopVideo();
-            } else {
-                playVideo();
-            }
-        });
-
-        // Video ended
-        video.addEventListener('ended', function() {
-            if (toggleBtn.getAttribute('data-state') !== 'live') {
-                stopVideo();
-            }
-        });
+        // Initialize muted state
+        setMuted(livePhoto.classList.contains('is-muted'));
     });
 }
 
@@ -147,24 +130,24 @@ function initVoiceBubbles() {
             if (isPlaying) {
                 audio.pause();
                 audio.currentTime = 0;
-                bubble.classList.remove('playing');
+                bubble.classList.remove('is-playing');
                 isPlaying = false;
             } else {
                 // Stop other playing voices
-                document.querySelectorAll('.amigo-voice-bubble.playing').forEach(function(other) {
+                document.querySelectorAll('.amigo-voice-bubble.is-playing').forEach(function(other) {
                     if (other !== bubble) {
-                        other.classList.remove('playing');
+                        other.classList.remove('is-playing');
                     }
                 });
 
                 audio.play();
-                bubble.classList.add('playing');
+                bubble.classList.add('is-playing');
                 isPlaying = true;
             }
         });
 
         audio.addEventListener('ended', function() {
-            bubble.classList.remove('playing');
+            bubble.classList.remove('is-playing');
             isPlaying = false;
         });
     });
@@ -190,6 +173,7 @@ function initMusicCards() {
         if (!audioSrc) return;
 
         audio = new Audio(audioSrc);
+        card.__audio = audio;
 
         // Load metadata
         audio.addEventListener('loadedmetadata', function() {
@@ -201,7 +185,9 @@ function initMusicCards() {
         audio.addEventListener('timeupdate', function() {
             if (currentTime) currentTime.textContent = formatTime(audio.currentTime);
             if (seekInput && audio.duration) {
+                var progress = (audio.currentTime / audio.duration) * 100;
                 seekInput.value = (audio.currentTime / audio.duration * 1000).toString();
+                card.style.setProperty('--music-progress', progress + '%');
             }
         });
 
@@ -209,18 +195,26 @@ function initMusicCards() {
         function togglePlay() {
             if (isPlaying) {
                 audio.pause();
-                card.classList.remove('playing');
+                card.setAttribute('data-playing', 'false');
+                if (playBtn) playBtn.setAttribute('aria-pressed', 'false');
                 isPlaying = false;
             } else {
                 // Stop other playing music
-                document.querySelectorAll('.amigo-music-card.playing').forEach(function(other) {
+                document.querySelectorAll('.amigo-music-card[data-playing="true"]').forEach(function(other) {
                     if (other !== card) {
-                        other.classList.remove('playing');
+                        other.setAttribute('data-playing', 'false');
+                        var otherPlayBtn = other.querySelector('.amigo-music-card__play');
+                        if (otherPlayBtn) otherPlayBtn.setAttribute('aria-pressed', 'false');
+                        var otherAudio = other.__audio;
+                        if (otherAudio) {
+                            try { otherAudio.pause(); } catch(e) {}
+                        }
                     }
                 });
 
                 audio.play();
-                card.classList.add('playing');
+                card.setAttribute('data-playing', 'true');
+                if (playBtn) playBtn.setAttribute('aria-pressed', 'true');
                 isPlaying = true;
             }
         }
@@ -238,14 +232,17 @@ function initMusicCards() {
         if (seekInput) {
             seekInput.addEventListener('input', function() {
                 if (audio.duration) {
+                    var progress = (parseFloat(seekInput.value) / 1000) * 100;
                     audio.currentTime = (parseFloat(seekInput.value) / 1000) * audio.duration;
+                    card.style.setProperty('--music-progress', progress + '%');
                 }
             });
         }
 
         // Ended
         audio.addEventListener('ended', function() {
-            card.classList.remove('playing');
+            card.setAttribute('data-playing', 'false');
+            if (playBtn) playBtn.setAttribute('aria-pressed', 'false');
             isPlaying = false;
         });
     });
@@ -257,6 +254,55 @@ function formatTime(seconds) {
     return m + ':' + (s < 10 ? '0' : '') + s;
 }
 
+// ============================================================
+// Cleanup functions for PJAX
+// ============================================================
+
+function cleanupVoiceBubbles() {
+    document.querySelectorAll('.amigo-voice-bubble').forEach(function(bubble) {
+        if (bubble.__audio) {
+            try {
+                bubble.__audio.pause();
+                bubble.__audio.src = '';
+                bubble.__audio = null;
+            } catch (e) {}
+        }
+        bubble.__voiceBound = false;
+    });
+}
+
+function cleanupMusicCards() {
+    document.querySelectorAll('.amigo-music-card').forEach(function(card) {
+        if (card.__audio) {
+            try {
+                card.__audio.pause();
+                card.__audio.src = '';
+                card.__audio = null;
+            } catch (e) {}
+        }
+        card.__musicBound = false;
+    });
+}
+
+function cleanupLivePhotos() {
+    document.querySelectorAll('.amigo-livephoto').forEach(function(livePhoto) {
+        var video = livePhoto.querySelector('video');
+        if (video) {
+            try {
+                video.pause();
+                video.src = '';
+            } catch (e) {}
+        }
+        livePhoto.__liveBound = false;
+    });
+}
+
+function cleanupAllShortcodes() {
+    cleanupVoiceBubbles();
+    cleanupMusicCards();
+    cleanupLivePhotos();
+}
+
 // ============================================================
 // Initialize all shortcodes
 // ============================================================
@@ -273,10 +319,24 @@ document.addEventListener('DOMContentLoaded', initAllShortcodes);
 // Page load
 window.addEventListener('load', initAllShortcodes);
 
-// PJAX support - re-initialize after page transition
+// If DOM is already ready (script loaded late), initialize immediately
+if (document.readyState === 'interactive' || document.readyState === 'complete') {
+    initAllShortcodes();
+}
+
+// PJAX support - cleanup before and re-initialize after page transition
+document.addEventListener('pjax:beforeSend', cleanupAllShortcodes);
 document.addEventListener('pjax:complete', initAllShortcodes);
 document.addEventListener('pjax:success', initAllShortcodes);
 
 // Also listen for custom events that some PJAX libraries fire
 document.addEventListener('page:loaded', initAllShortcodes);
 document.addEventListener('page:change', initAllShortcodes);
+document.addEventListener('turbo:load', initAllShortcodes);
+document.addEventListener('turbo:before-render', cleanupAllShortcodes);
+
+// History API based navigation
+document.addEventListener('popstate', function() {
+    cleanupAllShortcodes();
+    setTimeout(initAllShortcodes, 10);
+});