refactor popup code, merge marker dragging from msaspence

build/build.bat

@@ -37,6 +37,7 @@ java -jar ../lib/closure-compiler/compiler.jar ^
 --js ../src/handler/ScrollWheelZoom.js ^
 --js ../src/handler/DoubleClickZoom.js ^
 --js ../src/handler/ShiftDragZoom.js ^
+--js ../src/handler/MarkerDrag.js ^
 --js ../src/control/Control.js ^
 --js ../src/control/Control.Zoom.js ^
 --js ../src/map/Map.js ^

build/deps.js

@@ -75,7 +75,7 @@ var deps = {
 		      'dom/Draggable.js',
 		      'handler/Handler.js',
 		      'handler/MapDrag.js'],
-		desc: 'Makes the map draggable (on both desktop and mobile webkit browsers).',
+		desc: 'Makes the map draggable (by mouse or touch).',
 		heading: 'Interaction'
 	},
 	
@@ -100,6 +100,12 @@ var deps = {
 		desc: 'Enables zooming to bounding box by shift-dragging the map.'
 	},
 	
+	MarkerDrag: {
+		src: ['handler/MarkerDrag.js'],
+		desc: 'Makes markers draggable (by mouse or touch).'
+	},
+	
+	
 	ControlZoom: {
 		src: ['control/Control.js', 
 		      'map/ext/Map.Control.js', 

debug/include.js

@@ -47,6 +47,7 @@
 		'handler/DoubleClickZoom.js',
 		'handler/ScrollWheelZoom.js',
 		'handler/ShiftDragZoom.js',
+		'handler/MarkerDrag.js',
 		
 		'control/Control.js',
 		'control/Control.Zoom.js',

src/dom/DomEvent.js

@@ -35,19 +35,6 @@ L.DomEvent = {
 		obj[key] = null; 
 	},
 	
-	fireEvent: function (/*HTMLElement*/ obj, /*String*/ type) {
-		if (document.createEventObject){
-			// dispatch for IE
-			var evt = document.createEventObject();
-			return obj.fireEvent('on'+type,evt)
-		} else{
-			// dispatch for firefox + others
-			var evt = document.createEvent("HTMLEvents");
-			evt.initEvent(type, true, true ); // event type,bubbling,cancelable
-			return !obj.dispatchEvent(evt);
-		}
-	},
-	
 	_getEvent: function()/*->Event*/ {
 		var e = window.event;
 		if (!e) {

src/handler/Handler.js

@@ -1,15 +1,10 @@
 /*
- * L.Handler classes are used internally to inject interaction features to the Map class.
+ * L.Handler classes are used internally to inject interaction features to classes like Map and Marker.
  */
 
 L.Handler = L.Class.extend({
-	initialize: function(handlee) {
-		// not sure this is the best name for this property
-		this._handlee = handlee;
-		// this ensures map handles looking for ._map can still find it
-		// I would remove this and change them but with out full test coverage
-		// am worried I will break something
-		this._map = handlee;
+	initialize: function(map) {
+		this._map = map;
 	},
 	
 	enabled: function() {

src/handler/MarkerDrag.js

@@ -3,11 +3,14 @@
  */
 
 L.Handler.MarkerDrag = L.Handler.extend({
-
+	initialize: function(marker) {
+		this._marker = marker;
+	},
+	
 	enable: function() {
 		if (this._enabled) { return; }
 		if (!this._draggable) {
-			this._draggable = new L.Draggable(this._handlee._icon, this._handlee._icon);
+			this._draggable = new L.Draggable(this._marker._icon, this._marker._icon);
 			this._draggable.on('dragstart', this._onDragStart, this);
 			this._draggable.on('drag', this._onDrag, this);
 			this._draggable.on('dragend', this._onDragEnd, this);
@@ -27,25 +30,25 @@ L.Handler.MarkerDrag = L.Handler.extend({
 	},
 	
 	_onDragStart: function(e) {
-		this._handlee.fire('movestart',this);
-		this._handlee.fire('dragstart',"hello");
-		this._dragStartShadowPos = L.DomUtil.getPosition(this._handlee._shadow);
+		this._marker.closePopup();
+		
+		this._marker.fire('movestart');
+		this._marker.fire('dragstart');
 	},
 	
 	_onDrag: function(e) {
-		
 		// update shadow position
-		var newShadowPos = this._dragStartShadowPos.add(e.target._offset);
-		L.DomUtil.setPosition(this._handlee._shadow, newShadowPos);
-	
-		this._handlee.fire('move',this);
-		this._handlee.fire('drag',this);
+		var iconPos = L.DomUtil.getPosition(this._marker._icon);
+		L.DomUtil.setPosition(this._marker._shadow, iconPos);
 		
+		this._marker._latlng = this._marker._map.layerPointToLatLng(iconPos);
+	
+		this._marker.fire('move');
+		this._marker.fire('drag');
 	},
 	
 	_onDragEnd: function() {
-		this._handlee.fire('moveend',this);
-		this._handlee.fire('dragend',this);
+		this._marker.fire('moveend');
+		this._marker.fire('dragend');
 	}
-	
 });

src/layer/Popup.js

@@ -12,10 +12,8 @@ L.Popup = L.Class.extend({
 		autoPanPadding: new L.Point(5, 5)
 	},
 	
-	initialize: function(latlng, content, options) {
+	initialize: function(options) {
 		L.Util.setOptions(this, options);
-		this._latlng = latlng; 
-		this._content = content;
 	},
 	
 	onAdd: function(map) {
@@ -33,6 +31,8 @@ L.Popup = L.Class.extend({
 		this._update();
 		
 		this._container.style.opacity = '1'; //TODO fix ugly opacity hack
+		
+		this._opened = true;
 	},
 	
 	onRemove: function(map) {
@@ -41,10 +41,28 @@ L.Popup = L.Class.extend({
 		map.off('click', this._close, this);
 
 		this._container.style.opacity = '0';
+		
+		this._opened = false;
+	},
+	
+	setLatLng: function(latlng) {
+		this._latlng = latlng;
+		if (this._opened) {
+			this._update();
+		}
+	},
+	
+	setContent: function(content) {
+		this._content = content;
+		if (this._opened) {
+			this._update();
+		}
 	},
 	
 	_close: function() {
-		this._map.removeLayer(this);
+		if (this._opened) {
+			this._map.removeLayer(this);
+		}
 	},
 	
 	_initLayout: function() {

src/layer/marker/Marker.Popup.js

@@ -4,17 +4,23 @@
 
 L.Marker.include({
 	openPopup: function() {
-		this._map.closePopup();
-		if (this._popup) {
-			this._map.openPopup(this._popup);
-		}
+		this._popup.setLatLng(this._latlng);
+		this._map.openPopup(this._popup);
+		
 		return this;
 	},
 	
+	closePopup: function() {
+		if (this._popup) {
+			this._popup._close();
+		}
+	},
+	
 	bindPopup: function(content, options) {
 		options = L.Util.extend({offset: this.options.icon.popupAnchor}, options);
 		
-		this._popup = new L.Popup(this._latlng, content, options);
+		this._popup = new L.Popup(options);
+		this._popup.setContent(content);
 		this.on('click', this.openPopup, this);
 		
 		return this;

src/layer/marker/Marker.js

@@ -2,7 +2,6 @@
  * L.Marker is used to display clickable/draggable icons on the map.
  */
 
-
 L.Marker = L.Class.extend({
 
 	includes: L.Mixin.Events,
@@ -46,8 +45,7 @@ L.Marker = L.Class.extend({
 	},
 	
 	getLatLng: function() {
-		var pos = L.DomUtil.getPosition(this._icon);
-		return this._map.layerPointToLatLng(pos);
+		return this._latlng;
 	},
 	
 	_reset: function() {
@@ -60,35 +58,27 @@ L.Marker = L.Class.extend({
 	},
 	
 	_initInteraction: function() {
-	
 		if (this.options.clickable) {
 			this._icon.className += ' leaflet-clickable';
 			L.DomEvent.addListener(this._icon, 'mousedown', this._fireMouseEvent, this);
-			L.DomEvent.addListener(this._icon, 'click', this._fireMouseEvent, this);
+			L.DomEvent.addListener(this._icon, 'click', this._onMouseClick, this);
 			L.DomEvent.addListener(this._icon, 'dblclick', this._fireMouseEvent, this);
 		}
 		
-		var handlers = {
-			draggable: L.Handler.MarkerDrag
+		if (this.options.draggable) {
+			this.dragging = new L.Handler.MarkerDrag(this);
+			this.dragging.enable();
 		}
-			
-		for (var i in handlers) {
-			if (handlers.hasOwnProperty(i) && handlers[i]) {
-				this[i] = new handlers[i](this);
-				if (this.options[i]) this[i].enable();
-			}
-		}
-		
+	},
+	
+	_onMouseClick: function(e) {
+		L.DomEvent.stopPropagation(e);
+		if (this.dragging && this.dragging.moved()) { return; }
+		this.fire(e.type);
 	},
 	
 	_fireMouseEvent: function(e) {
 		this.fire(e.type);
 		L.DomEvent.stopPropagation(e);
-	},
-	
-	moved: function() {
-		return this._draggable._moved;
-	},
-	
-	
+	}
 });

src/layer/vector/Path.Popup.js

@@ -4,18 +4,14 @@
 
 L.Path.include({
 	bindPopup: function(content, options) {
-		this._popup = new L.Popup(null, content, options);
+		this._popup = new L.Popup(options);
+		this._popup.setContent(content);
 		this.on('click', this._openPopup, this);
 		return this;
 	},
 	
 	_openPopup: function(e) {
-		this._popup._latlng = e.position;
-		if (this._popup._map) {
-			this._popup._updatePosition();
-		}
-
-		this._map.closePopup();
+		this._popup.setLatLng(e.position);
 		this._map.openPopup(this._popup);
 	}	
 });

src/map/Map.js

@@ -3,7 +3,6 @@
  */
 
 L.Map = L.Class.extend({
-	
 	includes: L.Mixin.Events,
 	
 	options: {
@@ -353,6 +352,7 @@ L.Map = L.Class.extend({
 	},
 	
 	_onMouseClick: function(e) {
+		console.log(e);
 		if (this.dragging && this.dragging.moved()) { return; }
 		this._fireMouseEvent(e);
 	},