Use 'one' function from jQuery to close the ngeo-popover

contribs/gmf/options/gmfx.js

@@ -706,11 +706,3 @@ cgxp.tools.openInfoWindow;
  * @param {string=} opt_height CSS height.
  */
 gmfx.openPopup_
-
-/**
- * @typedef {{
- *     goog: (Array.<goog.events.Key>),
- *     ol: (Array.<ol.EventsKey>)
- * }}
- */
-gmfx.PermalinkListenerKeys;

contribs/gmf/src/services/permalink.js

@@ -13,6 +13,7 @@ goog.require('gmf.datasource.ExternalDataSourcesManager');
 goog.require('ngeo.BackgroundEventType');
 goog.require('ngeo.BackgroundLayerMgr');
 goog.require('ngeo.Debounce');
+goog.require('ngeo.EventHelper');
 goog.require('ngeo.FeatureHelper');
 /** @suppress {extraRequire} */
 goog.require('ngeo.Features');
@@ -105,13 +106,14 @@ gmf.module.value('gmfPermalinkOptions',
  * @param {angular.Scope} $rootScope Angular rootScope.
  * @param {angular.$injector} $injector Main injector.
  * @param {ngeo.Debounce} ngeoDebounce ngeo Debounce service.
+ * @param {ngeo.EventHelper} ngeoEventHelper Ngeo event helper service
  * @param {ngeo.StateManager} ngeoStateManager The ngeo StateManager service.
  * @param {ngeo.Location} ngeoLocation ngeo location service.
  * @ngInject
  * @ngdoc service
  * @ngname gmfPermalink
  */
-gmf.Permalink = function($q, $timeout, $rootScope, $injector, ngeoDebounce,
+gmf.Permalink = function($q, $timeout, $rootScope, $injector, ngeoDebounce, ngeoEventHelper,
   ngeoStateManager, ngeoLocation) {
 
   /**
@@ -141,12 +143,6 @@ gmf.Permalink = function($q, $timeout, $rootScope, $injector, ngeoDebounce,
    */
   this.mapViewPropertyChangeEventKey_ = null;
 
-  /**
-   * @type {Object.<number, gmfx.PermalinkListenerKeys>}
-   * @private
-   */
-  this.listenerKeys_ = {};
-
   // == properties from params ==
 
   /**
@@ -155,6 +151,12 @@ gmf.Permalink = function($q, $timeout, $rootScope, $injector, ngeoDebounce,
    */
   this.ngeoDebounce_ = ngeoDebounce;
 
+  /**
+   * @type {ngeo.EventHelper}
+   * @private
+   */
+  this.ngeoEventHelper_ = ngeoEventHelper;
+
   /**
    * @type {ngeo.StateManager}
    * @private
@@ -506,65 +508,8 @@ gmf.Permalink = function($q, $timeout, $rootScope, $injector, ngeoDebounce,
   this.initLayers_();
 };
 
-
-/**
- * Utility method that does 2 things:
- * - initialize the listener keys of a given uid with an array (if that key
- *   has not array set yet)
- * - unlisten any events if the array already exists for the given uid and
- *   empty the array.
- * @param {number} uid Unique id.
- * @private
- */
-gmf.Permalink.prototype.initListenerKey_ = function(uid) {
-  if (!this.listenerKeys_[uid]) {
-    this.listenerKeys_[uid] = {
-      goog: [],
-      ol: []
-    };
-  } else {
-    if (this.listenerKeys_[uid].goog.length) {
-      this.listenerKeys_[uid].goog.forEach((key) => {
-        goog.events.unlistenByKey(key);
-      }, this);
-      this.listenerKeys_[uid].goog.length = 0;
-    }
-    if (this.listenerKeys_[uid].ol.length) {
-      this.listenerKeys_[uid].ol.forEach((key) => {
-        ol.events.unlistenByKey(key);
-      }, this);
-      this.listenerKeys_[uid].ol.length = 0;
-    }
-  }
-};
-
-
-/**
- * Utility method to add a listener key bound to a unique id. The key can
- * come from an `ol.events` (default) or `goog.events`.
- * @param {number} uid Unique id.
- * @param {ol.EventsKey|goog.events.Key} key Key.
- * @param {boolean=} opt_isol Whether it's an OpenLayers event or not. Defaults
- *     to true.
- * @private
- */
-gmf.Permalink.prototype.addListenerKey_ = function(uid, key, opt_isol) {
-  if (!this.listenerKeys_[uid]) {
-    this.initListenerKey_(uid);
-  }
-
-  const isol = opt_isol !== undefined ? opt_isol : true;
-  if (isol) {
-    this.listenerKeys_[uid].ol.push(/** @type {ol.EventsKey} */ (key));
-  } else {
-    this.listenerKeys_[uid].goog.push(/** @type {goog.events.Key} */ (key));
-  }
-};
-
-
 // === Map X, Y, Z ===
 
-
 /**
  * Get the coordinate to use to initialize the map view from the state manager.
  * @return {?ol.Coordinate} The coordinate for the map view center.
@@ -1130,11 +1075,10 @@ gmf.Permalink.prototype.handleNgeoFeaturesRemove_ = function(event) {
  */
 gmf.Permalink.prototype.addNgeoFeature_ = function(feature) {
   const uid = ol.getUid(feature);
-  this.addListenerKey_(
+  this.ngeoEventHelper_.addListenerKey(
     uid,
     ol.events.listen(feature, ol.events.EventType.CHANGE,
-      this.ngeoDebounce_(this.handleNgeoFeaturesChange_, 250, true), this),
-    true
+      this.ngeoDebounce_(this.handleNgeoFeaturesChange_, 250, true), this)
   );
 };
 
@@ -1146,7 +1090,7 @@ gmf.Permalink.prototype.addNgeoFeature_ = function(feature) {
  */
 gmf.Permalink.prototype.removeNgeoFeature_ = function(feature) {
   const uid = ol.getUid(feature);
-  this.initListenerKey_(uid); // clear event listeners
+  this.ngeoEventHelper_.clearListenerKey(uid);
   this.handleNgeoFeaturesChange_();
 };
 

src/ol-ext/popover.js

@@ -1,7 +1,6 @@
 goog.provide('ngeo.Popover');
 
 goog.require('ol.Overlay');
-goog.require('goog.events');
 
 
 /**
@@ -17,13 +16,6 @@ ngeo.Popover = function(opt_options) {
 
   const options = opt_options !== undefined ? opt_options : {};
 
-  /**
-   * The key for close button 'click' event
-   * @type {?goog.events.Key}
-   * @private
-   */
-  this.clickKey_ = null;
-
   let originalEl;
   if (options.element) {
     originalEl = options.element;
@@ -66,10 +58,6 @@ ngeo.Popover.prototype.setMap = function(map) {
 
   const currentMap = this.getMap();
   if (currentMap) {
-    if (this.clickKey_) {
-      goog.events.unlistenByKey(this.clickKey_);
-      this.clickKey_ = null;
-    }
     $(element).popover('destroy');
   }
 
@@ -95,18 +83,11 @@ ngeo.Popover.prototype.setMap = function(map) {
         .popover('show');
     }, 0);
 
-    this.clickKey_ = goog.events.listen(this.closeEl_[0],
-      'click', this.handleCloseElClick_, false, this);
-  }
-};
-
-
-/**
- * @private
- */
-ngeo.Popover.prototype.handleCloseElClick_ = function() {
-  const map = this.getMap();
-  if (map) {
-    map.removeOverlay(this);
+    this.closeEl_.one('click', () => {
+      const map = this.getMap();
+      if (map) {
+        map.removeOverlay(this);
+      }
+    });
   }
 };