feature(Widgets): add show and hide methods

iTowns · Mar 16, 2022 · 59ac32c · 59ac32c
1 parent 9bd81ce
commit 59ac32c
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 0 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -128,6 +128,7 @@
             ],
 
             "Widgets": [
+                "Widget",
                 "Navigation",
                 "Minimap",
                 "Scale",

diff --git a/utils/gui/Minimap.js b/utils/gui/Minimap.js
@@ -18,6 +18,8 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget for minimap
  *
+ * @extends Widget
+ *
  * @property    {HTMLElement}   domElement      An html div containing the minimap.
  * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
  */

diff --git a/utils/gui/Navigation.js b/utils/gui/Navigation.js
@@ -16,6 +16,8 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget menu manager for navigation.
  *
+ * @extends Widget
+ *
  * @property {HTMLElement}  domElement          An html div containing all navigation widgets.
  * @property {HTMLElement}  parentElement       The parent HTML container of `this.domElement`.
  * @property {Object}       onClick             An object containing methods which are executed when clicking one of the

diff --git a/utils/gui/Scale.js b/utils/gui/Scale.js
@@ -15,6 +15,8 @@ const DEFAULT_OPTIONS = {
 /**
  * A widget for scale
  *
+ * @extends Widget
+ *
  * @property    {HTMLElement}   domElement      An html div containing the scale.
  * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
  */

diff --git a/utils/gui/Searchbar.js b/utils/gui/Searchbar.js
@@ -45,6 +45,8 @@ function eraseSuggestionList(form) {
 /**
  * A widget for searchbar
  *
+ * @extends Widget
+ *
  * @property    {HTMLElement}   domElement      An html div containing the searchbar.
  * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
  */

diff --git a/utils/gui/Widget.js b/utils/gui/Widget.js
@@ -1,4 +1,11 @@
+/**
+ * An interface that stores common methods for all specific widgets.
+ *
+ * @hideconstructor
+ */
 class Widget {
+    #_display;
+
     constructor(view, options = {}, defaultOptions) {
         this.parentElement = options.parentElement || view.domElement;
 
@@ -58,6 +65,21 @@ class Widget {
         this.domElement.addEventListener('pointerdown', (e) => { e.stopPropagation(); });
         this.domElement.addEventListener('mousedown', (e) => { e.stopPropagation(); });
     }
+
+    /**
+     * Change the widget style `display` property so that the widget becomes visible.
+     */
+    show() {
+        this.domElement.style.display = this.#_display;
+    }
+
+    /**
+     * Change the widget style `display` property so that the widget becomes invisible.
+     */
+    hide() {
+        this.#_display = window.getComputedStyle(this.domElement).display;
+        this.domElement.style.display = 'none';
+    }
 }