feature: hide controls instead of not adding them on "hideWhenEmbedded"

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);

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);

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);

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);

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);

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) {

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);

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);

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);

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);

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);

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);

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);

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());
 

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()}
                             </div>
                           </div>
-                              
+
                           <div id="loading" class="hide">
                             <div class="loading-spinner"></div>
                           </div>`;