admin.suherdy/sign_image_field
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Stabilize image field patching in Odoo Sign to ensure proper inheritance and improve lazy loading and upload handling.

Browse Source
This commit is contained in:
Suherdy Yacob 2026-03-16 16:12:54 +07:00
parent f119a32b0e
commit 3708869870
1 changed files with 32 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
static/src/js/sign_image_upload.js
View File

@ -4,20 +4,20 @@ import { patch } from "@web/core/utils/patch";
import { PDFIframe } from "@sign/components/sign_request/PDF_iframe"; import { PDFIframe } from "@sign/components/sign_request/PDF_iframe";
import { SignablePDFIframe } from "@sign/components/sign_request/signable_PDF_iframe"; import { SignablePDFIframe } from "@sign/components/sign_request/signable_PDF_iframe";
console.log("Sign Image Field: Loading custom patches..."); console.log("Sign Image Field: Initializing stabilized patches...");
/** /**
* Robust lazy loading trigger for image sign items. * Shared utility for lazy loading image fields.
*/ */
const triggerLazyLoad = (el) => { const triggerLazyLoad = (el) => {
if (!el) return; if (!el) return;
const lazyImg = el.querySelector('.o_sign_image_lazy'); const lazyImg = el.querySelector('.o_sign_image_lazy');
if (lazyImg && (lazyImg.dataset.src || lazyImg.src)) { if (lazyImg && (lazyImg.dataset.src || lazyImg.src)) {
const targetSrc = lazyImg.dataset.src || lazyImg.src; const targetSrc = lazyImg.dataset.src || lazyImg.src;
// Check if it's currently showing the transparent placeholder
const currentSrc = lazyImg.getAttribute('src'); const currentSrc = lazyImg.getAttribute('src');
// Only trigger if we haven't loaded the real image yet
if (!currentSrc || currentSrc.startsWith('data:image/gif') || currentSrc === '') { if (!currentSrc || currentSrc.startsWith('data:image/gif') || currentSrc === '') {
console.log("Sign Image Field: Loading image data for", el);
lazyImg.src = targetSrc; lazyImg.src = targetSrc;
lazyImg.onload = () => { lazyImg.onload = () => {
lazyImg.classList.remove('o_sign_image_loading'); lazyImg.classList.remove('o_sign_image_loading');
@ -25,7 +25,7 @@ const triggerLazyLoad = (el) => {
lazyImg.style.opacity = 1; lazyImg.style.opacity = 1;
}; };
} else { } else {
// Already has a real src, just ensure loading classes are gone // Cleanup in case of re-rendering
lazyImg.classList.remove('o_sign_image_loading'); lazyImg.classList.remove('o_sign_image_loading');
el.classList.remove('o_sign_image_loading_container'); el.classList.remove('o_sign_image_loading_container');
lazyImg.style.opacity = 1; lazyImg.style.opacity = 1;
@ -34,13 +34,13 @@ const triggerLazyLoad = (el) => {
}; };
/** /**
* Setup IntersectionObserver for an element. * Shared logic for setting up an observer on any image field.
*/ */
const setupLazyObserver = (iframeInstance, el) => { const setupLazyObserver = (el) => {
if (!el) return; if (!el) return;
// Safety fallback: Always load after 2 seconds regardless of visibility // Immediate check + safety fallback (2 seconds)
// This handles cases where IntersectionObserver fails in iframes or remote bundling issues // This ensures images load even if IntersectionObserver is throttled
setTimeout(() => triggerLazyLoad(el), 2000); setTimeout(() => triggerLazyLoad(el), 2000);
if (window.IntersectionObserver) { if (window.IntersectionObserver) {
@ -51,62 +51,48 @@ const setupLazyObserver = (iframeInstance, el) => {
observer.disconnect(); observer.disconnect();
} }
}); });
}, { }, { rootMargin: '200px' });
rootMargin: '200px'
});
observer.observe(el); observer.observe(el);
} else {
triggerLazyLoad(el);
} }
}; };
// 1. Patch PDFIframe (Base class) // 1. Patch PDFIframe (Used for observers and read-only views)
// We avoid calling 'super' here because PDFIframe is a base class and has no parent. patch(PDFIframe.prototype, {
// Odoo 19's patch system might misbehave with 'super' in base class prototype patches.
const pdfIframePatch = {
enableCustom(signItem) { enableCustom(signItem) {
console.log("Sign Image Field: PDFIframe.enableCustom triggered for", signItem.data.type); // ALWAYS call the base implementation FIRST to preserve Odoo behavior
if (signItem && signItem.data && signItem.data.type === 'image') { super.enableCustom(...arguments);
setupLazyObserver(this, signItem.el);
}
// Instead of super.enableCustom(signItem), we check if there's an ORIGINAL to call
// Normally for PDFIframe it's an empty function.
}
};
// Use a safe patch wrapper to ensure we don't break the prototype // OUR LOGIC: Setup lazy loading if it's an image
try { if (signItem && signItem.data && signItem.data.type === 'image' && signItem.el) {
patch(PDFIframe.prototype, pdfIframePatch); setupLazyObserver(signItem.el);
} catch (e) { }
console.error("Sign Image Field: Failed to patch PDFIframe.prototype", e); }
} });
// 2. Patch SignablePDFIframe (Subclass) // 2. Patch SignablePDFIframe (Used for active signers)
const signablePDFIframePatch = { patch(SignablePDFIframe.prototype, {
enableCustom(signItem) { enableCustom(signItem) {
console.log("Sign Image Field: SignablePDFIframe.enableCustom triggered for", signItem.data.type); // ALWAYS call the base implementation FIRST to preserve text/signature population
super.enableCustom(...arguments);
// Setup observer BEFORE role checks so it works for observers/read-only too
if (signItem && signItem.data && signItem.data.type === 'image') {
setupLazyObserver(this, signItem.el);
}
// Call base implementation
super.enableCustom(signItem);
// OUR LOGIC: Setup lazy loading and upload support
if (signItem && signItem.data && signItem.data.type === 'image' && signItem.el) { if (signItem && signItem.data && signItem.data.type === 'image' && signItem.el) {
const el = signItem.el; const el = signItem.el;
const data = signItem.data; const data = signItem.data;
// Re-apply responsible check for upload logic only // Shared lazy loading observer
setupLazyObserver(el);
// Only attach upload listeners if this person is responsible and not readonly
if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) { if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) {
return; return;
} }
el.setAttribute('data-type', 'image'); el.setAttribute('data-type', 'image');
// Upload implementation
const input = el.querySelector('.o_sign_image_upload_input'); const input = el.querySelector('.o_sign_image_upload_input');
if (input) { if (input) {
// Remove any previous listeners if possible (though patch should handle it)
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
if (e.target !== input) { if (e.target !== input) {
input.click(); input.click();
@ -134,7 +120,6 @@ const signablePDFIframePatch = {
width *= MAX_SIZE / height; width *= MAX_SIZE / height;
height = MAX_SIZE; height = MAX_SIZE;
} }
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -174,12 +159,6 @@ const signablePDFIframePatch = {
if (item.data.type === 'image') { if (item.data.type === 'image') {
return item.el.dataset.value || item.data.value || false; return item.el.dataset.value || item.data.value || false;
} }
return super.getSignatureValueFromElement(item); return super.getSignatureValueFromElement(...arguments);
} }
}; });
try {
patch(SignablePDFIframe.prototype, signablePDFIframePatch);
} catch (e) {
console.error("Sign Image Field: Failed to patch SignablePDFIframe.prototype", e);
}