ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed around the order of arguments for createImage, createDiv, and createAlphaImage. bubbled out helper function OpenLayers.Util.modifyDOMElement() to handle common mods. Official order now is: id, px, sz, imgURL, position, border[, overflow]

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@384 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2006-05-26 01:23:11 +00:00
parent 0e7e831f0d
commit f115b797a3
10 changed files with 165 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/OpenLayers/Control/MouseDefaults.js
View File

@@ -30,15 +30,16 @@ OpenLayers.Control.MouseDefaults.prototype =
this.mouseDragStart = evt.xy.copyOf(); this.mouseDragStart = evt.xy.copyOf();
if (evt.shiftKey) { if (evt.shiftKey) {
this.map.div.style.cursor = "crosshair"; this.map.div.style.cursor = "crosshair";
this.zoomBox = OpenLayers.Util.createDiv('zoomBox'); this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
this.zoomBox.style.border = '2px solid red'; this.mouseDragStart,
null,
null,
"absolute",
"2px solid red");
this.zoomBox.style.backgroundColor = "white"; this.zoomBox.style.backgroundColor = "white";
this.zoomBox.style.filter = "alpha(opacity=50)"; // IE this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
this.zoomBox.style.opacity = "0.50"; this.zoomBox.style.opacity = "0.50";
this.zoomBox.style.position="absolute";
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1; this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
this.zoomBox.style.top=this.mouseDragStart.y;
this.zoomBox.style.left=this.mouseDragStart.x;
this.map.viewPortDiv.appendChild(this.zoomBox); this.map.viewPortDiv.appendChild(this.zoomBox);
} else { } else {
this.map.div.style.cursor = "move"; this.map.div.style.cursor = "move";

4
lib/OpenLayers/Control/PanZoom.js
View File

@@ -45,8 +45,8 @@ OpenLayers.Control.PanZoom.prototype =
var imgLocation = OpenLayers.Util.getImagesLocation() + img; var imgLocation = OpenLayers.Util.getImagesLocation() + img;
// var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz); // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
var btn = OpenLayers.Util.createAlphaImageDiv( var btn = OpenLayers.Util.createAlphaImageDiv(
imgLocation, sz, xy, "absolute", "OpenLayers_Control_PanZoom_" + id,
"OpenLayers_Control_PanZoom_" + id ); xy, sz, imgLocation, "absolute");
//we want to add the outer div //we want to add the outer div
this.div.appendChild(btn); this.div.appendChild(btn);

8
lib/OpenLayers/Control/PanZoomBar.js
View File

@@ -75,10 +75,10 @@ OpenLayers.Control.PanZoomBar.prototype =
div.style.height = sz.h; div.style.height = sz.h;
} else { } else {
div = OpenLayers.Util.createDiv( div = OpenLayers.Util.createDiv(
'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
centered, centered,
sz); sz,
div.style.backgroundImage = "url("+imgLocation+"zoombar.png)"; imgLocation+"zoombar.png");
} }
this.divEvents = new OpenLayers.Events(this, div); this.divEvents = new OpenLayers.Events(this, div);
this.divEvents.register("mousedown", this, this.divClick); this.divEvents.register("mousedown", this, this.divClick);

12
lib/OpenLayers/Map.js
View File

