diff --git a/src/controls/bookmarks.js b/src/controls/bookmarks.js index ec0f6f8d2..043087271 100644 --- a/src/controls/bookmarks.js +++ b/src/controls/bookmarks.js @@ -159,6 +159,14 @@ const Bookmarks = function Bookmarks(options = {}) { components: [headerComponent, contentComponent] }); }, + hide() { + 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()); document.getElementById(viewer.getMain().getId()).appendChild(bmEl); diff --git a/src/controls/editor.js b/src/controls/editor.js index d84131aef..fbaf6505c 100644 --- a/src/controls/editor.js +++ b/src/controls/editor.js @@ -11,7 +11,9 @@ const Editor = function Editor(options = {}) { let editorButton; let target; let viewer; + let hidden = false; let isVisible = isActive; + let toolbarVisible = false; /** The handler were all state is kept */ let editHandler; @@ -29,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) { @@ -99,6 +103,18 @@ const Editor = function Editor(options = {}) { } }); }, + hide() { + 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(); const el = dom.html(htmlString); diff --git a/src/controls/externalurl/externalurlSeveralButtons.js b/src/controls/externalurl/externalurlSeveralButtons.js index 671547a0e..3637cd1cc 100644 --- a/src/controls/externalurl/externalurlSeveralButtons.js +++ b/src/controls/externalurl/externalurlSeveralButtons.js @@ -85,6 +85,12 @@ const externalurlSeveralButtons = function externalurlSeveralButtons(options = { this.addComponents(buttons); this.render(); }, + hide() { + document.getElementById(containerElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(containerElement.getId()).classList.remove("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..a69d3ca32 100644 --- a/src/controls/externalurl/externalurlSingleButton.js +++ b/src/controls/externalurl/externalurlSingleButton.js @@ -64,6 +64,12 @@ const ExternalurlSingleButton = function ExternalurlSingleButton(options = {}) { this.addComponents(buttons); this.render(); }, + hide() { + document.getElementById(exUrlElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(exUrlElement.getId()).classList.remove("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..043f27ba7 100644 --- a/src/controls/fullscreen.js +++ b/src/controls/fullscreen.js @@ -40,6 +40,12 @@ const Fullscreen = function Fullscreen(options = {}) { }, onInit() { }, + hide() { + document.getElementById(fullscreenButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(fullscreenButton.getId()).classList.remove("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..1fa444a9f 100644 --- a/src/controls/geoposition.js +++ b/src/controls/geoposition.js @@ -146,6 +146,12 @@ const Geoposition = function Geoposition(options = {}) { } }); }, + hide() { + document.getElementById(positionButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(positionButton.getId()).classList.remove("hidden"); + }, render() { const htmlString = positionButton.render(); if (active) { diff --git a/src/controls/home.js b/src/controls/home.js index 339465c7a..bd5fafe3b 100644 --- a/src/controls/home.js +++ b/src/controls/home.js @@ -41,6 +41,12 @@ const Home = function Home(options = {}) { tooltipPlacement: 'east' }); }, + hide() { + document.getElementById(homeButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(homeButton.getId()).classList.remove("hidden"); + }, render() { const htmlString = homeButton.render(); const el = dom.html(htmlString); diff --git a/src/controls/legend.js b/src/controls/legend.js index 56a0ff266..108580665 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -471,6 +471,12 @@ const Legend = function Legend(options = {}) { this.dispatch('render'); viewer.getMap().on('click', onMapClick); }, + hide() { + document.getElementById(mainContainerCmp.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(mainContainerCmp.getId()).classList.remove("hidden"); + }, onRender() { const layerControlCmps = []; if (turnOffLayersControl) layerControlCmps.push(turnOffLayersButton); diff --git a/src/controls/mapmenu.js b/src/controls/mapmenu.js index 611263c05..6153c71b5 100644 --- a/src/controls/mapmenu.js +++ b/src/controls/mapmenu.js @@ -141,6 +141,12 @@ const Mapmenu = function Mapmenu({ components: [headerComponent, contentComponent] }); }, + hide() { + document.getElementById(menuButton.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(menuButton.getId()).classList.remove("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..648d539ac 100644 --- a/src/controls/measure.js +++ b/src/controls/measure.js @@ -1142,6 +1142,12 @@ const Measure = function Measure({ } } }, + hide() { + document.getElementById(measureElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(measureElement.getId()).classList.remove("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..5dedcfe7b 100644 --- a/src/controls/position.js +++ b/src/controls/position.js @@ -418,6 +418,12 @@ const Position = function Position(options = {}) { components: [centerButton, projButton, coordsElement, coordsFindElement] }); }, + hide() { + document.getElementById(containerElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(containerElement.getId()).classList.remove("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..b3f4726c3 100644 --- a/src/controls/scale.js +++ b/src/controls/scale.js @@ -51,6 +51,12 @@ const Scale = function Scale(options = {}) { style: 'display: inline-block' }); }, + hide() { + document.getElementById(container.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(container.getId()).classList.remove("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..6556d4dae 100644 --- a/src/controls/scalepicker.js +++ b/src/controls/scalepicker.js @@ -54,6 +54,12 @@ const Scalepicker = function Scalepicker(options = {}) { buttonIconCls: 'white' }); }, + hide() { + document.getElementById(dropdown.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(dropdown.getId()).classList.remove("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..4a360f553 100644 --- a/src/controls/search.js +++ b/src/controls/search.js @@ -415,7 +415,12 @@ const Search = function Search(options = {}) { } }); }, - + hide() { + document.getElementById(wrapperElement.getId()).classList.add("hidden"); + }, + unhide() { + document.getElementById(wrapperElement.getId()).classList.remove("hidden"); + }, render() { const mapEl = document.getElementById(viewer.getMain().getId()); diff --git a/src/viewer.js b/src/viewer.js index 5e6c06025..df5cfc654 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -100,7 +100,15 @@ const Viewer = function Viewer(targetOption, options = {}) { const addControl = function addControl(control) { if (control.onAdd && control.dispatch) { - if (!control.options.hideWhenEmbedded || !isEmbedded(this.getTarget())) { + if (control.options.hideWhenEmbedded && isEmbedded(this.getTarget())) { + 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 { this.addComponent(control); } } else { @@ -579,7 +587,7 @@ const Viewer = function Viewer(targetOption, options = {}) { ${footer.render()} - +
`;