]> git.openstreetmap.org Git - rails.git/blob - public/lib/OpenLayers/Control/LayerSwitcher.js
Bit more work on the contributor terms page - still very much a work-in-progress.
[rails.git] / 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