pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web_editor: correct TablePicker positioning and events in iframe

Browse Source 
The TablePicker didn't take into account the position of its parent
iframe when positioning itself, and failed to bind its events on the
document in which it was attached. This led to wrong positioning and
interaction failures.

closes odoo/odoo#99208

X-original-commit: 3bb0aaaa0833e3d72fbb07e47e42441e293babb7
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Antoine Guenet
2022-08-30 21:25:19 +02:00
committed by David Monjoie
parent 11c1bbbdd0
commit e639005a5f
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+1
View File
@@ -327,6 +327,7 @@ export class OdooEditor extends EventTarget {
this.powerboxTablePicker = new TablePicker({
document: this.document,
floating: true,
getContextFromParentRect: this.options.getContextFromParentRect,
});
document.body.appendChild(this.powerboxTablePicker.el);
this.powerboxTablePicker.addEventListener('cell-selected', ev => {
addons/web_editor/static/src/js/editor/odoo-editor/src/tablepicker/TablePicker.js
+8 -6
View File
@@ -7,6 +7,7 @@ export class TablePicker extends EventTarget {
this.options = options;
this.options.minRowCount = this.options.minRowCount || 3;
this.options.minColCount = this.options.minColCount || 3;
this.options.getContextFromParentRect = this.options.getContextFromParentRect || (() => ({ top: 0, left: 0 }));
this.rowNumber = this.options.minRowCount;
this.colNumber = this.options.minColCount;
@@ -41,11 +42,11 @@ export class TablePicker extends EventTarget {
const extraRow = 1;
for (let rowNumber = 1; rowNumber <= rowCount + extraRow; rowNumber++) {
const rowElement = this.options.document.createElement('div');
const rowElement = document.createElement('div');
rowElement.classList.add('oe-tablepicker-row');
this.tablePickerElement.appendChild(rowElement);
for (let colNumber = 1; colNumber <= colCount + extraCol; colNumber++) {
const cell = this.options.document.createElement('div');
const cell = this.el.ownerDocument.createElement('div');
cell.classList.add('oe-tablepicker-cell', 'btn');
rowElement.appendChild(cell);
@@ -61,9 +62,9 @@ export class TablePicker extends EventTarget {
this.render();
}
});
this.options.document.removeEventListener('mousemove', bindMouseMove);
this.el.ownerDocument.removeEventListener('mousemove', bindMouseMove);
};
this.options.document.addEventListener('mousemove', bindMouseMove);
this.el.ownerDocument.addEventListener('mousemove', bindMouseMove);
cell.addEventListener('mousedown', this.selectCell.bind(this));
}
}
@@ -133,9 +134,10 @@ export class TablePicker extends EventTarget {
}
};
const parentContextRect = this.options.getContextFromParentRect();
const offset = getRangePosition(this.el, this.options.document);
this.el.style.left = `${offset.left}px`;
this.el.style.top = `${offset.top}px`;
this.el.style.left = `${parentContextRect.left + offset.left}px`;
this.el.style.top = `${parentContextRect.top + offset.top}px`;
const stop = () => {
this.hide();