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

theme LayerSwitcher with CSS, r=ahocevar, p=tmcw,me (closes #1632)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9767 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2009-10-29 15:45:27 +00:00
parent ab42111aac
commit 6839605b0f
4 changed files with 96 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
lib/OpenLayers/Control/LayerSwitcher.js
View File

@@ -22,11 +22,19 @@
OpenLayers.Control.LayerSwitcher =
OpenLayers.Class(OpenLayers.Control, {
/**
* Property: activeColor
* {String}
/**
* APIProperty: roundedCorner
* {Boolean} If true the Rico library is used for rounding the corners
* of the layer switcher div, defaults to true.
*/
activeColor: "darkblue",
roundedCorner: true,
/**
* APIProperty: roundedCornerColor
* {String} The color of the rounded corners, only applies if roundedCorner
* is true, defaults to "darkblue".
*/
roundedCornerColor: "darkblue",
/**
* Property: layerStates
@@ -305,6 +313,7 @@ OpenLayers.Control.LayerSwitcher =
// create span
var labelSpan = document.createElement("span");
OpenLayers.Element.addClass(labelSpan, "labelSpan")
if (!baseLayer && !layer.inRange) {
labelSpan.style.color = "gray";
}
@@ -419,8 +428,9 @@ OpenLayers.Control.LayerSwitcher =
*/
maximizeControl: function(e) {
//HACK HACK HACK - find a way to auto-size this layerswitcher
this.div.style.width = "20em";
// set the div's width and height to empty values, so
// the div dimensions can be controlled by CSS
this.div.style.width = "";
this.div.style.height = "";
this.showControls(false);
@@ -440,6 +450,10 @@ OpenLayers.Control.LayerSwitcher =
*/
minimizeControl: function(e) {
// to minimize the control we set its div's width
// and height to 0px, we cannot just set "display"
// to "none" because it would hide the maximize
// div
this.div.style.width = "0px";
this.div.style.height = "0px";
@@ -473,19 +487,7 @@ OpenLayers.Control.LayerSwitcher =
loadContents: function() {
//configure main div
this.div.style.position = "absolute";
this.div.style.top = "25px";
this.div.style.right = "0px";
this.div.style.left = "";
this.div.style.fontFamily = "sans-serif";
this.div.style.fontWeight = "bold";
this.div.style.marginTop = "3px";
this.div.style.marginLeft = "3px";
this.div.style.marginBottom = "3px";
this.div.style.fontSize = "smaller";
this.div.style.color = "white";
this.div.style.backgroundColor = "transparent";
OpenLayers.Event.observe(this.div, "mouseup",
OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
OpenLayers.Event.observe(this.div, "click",
@@ -494,44 +496,24 @@ OpenLayers.Control.LayerSwitcher =
OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
// layers list div
this.layersDiv = document.createElement("div");
this.layersDiv.id = this.id + "_layersDiv";
this.layersDiv.style.paddingTop = "5px";
this.layersDiv.style.paddingLeft = "10px";
this.layersDiv.style.paddingBottom = "5px";
this.layersDiv.style.paddingRight = "75px";
this.layersDiv.style.backgroundColor = this.activeColor;
// had to set width/height to get transparency in IE to work.
// thanks -- http://jszen.blogspot.com/2005/04/ie6-opacity-filter-caveat.html
//
this.layersDiv.style.width = "100%";
this.layersDiv.style.height = "100%";
OpenLayers.Element.addClass(this.layersDiv, "layersDiv");
this.baseLbl = document.createElement("div");
this.baseLbl.innerHTML = OpenLayers.i18n("baseLayer");
this.baseLbl.style.marginTop = "3px";
this.baseLbl.style.marginLeft = "3px";
this.baseLbl.style.marginBottom = "3px";
OpenLayers.Element.addClass(this.baseLbl, "baseLbl");
this.baseLayersDiv = document.createElement("div");
this.baseLayersDiv.style.paddingLeft = "10px";
/*OpenLayers.Event.observe(this.baseLayersDiv, "click",
OpenLayers.Function.bindAsEventListener(this.onLayerClick, this));
*/
OpenLayers.Element.addClass(this.baseLayersDiv, "baseLayersDiv");
this.dataLbl = document.createElement("div");
this.dataLbl.innerHTML = OpenLayers.i18n("overlays");
this.dataLbl.style.marginTop = "3px";
this.dataLbl.style.marginLeft = "3px";
this.dataLbl.style.marginBottom = "3px";
OpenLayers.Element.addClass(this.baseLbl, "dataLbl");
this.dataLayersDiv = document.createElement("div");
this.dataLayersDiv.style.paddingLeft = "10px";
OpenLayers.Element.addClass(this.dataLayersDiv, "dataLayersDiv");
if (this.ascending) {
this.layersDiv.appendChild(this.baseLbl);
@@ -547,12 +529,15 @@ OpenLayers.Control.LayerSwitcher =
this.div.appendChild(this.layersDiv);
OpenLayers.Rico.Corner.round(this.div, {corners: "tl bl",
bgColor: "transparent",
color: this.activeColor,
blend: false});
OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);
if(this.roundedCorner) {
OpenLayers.Rico.Corner.round(this.div, {
corners: "tl bl",
bgColor: "transparent",
color: this.roundedCornerColor,
blend: false
});
OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);
}
var imgLocation = OpenLayers.Util.getImagesLocation();
var sz = new OpenLayers.Size(18,18);
@@ -565,9 +550,7 @@ OpenLayers.Control.LayerSwitcher =
sz,
img,
"absolute");
this.maximizeDiv.style.top = "5px";
this.maximizeDiv.style.right = "0px";
this.maximizeDiv.style.left = "";
OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv");
this.maximizeDiv.style.display = "none";
OpenLayers.Event.observe(this.maximizeDiv, "click",
OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
@@ -584,9 +567,7 @@ OpenLayers.Control.LayerSwitcher =
sz,
img,
"absolute");
this.minimizeDiv.style.top = "5px";
this.minimizeDiv.style.right = "0px";
this.minimizeDiv.style.left = "";
OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv");
this.minimizeDiv.style.display = "none";
OpenLayers.Event.observe(this.minimizeDiv, "click",
OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)