This demonstrates use of the LayerSwitcher outside the map div. It also shows use diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js index e6913fd31f..dd67e40fcb 100644 --- a/lib/OpenLayers/Control/LayerSwitcher.js +++ b/lib/OpenLayers/Control/LayerSwitcher.js @@ -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) diff --git a/tests/Control/LayerSwitcher.html b/tests/Control/LayerSwitcher.html index 630254be22..2ea4f786d6 100644 --- a/tests/Control/LayerSwitcher.html +++ b/tests/Control/LayerSwitcher.html @@ -32,12 +32,12 @@ t.eq(control.div.style.width, "250px", "Div is not minimized when added."); control = new OpenLayers.Control.LayerSwitcher(); map.addControl(control); - t.eq(control.div.style.width, "0px", "Div is minimized when added."); + t.eq(control.div.style.width, "0px", "Div is minimized when added."); } function test_Control_LayerSwitcher_loadContents(t) { - t.plan( 5 ); + t.plan( 10 ); map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.WMS("WMS", @@ -52,14 +52,20 @@ map.addControl(control); t.ok(control.layersDiv != null, "correctly makes layers div"); + t.ok(OpenLayers.Element.hasClass(control.layersDiv, "layersDiv"), + "layers div has class layersDiv"); t.ok(control.baseLayersDiv != null, "correctly makes layers div"); + t.ok(OpenLayers.Element.hasClass(control.baseLayersDiv, "baseLayersDiv"), + "base layers div has class baseLayersDiv"); t.ok(control.dataLayersDiv != null, "correctly makes layers div"); - + t.ok(OpenLayers.Element.hasClass(control.dataLayersDiv, "dataLayersDiv"), + "data layers div has class dataLayersDiv"); t.ok(control.maximizeDiv != null, "correctly makes resize div"); + t.ok(OpenLayers.Element.hasClass(control.maximizeDiv, "maximizeDiv"), + "maximize div has class maximizeDiv"); t.ok(control.minimizeDiv != null, "correctly makes resize div"); - - - + t.ok(OpenLayers.Element.hasClass(control.minimizeDiv, "minimizeDiv"), + "minimize div has class minmizeDiv"); } diff --git a/theme/default/style.css b/theme/default/style.css index 110f23cc8f..8507105a69 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -348,3 +348,49 @@ div.olControlSaveFeaturesItemInactive { .olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { cursor: -moz-grabbing; } + +/** + * Layer switcher + */ +.olControlLayerSwitcher { + position: absolute; + top: 25px; + right: 0px; + width: 20em; + font-family: sans-serif; + font-weight: bold; + margin-top: 3px; + margin-left: 3px; + margin-bottom: 3px; + font-size: smaller; + color: white; + background-color: transparent; +} + +.olControlLayerSwitcher .layersDiv { + padding-top: 5px; + padding-left: 10px; + padding-bottom: 5px; + padding-right: 75px; + background-color: darkblue; + width: 100%; + height: 100%; +} + +.olControlLayerSwitcher .layersDiv .baseLbl, +.olControlLayerSwitcher .layersDiv .dataLbl { + margin-top: 3px; + margin-left: 3px; + margin-bottom: 3px; +} + +.olControlLayerSwitcher .layersDiv .baseLayersDiv, +.olControlLayerSwitcher .layersDiv .dataLayersDiv { + padding-left: 10px; +} + +.olControlLayerSwitcher .maximizeDiv, +.olControlLayerSwitcher .minimizeDiv { + top: 5px; + right: 0px; +}