refactor everything to Layer.Popup

ilblog · Jan 2, 2015 · 775a8e0 · 775a8e0
1 parent 95596c7
commit 775a8e0
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 48 deletions.
diff --git a/debug/map/popup.html b/debug/map/popup.html
@@ -55,6 +55,27 @@
       return 'Leaflet ID is ' + layer._leaflet_id;
     }).addTo(map);
 
+    var polygon = L.polygon([
+      getRandomLatLng(map),
+      getRandomLatLng(map),
+      getRandomLatLng(map),
+      getRandomLatLng(map)
+    ], {
+      color: 'red'
+    }).bindPopup('I\'m a red polygon').addTo(map);
+
+    var polyline = L.polyline([
+      getRandomLatLng(map),
+      getRandomLatLng(map),
+      getRandomLatLng(map),
+    ], {
+      color: 'red'
+    }).bindPopup('I\'m a red polyline').addTo(map);
+
+    var marker = L.circleMarker(getRandomLatLng(map), {
+      color: 'red'
+    }).bindPopup('I\'m a red circle').addTo(map);
+
     L.DomUtil.get('change').onclick = function(){
       features.setPopupContent('Foo');
     };
@@ -64,23 +85,23 @@
     };
 
     L.DomUtil.get('openMarker').onclick = function(){
-      features.openPopup(features.getLayerId(marker));
+      features.openPopup(marker);
     };
 
     L.DomUtil.get('openLine').onclick = function(){
-      features.openPopup(features.getLayerId(line));
+      features.openPopup(line);
     };
 
     L.DomUtil.get('openPoly').onclick = function(){
-      features.openPopup(features.getLayerId(poly));
+      features.openPopup(poly);
     };
 
     L.DomUtil.get('close').onclick = function(){
       features.closePopup();
     };
 
     L.DomUtil.get('toggle').onclick = function(){
-      features.togglePopup(features.getLayerId(marker));
+      features.togglePopup(marker);
     };
   </script>
 </body>

diff --git a/src/layer/FeatureGroup.js b/src/layer/FeatureGroup.js
@@ -32,40 +32,6 @@ L.FeatureGroup = L.LayerGroup.extend({
 		return this.fire('layerremove', {layer: layer});
 	},
 
-	openPopup: function (layerid) {
-		var layer;
-
-		if(layerid) {
-			layer = this.getLayer(layerid);
-		} else {
-			// open popup on the first layer
-			for (var id in this._layers) {
-				layer = this._layers[id];
-				break;
-			}
-		}
-
-		if (this._popup && this._map) {
-			this._popup.options.offset = this._popupAnchor(layer);
-			this._popup._source = layer;
-			this._popup.update();
-			this._map.openPopup(this._popup, layer._latlng || layer.getCenter());
-		}
-
-		return this;
-	},
-
-	togglePopup: function(layerid){
-		if (this._popup) {
-			if (this._popup._map) {
-				this.closePopup();
-			} else {
-				this.openPopup(layerid);
-			}
-		}
-		return this;
-	},
-
 	setStyle: function (style) {
 		return this.invoke('setStyle', style);
 	},

diff --git a/src/layer/Layer.Popup.js b/src/layer/Layer.Popup.js
@@ -18,7 +18,7 @@ L.Layer.include({
 
 		if (!this._popupHandlersAdded) {
 			this.on({
-				click: this._openPopup,
+				click: this._togglePopup,
 				remove: this.closePopup,
 				move: this._movePopup
 			});
@@ -31,7 +31,7 @@ L.Layer.include({
 	unbindPopup: function () {
 		if (this._popup) {
 			this.off({
-				click: this._openPopup,
+				click: this._togglePopup,
 				remove: this.closePopup,
 				move: this._movePopup
 			});
@@ -41,11 +41,39 @@ L.Layer.include({
 		return this;
 	},
 
-	openPopup: function (latlng) {
+	openPopup: function (target) {
+		var layer;
+		var latlng;
+
+		// handles figuring out `layer` and `latlng` from `target`
+		// assumes target will be one of
+		// * undefined
+		// * Layer
+		// * [lat,lng]
+		// * LatLng
+
+		if(!target) {
+			for (var id in this._layers) {
+				layer = this._layers[id];
+				break;
+			}
+			layer = layer || this;
+			latlng = layer._latlng || layer.getCenter();
+		} else if(target instanceof L.Layer) {
+			layer = target;
+			latlng = layer._latlng || layer.getCenter();
+		} else {
+			layer = this;
+			latlng = target
+		}
+
 		if (this._popup && this._map) {
-			this._popup.options.offset = this._popupAnchor(this);
-			this._map.openPopup(this._popup, latlng ||  this._latlng || this.getCenter());
+			this._popup.options.offset = this._popupAnchor(layer); // update the popup offset based on our layer
+			this._popup._source = layer; // update popup source
+			this._popup.update(); // update the popup (will update content if popup uses a function)
+			this._map.openPopup(this._popup, latlng);
 		}
+
 		return this;
 	},
 
@@ -56,12 +84,12 @@ L.Layer.include({
 		return this;
 	},
 
-	togglePopup: function () {
+	togglePopup: function (target) {
 		if (this._popup) {
 			if (this._popup._map) {
 				this.closePopup();
 			} else {
-				this.openPopup();
+				this.openPopup(target);
 			}
 		}
 		return this;
@@ -78,12 +106,13 @@ L.Layer.include({
 		return this._popup;
 	},
 
-	_openPopup: function (e) {
+	_togglePopup: function (e) {
 		if(this._popup && this._map && this._map.hasLayer(this._popup) && this._popup._source === e.layer){
 			this.closePopup();
 		} else {
-			this._popup.options.offset = this._popupAnchor(e.layer || e.target);
-			this._popup._source = e.layer;
+			var popupTarget = e.layer || e.target;
+			this._popup.options.offset = this._popupAnchor(popupTarget);
+			this._popup._source = popupTarget;
 			if(typeof this._popup._content === 'function') {
 				this._popup.update();
 			}