Adding support for new generation 'framed' popups. This patch includes numerous improvements to the main popups, including the addition of autoSizing, panIntoView, and full support for overflow:auto of the contents div. Thanks go out to the CloudAmber folks, to Pierre in la belle France, to the guys at TOPP and of course, to senior cr5 for his patience and help in the last and final stretch. this is a huge improvement in the popup arena and couldn't have been done without the broad help of everyone out there in the community. Thank you everyone for making this possible. Big step for OpenLayers. (Closes #926)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6718 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
229
lib/OpenLayers/Popup/FramedCloud.js
Normal file
229
lib/OpenLayers/Popup/FramedCloud.js
Normal file
@@ -0,0 +1,229 @@
|
||||
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
|
||||
* license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
* @requires OpenLayers/Popup/Framed.js
|
||||
* @requires OpenLayers/Util.js
|
||||
*/
|
||||
|
||||
/**
|
||||
* Class: OpenLayers.Popup.FramedCloud
|
||||
*
|
||||
* Inherits from:
|
||||
* - <OpenLayers.Popup.Framed>
|
||||
*/
|
||||
OpenLayers.Popup.FramedCloud =
|
||||
OpenLayers.Class(OpenLayers.Popup.Framed, {
|
||||
|
||||
/**
|
||||
* APIProperty: autoSize
|
||||
* {Boolean} Framed Cloud is autosizing by default.
|
||||
*/
|
||||
autoSize: true,
|
||||
|
||||
/**
|
||||
* APIProperty: panMapIfOutOfView
|
||||
* {Boolean} Framed Cloud does pan into view by default.
|
||||
*/
|
||||
panMapIfOutOfView: true,
|
||||
|
||||
/**
|
||||
* Property: imageSrc
|
||||
* {String}
|
||||
*/
|
||||
imageSrc: OpenLayers.Util.getImagesLocation() + 'cloud-popup-relative.png',
|
||||
|
||||
/**
|
||||
* APIProperty: imageSize
|
||||
* {<OpenLayers.Size>}
|
||||
*/
|
||||
imageSize: new OpenLayers.Size(676, 736),
|
||||
|
||||
/**
|
||||
* APIProperty: isAlphaImage
|
||||
* {Boolean} The FramedCloud does not use an alpha image (in honor of the
|
||||
* good ie6 folk out there)
|
||||
*/
|
||||
isAlphaImage: false,
|
||||
|
||||
/**
|
||||
* APIProperty: fixedRelativePosition
|
||||
* {Boolean} The Framed Cloud popup works in just one fixed position.
|
||||
*/
|
||||
fixedRelativePosition: false,
|
||||
|
||||
/**
|
||||
* Property: positionBlocks
|
||||
* {Object} Hash of differen position blocks, keyed by relativePosition
|
||||
* two-character code string (ie "tl", "tr", "bl", "br")
|
||||
*/
|
||||
positionBlocks: {
|
||||
"tl": {
|
||||
'offset': new OpenLayers.Pixel(44, 0),
|
||||
'padding': new OpenLayers.Bounds(8, 40, 8, 9),
|
||||
'blocks': [
|
||||
{ // top-left
|
||||
size: new OpenLayers.Size('auto', 'auto'),
|
||||
anchor: new OpenLayers.Bounds(0, 51, 22, 0),
|
||||
position: new OpenLayers.Pixel(0, 0)
|
||||
},
|
||||
{ //top-right
|
||||
size: new OpenLayers.Size(22, 'auto'),
|
||||
anchor: new OpenLayers.Bounds(null, 50, 0, 0),
|
||||
position: new OpenLayers.Pixel(-638, 0)
|
||||
},
|
||||
{ //bottom-left
|
||||
size: new OpenLayers.Size('auto', 21),
|
||||
anchor: new OpenLayers.Bounds(0, 32, 80, null),
|
||||
position: new OpenLayers.Pixel(0, -629)
|
||||
},
|
||||
{ //bottom-right
|
||||
size: new OpenLayers.Size(22, 21),
|
||||
anchor: new OpenLayers.Bounds(null, 32, 0, null),
|
||||
position: new OpenLayers.Pixel(-638, -629)
|
||||
},
|
||||
{ // stem
|
||||
size: new OpenLayers.Size(81, 54),
|
||||
anchor: new OpenLayers.Bounds(null, 0, 0, null),
|
||||
position: new OpenLayers.Pixel(0, -668)
|
||||
}
|
||||
]
|
||||
},
|
||||
"tr": {
|
||||
'offset': new OpenLayers.Pixel(-45, 0),
|
||||
'padding': new OpenLayers.Bounds(8, 40, 8, 9),
|
||||
'blocks': [
|
||||
{ // top-left
|
||||
size: new OpenLayers.Size('auto', 'auto'),
|
||||
anchor: new OpenLayers.Bounds(0, 51, 22, 0),
|
||||
position: new OpenLayers.Pixel(0, 0)
|
||||
},
|
||||
{ //top-right
|
||||
size: new OpenLayers.Size(22, 'auto'),
|
||||
anchor: new OpenLayers.Bounds(null, 50, 0, 0),
|
||||
position: new OpenLayers.Pixel(-638, 0)
|
||||
},
|
||||
{ //bottom-left
|
||||
size: new OpenLayers.Size('auto', 21),
|
||||
anchor: new OpenLayers.Bounds(0, 32, 22, null),
|
||||
position: new OpenLayers.Pixel(0, -629)
|
||||
},
|
||||
{ //bottom-right
|
||||
size: new OpenLayers.Size(22, 21),
|
||||
anchor: new OpenLayers.Bounds(null, 32, 0, null),
|
||||
position: new OpenLayers.Pixel(-638, -629)
|
||||
},
|
||||
{ // stem
|
||||
size: new OpenLayers.Size(81, 54),
|
||||
anchor: new OpenLayers.Bounds(0, 0, null, null),
|
||||
position: new OpenLayers.Pixel(-215, -668)
|
||||
}
|
||||
]
|
||||
},
|
||||
"bl": {
|
||||
'offset': new OpenLayers.Pixel(45, 0),
|
||||
'padding': new OpenLayers.Bounds(8, 9, 8, 40),
|
||||
'blocks': [
|
||||
{ // top-left
|
||||
size: new OpenLayers.Size('auto', 'auto'),
|
||||
anchor: new OpenLayers.Bounds(0, 21, 22, 32),
|
||||
position: new OpenLayers.Pixel(0, 0)
|
||||
},
|
||||
{ //top-right
|
||||
size: new OpenLayers.Size(22, 'auto'),
|
||||
anchor: new OpenLayers.Bounds(null, 21, 0, 32),
|
||||
position: new OpenLayers.Pixel(-638, 0)
|
||||
},
|
||||
{ //bottom-left
|
||||
size: new OpenLayers.Size('auto', 21),
|
||||
anchor: new OpenLayers.Bounds(0, 0, 22, null),
|
||||
position: new OpenLayers.Pixel(0, -629)
|
||||
},
|
||||
{ //bottom-right
|
||||
size: new OpenLayers.Size(22, 21),
|
||||
anchor: new OpenLayers.Bounds(null, 0, 0, null),
|
||||
position: new OpenLayers.Pixel(-638, -629)
|
||||
},
|
||||
{ // stem
|
||||
size: new OpenLayers.Size(81, 54),
|
||||
anchor: new OpenLayers.Bounds(null, null, 0, 0),
|
||||
position: new OpenLayers.Pixel(-101, -674)
|
||||
}
|
||||
]
|
||||
},
|
||||
"br": {
|
||||
'offset': new OpenLayers.Pixel(-44, 0),
|
||||
'padding': new OpenLayers.Bounds(8, 9, 8, 40),
|
||||
'blocks': [
|
||||
{ // top-left
|
||||
size: new OpenLayers.Size('auto', 'auto'),
|
||||
anchor: new OpenLayers.Bounds(0, 21, 22, 32),
|
||||
position: new OpenLayers.Pixel(0, 0)
|
||||
},
|
||||
{ //top-right
|
||||
size: new OpenLayers.Size(22, 'auto'),
|
||||
anchor: new OpenLayers.Bounds(null, 21, 0, 32),
|
||||
position: new OpenLayers.Pixel(-638, 0)
|
||||
},
|
||||
{ //bottom-left
|
||||
size: new OpenLayers.Size('auto', 21),
|
||||
anchor: new OpenLayers.Bounds(0, 0, 22, null),
|
||||
position: new OpenLayers.Pixel(0, -629)
|
||||
},
|
||||
{ //bottom-right
|
||||
size: new OpenLayers.Size(22, 21),
|
||||
anchor: new OpenLayers.Bounds(null, 0, 0, null),
|
||||
position: new OpenLayers.Pixel(-638, -629)
|
||||
},
|
||||
{ // stem
|
||||
size: new OpenLayers.Size(81, 54),
|
||||
anchor: new OpenLayers.Bounds(0, null, null, 0),
|
||||
position: new OpenLayers.Pixel(-311, -674)
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* APIProperty: minSize
|
||||
* {<OpenLayers.Size>}
|
||||
*/
|
||||
minSize: new OpenLayers.Size(105, 10),
|
||||
|
||||
/**
|
||||
* APIProperty: maxSize
|
||||
* {<OpenLayers.Size>}
|
||||
*/
|
||||
maxSize: new OpenLayers.Size(600, 660),
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Popup.FramedCloud
|
||||
*
|
||||
* Parameters:
|
||||
* id - {String}
|
||||
* lonlat - {<OpenLayers.LonLat>}
|
||||
* size - {<OpenLayers.Size>}
|
||||
* contentHTML - {String}
|
||||
* anchor - {Object} Object to which we'll anchor the popup. Must expose
|
||||
* a 'size' (<OpenLayers.Size>) and 'offset' (<OpenLayers.Pixel>)
|
||||
* (Note that this is generally an <OpenLayers.Icon>).
|
||||
* closeBox - {Boolean}
|
||||
* closeBoxCallback - {Function} Function to be called on closeBox click.
|
||||
*/
|
||||
initialize:function(id, lonlat, size, contentHTML, anchor, closeBox,
|
||||
closeBoxCallback) {
|
||||
|
||||
OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments);
|
||||
this.contentDiv.className = "olFramedCloudPopupContent";
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: destroy
|
||||
*/
|
||||
destroy: function() {
|
||||
OpenLayers.Popup.Framed.prototype.destroy.apply(this, arguments);
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Popup.FramedCloud"
|
||||
});
|
||||
Reference in New Issue
Block a user