Close associated popup submenu at layertree removal

contribs/gmf/src/layertree/component.html

@@ -151,11 +151,13 @@
 
     <span
       ngeo-popover
-      ng-if="::(layertreeCtrl.depth === 1 && !layertreeCtrl.node.mixed) || (layertreeCtrl.depth > 1 && layertreeCtrl.parent.node.mixed && !layertreeCtrl.node.children) || (gmfLayertreeCtrl.getLegendsObject(layertreeCtrl) && layertreeCtrl.node.metadata.legend) || layertreeCtrl.getDataSource().filtrable" ngeo-popover-dismiss=".content">
+      ng-if="::(layertreeCtrl.depth === 1 && !layertreeCtrl.node.mixed) || (layertreeCtrl.depth > 1 && layertreeCtrl.parent.node.mixed && !layertreeCtrl.node.children) || (gmfLayertreeCtrl.getLegendsObject(layertreeCtrl) && layertreeCtrl.node.metadata.legend) || layertreeCtrl.getDataSource().filtrable" ngeo-popover-dismiss=".content"
+      ng-click="::gmfLayertreeCtrl.tagPopup(layertreeCtrl.node)">
 
       <span
         ngeo-popover-anchor
-        class="extra-actions fa fa-cog">
+        class="extra-actions fa fa-cog"
+        id="popup-id-{{layertreeCtrl.node.ol_uid}}">
       </span>
 
       <div ngeo-popover-content>

contribs/gmf/src/layertree/component.js

@@ -25,6 +25,7 @@ import olSourceImageWMS from 'ol/source/ImageWMS.js';
 import olSourceTileWMS from 'ol/source/TileWMS.js';
 import olSourceWMTS from 'ol/source/WMTS.js';
 import LayerBase from 'ol/layer/Base.js';
+import {getUid} from 'ol/util.js';
 
 import 'bootstrap/js/src/collapse.js';
 
@@ -759,21 +760,66 @@ Controller.prototype.afterReorder = function() {
 };
 
 
+/**
+ * @param {import('gmf/themes.js').GmfGroup} node Layer tree node to tag popup identifier.
+ */
+Controller.prototype.tagPopup = function(node) {
+  const uid = getUid(node);
+
+  // Find the random id associated with the new popup being opened.
+  const popupId = $(`#popup-id-${uid}`).attr('aria-describedby');
+  if (!node.popupId) {
+    node.popupId = popupId;
+  } else {
+    delete node.popupId;
+  }
+};
+
+
 /**
  * @param {import('gmf/themes.js').GmfGroup} node Layer tree node to remove.
  */
 Controller.prototype.removeNode = function(node) {
+  this.parseTreeNodes(node);
   this.gmfTreeManager_.removeGroup(node);
 };
 
 
-/**
- */
 Controller.prototype.removeAllNodes = function() {
+  this.parseTreeNodes(this.root);
   this.gmfTreeManager_.removeAll();
 };
 
 
+/**
+ * @param {import('gmf/themes.js').GmfGroup | import('gmf/themes.js').GmfLayer | import('gmf/themes.js').GmfRootNode} node Layer tree node to remove.
+ */
+Controller.prototype.parseTreeNodes = function(node) {
+  if (node.children) {
+    /**
+     * @param {any} child
+     */
+    node.children.forEach(child => {
+      this.parseTreeNodes(child);
+    });
+  }
+  if (node.popupId) {
+    this.removePopup_(node);
+  }
+};
+
+
+/**
+ * @param {import('gmf/themes.js').GmfGroup} node Layer tree node to remove.
+ * @private
+ */
+Controller.prototype.removePopup_ = function(node) {
+  const popupId = node.popupId;
+  $(`#${popupId}`).remove();
+  delete node.popupId;
+};
+
+
 /**
  * @return {number} first level node count.
  */

contribs/gmf/src/themes.js

@@ -48,7 +48,7 @@
  * not an OpenLayers group
  * neither a WMS group.
  * This represent « first level group » (Block in the layer tree),
- * or all sub nodes that's not al leaf.
+ * or all sub nodes that's not a leaf.
  * extends GmfBaseNode
  * @typedef {Object} GmfGroup
  * @property {number} id (GmfBaseNode)
@@ -67,6 +67,7 @@
  * @property {string} [ogcServer] On non mixed first level group it is the ogc server to use.
  * @property {import('ngeo/datasource/OGC.js').TimeProperty} [time] On non mixed first level group with more
  *      then one time layer, it is the time information.
+ * @property {string} [popupId] a popup identifier for the associate submenu.
  */
 
 
@@ -90,6 +91,7 @@
  * @property {string} [style]
  * @property {string} type WMS or WMTS.
  * @property {string} [ogcServer]
+ * @property {string} [popupId] a popup identifier for the associate submenu.
  */