@@ -68,17 +68,17 @@ OpenLayers.Map.prototype = {
this.div = div = $(div); this.div = div = $(div);
// the viewPortDiv is the outermost div we modify // the viewPortDiv is the outermost div we modify
this.viewPortDiv = OpenLayers.Util.createDiv( var id = div.id + "_OpenLayers_ViewPort";
div.id + "_OpenLayers_ViewPort" ); this.viewPortDiv = OpenLayers.Util.createDiv(id, null, null, null,
"relative", null,
"hidden");
this.viewPortDiv.style.width = "100%"; this.viewPortDiv.style.width = "100%";
this.viewPortDiv.style.height = "100%"; this.viewPortDiv.style.height = "100%";
this.viewPortDiv.style.overflow = "hidden";
this.viewPortDiv.style.position = "relative";
this.div.appendChild(this.viewPortDiv); this.div.appendChild(this.viewPortDiv);
// the layerContainerDiv is the one that holds all the layers // the layerContainerDiv is the one that holds all the layers
this.layerContainerDiv = OpenLayers.Util.createDiv( id = div.id + "_OpenLayers_Container";
div.id + "_OpenLayers_Container" ); this.layerContainerDiv = OpenLayers.Util.createDiv(id);
this.viewPortDiv.appendChild(this.layerContainerDiv); this.viewPortDiv.appendChild(this.layerContainerDiv);
this.events = new OpenLayers.Events(this, div, this.EVENT_TYPES); this.events = new OpenLayers.Events(this, div, this.EVENT_TYPES);

6
lib/OpenLayers/Marker.js
View File

@@ -33,9 +33,11 @@ OpenLayers.Marker.prototype = {
this.icon = icon; this.icon = icon;
this.lonlat = lonlat; this.lonlat = lonlat;
this.data = data; this.data = data;
this.image = OpenLayers.Util.createImage(this.icon.url,
this.icon.size, this.image = OpenLayers.Util.createImage(null,
null, null,
this.icon.size,
this.icon.url,
"absolute" "absolute"
); );
this.events = new OpenLayers.Events(this, this.image, null); this.events = new OpenLayers.Events(this, this.image, null);

6
lib/OpenLayers/Popup.js
View File

@@ -88,10 +88,8 @@ OpenLayers.Popup.prototype = {
} }
if (this.div == null) { if (this.div == null) {
this.div = OpenLayers.Util.createDiv(this.id + "_div", this.div = OpenLayers.Util.createDiv(this.id + "_div", null, null,
null, null, null, null, "hidden");
null,
"hidden");
} }
this.setSize(); this.setSize();
this.setBackgroundColor(); this.setBackgroundColor();

12
lib/OpenLayers/Popup/AnchoredBubble.js
View File

@@ -41,14 +41,10 @@ OpenLayers.Popup.AnchoredBubble.prototype =
var contentSize = this.size.copyOf(); var contentSize = this.size.copyOf();
contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE); contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
this.contentDiv = OpenLayers.Util.createDiv( var id = this.div.id + "-contentDiv";
this.div.id + "-contentDiv", this.contentDiv = OpenLayers.Util.createDiv(id, null, contentSize,
null, null, "relative", null,
contentSize, "auto");
"auto",
null,
"relative");
this.div.appendChild(this.contentDiv); this.div.appendChild(this.contentDiv);
this.setContentHTML(); this.setContentHTML();

5
lib/OpenLayers/Tile/Image.js
View File

@@ -25,9 +25,10 @@ OpenLayers.Tile.Image.prototype =
*/ */
draw:function() { draw:function() {
OpenLayers.Tile.prototype.draw.apply(this, arguments); OpenLayers.Tile.prototype.draw.apply(this, arguments);
this.img = OpenLayers.Util.createImage(this.url, this.img = OpenLayers.Util.createImage(null,
this.size,
null, null,
this.size,
this.url,
"absolute"); "absolute");
}, },

166
lib/OpenLayers/Util.js
View File

