diff --git a/static/src/css/sign_image_field.css b/static/src/css/sign_image_field.css index cd0674f..4862ec3 100644 --- a/static/src/css/sign_image_field.css +++ b/static/src/css/sign_image_field.css @@ -52,10 +52,13 @@ body div.o_sign_sign_item.o_sign_image_item span.o_placeholder { } .o_sign_image_item.o_sign_image_loading_container { - background: #f6f7f8; - background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); - background-size: 800px 104px; - animation: o_sign_image_shimmer 1.2s forwards infinite linear; + background: #f6f7f8 !important; + background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%) !important; + background-size: 800px 104px !important; + animation: o_sign_image_shimmer 1.2s forwards infinite linear !important; + min-width: 50px !important; + min-height: 50px !important; + z-index: 10 !important; } @keyframes o_sign_image_shimmer { diff --git a/static/src/js/sign_image_upload.js b/static/src/js/sign_image_upload.js index 396f9f8..d4048f7 100755 --- a/static/src/js/sign_image_upload.js +++ b/static/src/js/sign_image_upload.js @@ -27,44 +27,56 @@ const triggerLazyLoad = (el) => { * Setup IntersectionObserver for an element. */ const setupLazyObserver = (iframeInstance, el) => { + if (!el || !window.IntersectionObserver) { + // Fallback for no observer support + triggerLazyLoad(el); + return; + } const lazyImg = el.querySelector('.o_sign_image_lazy'); if (!lazyImg || !lazyImg.dataset.src) return; - // Use the viewer container as root if possible - const root = iframeInstance.root ? iframeInstance.root.querySelector('#viewerContainer') : null; - + // Use a safety timeout to ensure it loads even if observer fails + const safetyTimeout = setTimeout(() => triggerLazyLoad(el), 5000); + const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { + clearTimeout(safetyTimeout); triggerLazyLoad(el); observer.disconnect(); } }); }, { - root: root, rootMargin: '200px' }); observer.observe(el); }; -// 1. Patch PDFIframe for read-only views +// 1. Patch PDFIframe (Base class) +// We patch only what is strictly necessary and avoid super calls if possible for base classes patch(PDFIframe.prototype, { enableCustom(signItem) { - // Base PDFIframe.enableCustom is empty, no need for super - if (signItem.data.type === 'image') { + // PDFIframe.enableCustom is normally empty + if (typeof super.enableCustom === 'function') { + super.enableCustom(signItem); + } + if (signItem && signItem.data && signItem.data.type === 'image') { setupLazyObserver(this, signItem.el); } } }); -// 2. Patch SignablePDFIframe for active signer views +// 2. Patch SignablePDFIframe (Subclass) patch(SignablePDFIframe.prototype, { enableCustom(signItem) { - super.enableCustom(signItem); // Safe because SignablePDFIframe extends PDFIframe - if (signItem.data.type === 'image') { + // Ensure we call the base implementation (which now includes our lazy loading) + super.enableCustom(signItem); + + if (signItem && signItem.data && signItem.data.type === 'image') { const el = signItem.el; const data = signItem.data; - + if (!el) return; + el.setAttribute('data-type', 'image'); // Initial font size adjustment for placeholder @@ -143,9 +155,6 @@ patch(SignablePDFIframe.prototype, { reader.readAsDataURL(file); }); } - - // Also setup lazy observer for signer view - setupLazyObserver(this, el); } }, @@ -153,6 +162,9 @@ patch(SignablePDFIframe.prototype, { if (item.data.type === 'image') { return item.el.dataset.value || item.data.value || false; } - return super.getSignatureValueFromElement(item); + if (typeof super.getSignatureValueFromElement === 'function') { + return super.getSignatureValueFromElement(item); + } + return false; } });