[ [FIX] fix ol v5 #123

examples/mobile/map.interaction.touchcompass.html

@@ -104,8 +104,8 @@ <h1>ol-ext: Touch compass interaction</h1>
 	tcompass.setActive(false);
 
 	sel.getFeatures().on(["add","remove"], function()
-	{	tcompass.setActive(this.getFeatures().getLength() > 0);
-	}, sel);
+	{	tcompass.setActive(sel.getFeatures().getLength() > 0);
+	});
 
 	</script>
 

src/control/Bar.js

@@ -108,7 +108,7 @@ ol_control_Bar.prototype.addControl = function (c)
 	{	this.getMap().addControl(c);
 	}
 	// Activate and toogleOne
-	c.on ('change:active', this.onActivateControl_, this);
+	c.on ('change:active', this.onActivateControl_.bind(this));
 	if (c.getActive && c.getActive())
 	{	c.dispatchEvent({ type:'change:active', key:'active', oldValue:false, active:true });
 	}
@@ -152,8 +152,8 @@ ol_control_Bar.prototype.setActive = function (b)
 /** Post-process an activated/deactivated control
 *	@param {ol.event} e :an object with a target {_ol_control_} and active flag {bool}
 */
-ol_control_Bar.prototype.onActivateControl_ = function (e)
-{	if (this.get('toggleOne'))
+ol_control_Bar.prototype.onActivateControl_ = function (e) {
+	if (this.get('toggleOne'))
 	{	if (e.active)
 		{	var n;
 			var ctrl = e.target;

src/control/SearchGeoportailParcelle.js

@@ -102,7 +102,7 @@ var ol_control_SearchGeoportailParcelle = function(options) {
 		self.activateParcelle(false);
 	});
 
-	this.on('select', this.selectCommune, this);
+	this.on('select', this.selectCommune.bind(this));
 	this.set('pageSize', options.pageSize || 5);
 };
 ol.inherits(ol_control_SearchGeoportailParcelle, ol_control_SearchGeoportail);

src/control/Swipe.js

@@ -33,6 +33,9 @@ var ol_control_Swipe = function(opt_options)
 	ol_control_Control.call(this,
 	{	element: element
 	});
+
+	// An array of listener on layer postcompose
+	this._listener = [];
 
 	this.layers = [];
 	if (options.layers) this.addLayer(options.layers, false);
@@ -51,7 +54,7 @@ var ol_control_Swipe = function(opt_options)
 		}
 		$(this.element).removeClass("horizontal vertical");
 		$(this.element).addClass(this.get('orientation'));
-	}, this);
+	}.bind(this));
 
 	this.set('position', options.position || 0.5);
 	this.set('orientation', options.orientation || 'vertical');
