diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js index 67b719eda..6e4862cc4 100644 --- a/src/controls/legend/group.js +++ b/src/controls/legend/group.js @@ -27,6 +27,7 @@ const Group = function Group(viewer, options = {}) { draggable = false, zIndexStart = 0.1, opacityControl = false, + removable = false, zoomToExtent = false, description } = options; @@ -78,7 +79,7 @@ const Group = function Group(viewer, options = {}) { } }) : false; - const moreInfoButton = (opacityControl || zoomToExtent || description || (abstract && !showAbstractInLegend)) ? createMoreInfoButton({ viewer, + const moreInfoButton = (opacityControl || removable || zoomToExtent || description || (abstract && !showAbstractInLegend)) ? createMoreInfoButton({ viewer, group: thisGroup }) : false; const SubGroupHeader = function SubGroupHeader() { diff --git a/src/controls/legend/moreinfobutton.js b/src/controls/legend/moreinfobutton.js index 2aa2091b6..df7f3d811 100644 --- a/src/controls/legend/moreinfobutton.js +++ b/src/controls/legend/moreinfobutton.js @@ -11,7 +11,7 @@ export default function createMoreInfoButton(params) { const popupMenuItems = []; let moreInfoButton; let popupMenu; - const showPopup = group.zoomToExtent && group.extent; // In case of zoomToExtent we always want to show popupmenu + const showPopup = (group.zoomToExtent && group.extent) || group.removable; // In case of zoomToExtent or removable we always want to show popupmenu const eventOverlayProps = new CustomEvent('overlayproperties', { bubbles: true, @@ -135,6 +135,28 @@ export default function createMoreInfoButton(params) { popupMenuItems.push(removeLayerMenuItem); } + if (group && group.removable) { + const removeGroupMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + const doRemove = (group.promptlessRemoval === true) || window.confirm('Vill du radera gruppen?'); + if (doRemove) { + viewer.removeGroup(group.name); + e.preventDefault(); + e.stopPropagation(); + } + popupMenu.setVisibility(false); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Ta bort grupp
  • `; + } + }); + popupMenuItems.push(removeGroupMenuItem); + } + const popupMenuList = Component({ onInit() { this.addComponents(popupMenuItems);