public/lib/OpenLayers/Control/LayerSwitcher.js

   1 /* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
   2  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
   3  * text of the license. */
   4 // @require: OpenLayers/Control.js
   5 /**
   6 * @class
   7 */
   8 OpenLayers.Control.LayerSwitcher = Class.create();
   9
  10 /** color used in the UI to show a layer is active/displayed
  11 *
  12 * @final
  13 * @type String
  14 */
  15 OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR = "darkblue";
  16
  17 /** color used in the UI to show a layer is deactivated/hidden
  18 *
  19 * @final
  20 * @type String
  21 */
  22 OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR = "lightblue";
  23
  24
  25 OpenLayers.Control.LayerSwitcher.prototype =
  26   Object.extend( new OpenLayers.Control(), {
  27
  28     /** @type String */
  29     activeColor: "",
  30
  31     /** @type String */
  32     nonActiveColor: "",
  33
  34     /** @type String */
  35     mode: "checkbox",
  36
  37     /**
  38     * @constructor
  39     */
  40     initialize: function(options) {
  41         this.activeColor = OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR;
  42         this.nonActiveColor = OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR;
  43         this.backdrops = [];
  44         OpenLayers.Control.prototype.initialize.apply(this, arguments);
  45     },
  46
  47     /**
  48     * @returns A reference to the DIV DOMElement containing the switcher tabs
  49     * @type DOMElement
  50     */
  51     draw: function() {
  52         // initialize our internal div
  53         OpenLayers.Control.prototype.draw.apply(this);
  54
  55         this.div.style.position = "absolute";
  56         this.div.style.top = "10px";
  57         this.div.style.right = "0px";
  58         this.div.style.left = "";
  59         this.div.style.fontFamily = "sans-serif";
  60         this.div.style.color = "white";
  61         this.div.style.fontWeight = "bold";
  62         this.div.style.marginTop = "3px";
  63         this.div.style.marginLeft = "3px";
  64         this.div.style.marginBottom = "3px";
  65         this.div.style.fontSize="smaller";
  66         this.div.style.width = "10em";
  67
  68         this.map.events.register("addlayer", this, this.redraw);
  69         this.map.events.register("removelayer", this, this.redraw);
  70         return this.redraw();
  71     },
  72
  73     /**
  74     * @returns A reference to the DIV DOMElement containing the switcher tabs
  75     * @type DOMElement
  76     */
  77     redraw: function() {
  78
  79         //clear out previous incarnation of LayerSwitcher tabs
  80         this.div.innerHTML = "";
  81         var visible = false;
  82         for( var i = 0; i < this.map.layers.length; i++) {
  83             if (visible && this.mode == "radio") {
  84                 this.map.layers[i].setVisibility(false);
  85             } else {
  86                 visible = this.map.layers[i].getVisibility();
  87             }
  88             this.addTab(this.map.layers[i]);
  89         }
  90
  91         return this.div;
  92     },
  93
  94     /**
  95     * @param {event} evt
  96     */
  97     singleClick: function(evt) {
  98         var div = Event.element(evt);
  99
 100         // See comment about OL #57 fix below.
 101         // If the click occurred on the corner spans we need
 102         // to make sure we act on the actual label tab instead.
 103         div = div.labelElement || div;
 104
 105         var layer = div.layer;
 106         if (this.mode == "radio") {
 107             for(var i=0; i < this.backdrops.length; i++) {
 108                 this.setTabActivation(this.backdrops[i], false);
 109                 this.backdrops[i].layer.setVisibility(false);
 110             }
 111             this.setTabActivation(div, true);
 112             layer.setVisibility(true);
 113         } else {
 114             var visible = layer.getVisibility();
 115
 116             this.setTabActivation(div, !visible);
 117             layer.setVisibility(!visible);
 118         }
 119         Event.stop(evt);
 120     },
 121
 122     /**
 123     * @private
 124     *
 125     * @param {event} evt
 126     */
 127     ignoreEvent: function(evt) {
 128         Event.stop(evt);
 129         return false;
 130     },
 131
 132     /**
 133     * @private
 134     *
 135     * @param {OpenLayers.Layer} layer
 136     */
 137     addTab: function(layer) {
 138
 139         // Outer DIV - for Rico Corners
 140         //
 141         var backdropLabelOuter = document.createElement('div');
 142         backdropLabelOuter.id = "LayerSwitcher_" + layer.name + "_Tab";
 143         backdropLabelOuter.style.marginTop = "4px";
 144         backdropLabelOuter.style.marginBottom = "4px";
 145
 146         this._setEventHandlers(backdropLabelOuter);
 147
 148         // Inner Label - for Rico Corners
 149         //
 150         var backdropLabel = document.createElement('p');
 151         backdropLabel.innerHTML = layer.name;
 152         backdropLabel.style.marginTop = "0px";
 153         backdropLabel.style.marginBottom = "0px";
 154         backdropLabel.style.paddingLeft = "10px";
 155         backdropLabel.style.paddingRight = "10px";
 156
 157         // add reference to layer onto the div for use in event handlers
 158         backdropLabel.layer = layer;
 159
 160         // set event handlers
 161         this._setEventHandlers(backdropLabel);
 162
 163         // add label to div
 164         backdropLabelOuter.appendChild(backdropLabel);
 165
 166         this.backdrops.append(backdropLabel);
 167
 168         // add div to main LayerSwitcher Div
 169         this.div.appendChild(backdropLabelOuter);
 170
 171         Rico.Corner.round(backdropLabelOuter, {corners: "tl bl",
 172                                       bgColor: "transparent",
 173                                       color: "white",
 174                                       blend: false});
 175
 176         // extend the event handlers to operate on the
 177         // rounded corners as well. (Fixes OL #57.)
 178         var spanElements=backdropLabel.parentNode.getElementsByTagName("span");
 179
 180         for (var currIdx = 0; currIdx < spanElements.length; currIdx++) {
 181             this._setEventHandlers(spanElements[currIdx], backdropLabel);
 182         }
 183
 184         this.setTabActivation(backdropLabel, layer.getVisibility());
 185     },
 186
 187     /*
 188       @private
 189
 190       @param {DOMElement} div
 191       @param {Boolean} activate
 192     */
 193     _setEventHandlers : function(element, labelDiv) {
 194
 195         // We only want to respond to a mousedown event.
 196         element.onclick = this.singleClick.bindAsEventListener(this);
 197         element.ondblclick = this.singleClick.bindAsEventListener(this);
 198         element.onmouseup = this.ignoreEvent.bindAsEventListener(this);
 199         element.onmousedown = this.ignoreEvent.bindAsEventListener(this);
 200
 201         // If we are operating on a corner span we need to store a
 202         // reference to the actual tab. (See comment about OL #57 fix above.)
 203         if (labelDiv) {
 204             element.labelElement = labelDiv;
 205         }
 206     },
 207
 208     /**
 209     * @private
 210     *
 211     * @param {DOMElement} div
 212     * @param {Boolean} activate
 213     */
 214     setTabActivation:function(div, activate) {
 215         var color = (activate) ? this.activeColor : this.nonActiveColor;
 216         Rico.Corner.changeColor(div, color);
 217     },
 218
 219
 220
 221     /** @final @type String */
 222     CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
 223 });
 224