@@ -64,24 +67,23 @@ ol.inherits(ol_control_Swipe, ol_control_Control);
  */
 ol_control_Swipe.prototype.setMap = function(map)
 {   
-	if (this.getMap())
-	{	for (var i=0; i<this.layers.length; i++)
-		{	var l = this.layers[i];
-			if (l.right) l.layer.un('precompose', this.precomposeRight, this);
-			else l.layer.un('precompose', this.precomposeLeft, this);
-			l.layer.un('postcompose', this.postcompose, this);
-		}
+	for (var i=0; i<this._listener.length; i++) {
+		ol_Observable.unByKey(this._listener[i]);
+	}
+	this._listener = [];
+	if (this.getMap()) {	
 		this.getMap().renderSync();
 	}
 
 	ol_control_Control.prototype.setMap.call(this, map);
 
 	if (map)
-	{	for (var i=0; i<this.layers.length; i++)
+	{	this._listener = [];
+		for (var i=0; i<this.layers.length; i++)
 		{	var l = this.layers[i];
-			if (l.right) l.layer.on('precompose', this.precomposeRight, this);
-			else l.layer.on('precompose', this.precomposeLeft, this);
-			l.layer.on('postcompose', this.postcompose, this);
+			if (l.right) this._listener.push (l.layer.on('precompose', this.precomposeRight.bind(this)));
+			else this._listener.push (l.layer.on('precompose', this.precomposeLeft.bind(this)));
+			this._listener.push(l.layer.on('postcompose', this.postcompose.bind(this)));
 		}
 		map.renderSync();
 	}
@@ -102,14 +104,14 @@ ol_control_Swipe.prototype.isLayer_ = function(layer)
 */
 ol_control_Swipe.prototype.addLayer = function(layers, right)
 {	if (!(layers instanceof Array)) layers = [layers];
-	for (var i=0; i<layers.length; i++)
-	{var l = layers[i];
+	for (var i=0; i<layers.length; i++) { 
+		var l = layers[i];
 		if (this.isLayer_(l)<0)
 		{	this.layers.push({ layer:l, right:right });
 			if (this.getMap())
-			{	if (right) l.on('precompose', this.precomposeRight, this);
-				else l.on('precompose', this.precomposeLeft, this);
-				l.on('postcompose', this.postcompose, this);
+			{	if (right) this._listener.push (l.on('precompose', this.precomposeRight.bind(this)));
+				else this._listener.push (l.on('precompose', this.precomposeLeft.bind(this)));
+				this._listener.push(l.on('postcompose', this.postcompose.bind(this)));
 				this.getMap().renderSync();
 			}
 		}

src/control/Target.js

@@ -47,14 +47,15 @@ ol.inherits(ol_control_Target, ol_control_Control);
  */
 ol_control_Target.prototype.setMap = function (map)
 {	if (this.getMap()) 
-	{	this.getMap().un('postcompose', this.drawTarget_, this);
-		if (this.getVisible()) this.getMap().renderSync();
+	{	if (this.getVisible()) this.getMap().renderSync();
 	}
+	if (this._listener) ol_Observable.unByKey(this._listener);
+	this._listener = null;
 
 	ol_control_Control.prototype.setMap.call(this, map);
 
 	if (map) 
-	{	map.on('postcompose', this.drawTarget_, this);
+	{	this._listener = map.on('postcompose', this.drawTarget_.bind(this));
 	}
 };
 

src/featureanimation/FeatureAnimation.js

@@ -203,7 +203,7 @@ ol_layer_Vector.prototype.animateFeature = function(feature, fanim)
 	// Launch animation
 	function start(options)
 	{	if (fanim.length && !listenerKey)
-		{	listenerKey = self.on('postcompose', animate, self);
+		{	listenerKey = self.on('postcompose', animate.bind(self));
 			// map or layer?
 			if (self.renderSync) self.renderSync();
 			else self.changed();

src/filter/Base.js

@@ -22,8 +22,10 @@ var ol_filter = {};
  * @param {} options Extend {@link _ol_control_Control_} options.
  *  @param {bool} options.active
  */
-var ol_filter_Base = function(options)
-{	ol_Object.call(this);
+var ol_filter_Base = function(options) {
+  ol_Object.call(this);
+	// Array of postcompose listener
+	this._listener = [];
 	if (options && options.active===false) this.set('active', false);
 	else this.set('active', true);
 };
@@ -32,15 +34,15 @@ ol.inherits(ol_filter_Base, ol_Object);
 /** Activate / deactivate filter
 *	@param {bool} b
 */
-ol_filter_Base.prototype.setActive = function (b)
-{	this.set('active', b===true);
+ol_filter_Base.prototype.setActive = function (b) {
+  this.set('active', b===true);
 };
 
 /** Get filter active
 *	@return {bool}
 */
-ol_filter_Base.prototype.getActive = function (b)
-{	return this.get('active');
+ol_filter_Base.prototype.getActive = function (b) {
+  return this.get('active');
 };
 
 (function(){
@@ -56,51 +58,55 @@ function precompose_(e)
 * @scoop {ol.filter} this the filter
 * @private
 */
-function postcompose_(e)
-{	if (this.get('active')) this.postcompose(e);
+function postcompose_(e) {
+	if (this.get('active')) this.postcompose(e);
 }
 /** Force filter redraw / Internal function  
 * @scoop {ol.map||ol.layer} this: the map or layer the filter is added to
 * @private
 */
-function filterRedraw_(e)
-{	if (this.renderSync) this.renderSync();
+function filterRedraw_(e) {
+	if (this.renderSync) this.renderSync();
 	else this.changed(); 
 }
 
 /** Add a filter to an ol object
 * @scoop {ol.map||ol.layer} this: the map or layer the filter is added to
 * @private
 */
-function addFilter_(filter)
-{	if (!this.filters_) this.filters_ = [];
+function addFilter_(filter) {
+	if (!this.filters_) this.filters_ = [];
 	this.filters_.push(filter);
-	if (filter.precompose) this.on('precompose', precompose_, filter);
-	if (filter.postcompose) this.on('postcompose', postcompose_, filter);
-	filter.on('propertychange', filterRedraw_, this);
+	if (filter.precompose) filter._listener.push ( { listener: this.on('precompose', precompose_.bind(filter)), target: this });
+	if (filter.postcompose) filter._listener.push ( { listener: this.on('postcompose', postcompose_.bind(filter)), target: this });
+	filter._listener.push ( { listener: filter.on('propertychange', filterRedraw_.bind(this)), target: this });
 	filterRedraw_.call (this);
 };
 
 /** Remove a filter to an ol object
 * @scoop {ol.map||ol.layer} this: the map or layer the filter is added to
 * @private
 */
-function removeFilter_(filter)
-{	if (!this.filters_) this.filters_ = [];
-	for (var i=this.filters_.length-1; i>=0; i--)
-	{	if (this.filters_[i]===filter) this.filters_.splice(i,1);
+function removeFilter_(filter) {
+  if (!this.filters_) this.filters_ = [];
+	for (var i=this.filters_.length-1; i>=0; i--) {
+    if (this.filters_[i]===filter) this.filters_.splice(i,1);
+	}
+	for (var i=filter._listener.length-1; i>=0; i--) {
+    // Remove listener on this object
+		if (filter._listener[i].target === this) {
+			ol_Observable.unByKey(filter._listener[i].listener);
+			filter._listener.splice(i,1);
+		}
 	}
-	if (filter.precompose) this.un('precompose', precompose_, filter);
-	if (filter.postcompose) this.un('postcompose', postcompose_, filter);
-	filter.un('propertychange', filterRedraw_, this);
 	filterRedraw_.call (this);
 };
 
 /** Add a filter to an ol.Map
 *	@param {ol.filter}
 */
-ol_Map.prototype.addFilter = function (filter)
-{	addFilter_.call (this, filter);
+ol_Map.prototype.addFilter = function (filter) {
+  addFilter_.call (this, filter);
 };
 /** Remove a filter to an ol.Map
 *	@param {ol.filter}

src/interaction/CenterTouch.js

@@ -23,6 +23,9 @@ import ol_style_Stroke from 'ol/style/stroke'
  */
 var ol_interaction_CenterTouch = function(options)
 {	options = options || {};
+
+	// LIst of listerner on the object
+	this._listener = {};
 	// Filter event
 	var rex = /^pointermove$|^pointerup$/;
 
@@ -66,14 +69,15 @@ ol.inherits(ol_interaction_CenterTouch, ol_interaction_Interaction);
 ol_interaction_CenterTouch.prototype.setMap = function(map)
 {	if (this.getMap())
 	{	this.getMap().removeInteraction(this.ctouch);
-		this.getMap().un('postcompose', this.drawTarget_, this);
 	}
+	if (this._listener.drawtarget) ol_Observable.unByKey(this._listener.drawtarget);
+	this._listener.drawtarget = null;
 
 	ol_interaction_Interaction.prototype.setMap.call (this, map);
 
 	if (this.getMap())
 	{	if (this.getActive()) this.getMap().addInteraction(this.ctouch);
-		this.getMap().on('postcompose', this.drawTarget_, this);
+		this._listener.drawtarget = this.getMap().on('postcompose', this.drawTarget_.bind(this));
 	}
 };
 

src/interaction/Clip.js

@@ -29,21 +29,22 @@ ol.inherits(ol_interaction_Clip, ol_interaction_Pointer);
 
 /** Set the map > start postcompose
 */
-ol_interaction_Clip.prototype.setMap = function(map)
-{	if (this.getMap()) 
-	{	for (var i=0; i<this.layers_.length; i++)
-		{	this.layers_[i].un('precompose', this.precompose_, this);
-			this.layers_[i].un('postcompose', this.postcompose_, this);
+ol_interaction_Clip.prototype.setMap = function(map) {
+	if (this.getMap()) {
+		for (var i=0; i<this.layers_.length; i++) {
+			if (this.layers_[i].precompose) ol_Observable.unByKey(this.layers_[i].precompose);
+			if (this.layers_[i].postcompose) ol_Observable.unByKey(this.layers_[i].postcompose);
+			this.layers_[i].precompose = this.layers_[i].postcompose = null;
 		}
 		this.getMap().renderSync();
 	}
-	
+
 	ol_interaction_Pointer.prototype.setMap.call(this, map);
 
-	if (map)
-	{	for (var i=0; i<this.layers_.length; i++)
-		{	this.layers_[i].on('precompose', this.precompose_, this);
-			this.layers_[i].on('postcompose', this.postcompose_, this);
+	if (map) {
+		for (var i=0; i<this.layers_.length; i++) {
+			this.layers_[i].precompose = this.layers_[i].layer.on('precompose', this.precompose_.bind(this));
+			this.layers_[i].postcompose = this.layers_[i].layer.on('postcompose', this.postcompose_.bind(this));
 		}
 		map.renderSync();
 	}
@@ -62,13 +63,14 @@ ol_interaction_Clip.prototype.setRadius = function(radius)
  */
 ol_interaction_Clip.prototype.addLayer = function(layers)
 {	if (!(layers instanceof Array)) layers = [layers];
-	for (var i=0; i<layers.length; i++)
-	{	if (this.getMap())
-		{	layers[i].on('precompose', this.precompose_, this);
-			layers[i].on('postcompose', this.postcompose_, this);
+	for (var i=0; i<layers.length; i++) {
+		var l = { layer: layers[i] }
+		if (this.getMap()) {
+			l.precompose = layers[i].on('precompose', this.precompose_.bind(this));
+			l.postcompose = layers[i].on('postcompose', this.postcompose_.bind(this));
 			this.getMap().renderSync();
 		}
-		this.layers_.push(layers[i]);
+		this.layers_.push(l);
 	}
 }
 
@@ -80,14 +82,14 @@ ol_interaction_Clip.prototype.removeLayer = function(layers)
 	for (var i=0; i<layers.length; i++)
 	{	var k;
 		for (k=0; k<this.layers_.length; k++)
-		{	if (this.layers_[k]===layers[i]) 
+		{	if (this.layers_[k].layer===layers[i]) 
 			{	break;
 			}
 		}
 		if (k!=this.layers_.length && this.getMap())
-		{	this.layers_.splice(k,1);
-			layers[i].un('precompose', this.precompose_, this);
-			layers[i].un('postcompose', this.postcompose_, this);
+		{	if (this.layers_[k].precompose) ol_Observable.unByKey(this.layers_[k].precompose);
+			if (this.layers_[k].postcompose) ol_Observable.unByKey(this.layers_[k].postcompose);
+			this.layers_.splice(k,1);
 			this.getMap().renderSync();
 		}
 	}
@@ -133,13 +135,14 @@ ol_interaction_Clip.prototype.setActive = function(b)
 {	ol_interaction_Pointer.prototype.setActive.call (this, b);
 	if(b) {
 		for(var i=0; i<this.layers_.length; i++) {
-			this.layers_[i].on('precompose', this.precompose_, this);
-			this.layers_[i].on('postcompose', this.postcompose_, this);
+			this.layers_[i].precompose = this.layers_[i].layer.on('precompose', this.precompose_.bind(this));
+			this.layers_[i].postcompose = this.layers_[i].layer.on('postcompose', this.postcompose_.bind(this));
 		}
 	} else {
 		for(var i=0; i<this.layers_.length; i++) {
-			this.layers_[i].un('precompose', this.precompose_, this);
-			this.layers_[i].un('postcompose', this.postcompose_, this);
+			if (this.layers_[i].precompose) ol_Observable.unByKey(this.layers_[i].precompose);
+			if (this.layers_[i].postcompose) ol_Observable.unByKey(this.layers_[i].postcompose);
+			this.layers_[i].precompose = this.layers_[i].postcompose = null;
 		}
 	}
 	if (this.getMap()) this.getMap().renderSync();

src/interaction/DrawHole.js

@@ -53,9 +53,9 @@ var ol_interaction_DrawHole = function(options)
 	}
 
 	// Start drawing if inside a feature
-	this.on('drawstart', this._startDrawing, this );
+	this.on('drawstart', this._startDrawing.bind(this));
 	// End drawing add the hole to the current Polygon
-	this.on('drawend', this._finishDrawing, this);
+	this.on('drawend', this._finishDrawing.bind(this));
 };
 ol.inherits(ol_interaction_DrawHole, ol_interaction_Draw);