From 9f9ce6d5f4ccede4bf991aadbffb5510f92dc8ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bl=C3=A4sta=20Johnny?= Date: Mon, 18 Jul 2022 13:44:11 +0200 Subject: [PATCH 1/6] Turn on all layers button --- css/svg/material-icons.svg | 1 + src/controls/legend.js | 49 ++++++++++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 10 deletions(-) diff --git a/css/svg/material-icons.svg b/css/svg/material-icons.svg index 9fb5acd56..50be751cb 100644 --- a/css/svg/material-icons.svg +++ b/css/svg/material-icons.svg @@ -13,6 +13,7 @@ + diff --git a/src/controls/legend.js b/src/controls/legend.js index 83468a338..2e4af93e6 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -15,6 +15,7 @@ const Legend = function Legend(options = {}) { expanded = true, contentCls, contentStyle, + turnOnLayersControl = false, name = 'legend', labelOpacitySlider = '', visibleLayersControl = false, @@ -132,6 +133,15 @@ const Legend = function Legend(options = {}) { }); }; + const turnOnAllLayers = function turnOnAllLayers() { + const layers = viewer.getLayers(); + layers.forEach((el) => { + if (!(['none', 'background'].includes(el.get('group')))) { + el.setVisible(true); + } + }); + }; + const divider = El({ cls: 'divider margin-x-small', style: { @@ -214,6 +224,22 @@ const Legend = function Legend(options = {}) { setVisibleLayersViewActive(!visibleLayersViewActive); }; + const turnOnLayersButton = Button({ + cls: 'round compact icon-small margin-x-smaller', + title: 'Tänd alla lager', + click() { + viewer.dispatch('active:turnonlayers'); + }, + style: { + 'align-self': 'center', + 'padding-right': '6px' + }, + icon: '#ic_visibility_24px', + iconStyle: { + fill: '#7a7a7a' + } + }); + const layerSearchInput = Input({ cls: 'o-search-layer-field placeholder-text-smaller smaller', style: { height: '1.5rem', margin: 0, width: '100%' }, @@ -423,12 +449,14 @@ const Legend = function Legend(options = {}) { restoreState(params); }, getuseGroupIndication() { return useGroupIndication; }, - addButtonToTools(button) { + addButtonToTools(button, addDiveder = true) { const toolsEl = document.getElementById(toolsCmp.getId()); toolsEl.classList.remove('hidden'); if (toolsCmp.getComponents().length > 0) { - toolsEl.style.justifyContent = 'space-between'; - toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild); + toolsEl.style.justifyContent = 'right'; + if (addDiveder) { + toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild); + } toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild); } else { toolsEl.appendChild(dom.html(button.render())); @@ -441,7 +469,12 @@ const Legend = function Legend(options = {}) { }, onAdd(evt) { viewer = evt.target; - viewer.on('active:turnofflayers', turnOffAllLayers); + if (turnOffLayersControl) { + viewer.on('active:turnofflayers', turnOffAllLayers); + } + if (turnOnLayersControl) { + viewer.on('active:turnonlayers', turnOnAllLayers); + } viewer.on('active:togglevisibleLayers', toggleShowVisibleLayers); const backgroundLayers = viewer.getLayersByProperty('group', 'background').reverse(); @@ -456,11 +489,6 @@ const Legend = function Legend(options = {}) { viewer.getMap().on('click', onMapClick); }, onRender() { - const layerControlCmps = []; - if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton); - const layerControl = El({ - components: layerControlCmps - }); mainContainerEl = document.getElementById(mainContainerCmp.getId()); layerButtonEl = document.getElementById(layerButton.getId()); layerSwitcherEl.addEventListener('collapse:toggle', (e) => { @@ -469,7 +497,8 @@ const Legend = function Legend(options = {}) { toggleVisibility(); }); window.addEventListener('resize', updateMaxHeight); - if (layerControlCmps.length > 0) this.addButtonToTools(layerControl); + if (turnOffLayersControl) this.addButtonToTools(turnOffLayersButton, false); + if (turnOnLayersControl) this.addButtonToTools(turnOnLayersButton, false); if (searchLayersControl) this.addButtonToTools(layerSearchInput); initAutocomplete(); bindUIActions(); From 949c5f3b01087dc304eac5997451a2d22d0c4991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bl=C3=A4sta=20Johnny?= Date: Tue, 19 Jul 2022 13:54:30 +0200 Subject: [PATCH 2/6] Changed adding buttons --- src/controls/legend.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/controls/legend.js b/src/controls/legend.js index 2e4af93e6..828d5b0db 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -449,14 +449,12 @@ const Legend = function Legend(options = {}) { restoreState(params); }, getuseGroupIndication() { return useGroupIndication; }, - addButtonToTools(button, addDiveder = true) { + addButtonToTools(button) { const toolsEl = document.getElementById(toolsCmp.getId()); toolsEl.classList.remove('hidden'); if (toolsCmp.getComponents().length > 0) { - toolsEl.style.justifyContent = 'right'; - if (addDiveder) { - toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild); - } + toolsEl.style.justifyContent = 'space-between'; + toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild); toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild); } else { toolsEl.appendChild(dom.html(button.render())); @@ -489,6 +487,14 @@ const Legend = function Legend(options = {}) { viewer.getMap().on('click', onMapClick); }, onRender() { + const layerControlCmps = []; + if (searchLayersControl) layerControlCmps.push(layerSearchInput); + if (turnOnLayersControl) layerControlCmps.push(turnOnLayersButton); + if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton); + const layerControl = El({ + cls: 'grow flex justify-end align-center no-shrink', + components: layerControlCmps + }); mainContainerEl = document.getElementById(mainContainerCmp.getId()); layerButtonEl = document.getElementById(layerButton.getId()); layerSwitcherEl.addEventListener('collapse:toggle', (e) => { @@ -497,9 +503,7 @@ const Legend = function Legend(options = {}) { toggleVisibility(); }); window.addEventListener('resize', updateMaxHeight); - if (turnOffLayersControl) this.addButtonToTools(turnOffLayersButton, false); - if (turnOnLayersControl) this.addButtonToTools(turnOnLayersButton, false); - if (searchLayersControl) this.addButtonToTools(layerSearchInput); + if (layerControlCmps.length > 0) this.addButtonToTools(layerControl); initAutocomplete(); bindUIActions(); setTabIndex(); From f394b87db9a79074ceadc153f65852ffbd5b4a5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bl=C3=A4sta=20Johnny?= Date: Wed, 12 Oct 2022 09:11:44 +0200 Subject: [PATCH 3/6] Search outside of layerControlCmps --- src/controls/legend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/legend.js b/src/controls/legend.js index 828d5b0db..15371ab33 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -488,7 +488,6 @@ const Legend = function Legend(options = {}) { }, onRender() { const layerControlCmps = []; - if (searchLayersControl) layerControlCmps.push(layerSearchInput); if (turnOnLayersControl) layerControlCmps.push(turnOnLayersButton); if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton); const layerControl = El({ @@ -504,6 +503,7 @@ const Legend = function Legend(options = {}) { }); window.addEventListener('resize', updateMaxHeight); if (layerControlCmps.length > 0) this.addButtonToTools(layerControl); + if (searchLayersControl) this.addButtonToTools(layerSearchInput); initAutocomplete(); bindUIActions(); setTabIndex(); From 8d000f2e1718441435ece84221b66ce36dcdd4a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bl=C3=A4sta=20Johnny?= Date: Wed, 12 Oct 2022 13:35:55 +0200 Subject: [PATCH 4/6] Skip if group is exclusive --- src/controls/legend.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/controls/legend.js b/src/controls/legend.js index 15371ab33..8129420cf 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -137,7 +137,14 @@ const Legend = function Legend(options = {}) { const layers = viewer.getLayers(); layers.forEach((el) => { if (!(['none', 'background'].includes(el.get('group')))) { - el.setVisible(true); + const group = viewer.getGroups().find((item) => item.name === el.get('group')); + if (typeof group !== 'undefined') { + if (!group.exclusive) { + el.setVisible(true); + } + } else { + el.setVisible(true); + } } }); }; From 9987fca5a2b7299f1c5e419ed81586272c6cdc5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bl=C3=A4sta=20Johnny?= Date: Wed, 26 Oct 2022 11:16:10 +0200 Subject: [PATCH 5/6] Clearifying purpose with button --- src/controls/legend.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/legend.js b/src/controls/legend.js index 23c23e740..2f6b80026 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -233,7 +233,7 @@ const Legend = function Legend(options = {}) { const turnOnLayersButton = Button({ cls: 'round compact icon-small margin-x-smaller', - title: 'Tänd alla lager', + title: 'Tänd alla lager utom bakgrundslager', click() { viewer.dispatch('active:turnonlayers'); }, From 4283fa85779609a899d11f3026911af7da59bd67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Fri, 27 Jan 2023 14:48:09 +0100 Subject: [PATCH 6/6] Use full width of legend for legend items --- src/controls/legend/overlays.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js index 1a8cd453a..c616e7fc2 100644 --- a/src/controls/legend/overlays.js +++ b/src/controls/legend/overlays.js @@ -25,7 +25,7 @@ const Overlays = function Overlays(options) { const cls = `${clsSettings} o-layerswitcher-overlays flex row overflow-hidden`.trim(); const style = dom.createStyle({ - width: '220px', height: '100%', 'min-width': '220px', ...styleSettings + width: '100%', height: '100%', 'min-width': '220px', ...styleSettings }); const nonGroupNames = ['background', 'none']; const rootGroupNames = ['root', '', null, undefined];