Init

resources/js/preview.js

@@ -0,0 +1,56 @@
+const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+var old_timestamp = document.getElementById('ts_reference').value;
+
+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;
+
+        function clear() {
+            thumb.children[0].children[1].src = originalImage;
+            i = 1;
+            clearTimeout(interval);
+        }
+
+        function toggle() {
+            if (i == 0) {
+                clear();
+                return;
+            }
+
+            thumb.children[0].children[1].src = thumbsJSON[i];
+            i = (i + 1) % thumbsJSON.length;
+        }
+
+        function interval() {
+            // Start Preview
+            interval = setInterval(toggle, 700);
+        }
+
+        thumb.addEventListener('mouseenter', interval);
+        thumb.addEventListener('mouseleave', clear);
+    });
+}
+
+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);
+    }
+}
+
+window.addEventListener('contentChanged', event => {
+    console.log('== Received contentChanged Event ==');
+    init();
+});
+
+initPreviews();