Added Popup maxHeight option, updated default popup styles

CHANGELOG.md

@@ -12,6 +12,10 @@ Leaflet Changelog
 
 ### Improvements
 
+#### Usabiliy improvements
+
+ * Slightly improved default popup styling.
+
 #### Breaking API changes
 
  * Converted `Icon` properties (like `iconUrl`) to options, changed constructor signature to `Icon(options)`.
@@ -26,15 +30,18 @@ Leaflet Changelog
  * Added `Marker` `opacity` option.
  * Added public `redraw` method to vector layers (useful if you manipulate their `LatLng` points directly).
  * Added `setPosition` and `getPosition` to all controls, as well as ability to pass certain position as an option when creating a control.
+ * Added `Popup` `maxHeight` option that makes content inside the popup scrolled if it doesn't fit the specified max height.
  * Made controls implementation easier (now more magic happens under the hood).
  * Added `Map` `containerPointToLatLng` and `latLngToContainerPoint` methods. [#474](https://github.com/CloudMade/Leaflet/issues/474)
  * Added `containerPoint` property to `MouseEvent`. [#413](https://github.com/CloudMade/Leaflet/issues/413)
  * Added `LatLngBounds` `pad` method that returns bounds extended by a percentage (by [@jacobtoye](https://github.com/jacobtoye)). [#492](https://github.com/CloudMade/Leaflet/pull/492)
  * Added `contextmenu` event to vector layers (by [@ErrorProne](https://github.com/ErrorProne)). [#500](https://github.com/CloudMade/Leaflet/pull/500)
  * Added chaining to `DomEvent` methods.
+ * Added `Map` `addHandler` method.
 
 ### Bug fixes
 
+ * Fixed inability to use scrolled content inside popup due to mouse wheel propagation.
  * Fixed a bug where popup size was calculated incorrectly in IE.
  * Fixed a bug where cursor would flicker when dragging a marker.
  * Fixed a bug where `TileLayer.WMS` wouldn't take `insertAtTheBottom` option into account (by [@bmcbride](https://github.com/bmcbride)). [#478](https://github.com/CloudMade/Leaflet/pull/478)

dist/leaflet-src.js

@@ -1198,6 +1198,18 @@ L.Map = L.Class.extend({
 		return this;
 	},
 
+	addHandler: function (name, HandlerClass) {
+		if (!HandlerClass) { return; }
+
+		this[name] = new HandlerClass(this);
+
+		if (this.options[name]) {
+			this[name].enable();
+		}
+
+		return this;
+	},
+
 
 	// public methods for getting map state
 
@@ -1513,24 +1525,12 @@ L.Map = L.Class.extend({
 	},
 
 	_initInteraction: function () {
-		// TODO ugly, refactor to move to corresponding handler classes
-		var handlers = {
-			dragging: L.Map.Drag,
-			touchZoom: L.Map.TouchZoom,
-			doubleClickZoom: L.Map.DoubleClickZoom,
-			scrollWheelZoom: L.Map.ScrollWheelZoom,
-			boxZoom: L.Map.BoxZoom
-		};
-
-		var i;
-		for (i in handlers) {
-			if (handlers.hasOwnProperty(i) && handlers[i]) {
-				this[i] = new handlers[i](this);
-				if (this.options[i]) {
-					this[i].enable();
-				}
-			}
-		}
+		this
+			.addHandler('dragging', L.Map.Drag)
+			.addHandler('touchZoom', L.Map.TouchZoom)
+			.addHandler('doubleClickZoom', L.Map.DoubleClickZoom)
+			.addHandler('scrollWheelZoom', L.Map.ScrollWheelZoom)
+			.addHandler('boxZoom', L.Map.BoxZoom);
 	},
 
 	_onTileLayerLoad: function () {
@@ -2454,6 +2454,7 @@ L.Popup = L.Class.extend({
 	options: {
 		minWidth: 50,
 		maxWidth: 300,
+		maxHeight: null,
 		autoPan: true,
 		closeButton: true,
 		offset: new L.Point(0, 2),
@@ -2536,6 +2537,7 @@ L.Popup = L.Class.extend({
 		L.DomEvent.disableClickPropagation(wrapper);
 
 		this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+		L.DomEvent.addListener(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
 
 		this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
 		this._tip = L.DomUtil.create('div', prefix + '-tip', this._tipContainer);
@@ -2567,7 +2569,7 @@ L.Popup = L.Class.extend({
 	},
 
 	_updateLayout: function () {
-		var container = this._container;
+		var container = this._contentNode;
 
 		container.style.width = '';
 		container.style.whiteSpace = 'nowrap';
@@ -2579,7 +2581,20 @@ L.Popup = L.Class.extend({
 		container.style.width = (width + 1) + 'px';
 		container.style.whiteSpace = '';
 
-		this._containerWidth = container.offsetWidth;
+		container.style.height = '';
+
+		var height = container.offsetHeight,
+			maxHeight = this.options.maxHeight,
+			scrolledClass = ' leaflet-popup-scrolled';
+
+		if (maxHeight && height > maxHeight) {
+			container.style.height = maxHeight + 'px';
+			container.className += scrolledClass;
+		} else {
+			container.className = container.className.replace(scrolledClass, '');
+		}
+
+		this._containerWidth = this._container.offsetWidth;
 	},
 
 	_updatePosition: function () {
@@ -5794,7 +5809,7 @@ L.Map.include(!(L.Transition && L.Transition.implemented()) ? {} : {
 
 		if (!this._panTransition) {
 			// TODO make duration configurable
-			this._panTransition = new L.Transition(this._mapPane, {duration: 0.3});
+			this._panTransition = new L.Transition(this._mapPane, {duration: 0.25});
 
 			this._panTransition.on('step', this._onPanTransitionStep, this);
 			this._panTransition.on('end', this._onPanTransitionEnd, this);
@@ -5929,7 +5944,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
 		if (!newTileBg.transition) {
 			// TODO move to Map options
 			newTileBg.transition = new L.Transition(this._tileBg, {
-				duration: 0.3,
+				duration: 0.25,
 				easing: 'cubic-bezier(0.25,0.1,0.25,0.75)'
 			});
 			newTileBg.transition.on('end', this._onZoomTransitionEnd, this);

dist/leaflet.css

@@ -212,7 +212,7 @@ a.leaflet-active {
 
 /* Fade animations */
 
-.leaflet-fade-anim .leaflet-tile {
+.leaflet-fade-anim .leaflet-tile, .leaflet-fade-anim .leaflet-popup {
 	opacity: 0;
 
 	-webkit-transition: opacity 0.2s linear;
@@ -220,19 +220,7 @@ a.leaflet-active {
 	-o-transition: opacity 0.2s linear;
 	transition: opacity 0.2s linear;
 	}
-.leaflet-fade-anim .leaflet-tile-loaded {
-	opacity: 1;
-	}
-
-.leaflet-fade-anim .leaflet-popup {
-	opacity: 0;
-
-	-webkit-transition: opacity 0.2s linear;
-	-moz-transition: opacity 0.2s linear;
-	-o-transition: opacity 0.2s linear;
-	transition: opacity 0.2s linear;
-	}
-.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+.leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 	opacity: 1;
 	}
 
@@ -260,7 +248,7 @@ a.leaflet-active {
 	text-align: left;
 	}
 .leaflet-popup-content {
-	margin: 19px;
+	margin: 14px 20px;
 	}
 .leaflet-popup-tip-container {
 	margin: 0 auto;
@@ -284,8 +272,8 @@ a.leaflet-active {
 	}
 .leaflet-popup-close-button {
 	position: absolute;
-	top: 9px;
-	right: 9px;
+	top: 8px;
+	right: 8px;
 
 	width: 10px;
 	height: 10px;
@@ -295,6 +283,11 @@ a.leaflet-active {
 .leaflet-popup-content p {
 	margin: 18px 0;
 	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
 
 
 /* Visual appearance */

src/layer/Popup.js

@@ -5,6 +5,7 @@ L.Popup = L.Class.extend({
 	options: {
 		minWidth: 50,
 		maxWidth: 300,
+		maxHeight: null,
 		autoPan: true,
 		closeButton: true,
 		offset: new L.Point(0, 2),
@@ -87,6 +88,7 @@ L.Popup = L.Class.extend({
 		L.DomEvent.disableClickPropagation(wrapper);
 
 		this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+		L.DomEvent.addListener(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
 
 		this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
 		this._tip = L.DomUtil.create('div', prefix + '-tip', this._tipContainer);
@@ -118,7 +120,7 @@ L.Popup = L.Class.extend({
 	},
 
 	_updateLayout: function () {
-		var container = this._container;
+		var container = this._contentNode;
 
 		container.style.width = '';
 		container.style.whiteSpace = 'nowrap';
@@ -130,7 +132,20 @@ L.Popup = L.Class.extend({
 		container.style.width = (width + 1) + 'px';
 		container.style.whiteSpace = '';
 
-		this._containerWidth = container.offsetWidth;
+		container.style.height = '';
+
+		var height = container.offsetHeight,
+			maxHeight = this.options.maxHeight,
+			scrolledClass = ' leaflet-popup-scrolled';
+
+		if (maxHeight && height > maxHeight) {
+			container.style.height = maxHeight + 'px';
+			container.className += scrolledClass;
+		} else {
+			container.className = container.className.replace(scrolledClass, '');
+		}
+
+		this._containerWidth = this._container.offsetWidth;
 	},
 
 	_updatePosition: function () {