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

181
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,94 +36,111 @@ 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) => {
if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) return;
// Prevent recursive click if clicking the input itself bubbles up
if (e.target !== input) {
input.click();
}
});
el.addEventListener('click', (e) => { input.addEventListener('change', (e) => {
if (this.readonly || (data.responsible > 0 && data.responsible !== this.currentRole)) return; const file = e.target.files[0];
// Prevent recursive click if clicking the input itself bubbles up if (!file) return;
if (e.target !== input) {
input.click();
}
});
input.addEventListener('change', (e) => { const reader = new FileReader();
const file = e.target.files[0]; reader.onload = (readerEvent) => {
if (!file) return; const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
const reader = new FileReader(); const MAX_SIZE = 1080;
reader.onload = (readerEvent) => { if (width > height) {
const img = new Image(); if (width > MAX_SIZE) {
img.onload = () => { height *= MAX_SIZE / width;
const canvas = document.createElement('canvas'); width = MAX_SIZE;
let width = img.width; }
let height = img.height; } else {
if (height > MAX_SIZE) {
const MAX_SIZE = 1080; width *= MAX_SIZE / height;
if (width > height) { height = MAX_SIZE;
if (width > MAX_SIZE) { }
height *= MAX_SIZE / width;
width = MAX_SIZE;
} }
} else {
if (height > MAX_SIZE) { canvas.width = width;
width *= MAX_SIZE / height; canvas.height = height;
height = MAX_SIZE;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
// Update state and element
data.value = compressedDataUrl;
el.dataset.value = compressedDataUrl;
// Force immediate display update
const placeholder = el.querySelector('.o_placeholder');
if (placeholder) placeholder.remove();
let existingImg = el.querySelector('img');
if (!existingImg) {
existingImg = document.createElement('img');
existingImg.style.maxWidth = '100%';
existingImg.style.maxHeight = '100%';
existingImg.style.objectFit = 'contain';
const body = el.querySelector('.sign_item_body') || el;
body.appendChild(existingImg);
} }
} existingImg.src = compressedDataUrl;
canvas.width = width; // Notify Odoo of the value change
canvas.height = height; if (this.handleInput) {
this.handleInput();
const ctx = canvas.getContext('2d'); }
ctx.drawImage(img, 0, 0, width, height); };
img.src = readerEvent.target.result;
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
// Update state and element
data.value = compressedDataUrl;
el.dataset.value = compressedDataUrl;
// Force immediate display update
const placeholder = el.querySelector('.o_placeholder');
if (placeholder) placeholder.remove();
let existingImg = el.querySelector('img');
if (!existingImg) {
existingImg = document.createElement('img');
existingImg.style.maxWidth = '100%';
existingImg.style.maxHeight = '100%';
existingImg.style.objectFit = 'contain';
const body = el.querySelector('.sign_item_body') || el;
body.appendChild(existingImg);
}
existingImg.src = compressedDataUrl;
// Notify Odoo of the value change
if (this.handleInput) {
this.handleInput();
}
}; };
img.src = readerEvent.target.result; reader.readAsDataURL(file);
}; });
reader.readAsDataURL(file); }
});
// Performance Fix: Lazy Load existing images // Performance Fix: Trigger lazy load if already visible
const lazyImg = el.querySelector('.o_sign_image_lazy'); this._triggerLazyLoad(el);
if (lazyImg && lazyImg.dataset.src) { }
const observer = new IntersectionObserver((entries) => { },
entries.forEach(entry => {
if (entry.isIntersecting) { refreshSignItemsForPage(page) {
lazyImg.src = lazyImg.dataset.src; super.refreshSignItemsForPage(page);
lazyImg.onload = () => { if (this.signItems && this.signItems[page]) {
lazyImg.classList.remove('o_sign_image_loading'); for (const id in this.signItems[page]) {
lazyImg.style.opacity = 1; const item = this.signItems[page][id];
}; if (item && item.el) {
observer.unobserve(lazyImg); this._triggerLazyLoad(item.el);
} }
}); }
}, { rootMargin: '200px' }); // Load 200px before reaching viewport }
observer.observe(lazyImg); },
/**
* 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');
if (lazyImg && lazyImg.dataset.src) {
const currentSrc = lazyImg.getAttribute('src');
// If src is still the transparent placeholder gif or empty, load the real image
if (!currentSrc || currentSrc.startsWith('data:image/gif')) {
lazyImg.src = lazyImg.dataset.src;
lazyImg.onload = () => {
lazyImg.classList.remove('o_sign_image_loading');
lazyImg.style.opacity = 1;
};
} }
} }
}, },