From eb7682f547e8a435723f064863357bd1039ee5d3 Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Tue, 28 Dec 2021 16:27:49 +0100 Subject: [PATCH 01/11] New button for reaching layer info --- css/svg/fa-icons.svg | 3 +++ src/controls/legend/overlay.js | 35 +++++++++++++++++++++++++--------- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/css/svg/fa-icons.svg b/css/svg/fa-icons.svg index b35f013f4..f3aa16a17 100644 --- a/css/svg/fa-icons.svg +++ b/css/svg/fa-icons.svg @@ -112,4 +112,7 @@ + + + \ No newline at end of file diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index b8d7ce6e5..eeb0a4581 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -61,13 +61,9 @@ const OverlayLayer = function OverlayLayer(options) { const layerIcon = Button({ cls: `${headerIconCls} round compact icon-small light relative no-shrink`, click() { - const eventOverlayProps = new CustomEvent('overlayproperties', { - bubbles: true, - detail: { - layer - } - }); - document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + if (!secure) { + toggleVisible(layer.getVisible()); + } }, style: { height: '1.5rem', @@ -112,6 +108,27 @@ const OverlayLayer = function OverlayLayer(options) { buttons.push(toggleButton); + const moreInfoButton = Button({ + cls: 'round small icon-smallest no-shrink', + click() { + const eventOverlayProps = new CustomEvent('overlayproperties', { + bubbles: true, + detail: { + layer + } + }); + document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + }, + style: { + 'align-self': 'center' + }, + icon: '#fa-ellipsis-v', + ariaLabel: 'Visa lagerinfo', + tabIndex: -1 + }); + + buttons.push(moreInfoButton); + if (layer.get('removable')) { removeButton = Button({ cls: 'round small icon-smaller no-shrink', @@ -127,9 +144,9 @@ const OverlayLayer = function OverlayLayer(options) { tabIndex: -1 }); buttons.push(removeButton); - ButtonsHtml = `${layerIcon.render()}${label.render()}${removeButton.render()}${toggleButton.render()}`; + ButtonsHtml = `${layerIcon.render()}${label.render()}${removeButton.render()}${toggleButton.render()}${moreInfoButton.render()}`; } else { - ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}`; + ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`; } const onRemove = function onRemove() { From 84e8a3a313d45069a06b88e0db42791554f441dd Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Mon, 10 Jan 2022 09:23:32 +0100 Subject: [PATCH 02/11] Layer info menu --- scss/ui/_popup-menu.scss | 21 ++++++ scss/ui/_ui.scss | 1 + src/controls/legend/overlay.js | 124 +++++++++++++++++++++++++------- src/controls/legend/overlays.js | 33 +++++++++ 4 files changed, 154 insertions(+), 25 deletions(-) create mode 100644 scss/ui/_popup-menu.scss diff --git a/scss/ui/_popup-menu.scss b/scss/ui/_popup-menu.scss new file mode 100644 index 000000000..83f40d736 --- /dev/null +++ b/scss/ui/_popup-menu.scss @@ -0,0 +1,21 @@ +$popup-background-color: $white !default; +$popup-radius: $radius-base; +$popup-border-color: $grey-light; +$popup-z: $z-middle; + +.popup-menu { + z-index: $popup-z; + position: absolute; +} + +.popup-menu > ul { + background-color: $popup-background-color; + border-radius: $popup-radius; + border: solid 1px $popup-border-color; + overflow-x: hidden; + overflow-y: hidden; + + > li { + margin: $margin-small; + } +} diff --git a/scss/ui/_ui.scss b/scss/ui/_ui.scss index bda7acccd..dbda661aa 100644 --- a/scss/ui/_ui.scss +++ b/scss/ui/_ui.scss @@ -20,6 +20,7 @@ @import './scrollbar'; @import './helpers/helpers'; @import './group-indication'; + @import './popup-menu'; font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index eeb0a4581..ee78ef090 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -1,4 +1,4 @@ -import { Component, Button, dom } from '../../ui'; +import { Component, Button, dom, Element as El } from '../../ui'; import { HeaderIcon } from '../../utils/legendmaker'; const OverlayLayer = function OverlayLayer(options) { @@ -16,14 +16,15 @@ const OverlayLayer = function OverlayLayer(options) { } = options; const buttons = []; - let removeButton; - let ButtonsHtml; + const popupMenuItems = []; let layerList; + let popupMenuActive = false; const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim(); const title = layer.get('title') || 'Titel saknas'; const name = layer.get('name'); const secure = layer.get('secure'); + const popupMenuId = 'overlayPopupMenu'; const checkIcon = '#ic_check_circle_24px'; let uncheckIcon = '#ic_radio_button_unchecked_24px'; @@ -40,6 +41,13 @@ const OverlayLayer = function OverlayLayer(options) { headerIconCls = iconCls; } + const eventOverlayProps = new CustomEvent('overlayproperties', { + bubbles: true, + detail: { + layer + } + }); + const getCheckIcon = (visible) => { const isVisible = visible ? checkIcon : uncheckIcon; return isVisible; @@ -108,16 +116,79 @@ const OverlayLayer = function OverlayLayer(options) { buttons.push(toggleButton); + const layerInfoMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); + e.preventDefault(); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Visa lagerinformation
    • `; + } + }); + popupMenuItems.push(layerInfoMenuItem); + + const removeLayerMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + layerList.removeOverlay(layer.get('name')); + viewer.getMap().removeLayer(layer); + document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); + e.preventDefault(); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Ta bort lager
    • `; + } + }); + popupMenuItems.push(removeLayerMenuItem); + + const popupMenuList = Component({ + onAdd() { + this.addComponents(popupMenuItems); + }, + render() { + let html = `'; + return html; + } + }); + + const togglePopupMenu = function togglePopupMenu(eventFromThisComponent) { + const el = document.getElementById(popupMenuList.getId()); + if (!eventFromThisComponent || popupMenuActive) { + el.classList.add('hidden'); + popupMenuActive = false; + } else { + el.classList.remove('hidden'); + popupMenuActive = true; + } + }; + const moreInfoButton = Button({ cls: 'round small icon-smallest no-shrink', click() { - const eventOverlayProps = new CustomEvent('overlayproperties', { + const eventShowOverlayPopup = new CustomEvent('showoverlaypopup', { bubbles: true, detail: { - layer + id: popupMenuList.getId() } }); - document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + console.log('click', eventShowOverlayPopup, eventOverlayProps); + if (popupMenuItems.length > 1) { + document.getElementById(this.getId()).dispatchEvent(eventShowOverlayPopup); + } else { + document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + } }, style: { 'align-self': 'center' @@ -128,28 +199,15 @@ const OverlayLayer = function OverlayLayer(options) { }); buttons.push(moreInfoButton); + const ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`; - if (layer.get('removable')) { - removeButton = Button({ - cls: 'round small icon-smaller no-shrink', - click() { - layerList.removeOverlay(layer.get('name')); - viewer.getMap().removeLayer(layer); - }, - style: { - 'align-self': 'center', - 'padding-left': '.5rem' - }, - icon: '#ic_remove_circle_outline_24px', - tabIndex: -1 - }); - buttons.push(removeButton); - ButtonsHtml = `${layerIcon.render()}${label.render()}${removeButton.render()}${toggleButton.render()}${moreInfoButton.render()}`; - } else { - ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`; - } + const removeOverlayMenuItem = function removeListeners() { + const popupMenuListEl = document.getElementById(popupMenuList.getId()); + popupMenuListEl.remove(); + }; const onRemove = function onRemove() { + removeOverlayMenuItem(); const el = document.getElementById(this.getId()); el.remove(); }; @@ -173,8 +231,24 @@ const OverlayLayer = function OverlayLayer(options) { } this.addComponents(buttons); this.addComponent(label); + this.addComponent(popupMenuList); + const popupMenuEl = document.getElementById(popupMenuId); + popupMenuEl.appendChild(dom.html(popupMenuList.render())); + popupMenuList.dispatch('render'); this.dispatch('render'); + const popupMenuListEl = document.getElementById(popupMenuList.getId()); + popupMenuListEl.addEventListener('toggleoverlaypopup', (e) => { + const eventFromThisComponent = e.detail && e.detail.id === popupMenuList.getId(); + togglePopupMenu(eventFromThisComponent); + }); + + popupMenuListEl.addEventListener('unfocusoverlaypopup', (e) => { + if (!document.getElementById(moreInfoButton.getId()).contains(e.detail.target)) { + togglePopupMenu(); + } + }); + if (layer.getMaxResolution() !== Infinity || layer.getMinResolution() !== 0) { const elId = this.getId(); map.on('moveend', () => { diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js index 77a6b2566..d48673bf4 100644 --- a/src/controls/legend/overlays.js +++ b/src/controls/legend/overlays.js @@ -33,6 +33,7 @@ const Overlays = function Overlays(options) { const themeGroups = ThemeGroups(); const rootGroup = GroupList({ viewer }, true); + const popupMenuId = 'overlayPopupMenu'; const groupCmps = viewer.getGroups().reduce((acc, group) => { if (nonGroupNames.includes(group.name)) return acc; @@ -238,12 +239,30 @@ const Overlays = function Overlays(options) { } }; + const popupMenu = Component({ + onRender() { + window.addEventListener('click', (e) => { + const popupMenuEl = document.getElementById(popupMenuId); + if (!popupMenuEl.contains(e.target)) { + const toggleEvent = new CustomEvent('unfocusoverlaypopup', { detail: { target: e.target } }); + popupMenuEl.children.forEach((child) => { + child.dispatchEvent(toggleEvent); + }); + } + }); + }, + render() { + return ``; + } + }); + return Component({ onAddGroup, onChangeLayer, slidenav, onInit() { this.addComponent(overlaysCollapse); + this.addComponent(popupMenu); readOverlays(); viewer.getMap().getLayers().on('add', onAddLayer.bind(this)); viewer.getMap().getLayers().on('remove', onRemoveLayer.bind(this)); @@ -273,12 +292,26 @@ const Overlays = function Overlays(options) { } evt.stopPropagation(); }); + + el.addEventListener('showoverlaypopup', (evt) => { + const popupEl = document.getElementById(popupMenuId); + const targetRect = evt.target.getBoundingClientRect(); + const rect = el.getBoundingClientRect(); + popupEl.style.right = `${rect.right - targetRect.right}px`; + popupEl.style.top = `${targetRect.top - rect.top + targetRect.height}px`; + evt.stopPropagation(); + const toggleEvent = new CustomEvent('toggleoverlaypopup', { detail: evt.detail }); + popupEl.children.forEach((child) => { + child.dispatchEvent(toggleEvent); + }); + }); this.dispatch('render'); }, render() { const emptyCls = hasOverlays() ? '' : 'hidden'; return `
    ${overlaysCollapse.render()} + ${popupMenu.render()}
    `; } }); From 15326b57b45a175a31787d8ac7823d36ec88bade Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Tue, 11 Jan 2022 13:36:00 +0100 Subject: [PATCH 03/11] Only show remove layer option when layer can be removed --- src/controls/legend/overlay.js | 35 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index ee78ef090..a2c2f8333 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -132,22 +132,24 @@ const OverlayLayer = function OverlayLayer(options) { }); popupMenuItems.push(layerInfoMenuItem); - const removeLayerMenuItem = Component({ - onRender() { - const labelEl = document.getElementById(this.getId()); - labelEl.addEventListener('click', (e) => { - layerList.removeOverlay(layer.get('name')); - viewer.getMap().removeLayer(layer); - document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); - e.preventDefault(); - }); - }, - render() { - const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; - return `
  • Ta bort lager
    • `; - } - }); - popupMenuItems.push(removeLayerMenuItem); + if (layer.get('removable')) { + const removeLayerMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + layerList.removeOverlay(layer.get('name')); + viewer.getMap().removeLayer(layer); + document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); + e.preventDefault(); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Ta bort lager
    • `; + } + }); + popupMenuItems.push(removeLayerMenuItem); + } const popupMenuList = Component({ onAdd() { @@ -183,7 +185,6 @@ const OverlayLayer = function OverlayLayer(options) { id: popupMenuList.getId() } }); - console.log('click', eventShowOverlayPopup, eventOverlayProps); if (popupMenuItems.length > 1) { document.getElementById(this.getId()).dispatchEvent(eventShowOverlayPopup); } else { From f2a62a4216a863ce1de1a6d85fc251f237457527 Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Wed, 12 Jan 2022 08:47:28 +0100 Subject: [PATCH 04/11] Add focus to icon-smallest --- scss/ui/_button.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss index 1d8cb1cc5..c7bdb7fc7 100644 --- a/scss/ui/_button.scss +++ b/scss/ui/_button.scss @@ -225,6 +225,10 @@ button:focus, &.icon-smaller:focus { border: 1px solid $black; } + + &.icon-smallest:focus { + border: 1px solid $black; + } } button:focus:not(:focus-visible), @@ -266,6 +270,10 @@ button:focus:not(:focus-visible), &.icon-smaller:focus:not(:focus-visible) { border: 0; } + + &.icon-smallest:focus:not(:focus-visible) { + border: 0; + } } button.active, From 42c72030b560bb8ea6e103b8ef795478e7e9ed1d Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Thu, 13 Jan 2022 13:12:47 +0100 Subject: [PATCH 05/11] Move close button into legend component --- scss/ui/_popup-menu.scss | 2 -- src/controls/legend.js | 5 +++-- src/controls/legend/overlay.js | 8 ++++---- src/controls/legend/overlays.js | 2 +- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/scss/ui/_popup-menu.scss b/scss/ui/_popup-menu.scss index 83f40d736..5aa796a9e 100644 --- a/scss/ui/_popup-menu.scss +++ b/scss/ui/_popup-menu.scss @@ -1,10 +1,8 @@ $popup-background-color: $white !default; $popup-radius: $radius-base; $popup-border-color: $grey-light; -$popup-z: $z-middle; .popup-menu { - z-index: $popup-z; position: absolute; } diff --git a/src/controls/legend.js b/src/controls/legend.js index 69b12691b..2a1eadc45 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -444,9 +444,10 @@ const Legend = function Legend(options = {}) { }); const closeButtonState = isExpanded ? 'initial' : 'hidden'; closeButton = Button({ - cls: 'icon-smaller small round absolute margin-bottom margin-right grey-lightest bottom-right z-index-top', + cls: 'icon-smaller small round absolute margin-bottom margin-right grey-lightest right bottom z-index-top', icon: '#ic_close_24px', state: closeButtonState, + style: { right: 0, bottom: 0 }, validStates: ['initial', 'hidden'], ariaLabel: 'Stäng', click() { @@ -458,7 +459,7 @@ const Legend = function Legend(options = {}) { let el = dom.html(layerButton.render()); target.appendChild(el); el = dom.html(closeButton.render()); - target.appendChild(el); + layerSwitcherEl.appendChild(el); } }); }; diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index a2c2f8333..a553c6267 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -1,4 +1,4 @@ -import { Component, Button, dom, Element as El } from '../../ui'; +import { Component, Button, dom } from '../../ui'; import { HeaderIcon } from '../../utils/legendmaker'; const OverlayLayer = function OverlayLayer(options) { @@ -25,6 +25,7 @@ const OverlayLayer = function OverlayLayer(options) { const name = layer.get('name'); const secure = layer.get('secure'); const popupMenuId = 'overlayPopupMenu'; + let popupMenuList; const checkIcon = '#ic_check_circle_24px'; let uncheckIcon = '#ic_radio_button_unchecked_24px'; @@ -120,8 +121,8 @@ const OverlayLayer = function OverlayLayer(options) { onRender() { const labelEl = document.getElementById(this.getId()); labelEl.addEventListener('click', (e) => { + document.getElementById(popupMenuList.getId()).dispatchEvent(new Event('toggleoverlaypopup')); document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); - document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); e.preventDefault(); }); }, @@ -139,7 +140,6 @@ const OverlayLayer = function OverlayLayer(options) { labelEl.addEventListener('click', (e) => { layerList.removeOverlay(layer.get('name')); viewer.getMap().removeLayer(layer); - document.getElementById(popupMenuId).dispatchEvent(new Event('toggleoverlaypopup')); e.preventDefault(); }); }, @@ -151,7 +151,7 @@ const OverlayLayer = function OverlayLayer(options) { popupMenuItems.push(removeLayerMenuItem); } - const popupMenuList = Component({ + popupMenuList = Component({ onAdd() { this.addComponents(popupMenuItems); }, diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js index d48673bf4..852bf46e8 100644 --- a/src/controls/legend/overlays.js +++ b/src/controls/legend/overlays.js @@ -252,7 +252,7 @@ const Overlays = function Overlays(options) { }); }, render() { - return ``; + return ``; } }); From 6aeb9d10b0ed91d7b19350fa8bb86376013885d0 Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Wed, 2 Feb 2022 12:56:37 +0100 Subject: [PATCH 06/11] Add box shadow --- css/svg/fa-icons.svg | 3 --- css/svg/material-icons.svg | 1 + scss/ui/_popup-menu.scss | 3 ++- src/controls/legend/overlay.js | 4 ++-- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/css/svg/fa-icons.svg b/css/svg/fa-icons.svg index f3aa16a17..b35f013f4 100644 --- a/css/svg/fa-icons.svg +++ b/css/svg/fa-icons.svg @@ -112,7 +112,4 @@ - - - \ No newline at end of file diff --git a/css/svg/material-icons.svg b/css/svg/material-icons.svg index d8adaf20a..dbd7c631f 100644 --- a/css/svg/material-icons.svg +++ b/css/svg/material-icons.svg @@ -54,4 +54,5 @@ + diff --git a/scss/ui/_popup-menu.scss b/scss/ui/_popup-menu.scss index 5aa796a9e..89ae55576 100644 --- a/scss/ui/_popup-menu.scss +++ b/scss/ui/_popup-menu.scss @@ -9,7 +9,8 @@ $popup-border-color: $grey-light; .popup-menu > ul { background-color: $popup-background-color; border-radius: $popup-radius; - border: solid 1px $popup-border-color; + box-shadow: $shadow; + /*border: solid 1px $popup-border-color;*/ overflow-x: hidden; overflow-y: hidden; diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index a553c6267..6aafe8a3c 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -177,7 +177,7 @@ const OverlayLayer = function OverlayLayer(options) { }; const moreInfoButton = Button({ - cls: 'round small icon-smallest no-shrink', + cls: 'round small icon-smaller no-shrink', click() { const eventShowOverlayPopup = new CustomEvent('showoverlaypopup', { bubbles: true, @@ -194,7 +194,7 @@ const OverlayLayer = function OverlayLayer(options) { style: { 'align-self': 'center' }, - icon: '#fa-ellipsis-v', + icon: '#ic_more_vert_24px', ariaLabel: 'Visa lagerinfo', tabIndex: -1 }); From 3c723b0788c090cdebdb6d310d6da1f06b5b0668 Mon Sep 17 00:00:00 2001 From: Markus Polleryd Date: Wed, 9 Feb 2022 10:04:46 +0100 Subject: [PATCH 07/11] Popup menu created on demand in layer.js --- scss/ui/_popup-menu.scss | 7 ++- src/controls/legend/overlay.js | 87 ++++++++++++++++++--------------- src/controls/legend/overlays.js | 33 ------------- src/popupmenu.js | 70 ++++++++++++++++++++++++++ 4 files changed, 121 insertions(+), 76 deletions(-) create mode 100644 src/popupmenu.js diff --git a/scss/ui/_popup-menu.scss b/scss/ui/_popup-menu.scss index 89ae55576..9d7c19758 100644 --- a/scss/ui/_popup-menu.scss +++ b/scss/ui/_popup-menu.scss @@ -4,15 +4,14 @@ $popup-border-color: $grey-light; .popup-menu { position: absolute; -} - -.popup-menu > ul { background-color: $popup-background-color; border-radius: $popup-radius; box-shadow: $shadow; - /*border: solid 1px $popup-border-color;*/ overflow-x: hidden; overflow-y: hidden; +} + +.popup-menu > ul { > li { margin: $margin-small; diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index 6aafe8a3c..61618c2f4 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -1,5 +1,6 @@ import { Component, Button, dom } from '../../ui'; import { HeaderIcon } from '../../utils/legendmaker'; +import PopupMenu from '../../popupmenu'; const OverlayLayer = function OverlayLayer(options) { let { @@ -18,14 +19,13 @@ const OverlayLayer = function OverlayLayer(options) { const buttons = []; const popupMenuItems = []; let layerList; - let popupMenuActive = false; const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim(); const title = layer.get('title') || 'Titel saknas'; const name = layer.get('name'); const secure = layer.get('secure'); - const popupMenuId = 'overlayPopupMenu'; - let popupMenuList; + let moreInfoButton; + let popupMenu; const checkIcon = '#ic_check_circle_24px'; let uncheckIcon = '#ic_radio_button_unchecked_24px'; @@ -121,8 +121,8 @@ const OverlayLayer = function OverlayLayer(options) { onRender() { const labelEl = document.getElementById(this.getId()); labelEl.addEventListener('click', (e) => { - document.getElementById(popupMenuList.getId()).dispatchEvent(new Event('toggleoverlaypopup')); - document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + popupMenu.close(); + document.getElementById(moreInfoButton.getId()).dispatchEvent(eventOverlayProps); e.preventDefault(); }); }, @@ -151,12 +151,12 @@ const OverlayLayer = function OverlayLayer(options) { popupMenuItems.push(removeLayerMenuItem); } - popupMenuList = Component({ - onAdd() { + const popupMenuList = Component({ + onInit() { this.addComponents(popupMenuItems); }, render() { - let html = `