Fix hover to preview once and for all

resources/js/preview.js

@@ -1,56 +1,52 @@
-const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
-var old_timestamp = document.getElementById('ts_reference').value;
+function initGalleryPreviews() {
+    const previews = document.querySelectorAll('.preview-gallery');
 
-function initPreviews() {
-    var thumbs = document.querySelectorAll('div[data-thumbs]');
-    thumbs.forEach(function (thumb) {
-        var thumbsJSON = JSON.parse(thumb.dataset.thumbs);
-        var originalImage = thumb.children[0].children[1].src;
-        var interval;
-        var i = 1;
+    previews.forEach((img) => {
+        // Prevent double initialization
+        if (img.dataset.previewInitialized) return;
 
-        function clear() {
-            thumb.children[0].children[1].src = originalImage;
-            i = 1;
-            clearTimeout(interval);
+        img.dataset.previewInitialized = 'true';
+
+        let images = [];
+
+        try {
+            images = JSON.parse(img.dataset.gallery);
+        } catch (e) {
+            console.error('Invalid gallery JSON', e);
+            return;
         }
 
-        function toggle() {
-            if (i == 0) {
-                clear();
-                return;
-            }
+        if (images.length <= 1) return;
 
-            thumb.children[0].children[1].src = thumbsJSON[i];
-            i = (i + 1) % thumbsJSON.length;
-        }
+        const original = img.src;
 
-        function interval() {
-            // Start Preview
-            interval = setInterval(toggle, 700);
-        }
+        let index = 0;
+        let interval = null;
 
-        thumb.addEventListener('mouseenter', interval);
-        thumb.addEventListener('mouseleave', clear);
+        const startPreview = () => {
+            console.log("startPreview");
+            interval = setInterval(() => {
+                index = (index + 1) % images.length;
+                img.src = images[index];
+            }, 700);
+        };
+
+        const stopPreview = () => {
+            console.log("stopPreview");
+            clearInterval(interval);
+            interval = null;
+
+            index = 0;
+            img.src = original;
+        };
+
+        img.addEventListener('mouseenter', startPreview);
+        img.addEventListener('mouseleave', stopPreview);
     });
 }
 
-async function init() {
-    for (let i = 0; i < 9; i++) {
-        var new_timestamp = document.getElementById('ts_reference').value;
-        if (new_timestamp != old_timestamp) {
-            console.log('== Changed ==');
-            initPreviews();
-            break;
-        }
-        console.log('== Didnt Change ==');
-        await sleep(1000);
-    }
-}
+// Initial page load
+document.addEventListener('DOMContentLoaded', initGalleryPreviews);
 
-window.addEventListener('contentChanged', event => {
-    console.log('== Received contentChanged Event ==');
-    init();
-});
-
-initPreviews();
+// Livewire v3 navigation/update
+document.addEventListener('contentChanged', initGalleryPreviews);