diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js index fad3d93de3..26211c0c80 100644 --- a/lib/OpenLayers/Control/LayerSwitcher.js +++ b/lib/OpenLayers/Control/LayerSwitcher.js @@ -49,37 +49,11 @@ OpenLayers.Control.LayerSwitcher.prototype = //clear out previous incarnation of LayerSwitcher tabs this.div.innerHTML = ""; - var pixel = new OpenLayers.Pixel(this.map.div.clientWidth - 200, 4); - for(i=0; i < this.map.layers.length; i++) { - - div = OpenLayers.Util.createDiv("LayerControl_layer" + i, - pixel, - new OpenLayers.Size(200, 20)); - - div.innerHTML = this.map.layers[i].name; - var visible = this.map.layers[i].getVisibility(); - if (!visible) { - div.style.backgroundColor = - OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; - div.style.color = - OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; - } else { - div.style.backgroundColor = - OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; - div.style.color = - OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; - } - div.style.padding = "5px"; - - //tag references onto the div for use in event handlers - div.layerid = i; - div.map = this.map; - - div.ondblclick = this.doubleClick.bindAsEventListener(div); - div.onmousedown = this.singleClick.bindAsEventListener(div); - this.div.appendChild(div); - - pixel = pixel.add(0, 35); + var ulCoord = new OpenLayers.Pixel(this.map.div.clientWidth - 200, 4); + for( var i = 0; i < this.map.layers.length; i++) { + var tab = this.createTab(i, ulCoord); + this.div.appendChild(tab); + ulCoord = ulCoord.add(0, 35); } return this.div; }, @@ -88,19 +62,9 @@ OpenLayers.Control.LayerSwitcher.prototype = * @param {event} evt */ singleClick: function(evt) { - var visible = this.map.layers[this.layerid].getVisibility(); - if (visible) { - this.style.backgroundColor = - OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; - this.style.color = - OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; - } else { - this.style.backgroundColor = - OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; - this.style.color = - OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; - } - this.map.layers[this.layerid].setVisibility(!visible); + var visible = this.map.layers[this.layerindex].getVisibility(); + OpenLayers.Control.LayerSwitcher.setTabActivation(this, !visible); + this.map.layers[this.layerindex].setVisibility(!visible); Event.stop(evt); }, @@ -111,6 +75,59 @@ OpenLayers.Control.LayerSwitcher.prototype = Event.stop(evt); }, + /** + * @private + * + * @param {int} index + * @param {OpenLayers.Pixel} ulCoord + * + * @returns New tab (div) with layer information inside + * @type DOMElement + */ + createTab: function(index, ulCoord) { + + var layer = this.map.layers[index]; + + var divID = "LayerSwitcher_" + layer.name + "_Tab"; + var div = OpenLayers.Util.createDiv(divID, + ulCoord, + new OpenLayers.Size(200, 20)); + + div.innerHTML = layer.name; + div.style.padding = "5px"; + + //add references onto the div for use in event handlers + div.layerindex = index; + div.map = this.map; + + div.ondblclick = this.doubleClick.bindAsEventListener(div); + div.onmousedown = this.singleClick.bindAsEventListener(div); + + OpenLayers.Control.LayerSwitcher.setTabActivation(div, + layer.getVisibility()); + + return div; + }, + + /** @type String */ CLASS_NAME: "OpenLayers.Control.LayerSwitcher" }); + + +/** +* @private +* +* @param {bool} +*/ +OpenLayers.Control.LayerSwitcher.setTabActivation = function(div, activate) { + + div.style.backgroundColor = (activate) ? + OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR + : OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR; + + div.style.color = (activate) ? + OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR + : OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR; +}; +