[2] | 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 | } |
---|