From 11abf122a7239d6c65c5b2446c517981f9db285f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Tue, 6 Dec 2022 14:41:18 +0100 Subject: [PATCH 1/4] feature: hide controls instead of not adding them on "hideWhenEmbedded" --- src/controls/bookmarks.js | 4 ++++ src/controls/editor.js | 6 ++++++ .../externalurl/externalurlSeveralButtons.js | 3 +++ .../externalurl/externalurlSingleButton.js | 3 +++ src/controls/fullscreen.js | 3 +++ src/controls/geoposition.js | 3 +++ src/controls/home.js | 3 +++ src/controls/legend.js | 3 +++ src/controls/mapmenu.js | 3 +++ src/controls/measure.js | 3 +++ src/controls/position.js | 3 +++ src/controls/scale.js | 3 +++ src/controls/scalepicker.js | 3 +++ src/controls/search.js | 4 +++- src/viewer.js | 16 +++++++++++++--- 15 files changed, 59 insertions(+), 4 deletions(-) diff --git a/src/controls/bookmarks.js b/src/controls/bookmarks.js index ec0f6f8d2..3e2770365 100644 --- a/src/controls/bookmarks.js +++ b/src/controls/bookmarks.js @@ -159,6 +159,10 @@ const Bookmarks = function Bookmarks(options = {}) { components: [headerComponent, contentComponent] }); }, + hide() { + document.getElementById(bookmarksButton.getId()).classList.toggle("hidden"); + document.getElementById(bookmarks.getId()).classList.toggle("hidden"); + }, render() { const bmEl = dom.html(bookmarks.render()); document.getElementById(viewer.getMain().getId()).appendChild(bmEl); diff --git a/src/controls/editor.js b/src/controls/editor.js index 020d25603..ad2225c28 100644 --- a/src/controls/editor.js +++ b/src/controls/editor.js @@ -10,6 +10,7 @@ const Editor = function Editor(options = {}) { let editorButton; let target; let viewer; + let hidden = false; const toggleState = function toggleState() { const detail = { @@ -69,6 +70,11 @@ const Editor = function Editor(options = {}) { } }); }, + hide() { + document.getElementById(editorButton.getId()).classList.toggle("hidden"); + editorToolbar.toggleToolbar(hidden); + hidden = hidden ? false : true; + }, render() { const htmlString = editorButton.render(); const el = dom.html(htmlString); diff --git a/src/controls/externalurl/externalurlSeveralButtons.js b/src/controls/externalurl/externalurlSeveralButtons.js index 671547a0e..67dfe2e9b 100644 --- a/src/controls/externalurl/externalurlSeveralButtons.js +++ b/src/controls/externalurl/externalurlSeveralButtons.js @@ -85,6 +85,9 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = { this.addComponents(buttons); this.render(); }, + hide() { + document.getElementById(containerElement.getId()).classList.toggle("hidden"); + }, render() { let htmlString = `${containerElement.render()}`; let el = dom.html(htmlString); diff --git a/src/controls/externalurl/externalurlSingleButton.js b/src/controls/externalurl/externalurlSingleButton.js index b2fe4b5d1..269129cdb 100644 --- a/src/controls/externalurl/externalurlSingleButton.js +++ b/src/controls/externalurl/externalurlSingleButton.js @@ -64,6 +64,9 @@ const ExternalurlSingleButton = function ExternalurlSingleButton(options = {}) { this.addComponents(buttons); this.render(); }, + hide() { + document.getElementById(exUrlElement.getId()).classList.toggle("hidden"); + }, render() { let htmlString = `${exUrlElement.render()}`; let el = dom.html(htmlString); diff --git a/src/controls/fullscreen.js b/src/controls/fullscreen.js index dfad3042d..d23ab47a3 100644 --- a/src/controls/fullscreen.js +++ b/src/controls/fullscreen.js @@ -40,6 +40,9 @@ const Fullscreen = function Fullscreen(options = {}) { }, onInit() { }, + hide() { + document.getElementById(fullscreenButton.getId()).classList.toggle("hidden"); + }, render() { const htmlString = fullscreenButton.render(); const el = dom.html(htmlString); diff --git a/src/controls/geoposition.js b/src/controls/geoposition.js index fe1b1e251..93aa58865 100644 --- a/src/controls/geoposition.js +++ b/src/controls/geoposition.js @@ -146,6 +146,9 @@ const Geoposition = function Geoposition(options = {}) { } }); }, + hide() { + document.getElementById(positionButton.getId()).classList.toggle("hidden"); + }, render() { const htmlString = positionButton.render(); if (active) { diff --git a/src/controls/home.js b/src/controls/home.js index 339465c7a..2d307426b 100644 --- a/src/controls/home.js +++ b/src/controls/home.js @@ -41,6 +41,9 @@ const Home = function Home(options = {}) { tooltipPlacement: 'east' }); }, + hide() { + document.getElementById(homeButton.getId()).classList.toggle("hidden"); + }, render() { const htmlString = homeButton.render(); const el = dom.html(htmlString); diff --git a/src/controls/legend.js b/src/controls/legend.js index 0e0019a04..ebeaf6a34 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -470,6 +470,9 @@ const Legend = function Legend(options = {}) { this.dispatch('render'); viewer.getMap().on('click', onMapClick); }, + hide() { + document.getElementById(mainContainerCmp.getId()).classList.toggle("hidden"); + }, onRender() { const layerControlCmps = []; if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton); diff --git a/src/controls/mapmenu.js b/src/controls/mapmenu.js index 611263c05..6df72ae03 100644 --- a/src/controls/mapmenu.js +++ b/src/controls/mapmenu.js @@ -141,6 +141,9 @@ const Mapmenu = function Mapmenu({ components: [headerComponent, contentComponent] }); }, + hide() { + document.getElementById(menuButton.getId()).classList.toggle("hidden"); + }, render() { const menuEl = dom.html(mapMenu.render()); target.appendChild(menuEl); diff --git a/src/controls/measure.js b/src/controls/measure.js index 2e8aadc11..5487ab619 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -1142,6 +1142,9 @@ const Measure = function Measure({ } } }, + hide() { + document.getElementById(measureElement.getId()).classList.toggle("hidden"); + }, render() { let htmlString = `${measureElement.render()}`; let el = dom.html(htmlString); diff --git a/src/controls/position.js b/src/controls/position.js index f09a99cf7..6427f849d 100644 --- a/src/controls/position.js +++ b/src/controls/position.js @@ -418,6 +418,9 @@ const Position = function Position(options = {}) { components: [centerButton, projButton, coordsElement, coordsFindElement] }); }, + hide() { + document.getElementById(containerElement.getId()).classList.toggle("hidden"); + }, render() { const el = dom.html(containerElement.render()); document.getElementById(viewer.getFooter().getId()).firstElementChild.appendChild(el); diff --git a/src/controls/scale.js b/src/controls/scale.js index ec57996d7..f654cfc32 100644 --- a/src/controls/scale.js +++ b/src/controls/scale.js @@ -51,6 +51,9 @@ const Scale = function Scale(options = {}) { style: 'display: inline-block' }); }, + hide() { + document.getElementById(container.getId()).classList.toggle("hidden"); + }, render() { const el = dom.html(container.render()); document.getElementById(viewer.getFooter().getId()).firstElementChild.appendChild(el); diff --git a/src/controls/scalepicker.js b/src/controls/scalepicker.js index 60c2f6c66..b81a66210 100644 --- a/src/controls/scalepicker.js +++ b/src/controls/scalepicker.js @@ -54,6 +54,9 @@ const Scalepicker = function Scalepicker(options = {}) { buttonIconCls: 'white' }); }, + hide() { + document.getElementById(dropdown.getId()).classList.toggle("hidden"); + }, render() { const el = dom.html(dropdown.render()); document.getElementById(viewer.getFooter().getId()).firstElementChild.appendChild(el); diff --git a/src/controls/search.js b/src/controls/search.js index 859af47f6..04afb4f5d 100644 --- a/src/controls/search.js +++ b/src/controls/search.js @@ -415,7 +415,9 @@ const Search = function Search(options = {}) { } }); }, - + hide() { + document.getElementById(wrapperElement.getId()).classList.toggle("hidden"); + }, render() { const mapEl = document.getElementById(viewer.getMain().getId()); diff --git a/src/viewer.js b/src/viewer.js index 5e6c06025..12702c77e 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -100,8 +100,18 @@ const Viewer = function Viewer(targetOption, options = {}) { const addControl = function addControl(control) { if (control.onAdd && control.dispatch) { - if (!control.options.hideWhenEmbedded || !isEmbedded(this.getTarget())) { - this.addComponent(control); + this.addComponent(control); + if (control.options.hideWhenEmbedded && isEmbedded(this.getTarget())) { + if(typeof control.hide === 'function') { + control.hide(); + } else { + // If there is no hide function on control, try hide the components instead. + control.getComponents().forEach((comp) => { + if (document.getElementById(comp.getId()) !== null) { + document.getElementById(comp.getId()).classList.add("hidden"); + } + }); + } } } else { throw new Error('Valid control must have onAdd and dispatch methods'); @@ -579,7 +589,7 @@ const Viewer = function Viewer(targetOption, options = {}) { ${footer.render()} - +
`; From aa4d13374f33c7bf250cb0fa61114b53575aff22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Tue, 6 Dec 2022 16:34:02 +0100 Subject: [PATCH 2/4] Taking into account menuitem controls and draganddrop control --- src/viewer.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/viewer.js b/src/viewer.js index 12702c77e..a5cb719ec 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -100,8 +100,10 @@ const Viewer = function Viewer(targetOption, options = {}) { const addControl = function addControl(control) { if (control.onAdd && control.dispatch) { - this.addComponent(control); if (control.options.hideWhenEmbedded && isEmbedded(this.getTarget())) { + if (!['sharemap', 'link', 'about', 'print', 'draganddrop'].includes(control.name)) { + this.addComponent(control); + } if(typeof control.hide === 'function') { control.hide(); } else { @@ -112,6 +114,8 @@ const Viewer = function Viewer(targetOption, options = {}) { } }); } + } else { + this.addComponent(control); } } else { throw new Error('Valid control must have onAdd and dispatch methods'); From e6f9d747537f3d8bc02b7adc36b8ec6f7fb4ba83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Wed, 7 Dec 2022 15:02:43 +0100 Subject: [PATCH 3/4] Don't add controls which is missing hide function. --- src/viewer.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index a5cb719ec..df5cfc654 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -101,18 +101,12 @@ const Viewer = function Viewer(targetOption, options = {}) { const addControl = function addControl(control) { if (control.onAdd && control.dispatch) { if (control.options.hideWhenEmbedded && isEmbedded(this.getTarget())) { - if (!['sharemap', 'link', 'about', 'print', 'draganddrop'].includes(control.name)) { - this.addComponent(control); - } if(typeof control.hide === 'function') { + // Exclude these controls in the array since they can't be hidden and the solution is to not add them. If the control hasn't a hide method don't add the control. + if (!['sharemap', 'link', 'about', 'print', 'draganddrop'].includes(control.name)) { + this.addComponent(control); + } control.hide(); - } else { - // If there is no hide function on control, try hide the components instead. - control.getComponents().forEach((comp) => { - if (document.getElementById(comp.getId()) !== null) { - document.getElementById(comp.getId()).classList.add("hidden"); - } - }); } } else { this.addComponent(control); From b95982455fd543b65bf0aeb624597956f337c497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johnny=20Bl=C3=A4sta?= Date: Fri, 13 Jan 2023 14:41:25 +0100 Subject: [PATCH 4/4] Switch from toggle to separate hide/unhide method --- src/controls/bookmarks.js | 8 ++++++-- src/controls/editor.js | 16 +++++++++++++--- .../externalurl/externalurlSeveralButtons.js | 5 ++++- .../externalurl/externalurlSingleButton.js | 5 ++++- src/controls/fullscreen.js | 5 ++++- src/controls/geoposition.js | 5 ++++- src/controls/home.js | 5 ++++- src/controls/legend.js | 5 ++++- src/controls/mapmenu.js | 5 ++++- src/controls/measure.js | 5 ++++- src/controls/position.js | 5 ++++- src/controls/scale.js | 5 ++++- src/controls/scalepicker.js | 5 ++++- src/controls/search.js | 5 ++++- 14 files changed, 67 insertions(+), 17 deletions(-) diff --git a/src/controls/bookmarks.js b/src/controls/bookmarks.js index 3e2770365..043087271 100644 --- a/src/controls/bookmarks.js +++ b/src/controls/bookmarks.js @@ -160,8 +160,12 @@ const Bookmarks = function Bookmarks(options = {}) { }); }, hide() { - document.getElementById(bookmarksButton.getId()).classList.toggle("hidden"); - document.getElementById(bookmarks.getId()).classList.toggle("hidden"); + document.getElementById(bookmarksButton.getId()).classList.add("hidden"); + document.getElementById(bookmarks.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(bookmarksButton.getId()).classList.remove("hidden"); + document.getElementById(bookmarks.getId()).classList.remove("hidden"); }, render() { const bmEl = dom.html(bookmarks.render()); diff --git a/src/controls/editor.js b/src/controls/editor.js index c8a8fa74a..fbaf6505c 100644 --- a/src/controls/editor.js +++ b/src/controls/editor.js @@ -13,6 +13,7 @@ const Editor = function Editor(options = {}) { let viewer; let hidden = false; let isVisible = isActive; + let toolbarVisible = false; /** The handler were all state is kept */ let editHandler; @@ -30,10 +31,12 @@ const Editor = function Editor(options = {}) { const onActive = function onActive() { editorToolbar.toggleToolbar(true); + toolbarVisible = true; }; const onInitial = function onInitial() { editorToolbar.toggleToolbar(false); + toolbarVisible = false; }; async function createFeature(layerName, geometry = null) { @@ -101,9 +104,16 @@ const Editor = function Editor(options = {}) { }); }, hide() { - document.getElementById(editorButton.getId()).classList.toggle("hidden"); - editorToolbar.toggleToolbar(hidden); - hidden = hidden ? false : true; + document.getElementById(editorButton.getId()).classList.add("hidden"); + if (toolbarVisible) { + editorToolbar.toggleToolbar(false); + } + }, + unhide() { + document.getElementById(editorButton.getId()).classList.remove("hidden"); + if (toolbarVisible) { + editorToolbar.toggleToolbar(true); + } }, render() { const htmlString = editorButton.render(); diff --git a/src/controls/externalurl/externalurlSeveralButtons.js b/src/controls/externalurl/externalurlSeveralButtons.js index 67dfe2e9b..3637cd1cc 100644 --- a/src/controls/externalurl/externalurlSeveralButtons.js +++ b/src/controls/externalurl/externalurlSeveralButtons.js @@ -86,7 +86,10 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = { this.render(); }, hide() { - document.getElementById(containerElement.getId()).classList.toggle("hidden"); + document.getElementById(containerElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(containerElement.getId()).classList.remove("hidden"); }, render() { let htmlString = `${containerElement.render()}`; diff --git a/src/controls/externalurl/externalurlSingleButton.js b/src/controls/externalurl/externalurlSingleButton.js index 269129cdb..a69d3ca32 100644 --- a/src/controls/externalurl/externalurlSingleButton.js +++ b/src/controls/externalurl/externalurlSingleButton.js @@ -65,7 +65,10 @@ const ExternalurlSingleButton = function ExternalurlSingleButton(options = {}) { this.render(); }, hide() { - document.getElementById(exUrlElement.getId()).classList.toggle("hidden"); + document.getElementById(exUrlElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(exUrlElement.getId()).classList.remove("hidden"); }, render() { let htmlString = `${exUrlElement.render()}`; diff --git a/src/controls/fullscreen.js b/src/controls/fullscreen.js index d23ab47a3..043f27ba7 100644 --- a/src/controls/fullscreen.js +++ b/src/controls/fullscreen.js @@ -41,7 +41,10 @@ const Fullscreen = function Fullscreen(options = {}) { onInit() { }, hide() { - document.getElementById(fullscreenButton.getId()).classList.toggle("hidden"); + document.getElementById(fullscreenButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(fullscreenButton.getId()).classList.remove("hidden"); }, render() { const htmlString = fullscreenButton.render(); diff --git a/src/controls/geoposition.js b/src/controls/geoposition.js index 93aa58865..1fa444a9f 100644 --- a/src/controls/geoposition.js +++ b/src/controls/geoposition.js @@ -147,7 +147,10 @@ const Geoposition = function Geoposition(options = {}) { }); }, hide() { - document.getElementById(positionButton.getId()).classList.toggle("hidden"); + document.getElementById(positionButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(positionButton.getId()).classList.remove("hidden"); }, render() { const htmlString = positionButton.render(); diff --git a/src/controls/home.js b/src/controls/home.js index 2d307426b..bd5fafe3b 100644 --- a/src/controls/home.js +++ b/src/controls/home.js @@ -42,7 +42,10 @@ const Home = function Home(options = {}) { }); }, hide() { - document.getElementById(homeButton.getId()).classList.toggle("hidden"); + document.getElementById(homeButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(homeButton.getId()).classList.remove("hidden"); }, render() { const htmlString = homeButton.render(); diff --git a/src/controls/legend.js b/src/controls/legend.js index e23bcbf42..108580665 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -472,7 +472,10 @@ const Legend = function Legend(options = {}) { viewer.getMap().on('click', onMapClick); }, hide() { - document.getElementById(mainContainerCmp.getId()).classList.toggle("hidden"); + document.getElementById(mainContainerCmp.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(mainContainerCmp.getId()).classList.remove("hidden"); }, onRender() { const layerControlCmps = []; diff --git a/src/controls/mapmenu.js b/src/controls/mapmenu.js index 6df72ae03..6153c71b5 100644 --- a/src/controls/mapmenu.js +++ b/src/controls/mapmenu.js @@ -142,7 +142,10 @@ const Mapmenu = function Mapmenu({ }); }, hide() { - document.getElementById(menuButton.getId()).classList.toggle("hidden"); + document.getElementById(menuButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(menuButton.getId()).classList.remove("hidden"); }, render() { const menuEl = dom.html(mapMenu.render()); diff --git a/src/controls/measure.js b/src/controls/measure.js index 5487ab619..648d539ac 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -1143,7 +1143,10 @@ const Measure = function Measure({ } }, hide() { - document.getElementById(measureElement.getId()).classList.toggle("hidden"); + document.getElementById(measureElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(measureElement.getId()).classList.remove("hidden"); }, render() { let htmlString = `${measureElement.render()}`; diff --git a/src/controls/position.js b/src/controls/position.js index 6427f849d..5dedcfe7b 100644 --- a/src/controls/position.js +++ b/src/controls/position.js @@ -419,7 +419,10 @@ const Position = function Position(options = {}) { }); }, hide() { - document.getElementById(containerElement.getId()).classList.toggle("hidden"); + document.getElementById(containerElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(containerElement.getId()).classList.remove("hidden"); }, render() { const el = dom.html(containerElement.render()); diff --git a/src/controls/scale.js b/src/controls/scale.js index f654cfc32..b3f4726c3 100644 --- a/src/controls/scale.js +++ b/src/controls/scale.js @@ -52,7 +52,10 @@ const Scale = function Scale(options = {}) { }); }, hide() { - document.getElementById(container.getId()).classList.toggle("hidden"); + document.getElementById(container.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(container.getId()).classList.remove("hidden"); }, render() { const el = dom.html(container.render()); diff --git a/src/controls/scalepicker.js b/src/controls/scalepicker.js index b81a66210..6556d4dae 100644 --- a/src/controls/scalepicker.js +++ b/src/controls/scalepicker.js @@ -55,7 +55,10 @@ const Scalepicker = function Scalepicker(options = {}) { }); }, hide() { - document.getElementById(dropdown.getId()).classList.toggle("hidden"); + document.getElementById(dropdown.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(dropdown.getId()).classList.remove("hidden"); }, render() { const el = dom.html(dropdown.render()); diff --git a/src/controls/search.js b/src/controls/search.js index 04afb4f5d..4a360f553 100644 --- a/src/controls/search.js +++ b/src/controls/search.js @@ -416,7 +416,10 @@ const Search = function Search(options = {}) { }); }, hide() { - document.getElementById(wrapperElement.getId()).classList.toggle("hidden"); + document.getElementById(wrapperElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(wrapperElement.getId()).classList.remove("hidden"); }, render() { const mapEl = document.getElementById(viewer.getMain().getId());