@@ -570,103 +570,111 @@ Array.prototype.indexOf = function(element) {
return index; return index;
} }
/**
* @param {String} id
* @param {OpenLayers.Pixel} px
* @param {OpenLayers.Size} sz
* @param {String} position
* @param {String} border
* @param {String} overflow
*/
OpenLayers.Util.modifyDOMElement = function(element, id, px, sz, position,
border, overflow) {
if (id) {
element.id = id;
}
if (px) {
element.style.left = px.x;
element.style.top = px.y;
}
if (sz) {
element.style.width = sz.w + "px";
element.style.height = sz.h + "px";
}
if (position) {
element.style.position = position;
}
if (border) {
element.style.border = border;
}
if (overflow) {
element.style.overflow = overflow;
}
};
/** /**
* zIndex is NOT set * zIndex is NOT set
* *
* @param {String} id - HTML ID of new element, if empty something is made up * @param {String} id
* @param {OpenLayers.Pixel} px - x,y point if missing 0,0 is used * @param {OpenLayers.Pixel} px
* @param {OpenLayers.Size} sz - size else size of parent is used * @param {OpenLayers.Size} sz
* @param {String} overflow - behavior of clipped/overflow content * @param {String} imgURL
* @param {String} img - background image url * @param {String} position
* @param {String} position - relative or absolute? * @param {String} border
* @param {String} overflow
* *
* @returns A DOM Div created with the specified attributes. * @returns A DOM Div created with the specified attributes.
* @type DOMElement * @type DOMElement
*/ */
OpenLayers.Util.createDiv = function(id, px, sz, overflow, img, position) { OpenLayers.Util.createDiv = function(id, px, sz, imgURL, position,
var x,y,w,h; border, overflow) {
if (px) {
x = px.x;
y = px.y;
} else {
x = y = 0;
}
if (!position) {
position = "absolute";
}
if (!id) {
id = "OpenLayersDiv" + (Math.random() * 10000 % 10000);
}
var dom = document.createElement('div'); var dom = document.createElement('div');
dom.id = id;
if (overflow) { //set specific properties
dom.style.overflow = overflow;
}
if (sz) {
dom.style.width = sz.w + "px";
dom.style.height = sz.h + "px";
}
dom.style.position = position;
dom.style.top = y;
dom.style.left = x;
dom.style.padding = "0"; dom.style.padding = "0";
dom.style.margin = "0"; dom.style.margin = "0";
dom.style.cursor = "inherit"; dom.style.cursor = "inherit";
if (imgURL) {
if (img) { dom.style.backgroundImage = 'url(' + imgURL + ')';
dom.style.backgroundImage = 'url(' + img + ')';
} }
//set generic properties
if (!id) {
id = "OpenLayersDiv" + (Math.random() * 10000 % 10000);
}
if (!position) {
position = "absolute";
}
OpenLayers.Util.modifyDOMElement(dom, id, px, sz,
position, border, overflow);
return dom; return dom;
}; };
/** /**
* @param {String} img - src URL
* @param {OpenLayers.Size} sz
* @param {OpenLayers.Pixel} xy
* @param {String} position
* @param {String} id * @param {String} id
* @param {int} border * @param {OpenLayers.Pixel} px
* @param {OpenLayers.Size} sz
* @param {String} imgURL
* @param {String} position
* @param {String} border
* *
* @returns A DOM Image created with the specified attributes. * @returns A DOM Image created with the specified attributes.
* @type DOMElement * @type DOMElement
*/ */
OpenLayers.Util.createImage = function(img, sz, xy, position, id, border) { OpenLayers.Util.createImage = function(id, px, sz, imgURL, position, border) {
image = document.createElement("img"); image = document.createElement("img");
if (id) { //set special properties
image.id = id; image.style.alt = id;
image.style.alt = id;
}
if (xy) {
image.style.left = xy.x;
image.style.top = xy.y;
}
if (sz) {
image.style.width = sz.w;
image.style.height = sz.h;
}
if (position) {
image.style.position = position;
} else {
image.style.position = "relative";
}
if (border) {
image.style.border = border + "px solid";
} else {
image.style.border = 0;
}
image.style.cursor = "inherit"; image.style.cursor = "inherit";
if (img) {
image.src = img;
}
image.galleryImg = "no"; image.galleryImg = "no";
if (imgURL) {
image.src = imgURL;
}
//set generic properties
if (!id) {
id = "OpenLayersDiv" + (Math.random() * 10000 % 10000);
}
if (!position) {
position = "relative";
}
OpenLayers.Util.modifyDOMElement(image, id, px, sz, position, border);
return image; return image;
}; };
@@ -679,23 +687,23 @@ OpenLayers.Util.alphaHack = function() {
} }
/** /**
* @param {String} imgURL
* @param {OpenLayers.Size} sz
* @param {OpenLayers.Pixel} px
* @param {String} position
* @param {String} id * @param {String} id
* @param {int} border * @param {OpenLayers.Pixel} px
* @param {OpenLayers.Size} sz
* @param {String} imgURL
* @param {String} position
* @param {String} border
* *
* @returns A DOM Div created with a DOM Image inside it. If the hack is * @returns A DOM Div created with a DOM Image inside it. If the hack is
* needed for transparency in IE, it is added. * needed for transparency in IE, it is added.
* @type DOMElement * @type DOMElement
*/ */
OpenLayers.Util.createAlphaImageDiv = function(imgURL, sz, px, position, OpenLayers.Util.createAlphaImageDiv = function(id, px, sz, imgURL,
id, border) { position, border) {
var div = OpenLayers.Util.createDiv(id, px, sz); var div = OpenLayers.Util.createDiv(id, px, sz);
var img = OpenLayers.Util.createImage(imgURL, sz, null, "relative", var img = OpenLayers.Util.createImage(id + "_innerImage", null, sz,
id + "_innerImage", border); imgURL, "relative", border);
div.appendChild(img); div.appendChild(img);
if (OpenLayers.Util.alphaHack()) { if (OpenLayers.Util.alphaHack()) {

63
tests/test_Util.html
View File

@@ -53,16 +53,17 @@
} }
function test_04_Util_createDiv(t) { function test_04_Util_createDiv(t) {
t.plan( 18 ); t.plan( 20 );
var id = "boo"; var id = "boo";
var px = new OpenLayers.Pixel(5,5); var px = new OpenLayers.Pixel(5,5);
var sz = new OpenLayers.Size(10,10); var sz = new OpenLayers.Size(10,10);
var overflow = "hidden";
var img = "http://www.openlayers.org/images/OpenLayers.trac.png"; var img = "http://www.openlayers.org/images/OpenLayers.trac.png";
var position = "absolute"; var position = "absolute";
var border = "13px solid red";
var overflow = "hidden";
var div = OpenLayers.Util.createDiv(id, px, sz, overflow, img, position); var div = OpenLayers.Util.createDiv(id, px, sz, img, position, border, overflow);
if (!isMozilla) if (!isMozilla)
t.ok( true, "skipping element test outside of Mozilla"); t.ok( true, "skipping element test outside of Mozilla");
@@ -75,9 +76,11 @@
t.eq( div.style.width, sz.w + "px", "div.style.width set correctly"); t.eq( div.style.width, sz.w + "px", "div.style.width set correctly");
t.eq( div.style.height, sz.h + "px", "div.style.height set correctly"); t.eq( div.style.height, sz.h + "px", "div.style.height set correctly");
t.eq( div.style.overflow, overflow, "div.style.overflow set correctly");
t.eq( div.style.backgroundImage, "url(" + img + ")", "div.style.backgroundImage correctly"); t.eq( div.style.backgroundImage, "url(" + img + ")", "div.style.backgroundImage correctly");
t.eq( div.style.position, position, "div.style.positionset correctly"); t.eq( div.style.position, position, "div.style.positionset correctly");
t.ok( (div.style.border.indexOf(border) != -1), "div.style.border set correctly");
t.eq( div.style.overflow, overflow, "div.style.overflow set correctly");
//test defaults //test defaults
var div = OpenLayers.Util.createDiv(); var div = OpenLayers.Util.createDiv();
@@ -87,16 +90,17 @@
else else
t.ok( div instanceof HTMLDivElement, "createDiv creates a valid HTMLDivElement" ); t.ok( div instanceof HTMLDivElement, "createDiv creates a valid HTMLDivElement" );
t.ok( (div.id != ""), "div.id set correctly"); t.ok( (div.id != ""), "div.id set correctly");
// the next two tests return "0pt" in Mozilla, "0px" in IE t.eq(div.style.left, "", "div.style.left set correctly");
t.eq( div.style.left.indexOf("0p"), 0, "div.style.left set correctly"); t.eq(div.style.top, "", "div.style.top set correctly");
t.eq( div.style.top.indexOf("0p"), 0, "div.style.top set correctly");
t.eq( div.style.width, "", "div.style.width set correctly"); t.eq( div.style.width, "", "div.style.width set correctly");
t.eq( div.style.height, "", "div.style.height set correctly"); t.eq( div.style.height, "", "div.style.height set correctly");
t.eq(div.style.overflow, "", "div.style.overflow set correctly");
t.eq(div.style.backgroundImage, "", "div.style.backgroundImage correctly"); t.eq(div.style.backgroundImage, "", "div.style.backgroundImage correctly");
t.eq( div.style.position, "absolute", "div.style.positionset correctly"); t.eq( div.style.position, "absolute", "div.style.positionset correctly");
t.eq( div.style.border, "", "div.style.border set correctly");
t.eq(div.style.overflow, "", "div.style.overflow set correctly");
} }
@@ -108,9 +112,9 @@
var xy = new OpenLayers.Pixel(5,5); var xy = new OpenLayers.Pixel(5,5);
var position = "absolute"; var position = "absolute";
var id = "boo"; var id = "boo";
var border = "1"; var border = "1px solid red";
var image = OpenLayers.Util.createImage(img, sz, xy, position, id, border); var image = OpenLayers.Util.createImage(id, xy, sz, img, position, border);
if (!isMozilla) if (!isMozilla)
t.ok( true, "skipping element test outside of Mozilla"); t.ok( true, "skipping element test outside of Mozilla");
@@ -123,7 +127,7 @@
t.eq( image.style.width, sz.w + "px", "image.style.width set correctly"); t.eq( image.style.width, sz.w + "px", "image.style.width set correctly");
t.eq( image.style.height, sz.h + "px", "image.style.height set correctly"); t.eq( image.style.height, sz.h + "px", "image.style.height set correctly");
t.ok( image.style.border.startsWith(border + "px"), "image.style.border set correctly"); t.ok( (image.style.border.indexOf(border) != -1), "image.style.border set correctly");
t.eq( image.src, img, "image.style.backgroundImage correctly"); t.eq( image.src, img, "image.style.backgroundImage correctly");
t.eq( image.style.position, position, "image.style.positionset correctly"); t.eq( image.style.position, position, "image.style.positionset correctly");
@@ -134,14 +138,14 @@
t.ok( true, "skipping element test outside of Mozilla"); t.ok( true, "skipping element test outside of Mozilla");
else else
t.ok( image instanceof HTMLImageElement, "createDiv creates a valid HTMLDivElement" ); t.ok( image instanceof HTMLImageElement, "createDiv creates a valid HTMLDivElement" );
t.eq( image.id, "", "image.id set correctly"); t.ok( (image.id != ""), "image.id set to something");
t.eq( image.style.left, "", "image.style.left set correctly"); t.eq( image.style.left, "", "image.style.left set correctly");
t.eq( image.style.top, "", "image.style.top set correctly"); t.eq( image.style.top, "", "image.style.top set correctly");
t.eq( image.style.width, "", "image.style.width set correctly"); t.eq( image.style.width, "", "image.style.width set correctly");
t.eq( image.style.height, "", "image.style.height set correctly"); t.eq( image.style.height, "", "image.style.height set correctly");
t.ok(image.style.border.startsWith("0"), "image.style.border set correctly"); t.ok((image.style.border == ""), "image.style.border set correctly");
t.eq(image.src, "", "image.style.backgroundImage correctly"); t.eq(image.src, "", "image.style.backgroundImage correctly");
t.eq( image.style.position, "relative", "image.style.positionset correctly"); t.eq( image.style.position, "relative", "image.style.positionset correctly");
@@ -185,9 +189,9 @@
var xy = new OpenLayers.Pixel(5,5); var xy = new OpenLayers.Pixel(5,5);
var position = "absolute"; var position = "absolute";
var id = "boo"; var id = "boo";
var border = "1"; var border = "1px solid red";
var imageDiv = OpenLayers.Util.createAlphaImageDiv(img, sz, xy, position, id, border); var imageDiv = OpenLayers.Util.createAlphaImageDiv(id, xy, sz, img, position, border);
if (!isMozilla) if (!isMozilla)
t.ok( true, "skipping element test outside of Mozilla"); t.ok( true, "skipping element test outside of Mozilla");
@@ -215,7 +219,7 @@
t.eq( image.style.width, sz.w + "px", "image.style.width set correctly"); t.eq( image.style.width, sz.w + "px", "image.style.width set correctly");
t.eq( image.style.height, sz.h + "px", "image.style.height set correctly"); t.eq( image.style.height, sz.h + "px", "image.style.height set correctly");
t.ok( image.style.border.startsWith(border + "px"), "image.style.border set correctly"); t.ok( (image.style.border.indexOf(border) != -1), "image.style.border set correctly");
t.eq( image.style.position, "relative", "image.style.positionset correctly"); t.eq( image.style.position, "relative", "image.style.positionset correctly");
var arVersion = navigator.appVersion.split("MSIE"); var arVersion = navigator.appVersion.split("MSIE");
@@ -243,7 +247,34 @@
} }
function test_09_Util_modifyDOMElement(t) {
t.plan( 8 );
var id = "boo";
var px = new OpenLayers.Pixel(5,5);
var sz = new OpenLayers.Size(10,10);
var position = "absolute";
var border = "1px solid red";
var overflow = "hidden";
var element = document.createElement("div");
OpenLayers.Util.modifyDOMElement(element, id, px, sz,
position, border, overflow);
t.eq( element.id, id, "element.id set correctly");
t.eq( element.style.left, px.x + "px", "element.style.left set correctly");
t.eq( element.style.top, px.y + "px", "element.style.top set correctly");
t.eq( element.style.width, sz.w + "px", "element.style.width set correctly");
t.eq( element.style.height, sz.h + "px", "element.style.height set correctly");
t.eq( element.style.position, position, "element.style.position set correctly");
t.ok( (element.style.border.indexOf(border) != -1), "element.style.border set correctly");
t.eq( element.style.overflow, overflow, "element.style.overflow set correctly");
}
// --> // -->
</script> </script>