diff --git a/lib/OpenLayers/Control/MouseDefaults.js b/lib/OpenLayers/Control/MouseDefaults.js index e501c26aea..493440bf3f 100644 --- a/lib/OpenLayers/Control/MouseDefaults.js +++ b/lib/OpenLayers/Control/MouseDefaults.js @@ -30,15 +30,16 @@ OpenLayers.Control.MouseDefaults.prototype = this.mouseDragStart = evt.xy.copyOf(); if (evt.shiftKey) { this.map.div.style.cursor = "crosshair"; - this.zoomBox = OpenLayers.Util.createDiv('zoomBox'); - this.zoomBox.style.border = '2px solid red'; + this.zoomBox = OpenLayers.Util.createDiv('zoomBox', + this.mouseDragStart, + null, + null, + "absolute", + "2px solid red"); this.zoomBox.style.backgroundColor = "white"; this.zoomBox.style.filter = "alpha(opacity=50)"; // IE 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.top=this.mouseDragStart.y; - this.zoomBox.style.left=this.mouseDragStart.x; this.map.viewPortDiv.appendChild(this.zoomBox); } else { this.map.div.style.cursor = "move"; diff --git a/lib/OpenLayers/Control/PanZoom.js b/lib/OpenLayers/Control/PanZoom.js index de54668d00..7781ddd54e 100644 --- a/lib/OpenLayers/Control/PanZoom.js +++ b/lib/OpenLayers/Control/PanZoom.js @@ -45,8 +45,8 @@ OpenLayers.Control.PanZoom.prototype = var imgLocation = OpenLayers.Util.getImagesLocation() + img; // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz); 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 this.div.appendChild(btn); diff --git a/lib/OpenLayers/Control/PanZoomBar.js b/lib/OpenLayers/Control/PanZoomBar.js index b398c39815..2d4635f98c 100644 --- a/lib/OpenLayers/Control/PanZoomBar.js +++ b/lib/OpenLayers/Control/PanZoomBar.js @@ -75,10 +75,10 @@ OpenLayers.Control.PanZoomBar.prototype = div.style.height = sz.h; } else { div = OpenLayers.Util.createDiv( - 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, - centered, - sz); - div.style.backgroundImage = "url("+imgLocation+"zoombar.png)"; + 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, + centered, + sz, + imgLocation+"zoombar.png"); } this.divEvents = new OpenLayers.Events(this, div); this.divEvents.register("mousedown", this, this.divClick); diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index 96ada8dbbc..d95b2ba5ee 100644 --- a/lib/OpenLayers/Map.js +++ b/lib/OpenLayers/Map.js @@ -68,17 +68,17 @@ OpenLayers.Map.prototype = { this.div = div = $(div); // the viewPortDiv is the outermost div we modify - this.viewPortDiv = OpenLayers.Util.createDiv( - div.id + "_OpenLayers_ViewPort" ); + var id = div.id + "_OpenLayers_ViewPort"; + this.viewPortDiv = OpenLayers.Util.createDiv(id, null, null, null, + "relative", null, + "hidden"); this.viewPortDiv.style.width = "100%"; this.viewPortDiv.style.height = "100%"; - this.viewPortDiv.style.overflow = "hidden"; - this.viewPortDiv.style.position = "relative"; this.div.appendChild(this.viewPortDiv); // the layerContainerDiv is the one that holds all the layers - this.layerContainerDiv = OpenLayers.Util.createDiv( - div.id + "_OpenLayers_Container" ); + id = div.id + "_OpenLayers_Container"; + this.layerContainerDiv = OpenLayers.Util.createDiv(id); this.viewPortDiv.appendChild(this.layerContainerDiv); this.events = new OpenLayers.Events(this, div, this.EVENT_TYPES); diff --git a/lib/OpenLayers/Marker.js b/lib/OpenLayers/Marker.js index ae224b6874..1a6ef94fd9 100644 --- a/lib/OpenLayers/Marker.js +++ b/lib/OpenLayers/Marker.js @@ -33,9 +33,11 @@ OpenLayers.Marker.prototype = { this.icon = icon; this.lonlat = lonlat; this.data = data; - this.image = OpenLayers.Util.createImage(this.icon.url, - this.icon.size, + + this.image = OpenLayers.Util.createImage(null, null, + this.icon.size, + this.icon.url, "absolute" ); this.events = new OpenLayers.Events(this, this.image, null); diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js index c4ae7bfd1a..c6cec37d30 100644 --- a/lib/OpenLayers/Popup.js +++ b/lib/OpenLayers/Popup.js @@ -88,10 +88,8 @@ OpenLayers.Popup.prototype = { } if (this.div == null) { - this.div = OpenLayers.Util.createDiv(this.id + "_div", - null, - null, - "hidden"); + this.div = OpenLayers.Util.createDiv(this.id + "_div", null, null, + null, null, null, "hidden"); } this.setSize(); this.setBackgroundColor(); diff --git a/lib/OpenLayers/Popup/AnchoredBubble.js b/lib/OpenLayers/Popup/AnchoredBubble.js index 9eacc2b3a4..12385ab01e 100644 --- a/lib/OpenLayers/Popup/AnchoredBubble.js +++ b/lib/OpenLayers/Popup/AnchoredBubble.js @@ -41,14 +41,10 @@ OpenLayers.Popup.AnchoredBubble.prototype = var contentSize = this.size.copyOf(); contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE); - this.contentDiv = OpenLayers.Util.createDiv( - this.div.id + "-contentDiv", - null, - contentSize, - "auto", - null, - "relative"); - + var id = this.div.id + "-contentDiv"; + this.contentDiv = OpenLayers.Util.createDiv(id, null, contentSize, + null, "relative", null, + "auto"); this.div.appendChild(this.contentDiv); this.setContentHTML(); diff --git a/lib/OpenLayers/Tile/Image.js b/lib/OpenLayers/Tile/Image.js index 11f36d48cb..902cf8b531 100644 --- a/lib/OpenLayers/Tile/Image.js +++ b/lib/OpenLayers/Tile/Image.js @@ -25,9 +25,10 @@ OpenLayers.Tile.Image.prototype = */ draw:function() { OpenLayers.Tile.prototype.draw.apply(this, arguments); - this.img = OpenLayers.Util.createImage(this.url, - this.size, + this.img = OpenLayers.Util.createImage(null, null, + this.size, + this.url, "absolute"); }, diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index da7e65bb32..338fadc9b8 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -570,103 +570,111 @@ Array.prototype.indexOf = function(element) { 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 * -* @param {String} id - HTML ID of new element, if empty something is made up -* @param {OpenLayers.Pixel} px - x,y point if missing 0,0 is used -* @param {OpenLayers.Size} sz - size else size of parent is used -* @param {String} overflow - behavior of clipped/overflow content -* @param {String} img - background image url -* @param {String} position - relative or absolute? +* @param {String} id +* @param {OpenLayers.Pixel} px +* @param {OpenLayers.Size} sz +* @param {String} imgURL +* @param {String} position +* @param {String} border +* @param {String} overflow * * @returns A DOM Div created with the specified attributes. * @type DOMElement */ -OpenLayers.Util.createDiv = function(id, px, sz, overflow, img, position) { - var x,y,w,h; - - if (px) { - x = px.x; - y = px.y; - } else { - x = y = 0; - } - - if (!position) { - position = "absolute"; - } - - if (!id) { - id = "OpenLayersDiv" + (Math.random() * 10000 % 10000); - } +OpenLayers.Util.createDiv = function(id, px, sz, imgURL, position, + border, overflow) { var dom = document.createElement('div'); - dom.id = id; - if (overflow) { - 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; + + //set specific properties dom.style.padding = "0"; dom.style.margin = "0"; dom.style.cursor = "inherit"; - - if (img) { - dom.style.backgroundImage = 'url(' + img + ')'; + if (imgURL) { + dom.style.backgroundImage = 'url(' + imgURL + ')'; } + //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; }; /** -* @param {String} img - src URL -* @param {OpenLayers.Size} sz -* @param {OpenLayers.Pixel} xy -* @param {String} position * @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. * @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"); - if (id) { - image.id = 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; - } + //set special properties + image.style.alt = id; image.style.cursor = "inherit"; - if (img) { - image.src = img; - } 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; }; @@ -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 {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 * needed for transparency in IE, it is added. * @type DOMElement */ -OpenLayers.Util.createAlphaImageDiv = function(imgURL, sz, px, position, - id, border) { - +OpenLayers.Util.createAlphaImageDiv = function(id, px, sz, imgURL, + position, border) { + var div = OpenLayers.Util.createDiv(id, px, sz); - var img = OpenLayers.Util.createImage(imgURL, sz, null, "relative", - id + "_innerImage", border); + var img = OpenLayers.Util.createImage(id + "_innerImage", null, sz, + imgURL, "relative", border); div.appendChild(img); if (OpenLayers.Util.alphaHack()) { diff --git a/tests/test_Util.html b/tests/test_Util.html index 90790aaf6f..19da2ea9ec 100644 --- a/tests/test_Util.html +++ b/tests/test_Util.html @@ -53,16 +53,17 @@ } function test_04_Util_createDiv(t) { - t.plan( 18 ); + t.plan( 20 ); var id = "boo"; var px = new OpenLayers.Pixel(5,5); var sz = new OpenLayers.Size(10,10); - var overflow = "hidden"; var img = "http://www.openlayers.org/images/OpenLayers.trac.png"; 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) 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.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.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 var div = OpenLayers.Util.createDiv(); @@ -87,16 +90,17 @@ else t.ok( div instanceof HTMLDivElement, "createDiv creates a valid HTMLDivElement" ); t.ok( (div.id != ""), "div.id set correctly"); - // the next two tests return "0pt" in Mozilla, "0px" in IE - t.eq( div.style.left.indexOf("0p"), 0, "div.style.left set correctly"); - t.eq( div.style.top.indexOf("0p"), 0, "div.style.top set correctly"); + t.eq(div.style.left, "", "div.style.left set correctly"); + t.eq(div.style.top, "", "div.style.top 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.overflow, "", "div.style.overflow set correctly"); t.eq(div.style.backgroundImage, "", "div.style.backgroundImage 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 position = "absolute"; 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) 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.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.style.position, position, "image.style.positionset correctly"); @@ -134,14 +138,14 @@ t.ok( true, "skipping element test outside of Mozilla"); else 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.top, "", "image.style.top set correctly"); t.eq( image.style.width, "", "image.style.width 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.style.position, "relative", "image.style.positionset correctly"); @@ -185,9 +189,9 @@ var xy = new OpenLayers.Pixel(5,5); var position = "absolute"; 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) 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.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"); 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"); + + } // -->