1 | /* |
---|
2 | Scripts to create interactive checkboxes and radio buttons in SVG using ECMA script |
---|
3 | Copyright (C) <2007> <Andreas Neumann> |
---|
4 | Version 1.1.3, 2007-08-09 |
---|
5 | neumann@karto.baug.ethz.ch |
---|
6 | http://www.carto.net/ |
---|
7 | http://www.carto.net/neumann/ |
---|
8 | |
---|
9 | Credits: |
---|
10 | * Guy Morton for providing a fix to let users toggle checkboxes by clicking on text labels |
---|
11 | * Bruce Rindahl for providing the bugfix described in version 1.1.2 |
---|
12 | * Simon Shutter for providing a fix for the ASV in IE crash when reloading the SVG file after calling the .remove() method on a checkbox |
---|
13 | |
---|
14 | ---- |
---|
15 | |
---|
16 | Documentation: http://www.carto.net/papers/svg/gui/checkbox_and_radiobutton/ |
---|
17 | |
---|
18 | ---- |
---|
19 | |
---|
20 | current version: 1.1.3 |
---|
21 | |
---|
22 | version history: |
---|
23 | 1.0 (2006-03-13) |
---|
24 | initial version |
---|
25 | |
---|
26 | 1.1 (2006-07-11) |
---|
27 | text labels are now clickable (thanks to Guy Morton) |
---|
28 | added method .moveTo() to move checkbox to a different location |
---|
29 | introduced new constructor parameter labelYOffset to allow more flexible placement of the text label |
---|
30 | |
---|
31 | 1.1.1 (2007-02-06) |
---|
32 | added cursor pointer to the text label and use element representing the checkBox |
---|
33 | |
---|
34 | 1.1.2 (2007-04-19) |
---|
35 | bug fix: this.selectedIndex was not correctly initialized in method addCheckBox of the radioButtonGroup object |
---|
36 | |
---|
37 | 1.1.3 (2007-08-09) |
---|
38 | bug fix: the method .remove() was slightly modified (using removeEventListener) for avoiding a crash related to the method after reloading the SVG file |
---|
39 | |
---|
40 | ------- |
---|
41 | |
---|
42 | |
---|
43 | This ECMA script library is free software; you can redistribute it and/or |
---|
44 | modify it under the terms of the GNU Lesser General Public |
---|
45 | License as published by the Free Software Foundation; either |
---|
46 | version 2.1 of the License, or (at your option) any later version. |
---|
47 | |
---|
48 | This library is distributed in the hope that it will be useful, |
---|
49 | but WITHOUT ANY WARRANTY; without even the implied warranty of |
---|
50 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
---|
51 | Lesser General Public License for more details. |
---|
52 | |
---|
53 | You should have received a copy of the GNU Lesser General Public |
---|
54 | License along with this library (lesser_gpl.txt); if not, write to the Free Software |
---|
55 | Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA |
---|
56 | |
---|
57 | ---- |
---|
58 | |
---|
59 | original document site: http://www.carto.net/papers/svg/gui/checkbox_and_radiobutton/ |
---|
60 | Please contact the author in case you want to use code or ideas commercially. |
---|
61 | If you use this code, please include this copyright header, the included full |
---|
62 | LGPL 2.1 text and read the terms provided in the LGPL 2.1 license |
---|
63 | (http://www.gnu.org/copyleft/lesser.txt) |
---|
64 | |
---|
65 | ------------------------------- |
---|
66 | |
---|
67 | Please report bugs and send improvements to neumann@karto.baug.ethz.ch |
---|
68 | If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/checkbox_and_radiobutton/) |
---|
69 | somewhere in the source-code-comment or the "about" of your project and give credits, thanks! |
---|
70 | |
---|
71 | */ |
---|
72 | |
---|
73 | function checkBox(id,parentNode,x,y,checkboxId,checkcrossId,checkedStatus,labelText,textStyles,labelDistance,labelYOffset,radioButtonGroup,functionToCall) { |
---|
74 | var nrArguments = 13; |
---|
75 | var createCheckbox= true; |
---|
76 | if (arguments.length == nrArguments) { |
---|
77 | this.id = id; //an internal id, this id is not used in the SVG Dom tree |
---|
78 | this.parentNode = parentNode; //the parentNode, string or nodeReference |
---|
79 | this.x = x; //the center of the checkBox |
---|
80 | this.y = y; //the center of the checkBox |
---|
81 | this.checkboxId = checkboxId; //the id of the checkbox symbol (background) |
---|
82 | this.checkcrossId = checkcrossId; //the id of the checkbox symbol (foreground), pointer-events should be set to "none" |
---|
83 | this.checkedStatus = checkedStatus; //a status variable (true|false), indicates if checkbox is on or off |
---|
84 | this.labelText = labelText; //the text of the checkbox label to be displayed, use undefined or empty string if you don't need a label text |
---|
85 | this.textStyles = textStyles; //an array of literals containing the text settings |
---|
86 | if (!this.textStyles["font-size"]) { |
---|
87 | this.textStyles["font-size"] = 12; |
---|
88 | } |
---|
89 | this.labelDistance = labelDistance; //a distance defined from the center of the checkbox to the left of the text of the label |
---|
90 | this.labelYOffset = labelYOffset; //a y offset value for the text label in relation to the checkbox symbol center |
---|
91 | this.radioButtonGroup = radioButtonGroup; //a reference to a radio button group, if this is a standalone checkBox, just use the parameter undefined |
---|
92 | this.functionToCall = functionToCall; //the function to call after triggering checkBox |
---|
93 | this.exists = true; //status that indicates if checkbox exists or not, is set to false after method .remove() was called |
---|
94 | this.label = undefined; //later a reference to the label text node |
---|
95 | } |
---|
96 | else { |
---|
97 | createCheckbox = false; |
---|
98 | alert("Error in checkbox ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters."); |
---|
99 | } |
---|
100 | if (createCheckbox) { |
---|
101 | //timer stuff |
---|
102 | this.timer = new Timer(this); //a Timer instance for calling the functionToCall |
---|
103 | if (this.radioButtonGroup) { |
---|
104 | this.timerMs = 0; |
---|
105 | } |
---|
106 | else { |
---|
107 | this.timerMs = 200; //a constant of this object that is used in conjunction with the timer - functionToCall is called after 200 ms |
---|
108 | } |
---|
109 | //create checkbox |
---|
110 | this.createCheckBox(); |
---|
111 | } |
---|
112 | else { |
---|
113 | alert("Could not create checkbox with id '"+id+"' due to errors in the constructor parameters"); |
---|
114 | } |
---|
115 | } |
---|
116 | |
---|
117 | //this method creates all necessary checkbox geometry |
---|
118 | checkBox.prototype.createCheckBox = function() { |
---|
119 | if (typeof(this.parentNode) == "string") { |
---|
120 | this.parentNode = document.getElementById(this.parentNode); |
---|
121 | } |
---|
122 | //create checkbox |
---|
123 | this.checkBox = document.createElementNS(svgNS,"use"); |
---|
124 | this.checkBox.setAttributeNS(null,"x",this.x); |
---|
125 | this.checkBox.setAttributeNS(null,"y",this.y); |
---|
126 | this.checkBox.setAttributeNS(xlinkNS,"href","#"+this.checkboxId); |
---|
127 | this.checkBox.addEventListener("click",this,false); |
---|
128 | this.checkBox.setAttributeNS(null,"cursor","pointer"); |
---|
129 | this.parentNode.appendChild(this.checkBox); |
---|
130 | //create checkcross |
---|
131 | this.checkCross = document.createElementNS(svgNS,"use"); |
---|
132 | this.checkCross.setAttributeNS(null,"x",this.x); |
---|
133 | this.checkCross.setAttributeNS(null,"y",this.y); |
---|
134 | this.checkCross.setAttributeNS(xlinkNS,"href","#"+this.checkcrossId); |
---|
135 | this.parentNode.appendChild(this.checkCross); |
---|
136 | if (this.checkedStatus == false) { |
---|
137 | this.checkCross.setAttributeNS(null,"display","none"); |
---|
138 | } |
---|
139 | //create label, if any |
---|
140 | if (this.labelText) { |
---|
141 | if (this.labelText.length > 0) { |
---|
142 | this.label = document.createElementNS(svgNS,"text"); |
---|
143 | for (var attrib in this.textStyles) { |
---|
144 | var value = this.textStyles[attrib]; |
---|
145 | if (attrib == "font-size") { |
---|
146 | value += "px"; |
---|
147 | } |
---|
148 | this.label.setAttributeNS(null,attrib,value); |
---|
149 | } |
---|
150 | this.label.setAttributeNS(null,"x",(this.x + this.labelDistance)); |
---|
151 | this.label.setAttributeNS(null,"y",(this.y + this.labelYOffset)); |
---|
152 | this.label.setAttributeNS(null,"cursor","pointer"); |
---|
153 | var labelTextNode = document.createTextNode(this.labelText); |
---|
154 | this.label.appendChild(labelTextNode); |
---|
155 | this.label.setAttributeNS(null,"pointer-events","all"); |
---|
156 | this.label.addEventListener("click",this,false); |
---|
157 | this.parentNode.appendChild(this.label); |
---|
158 | } |
---|
159 | } |
---|
160 | if (this.radioButtonGroup) { |
---|
161 | this.radioButtonGroup.addCheckBox(this); |
---|
162 | } |
---|
163 | } |
---|
164 | |
---|
165 | checkBox.prototype.handleEvent = function(evt) { |
---|
166 | if (evt.type == "click") { |
---|
167 | if (this.checkedStatus == true) { |
---|
168 | this.checkCross.setAttributeNS(null,"display","none"); |
---|
169 | this.checkedStatus = false; |
---|
170 | } |
---|
171 | else { |
---|
172 | this.checkCross.setAttributeNS(null,"display","inline"); |
---|
173 | this.checkedStatus = true; |
---|
174 | } |
---|
175 | } |
---|
176 | this.timer.setTimeout("fireFunction",this.timerMs); |
---|
177 | } |
---|
178 | |
---|
179 | checkBox.prototype.fireFunction = function() { |
---|
180 | if (this.radioButtonGroup) { |
---|
181 | this.radioButtonGroup.selectById(this.id,true); |
---|
182 | } |
---|
183 | else { |
---|
184 | if (typeof(this.functionToCall) == "function") { |
---|
185 | this.functionToCall(this.id,this.checkedStatus,this.labelText); |
---|
186 | } |
---|
187 | if (typeof(this.functionToCall) == "object") { |
---|
188 | this.functionToCall.checkBoxChanged(this.id,this.checkedStatus,this.labelText); |
---|
189 | } |
---|
190 | if (typeof(this.functionToCall) == undefined) { |
---|
191 | return; |
---|
192 | } |
---|
193 | } |
---|
194 | } |
---|
195 | |
---|
196 | checkBox.prototype.check = function(FireFunction) { |
---|
197 | this.checkCross.setAttributeNS(null,"display","inherit"); |
---|
198 | this.checkedStatus = true; |
---|
199 | if (FireFunction) { |
---|
200 | this.timer.setTimeout("fireFunction",this.timerMs); |
---|
201 | } |
---|
202 | } |
---|
203 | |
---|
204 | checkBox.prototype.uncheck = function(FireFunction) { |
---|
205 | this.checkCross.setAttributeNS(null,"display","none"); |
---|
206 | this.checkedStatus = false; |
---|
207 | if (FireFunction) { |
---|
208 | this.timer.setTimeout("fireFunction",this.timerMs); |
---|
209 | } |
---|
210 | } |
---|
211 | |
---|
212 | //move checkbox to a different position |
---|
213 | checkBox.prototype.moveTo = function(moveX,moveY) { |
---|
214 | this.x = moveX; |
---|
215 | this.y = moveY; |
---|
216 | //move checkbox |
---|
217 | this.checkBox.setAttributeNS(null,"x",this.x); |
---|
218 | this.checkBox.setAttributeNS(null,"y",this.y); |
---|
219 | //move checkcross |
---|
220 | this.checkCross.setAttributeNS(null,"x",this.x); |
---|
221 | this.checkCross.setAttributeNS(null,"y",this.y); |
---|
222 | //move text label |
---|
223 | if (this.labelText) { |
---|
224 | this.label.setAttributeNS(null,"x",(this.x + this.labelDistance)); |
---|
225 | this.label.setAttributeNS(null,"y",(this.y + this.labelYOffset)); |
---|
226 | } |
---|
227 | } |
---|
228 | |
---|
229 | checkBox.prototype.remove = function(FireFunction) { |
---|
230 | this.checkBox.removeEventListener("click",this,false); |
---|
231 | this.parentNode.removeChild(this.checkBox); |
---|
232 | this.parentNode.removeChild(this.checkCross); |
---|
233 | if (this.label) { |
---|
234 | this.parentNode.removeChild(this.label); |
---|
235 | } |
---|
236 | this.exists = false; |
---|
237 | } |
---|
238 | |
---|
239 | checkBox.prototype.setLabelText = function(labelText) { |
---|
240 | this.labelText = labelText |
---|
241 | if (this.label) { |
---|
242 | this.label.firstChild.nodeValue = labelText; |
---|
243 | } |
---|
244 | else { |
---|
245 | if (this.labelText.length > 0) { |
---|
246 | this.label = document.createElementNS(svgNS,"text"); |
---|
247 | for (var attrib in this.textStyles) { |
---|
248 | value = this.textStyles[attrib]; |
---|
249 | if (attrib == "font-size") { |
---|
250 | value += "px"; |
---|
251 | } |
---|
252 | this.label.setAttributeNS(null,attrib,value); |
---|
253 | } |
---|
254 | this.label.setAttributeNS(null,"x",(this.x + this.labelDistance)); |
---|
255 | this.label.setAttributeNS(null,"y",(this.y + this.textStyles["font-size"] * 0.3)); |
---|
256 | var labelTextNode = document.createTextNode(this.labelText); |
---|
257 | this.label.appendChild(labelTextNode); |
---|
258 | this.parentNode.appendChild(this.label); |
---|
259 | } |
---|
260 | } |
---|
261 | } |
---|
262 | |
---|
263 | /* start of the radioButtonGroup object */ |
---|
264 | |
---|
265 | function radioButtonGroup(id,functionToCall) { |
---|
266 | var nrArguments = 2; |
---|
267 | if (arguments.length == nrArguments) { |
---|
268 | this.id = id; |
---|
269 | if (typeof(functionToCall) == "function" || typeof(functionToCall) == "object" || typeof(functionToCall) == undefined) { |
---|
270 | this.functionToCall = functionToCall; |
---|
271 | } |
---|
272 | else { |
---|
273 | alert("Error in radiobutton with ("+id+"): argument functionToCall is not of type 'function', 'object' or undefined!"); |
---|
274 | } |
---|
275 | this.checkBoxes = new Array(); //this array will hold checkbox objects |
---|
276 | this.selectedId = undefined; //holds the id of the active radio button |
---|
277 | this.selectedIndex = undefined; //holds the index of the active radio button |
---|
278 | //timer stuff |
---|
279 | this.timer = new Timer(this); //a Timer instance for calling the functionToCall |
---|
280 | this.timerMs = 200; //a constant of this object that is used in conjunction with the timer - functionToCall is called after 200 ms |
---|
281 | } |
---|
282 | else { |
---|
283 | alert("Error in radiobutton with ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters."); |
---|
284 | } |
---|
285 | } |
---|
286 | |
---|
287 | radioButtonGroup.prototype.addCheckBox = function(checkBoxObj) { |
---|
288 | this.checkBoxes.push(checkBoxObj); |
---|
289 | if (checkBoxObj.checkedStatus) { |
---|
290 | this.selectedId = checkBoxObj.id; |
---|
291 | this.selectedIndex = this.checkBoxes.length - 1; |
---|
292 | } |
---|
293 | } |
---|
294 | |
---|
295 | //change radio button selection by id |
---|
296 | radioButtonGroup.prototype.selectById = function(cbId,fireFunction) { |
---|
297 | var found = false; |
---|
298 | for (var i=0;i<this.checkBoxes.length;i++) { |
---|
299 | if (this.checkBoxes[i].id == cbId) { |
---|
300 | this.selectedId = cbId; |
---|
301 | this.selectedIndex = i; |
---|
302 | if (this.checkBoxes[i].checkedStatus == false) { |
---|
303 | this.checkBoxes[i].check(false); |
---|
304 | } |
---|
305 | found = true; |
---|
306 | } |
---|
307 | else { |
---|
308 | this.checkBoxes[i].uncheck(false); |
---|
309 | } |
---|
310 | } |
---|
311 | if (found) { |
---|
312 | if (fireFunction) { |
---|
313 | this.timer.setTimeout("fireFunction",this.timerMs); |
---|
314 | } |
---|
315 | } |
---|
316 | else { |
---|
317 | alert("Error in radiobutton with ("+this.id+"): could not find checkbox with id '"+cbId+"'"); |
---|
318 | } |
---|
319 | } |
---|
320 | |
---|
321 | //change radio button selection by label name |
---|
322 | radioButtonGroup.prototype.selectByLabelname = function(labelName,fireFunction) { |
---|
323 | var id = -1; |
---|
324 | for (var i=0;i<this.checkBoxes.length;i++) { |
---|
325 | if (this.checkBoxes[i].labelText == labelName) { |
---|
326 | id = this.checkBoxes[i].id; |
---|
327 | } |
---|
328 | } |
---|
329 | if (id == -1) { |
---|
330 | alert("Error in radiobutton with ("+this.id+"): could not find checkbox with label '"+labelName+"'"); |
---|
331 | } |
---|
332 | else { |
---|
333 | this.selectById(id,fireFunction); |
---|
334 | } |
---|
335 | } |
---|
336 | |
---|
337 | radioButtonGroup.prototype.fireFunction = function() { |
---|
338 | if (typeof(this.functionToCall) == "function") { |
---|
339 | this.functionToCall(this.id,this.selectedId,this.checkBoxes[this.selectedIndex].labelText); |
---|
340 | } |
---|
341 | if (typeof(this.functionToCall) == "object") { |
---|
342 | this.functionToCall.radioButtonChanged(this.id,this.selectedId,this.checkBoxes[this.selectedIndex].labelText); |
---|
343 | } |
---|
344 | if (typeof(this.functionToCall) == undefined) { |
---|
345 | return; |
---|
346 | } |
---|
347 | } |
---|