diff --git a/umap/static/umap/js/modules/tableeditor.js b/umap/static/umap/js/modules/tableeditor.js index 8304482e..4fa02ed4 100644 --- a/umap/static/umap/js/modules/tableeditor.js +++ b/umap/static/umap/js/modules/tableeditor.js @@ -21,9 +21,11 @@ export default class TableEditor extends WithTemplate { this.contextmenu = new ContextMenu({ className: 'dark' }) this.table = this.loadTemplate(TEMPLATE) this.resetProperties() - this.elements.body.addEventListener('dblclick', (event) => { - if (event.target.closest('[data-property]')) this.editCell(event.target) - }) + if (!this.datalayer.isRemoteLayer()) { + this.elements.body.addEventListener('dblclick', (event) => { + if (event.target.closest('[data-property]')) this.editCell(event.target) + }) + } this.elements.body.addEventListener('click', (event) => this.setFocus(event.target)) this.elements.body.addEventListener('keydown', (event) => this.onKeyDown(event)) this.elements.header.addEventListener('click', (event) => { @@ -33,6 +35,7 @@ export default class TableEditor extends WithTemplate { } openHeaderMenu(property) { + const actions = [] let filterItem if (this.map.facets.has(property)) { filterItem = { @@ -51,20 +54,18 @@ export default class TableEditor extends WithTemplate { }, } } - this.contextmenu.open( - [event.clientX, event.clientY], - [ - { - label: translate('Delete this column'), - action: () => this.deleteProperty(property), - }, - { - label: translate('Rename this column'), - action: () => this.renameProperty(property), - }, - filterItem, - ] - ) + actions.push(filterItem) + if (!this.datalayer.isRemoteLayer()) { + actions.push({ + label: translate('Rename this column'), + action: () => this.renameProperty(property), + }) + actions.push({ + label: translate('Delete this column'), + action: () => this.deleteProperty(property), + }) + } + this.contextmenu.open([event.clientX, event.clientY], actions) } renderHeaders() { @@ -176,32 +177,39 @@ export default class TableEditor extends WithTemplate { this.elements.body.innerHTML = '' this.renderBody() - const addButton = loadTemplate(` - `) - addButton.addEventListener('click', () => this.addProperty()) + const actions = [] + if (!this.datalayer.isRemoteLayer()) { + const addButton = loadTemplate(` + `) + addButton.addEventListener('click', () => this.addProperty()) + actions.push(addButton) - const deleteButton = loadTemplate(` - `) - deleteButton.addEventListener('click', () => this.deleteRows()) + const deleteButton = loadTemplate(` + `) + deleteButton.addEventListener('click', () => this.deleteRows()) + actions.push(deleteButton) + } const filterButton = loadTemplate(` `) filterButton.addEventListener('click', () => this.map.browser.open('filters')) + actions.push(filterButton) this.map.fullPanel.open({ content: this.table, className: 'umap-table-editor', - actions: [addButton, deleteButton, filterButton], + actions: actions, }) } editCell(cell) { + if (this.datalayer.isRemoteLayer()) return const property = cell.dataset.property const field = `properties.${property}` const tr = event.target.closest('tr') diff --git a/umap/static/umap/js/modules/ui/contextmenu.js b/umap/static/umap/js/modules/ui/contextmenu.js index 4274fa17..89db7940 100644 --- a/umap/static/umap/js/modules/ui/contextmenu.js +++ b/umap/static/umap/js/modules/ui/contextmenu.js @@ -20,6 +20,7 @@ export default class ContextMenu { `
` ) li.addEventListener('click', () => { + this.close() item.action() }) this.container.appendChild(li) @@ -37,6 +38,12 @@ export default class ContextMenu { } close() { - this.container.parentNode.removeChild(this.container) + try { + this.container.remove() + } catch { + // Race condition in Chrome: the focusout close has "half" removed the node + // So it's still visible in the DOM, but we calling .remove on it (or parentNode.removeChild) + // will crash. + } } } diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index 96dda219..2fef9178 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -1800,7 +1800,7 @@ U.DataLayer = L.Evented.extend({ }, tableEdit: function () { - if (this.isRemoteLayer() || !this.isVisible()) return + if (!this.isVisible()) return const editor = new U.TableEditor(this) editor.open() },