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

Flodkvist · Dec 6, 2022 · 11abf12 · 11abf12
1 parent c26b6bb
commit 11abf12
Show file tree

Hide file tree

Showing 15 changed files with 59 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()}
                             </div>
                           </div>
-                              
+
                           <div id="loading" class="hide">
                             <div class="loading-spinner"></div>
                           </div>`;