Fix for autoSize popups too big when panMapIntoView is false, r=euzuro,
(Closes #1957) git-svn-id: http://svn.openlayers.org/trunk/openlayers@9092 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
@@ -174,6 +174,20 @@ OpenLayers.Popup = OpenLayers.Class({
|
||||
*/
|
||||
panMapIfOutOfView: false,
|
||||
|
||||
/**
|
||||
* APIProperty: keepInMap
|
||||
* {Boolean} If panMapIfOutOfView is false, and this property is true,
|
||||
* contrain the popup such that it always fits in the available map
|
||||
* space. By default, this is not set on the base class. If you are
|
||||
* creating popups that are near map edges and not allowing pannning,
|
||||
* and especially if you have a popup which has a
|
||||
* fixedRelativePosition, setting this to false may be a smart thing to
|
||||
* do. Subclasses may want to override this setting.
|
||||
*
|
||||
* Default is false.
|
||||
*/
|
||||
keepInMap: false,
|
||||
|
||||
/**
|
||||
* APIProperty: closeOnMove
|
||||
* {Boolean} When map pans, close the popup.
|
||||
@@ -744,20 +758,42 @@ OpenLayers.Popup = OpenLayers.Class({
|
||||
//
|
||||
if (this.map && this.map.size) {
|
||||
|
||||
// Note that there *was* a reference to a
|
||||
// 'OpenLayers.Popup.SCROLL_BAR_WIDTH' constant here, with special
|
||||
// tolerance for it and everything... but it was never defined in
|
||||
// the first place, so I don't know what to think.
|
||||
var extraX = 0, extraY = 0;
|
||||
if (this.keepInMap && !this.panMapIfOutOfView) {
|
||||
var px = this.map.getPixelFromLonLat(this.lonlat);
|
||||
switch (this.relativePosition) {
|
||||
case "tr":
|
||||
extraX = px.x;
|
||||
extraY = this.map.size.h - px.y;
|
||||
break;
|
||||
case "tl":
|
||||
extraX = this.map.size.w - px.x;
|
||||
extraY = this.map.size.h - px.y;
|
||||
break;
|
||||
case "bl":
|
||||
extraX = this.map.size.w - px.x;
|
||||
extraY = px.y;
|
||||
break;
|
||||
case "br":
|
||||
extraX = px.x;
|
||||
extraY = px.y;
|
||||
break;
|
||||
default:
|
||||
extraX = px.x;
|
||||
extraY = this.map.size.h - px.y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var maxY = this.map.size.h -
|
||||
this.map.paddingForPopups.top -
|
||||
this.map.paddingForPopups.bottom -
|
||||
hPadding;
|
||||
hPadding - extraY;
|
||||
|
||||
var maxX = this.map.size.w -
|
||||
this.map.paddingForPopups.left -
|
||||
this.map.paddingForPopups.right -
|
||||
wPadding;
|
||||
wPadding - extraX;
|
||||
|
||||
safeContentSize.w = Math.min(safeContentSize.w, maxX);
|
||||
safeContentSize.h = Math.min(safeContentSize.h, maxY);
|
||||
|
||||
@@ -22,6 +22,20 @@ OpenLayers.Popup.Anchored =
|
||||
*/
|
||||
relativePosition: null,
|
||||
|
||||
/**
|
||||
* APIProperty: keepInMap
|
||||
* {Boolean} If panMapIfOutOfView is false, and this property is true,
|
||||
* contrain the popup such that it always fits in the available map
|
||||
* space. By default, this is set. If you are creating popups that are
|
||||
* near map edges and not allowing pannning, and especially if you have
|
||||
* a popup which has a fixedRelativePosition, setting this to false may
|
||||
* be a smart thing to do.
|
||||
*
|
||||
* For anchored popups, default is true, since subclasses will
|
||||
* usually want this functionality.
|
||||
*/
|
||||
keepInMap: true,
|
||||
|
||||
/**
|
||||
* Parameter: anchor
|
||||
* {Object} Object to which we'll anchor the popup. Must expose a
|
||||
|
||||
@@ -86,6 +86,42 @@
|
||||
t.ok(true, "update position doesn't fail when getLayerPxFromLonLat fails.");
|
||||
map.destroy();
|
||||
}
|
||||
function test_Popup_keepInMap(t) {
|
||||
|
||||
var gb = OpenLayers.Util.getBrowserName;
|
||||
OpenLayers.Util.getBrowserName = function() { return "mock"; }
|
||||
t.plan(3);
|
||||
var map = new OpenLayers.Map("map");
|
||||
map.addLayer(new OpenLayers.Layer("", {isBaseLayer: true}));
|
||||
map.zoomToMaxExtent();
|
||||
var longString = "<div style='width: 200px; height: 200px'>Abc def</div>";
|
||||
popup = new OpenLayers.Popup("chicken",
|
||||
new OpenLayers.LonLat(90, 60),
|
||||
new OpenLayers.Size(100,100),
|
||||
longString,
|
||||
null, true);
|
||||
popup.panMapIfOutOfView = false;
|
||||
popup.keepInMap = true;
|
||||
map.addPopup(popup);
|
||||
var safeSize = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
|
||||
popup = new OpenLayers.Popup("chicken",
|
||||
new OpenLayers.LonLat(90, 60),
|
||||
new OpenLayers.Size(100,100),
|
||||
longString,
|
||||
null, true);
|
||||
popup.panMapIfOutOfView = true;
|
||||
popup.keepInMap = true;
|
||||
map.addPopup(popup);
|
||||
var safeSizePanKeep = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
|
||||
popup.keepInMap = false;
|
||||
map.addPopup(popup);
|
||||
map.setCenter(-180, -90);
|
||||
var safeSizePan = popup.getSafeContentSize(new OpenLayers.Size(1000,1000));
|
||||
t.ok(safeSizePan.equals(safeSizePanKeep), "Panning means that all sizes are equal");
|
||||
t.ok(safeSize.w < safeSizePan.w, "Width of non-panning is less");
|
||||
t.ok(safeSize.h < safeSizePan.h, "Height of non-panning is less");
|
||||
OpenLayers.Util.getBrowserName = gb;
|
||||
}
|
||||
function test_Popup_draw(t) {
|
||||
t.plan( 15 );
|
||||
|
||||
|
||||
100
tests/manual/popup-keepInMap.html
Normal file
100
tests/manual/popup-keepInMap.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
|
||||
<head>
|
||||
<title>OpenLayers: Popup Mayhem</title>
|
||||
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 900px;
|
||||
height: 500px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
var layer, markers;
|
||||
|
||||
var currentPopup;
|
||||
|
||||
|
||||
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
||||
'autoSize': true,
|
||||
'panMapIfOutOfView': false
|
||||
});
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
markers = new OpenLayers.Layer.Markers("zibo", {isBaseLayer: true});
|
||||
map.addLayer(markers);
|
||||
|
||||
addMarkers();
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
|
||||
function addMarkers() {
|
||||
|
||||
var ll, popupClass, popupContentHTML;
|
||||
|
||||
//anchored bubble popup small contents autosize closebox
|
||||
ll = new OpenLayers.LonLat(-35,-15);
|
||||
popupClass = AutoSizeFramedCloud;
|
||||
popupContentHTML = "<div>This popup can't be panned to fit in view, so its popup text should fit inside the map. If it doens't, instead of expaning outside, it will simply make the content scroll. Scroll scroll scroll your boat, gently down the stream! Chicken chicken says the popup text is really boring to write. Did you ever see a popup a popup a popup did you ever see a popup a popup right now. With this way and that way and this way and that way did you ever see a popup a popup right now. I wonder if this is long enough. it might be, but maybe i should throw in some other content. <ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>(get your booty on the floor) </div>";
|
||||
addMarker(ll, popupClass, popupContentHTML, true, true);
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Function: addMarker
|
||||
* Add a new marker to the markers layer given the following lonlat,
|
||||
* popupClass, and popup contents HTML. Also allow specifying
|
||||
* whether or not to give the popup a close box.
|
||||
*
|
||||
* Parameters:
|
||||
* ll - {<OpenLayers.LonLat>} Where to place the marker
|
||||
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up
|
||||
* when the marker is clicked.
|
||||
* popupContentHTML - {String} What to put in the popup
|
||||
* closeBox - {Boolean} Should popup have a close box?
|
||||
* overflow - {Boolean} Let the popup overflow scrollbars?
|
||||
*/
|
||||
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
|
||||
|
||||
var feature = new OpenLayers.Feature(markers, ll);
|
||||
feature.closeBox = closeBox;
|
||||
feature.popupClass = popupClass;
|
||||
feature.data.popupContentHTML = popupContentHTML;
|
||||
feature.data.overflow = (overflow) ? "auto" : "hidden";
|
||||
|
||||
var marker = feature.createMarker();
|
||||
|
||||
var markerClick = function (evt) {
|
||||
if (this.popup == null) {
|
||||
this.popup = this.createPopup(this.closeBox);
|
||||
map.addPopup(this.popup);
|
||||
this.popup.show();
|
||||
} else {
|
||||
this.popup.toggle();
|
||||
this.popup.updateSize();
|
||||
}
|
||||
currentPopup = this.popup;
|
||||
OpenLayers.Event.stop(evt);
|
||||
};
|
||||
marker.events.register("mousedown", feature, markerClick);
|
||||
|
||||
markers.addMarker(marker);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Popup KeepInMap</h1>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
</div>
|
||||
Click on popup, and the content should scroll rather than expanding outside the map.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user