feature(Widgets): add show and hide methods

Author: mgermerie

docs/config.json

@@ -128,6 +128,7 @@
             ],
 
             "Widgets": [
+                "Widget",
                 "Navigation",
                 "Minimap",
                 "Scale",

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`.
  */

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

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`.
  */

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`.
  */

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';
+    }
 }