feat: enhance image preview functionality with improved event handling and state management

apilo.js

@@ -48,8 +48,39 @@ function attachTableReloadListener() {
 
 // --- 4) Główny worker: wstawianie miniatur wg SKU ---
 const imgCache = new Map(); // SKU -> imgURL
+const previewState = {
+  largeImg: null,
+  sourceImg: null,
+  onMove: null
+};
+let previewGuardsAttached = false;
+
+function hideLargePreview() {
+  if (previewState.onMove) {
+    document.removeEventListener('mousemove', previewState.onMove);
+  }
+  if (previewState.largeImg) {
+    previewState.largeImg.remove();
+  }
+  previewState.largeImg = null;
+  previewState.sourceImg = null;
+  previewState.onMove = null;
+}
+
+function ensurePreviewGuardListeners() {
+  if (previewGuardsAttached) return;
+  previewGuardsAttached = true;
+
+  window.addEventListener('blur', hideLargePreview);
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) hideLargePreview();
+  });
+  document.addEventListener('scroll', hideLargePreview, true);
+}
 
 function setImageToProduct() {
+  hideLargePreview();
+
   const tbody = document.querySelector('#DataTables_Table_0 tbody');
   if (!tbody) return;
 
@@ -145,18 +176,23 @@ function makeImg(src) {
 
 // --- 5) Podgląd dużego obrazka ---
 function setupPreview(imgElement, src) {
-  let largeImg = null;
+  ensurePreviewGuardListeners();
 
   const onMove = (ev) => {
-    if (!largeImg) return;
+    if (!previewState.largeImg) return;
+    if (!previewState.sourceImg || !previewState.sourceImg.isConnected || !previewState.sourceImg.matches(':hover')) {
+      hideLargePreview();
+      return;
+    }
     const pad = 10;
-    largeImg.style.top = (ev.pageY - largeImg.height / 2) + 'px';
+    previewState.largeImg.style.top = (ev.pageY - previewState.largeImg.height / 2) + 'px';
-    largeImg.style.left = (ev.pageX + pad) + 'px';
+    previewState.largeImg.style.left = (ev.pageX + pad) + 'px';
   };
 
   const onOver = (ev) => {
-    if (largeImg) return;
+    hideLargePreview();
-    largeImg = document.createElement('img');
+
+    const largeImg = document.createElement('img');
     largeImg.id = 'largeImagePreview';
     largeImg.src = src;
     largeImg.style.position = 'absolute';
@@ -167,19 +203,18 @@ function setupPreview(imgElement, src) {
     largeImg.style.zIndex = '10000';
     largeImg.style.pointerEvents = 'none';
     document.body.appendChild(largeImg);
+
+    previewState.largeImg = largeImg;
+    previewState.sourceImg = imgElement;
+    previewState.onMove = onMove;
+
     onMove(ev);
     document.addEventListener('mousemove', onMove);
   };
 
-  const onOut = () => {
+  const onOut = () => hideLargePreview();
-    if (largeImg) {
-      document.removeEventListener('mousemove', onMove);
-      largeImg.remove();
-      largeImg = null;
-    }
-  };
 
-  imgElement.addEventListener('mouseover', onOver);
+  imgElement.addEventListener('mouseenter', onOver);
   imgElement.addEventListener('mouseout', onOut);
   imgElement.addEventListener('mouseleave', onOut);
 }