diff --git a/apilo.js b/apilo.js index 8cf9e80..347bc05 100644 --- a/apilo.js +++ b/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'; - largeImg.style.left = (ev.pageX + pad) + 'px'; + previewState.largeImg.style.top = (ev.pageY - previewState.largeImg.height / 2) + 'px'; + previewState.largeImg.style.left = (ev.pageX + pad) + 'px'; }; const onOver = (ev) => { - if (largeImg) return; - largeImg = document.createElement('img'); + hideLargePreview(); + + 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 = () => { - if (largeImg) { - document.removeEventListener('mousemove', onMove); - largeImg.remove(); - largeImg = null; - } - }; + const onOut = () => hideLargePreview(); - imgElement.addEventListener('mouseover', onOver); + imgElement.addEventListener('mouseenter', onOver); imgElement.addEventListener('mouseout', onOut); imgElement.addEventListener('mouseleave', onOut); } @@ -486,4 +521,4 @@ function submitShipment() { } }); }); -} \ No newline at end of file +}