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

feat: Refactor image field lazy loading logic into a new _triggerLazyLoad method, applying it on enablement and page refresh, and patch PDFIframe.

Browse Source
This commit is contained in:
Suherdy Yacob 2026-03-16 14:28:08 +07:00
parent f6f2852b30
commit b3f23fbc44
1 changed files with 99 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
/** @odoo-module **/ /** @odoo-module **/
import { patch } from "@web/core/utils/patch"; import { patch } from "@web/core/utils/patch";
import { SignablePDFIframe } from "@sign/components/sign_request/signable_PDF_iframe"; import { PDFIframe } from "@sign/components/sign_request/PDF_iframe";
patch(SignablePDFIframe.prototype, { patch(PDFIframe.prototype, {
enableCustom(signItem) { enableCustom(signItem) {
super.enableCustom(signItem); super.enableCustom(signItem);
if (signItem.data.type === 'image') { if (signItem.data.type === 'image') {
@ -36,8 +36,7 @@ patch(SignablePDFIframe.prototype, {
} }
const input = el.querySelector('.o_sign_image_upload_input'); const input = el.querySelector('.o_sign_image_upload_input');
if (!input) return; if (input) {
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) return; if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) return;
// Prevent recursive click if clicking the input itself bubbles up // Prevent recursive click if clicking the input itself bubbles up
@ -107,23 +106,41 @@ patch(SignablePDFIframe.prototype, {
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}); });
}
// Performance Fix: Lazy Load existing images // Performance Fix: Trigger lazy load if already visible
this._triggerLazyLoad(el);
}
},
refreshSignItemsForPage(page) {
super.refreshSignItemsForPage(page);
if (this.signItems && this.signItems[page]) {
for (const id in this.signItems[page]) {
const item = this.signItems[page][id];
if (item && item.el) {
this._triggerLazyLoad(item.el);
}
}
}
},
/**
* Triggers the load of a lazy-loaded image if it has a data-src attribute
* @param {HTMLElement} el
*/
_triggerLazyLoad(el) {
if (!el) return;
const lazyImg = el.querySelector('.o_sign_image_lazy'); const lazyImg = el.querySelector('.o_sign_image_lazy');
if (lazyImg && lazyImg.dataset.src) { if (lazyImg && lazyImg.dataset.src) {
const observer = new IntersectionObserver((entries) => { const currentSrc = lazyImg.getAttribute('src');
entries.forEach(entry => { // If src is still the transparent placeholder gif or empty, load the real image
if (entry.isIntersecting) { if (!currentSrc || currentSrc.startsWith('data:image/gif')) {
lazyImg.src = lazyImg.dataset.src; lazyImg.src = lazyImg.dataset.src;
lazyImg.onload = () => { lazyImg.onload = () => {
lazyImg.classList.remove('o_sign_image_loading'); lazyImg.classList.remove('o_sign_image_loading');
lazyImg.style.opacity = 1; lazyImg.style.opacity = 1;
}; };
observer.unobserve(lazyImg);
}
});
}, { rootMargin: '200px' }); // Load 200px before reaching viewport
observer.observe(lazyImg);
} }
} }
}, },