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

feat: Enhance image sign item display, refine upload responsibility checks, optimize image rendering, and notify value changes.

Browse Source
This commit is contained in:
Suherdy Yacob 2026-03-16 14:02:12 +07:00
parent c6592e85f2
commit 5b4d441d9c
3 changed files with 39 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/src/css/sign_image_field.css
View File

@ -41,3 +41,11 @@ div.o_sign_sign_item.o_sign_image_item span.o_placeholder {
body div.o_sign_sign_item.o_sign_image_item span.o_placeholder { body div.o_sign_sign_item.o_sign_image_item span.o_placeholder {
font-size: 12px !important; font-size: 12px !important;
} }
.o_sign_image_item .sign_item_body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

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

@ -7,16 +7,18 @@ patch(SignablePDFIframe.prototype, {
enableCustom(signItem) { enableCustom(signItem) {
super.enableCustom(signItem); super.enableCustom(signItem);
if (signItem.data.type === 'image') { if (signItem.data.type === 'image') {
const el = signItem.el;
const data = signItem.data;
// Add data-type attribute for CSS targeting // Add data-type attribute for CSS targeting
signItem.el.setAttribute('data-type', 'image'); el.setAttribute('data-type', 'image');
// Function to adjust font size based on container dimensions // Function to adjust font size based on container dimensions
const adjustFontSize = () => { const adjustFontSize = () => {
const placeholder = signItem.el.querySelector('.o_placeholder'); const placeholder = el.querySelector('.o_placeholder');
if (placeholder) { if (placeholder) {
const containerHeight = signItem.el.offsetHeight; const containerHeight = el.offsetHeight;
const containerWidth = signItem.el.offsetWidth; const containerWidth = el.offsetWidth;
// Use the smaller dimension to calculate font size, but make it more reasonable
const minDimension = Math.min(containerHeight, containerWidth); const minDimension = Math.min(containerHeight, containerWidth);
const fontSize = Math.max(10, Math.min(16, minDimension * 0.4)); const fontSize = Math.max(10, Math.min(16, minDimension * 0.4));
placeholder.style.fontSize = fontSize + 'px !important'; placeholder.style.fontSize = fontSize + 'px !important';
@ -30,14 +32,14 @@ patch(SignablePDFIframe.prototype, {
// Watch for size changes // Watch for size changes
if (window.ResizeObserver) { if (window.ResizeObserver) {
const resizeObserver = new ResizeObserver(adjustFontSize); const resizeObserver = new ResizeObserver(adjustFontSize);
resizeObserver.observe(signItem.el); resizeObserver.observe(el);
} }
const input = signItem.el.querySelector('.o_sign_image_upload_input'); const input = el.querySelector('.o_sign_image_upload_input');
if (!input) return; if (!input) return;
signItem.el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
if (this.readonly || signItem.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
if (e.target !== input) { if (e.target !== input) {
input.click(); input.click();
@ -52,12 +54,10 @@ patch(SignablePDFIframe.prototype, {
reader.onload = (readerEvent) => { reader.onload = (readerEvent) => {
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
// Create a canvas for compression
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
let width = img.width; let width = img.width;
let height = img.height; let height = img.height;
// Calculate new dimensions (e.g., max width/height 1080 to keep it reasonable)
const MAX_SIZE = 1080; const MAX_SIZE = 1080;
if (width > height) { if (width > height) {
if (width > MAX_SIZE) { if (width > MAX_SIZE) {
@ -77,41 +77,31 @@ patch(SignablePDFIframe.prototype, {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height); ctx.drawImage(img, 0, 0, width, height);
// Compress to JPEG with 0.7 quality
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
// Set the value on the element // Update state and element
// Use a specific attribute or just data-value which is used by getSignatureValue data.value = compressedDataUrl;
// We also need to add a hidden input or update state if Odoo framework expects it el.dataset.value = compressedDataUrl;
// Update the internal state which Odoo Sign might be using // Force immediate display update
signItem.data.value = compressedDataUrl; const placeholder = el.querySelector('.o_placeholder');
signItem.el.dataset.value = compressedDataUrl;
// Display the image
// Remove placeholder if it exists
const placeholder = signItem.el.querySelector('.o_placeholder');
if (placeholder) placeholder.remove(); if (placeholder) placeholder.remove();
// Remove existing image let existingImg = el.querySelector('img');
const existingImg = signItem.el.querySelector('img'); if (!existingImg) {
if (existingImg) existingImg.remove(); 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;
const newImg = document.createElement('img'); // Notify Odoo of the value change
newImg.src = compressedDataUrl; if (this.handleInput) {
newImg.style.maxWidth = '100%'; this.handleInput();
newImg.style.maxHeight = '100%'; }
newImg.style.objectFit = 'contain';
// Append to a specific container if needed, or just to el
// sign_item_body is usually where content goes
const body = signItem.el.querySelector('.sign_item_body') || signItem.el;
body.appendChild(newImg);
// Trigger validation/saving mechanism
// We might need to call a method to notify Odoo that value changed
// In standard sign, usually it listens to input or checks dirty state.
// Setting data-value is what getSignatureValueFromElement checks (based on our other patch)
}; };
img.src = readerEvent.target.result; img.src = readerEvent.target.result;
}; };

2
static/src/xml/sign_items_image.xml
View File

@ -5,7 +5,7 @@
<t t-if="type == 'image'" t-call="sign.imageSignItem"/> <t t-if="type == 'image'" t-call="sign.imageSignItem"/>
</xpath> </xpath>
<xpath expr="//div[@t-if=&quot;type == 'selection'&quot;]" position="after"> <xpath expr="//div[@t-if=&quot;type == 'selection'&quot;]" position="after">
<div t-if="type == 'image'" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item" t-att-style="style" t-att-data-value="value" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;"> <div t-if="type == 'image'" t-att-data-id="id" t-att-title="role" t-attf-class="{{classes}} o_sign_sign_item o_sign_image_item" t-att-style="style" t-att-data-value="value" t-att-data-type="'image'" style="text-align:center; display:flex; align-items:center; justify-content:center;">
<input type="file" accept="image/*" class="o_sign_image_upload_input" style="display:none"/> <input type="file" accept="image/*" class="o_sign_image_upload_input" style="display:none"/>
<t t-if="value"> <t t-if="value">
<img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/> <img t-att-src="value" style="max-width:100%; max-height:100%; object-fit:contain;"/>