leaflet-js 0.6.beta4 → 0.7.0

data/lib/leaflet.label/src/CircleMarker.Label.js

@@ -0,0 +1,7 @@
+// Add in an option to icon that is used to set where the label anchor is
+L.CircleMarker.mergeOptions({
+	labelAnchor: new L.Point(0, 0)
+});
+
+
+L.CircleMarker.include(L.BaseMarkerMethods);

data/lib/leaflet.label/src/Label.js

@@ -1,11 +1,23 @@
-L.Label = L.Popup.extend({
+L.Label = L.Class.extend({
+
+	includes: L.Mixin.Events,
+
 	options: {
-		autoPan: false,
 		className: '',
-		closePopupOnClick: false,
+		clickable: false,
+		direction: 'right',
 		noHide: false,
-		offset: new L.Point(12, -15), // 6 (width of the label triangle) + 6 (padding)
-		opacity: 1
+		offset: [12, -15], // 6 (width of the label triangle) + 6 (padding)
+		opacity: 1,
+		zoomAnimation: true
+	},
+
+	initialize: function (options, source) {
+		L.setOptions(this, options);
+
+		this._source = source;
+		this._animated = L.Browser.any3d && this.options.zoomAnimation;
+		this._isOpen = false;
 	},
 
 	onAdd: function (map) {
@@ -16,16 +28,18 @@ L.Label = L.Popup.extend({
 		if (!this._container) {
 			this._initLayout();
 		}
-		this._updateContent();
-
-		var animFade = map.options.fadeAnimation;
 
-		if (animFade) {
-			L.DomUtil.setOpacity(this._container, 0);
-		}
 		this._pane.appendChild(this._container);
 
-		map.on('viewreset', this._updatePosition, this);
+		this._initInteraction();
+
+		this._update();
+
+		this.setOpacity(this.options.opacity);
+
+		map
+			.on('moveend', this._onMoveEnd, this)
+			.on('viewreset', this._onViewReset, this);
 
 		if (this._animated) {
 			map.on('zoomanim', this._zoomAnimation, this);
@@ -34,37 +48,47 @@ L.Label = L.Popup.extend({
 		if (L.Browser.touch && !this.options.noHide) {
 			L.DomEvent.on(this._container, 'click', this.close, this);
 		}
-
-		this._update();
-
-		this.setOpacity(this.options.opacity);
 	},
 
 	onRemove: function (map) {
 		this._pane.removeChild(this._container);
 
-		L.Util.falseFn(this._container.offsetWidth); // force reflow
-
 		map.off({
-			viewreset: this._updatePosition,
-			zoomanim: this._zoomAnimation
+			zoomanim: this._zoomAnimation,
+			moveend: this._onMoveEnd,
+			viewreset: this._onViewReset
 		}, this);
 
-		if (map.options.fadeAnimation) {
-			L.DomUtil.setOpacity(this._container, 0);
-		}
+		this._removeInteraction();
 
 		this._map = null;
 	},
 
+	setLatLng: function (latlng) {
+		this._latlng = L.latLng(latlng);
+		if (this._map) {
+			this._updatePosition();
+		}
+		return this;
+	},
+
+	setContent: function (content) {
+		// Backup previous content and store new content
+		this._previousContent = this._content;
+		this._content = content;
+
+		this._updateContent();
+
+		return this;
+	},
+
 	close: function () {
 		var map = this._map;
-		if (L.Browser.touch && !this.options.noHide) {
-			L.DomEvent.off(this._container, 'click', this.close);
-		}
 
 		if (map) {
-			map._label = null;
+			if (L.Browser.touch && !this.options.noHide) {
+				L.DomEvent.off(this._container, 'click', this.close);
+			}
 
 			map.removeLayer(this);
 		}
@@ -73,7 +97,7 @@ L.Label = L.Popup.extend({
 	updateZIndex: function (zIndex) {
 		this._zIndex = zIndex;
 
-		if (this._container) {
+		if (this._container && this._zIndex) {
 			this._container.style.zIndex = zIndex;
 		}
 	},
@@ -91,16 +115,29 @@ L.Label = L.Popup.extend({
 		this.updateZIndex(this._zIndex);
 	},
 
+	_update: function () {
+		if (!this._map) { return; }
+
+		this._container.style.visibility = 'hidden';
+
+		this._updateContent();
+		this._updatePosition();
+
+		this._container.style.visibility = '';
+	},
+
 	_updateContent: function () {
-		if (!this._content) { return; }
+		if (!this._content || !this._map || this._prevContent === this._content) {
+			return;
+		}
 
 		if (typeof this._content === 'string') {
 			this._container.innerHTML = this._content;
-		}
-	},
 
-	_updateLayout: function () {
-		// Do nothing
+			this._prevContent = this._content;
+
+			this._labelWidth = this._container.offsetWidth;
+		}
 	},
 
 	_updatePosition: function () {
@@ -110,14 +147,101 @@ L.Label = L.Popup.extend({
 	},
 
 	_setPosition: function (pos) {
-		pos = pos.add(this.options.offset);
+		var map = this._map,
+			container = this._container,
+			centerPoint = map.latLngToContainerPoint(map.getCenter()),
+			labelPoint = map.layerPointToContainerPoint(pos),
+			direction = this.options.direction,
+			labelWidth = this._labelWidth,
+			offset = L.point(this.options.offset);
+
+		// position to the right (right or auto & needs to)
+		if (direction === 'right' || direction === 'auto' && labelPoint.x < centerPoint.x) {
+			L.DomUtil.addClass(container, 'leaflet-label-right');
+			L.DomUtil.removeClass(container, 'leaflet-label-left');
+
+			pos = pos.add(offset);
+		} else { // position to the left
+			L.DomUtil.addClass(container, 'leaflet-label-left');
+			L.DomUtil.removeClass(container, 'leaflet-label-right');
+
+			pos = pos.add(L.point(-offset.x - labelWidth, offset.y));
+		}
 
-		L.DomUtil.setPosition(this._container, pos);
+		L.DomUtil.setPosition(container, pos);
 	},
 
 	_zoomAnimation: function (opt) {
-		var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center);
+		var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
 
 		this._setPosition(pos);
+	},
+
+	_onMoveEnd: function () {
+		if (!this._animated || this.options.direction === 'auto') {
+			this._updatePosition();
+		}
+	},
+
+	_onViewReset: function (e) {
+		/* if map resets hard, we must update the label */
+		if (e && e.hard) {
+			this._update();
+		}
+	},
+
+	_initInteraction: function () {
+		if (!this.options.clickable) { return; }
+
+		var container = this._container,
+			events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+
+		L.DomUtil.addClass(container, 'leaflet-clickable');
+		L.DomEvent.on(container, 'click', this._onMouseClick, this);
+
+		for (var i = 0; i < events.length; i++) {
+			L.DomEvent.on(container, events[i], this._fireMouseEvent, this);
+		}
+	},
+
+	_removeInteraction: function () {
+		if (!this.options.clickable) { return; }
+
+		var container = this._container,
+			events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+
+		L.DomUtil.removeClass(container, 'leaflet-clickable');
+		L.DomEvent.off(container, 'click', this._onMouseClick, this);
+
+		for (var i = 0; i < events.length; i++) {
+			L.DomEvent.off(container, events[i], this._fireMouseEvent, this);
+		}
+	},
+
+	_onMouseClick: function (e) {
+		if (this.hasEventListeners(e.type)) {
+			L.DomEvent.stopPropagation(e);
+		}
+
+		this.fire(e.type, {
+			originalEvent: e
+		});
+	},
+
+	_fireMouseEvent: function (e) {
+		this.fire(e.type, {
+			originalEvent: e
+		});
+
+		// TODO proper custom event propagation
+		// this line will always be called if marker is in a FeatureGroup
+		if (e.type === 'contextmenu' && this.hasEventListeners(e.type)) {
+			L.DomEvent.preventDefault(e);
+		}
+		if (e.type !== 'mousedown') {
+			L.DomEvent.stopPropagation(e);
+		} else {
+			L.DomEvent.preventDefault(e);
+		}
 	}
-});
+});

data/lib/leaflet.label/src/Leaflet.label.js

@@ -2,4 +2,4 @@
  * Leaflet.label assumes that you have already included the Leaflet library.
  */
 
-L.labelVersion = '0.1.2-dev';
+L.labelVersion = '0.2.1-dev';

data/lib/leaflet.label/src/Map.Label.js

@@ -1,7 +1,5 @@
 L.Map.include({
 	showLabel: function (label) {
-		this._label = label;
-
 		return this.addLayer(label);
 	}
 });

data/lib/leaflet.label/src/Marker.Label.js

@@ -9,123 +9,8 @@ L.Marker.mergeOptions({
 	icon: new L.Icon.Default()
 });
 
+L.Marker.include(L.BaseMarkerMethods);
 L.Marker.include({
-	showLabel: function () {
-		if (this._label && this._map) {
-			this._label.setLatLng(this._latlng);
-			this._map.showLabel(this._label);
-		}
-
-		return this;
-	},
-
-	hideLabel: function () {
-		if (this._label) {
-			this._label.close();
-		}
-		return this;
-	},
-
-	setLabelNoHide: function (noHide) {
-		if (this._labelNoHide === noHide) {
-			return;
-		}
-
-		this._labelNoHide = noHide;
-
-		if (noHide) {
-			this._removeLabelRevealHandlers();
-			this.showLabel();
-		} else {
-			this._addLabelRevealHandlers();
-			this.hideLabel();
-		}
-	},
-
-	bindLabel: function (content, options) {
-		var anchor = L.point(this.options.icon.options.labelAnchor) || new L.Point(0, 0);
-
-		anchor = anchor.add(L.Label.prototype.options.offset);
-
-		if (options && options.offset) {
-			anchor = anchor.add(options.offset);
-		}
-
-		options = L.Util.extend({offset: anchor}, options);
-
-		this._labelNoHide = options.noHide;
-
-		if (!this._label) {
-			if (!this._labelNoHide) {
-				this._addLabelRevealHandlers();
-			}
-
-			this
-				.on('remove', this.hideLabel, this)
-				.on('move', this._moveLabel, this);
-
-			this._hasLabelHandlers = true;
-		}
-
-		this._label = new L.Label(options, this)
-			.setContent(content);
-
-		return this;
-	},
-
-	unbindLabel: function () {
-		if (this._label) {
-			this.hideLabel();
-
-			this._label = null;
-
-			if (this._hasLabelHandlers) {
-				if (!this._labelNoHide) {
-					this._removeLabelRevealHandlers();
-				}
-
-				this
-					.off('remove', this.hideLabel, this)
-					.off('move', this._moveLabel, this);
-			}
-
-			this._hasLabelHandlers = false;
-		}
-		return this;
-	},
-
-	updateLabelContent: function (content) {
-		if (this._label) {
-			this._label.setContent(content);
-		}
-	},
-
-	_addLabelRevealHandlers: function () {
-		this
-			.on('mouseover', this.showLabel, this)
-			.on('mouseout', this.hideLabel, this);
-
-		if (L.Browser.touch) {
-			this.on('click', this.showLabel, this);
-		}
-	},
-
-	_removeLabelRevealHandlers: function () {
-		this
-			.off('mouseover', this.showLabel, this)
-			.off('mouseout', this.hideLabel, this)
-			.off('remove', this.hideLabel, this)
-			.off('move', this._moveLabel, this);
-
-		if (L.Browser.touch) {
-			this.off('click', this.showLabel, this);
-		}
-	},
-
-	_moveLabel: function (e) {
-		this._label.setLatLng(e.latlng);
-	},
-
 	_originalUpdateZIndex: L.Marker.prototype._updateZIndex,
 
 	_updateZIndex: function (offset) {
@@ -133,8 +18,8 @@ L.Marker.include({
 
 		this._originalUpdateZIndex(offset);
 
-		if (this._label) {
-			this._label.updateZIndex(zIndex);
+		if (this.label) {
+			this.label.updateZIndex(zIndex);
 		}
 	},
 
@@ -153,8 +38,18 @@ L.Marker.include({
 
 		this._originalUpdateOpacity();
 
-		if (this._label) {
-			this._label.setOpacity(this.options.labelHasSemiTransparency ? this.options.opacity : absoluteOpacity);
+		if (this.label) {
+			this.label.setOpacity(this.options.labelHasSemiTransparency ? this.options.opacity : absoluteOpacity);
 		}
+	},
+
+	_originalSetLatLng: L.Marker.prototype.setLatLng,
+
+	setLatLng: function (latlng) {
+		if (this.label && !this._labelNoHide) {
+			this.hideLabel();
+		}
+
+		return this._originalSetLatLng(latlng);
 	}
 });

data/lib/leaflet.label/src/Path.Label.js

@@ -1,10 +1,10 @@
 L.Path.include({
 	bindLabel: function (content, options) {
-		if (!this._label || this._label.options !== options) {
-			this._label = new L.Label(options, this);
+		if (!this.label || this.label.options !== options) {
+			this.label = new L.Label(options, this);
 		}
 
-		this._label.setContent(content);
+		this.label.setContent(content);
 
 		if (!this._showLabelAdded) {
 			this
@@ -22,9 +22,9 @@ L.Path.include({
 	},
 
 	unbindLabel: function () {
-		if (this._label) {
+		if (this.label) {
 			this._hideLabel();
-			this._label = null;
+			this.label = null;
 			this._showLabelAdded = false;
 			this
 				.off('mouseover', this._showLabel, this)
@@ -35,21 +35,21 @@ L.Path.include({
 	},
 
 	updateLabelContent: function (content) {
-		if (this._label) {
-			this._label.setContent(content);
+		if (this.label) {
+			this.label.setContent(content);
 		}
 	},
 
 	_showLabel: function (e) {
-		this._label.setLatLng(e.latlng);
-		this._map.showLabel(this._label);
+		this.label.setLatLng(e.latlng);
+		this._map.showLabel(this.label);
 	},
 
 	_moveLabel: function (e) {
-		this._label.setLatLng(e.latlng);
+		this.label.setLatLng(e.latlng);
 	},
 
 	_hideLabel: function () {
-		this._label.close();
+		this.label.close();
 	}
 });