| /* |
| Scripts to create interactive textboxes in SVG using ECMA script |
| Copyright (C) <2006> <Andreas Neumann> |
| Version 1.1.2, 2006-10-04 |
| neumann@karto.baug.ethz.ch |
| http://www.carto.net/ |
| http://www.carto.net/neumann/ |
| |
| Credits: |
| * Initial code was taken from Olaf Schnabel --> schnabel@karto.baug.ethz.ch (thanks!) |
| * Thanks also to many people of svgdevelopers@yahoogroups.com |
| * bug report and fix from Volker Gersabeck (make textbox namespace aware and corrected .setValue method when text was transformed) |
| * bug report and fix from David Boyd (pressing delete key in ASV would fail if cursor is at end of textbox) |
| * enhancement suggestion and bug report by Michael Mehldorn (callback function was called twice in case of enter key, accept also integer values in method .setValue()) |
| |
| ---- |
| |
| Documentation: http://www.carto.net/papers/svg/gui/textbox/ |
| |
| ---- |
| |
| current version: 1.1.2 |
| |
| version history: |
| 1.0 (2006-05-03) |
| initial version |
| |
| 1.0.1 (2006-05-04) |
| fixed a bug with the delete key after clicking into the textbox |
| fixed a bug with removing text selection when clicking again after the selectionbox was visible |
| |
| 1.02 (2006-05-18): |
| made object multi-namespace aware (hopefully), this probably needs more testing |
| it is now allowed to pass numbers in the constructor and .setValue() method |
| |
| 1.03 (2006-05-22): |
| fixed a bug in internal method .testSupportsChar() when using an initially empty textbox |
| |
| 1.04 (2006-06-22) |
| added constructor parameter this.parentNode; this.parentNode can be of type String (id) or a node reference (g or svg element) |
| replaced this.textboxGroup with this.parentGroup to be compatible with other GUI elements; fixed an "out of index" bug that occasionally appeared in Opera 9 when calculating the cursor position |
| |
| 1.1 (2006-07-11) |
| fixed a bug with the delete key (ASV only) if cursor was at the end (thanks to David Boyd), fixed another bug with delete key if cursor was at the end it accidentally deleted the first character, fixed a bug in the method .setValue() (thanks to Volker Gersabeck) |
| added constructor parameter textYOffset, added methods ".moveTo(x,y)" and ".resize(width)" |
| |
| 1.1.1 (2006-07-13) |
| changed the internal structure a bit. An additional group element is now created. This allows several textboxes to be placed in the same parent group. Previously this had failed. No changes in constructor parameters and methods in this release. |
| |
| 1.1.2 (2006-10-04) |
| added parameter "fireFunction" to the "setValue()" method in order to determine whether the associated callback function should be fired or not |
| introduced new "changetype" with value "set" which indicates that the textbox value was set by method "setValue" |
| |
| ------- |
| |
| This ECMA script library is free software; you can redistribute it and/or |
| modify it under the terms of the GNU Lesser General Public |
| License as published by the Free Software Foundation; either |
| version 2.1 of the License, or (at your option) any later version. |
| |
| This library is distributed in the hope that it will be useful, |
| but WITHOUT ANY WARRANTY; without even the implied warranty of |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
| Lesser General Public License for more details. |
| |
| You should have received a copy of the GNU Lesser General Public |
| License along with this library (lesser_gpl.txt); if not, write to the Free Software |
| Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA |
| |
| ---- |
| |
| original document site: http://www.carto.net/papers/svg/gui/textbox/ |
| Please contact the author in case you want to use code or ideas commercially. |
| If you use this code, please include this copyright header, the included full |
| LGPL 2.1 text and read the terms provided in the LGPL 2.1 license |
| (http://www.gnu.org/copyleft/lesser.txt) |
| |
| ------------------------------- |
| |
| Please report bugs and send improvements to neumann@karto.baug.ethz.ch |
| If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/textbox/) |
| somewhere in the source-code-comment or the "about" of your project and give credits, thanks! |
| |
| */ |
| |
| function textbox(id,parentNode,defaultVal,maxChars,x,y,boxWidth,boxHeight,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,allowedChars,functionToCall) { |
| var nrArguments = 15; |
| var createTextBox= true; |
| if (arguments.length == nrArguments) { |
| this.id = id; //the id of the textbox |
| this.parentNode = parentNode; //can be of type string (id) or node reference (svg or g node) |
| this.maxChars = maxChars; //maximum characters allowed |
| this.defaultVal = defaultVal.toString(); //default value to be filled in when textbox is created |
| this.x = x; //left of background rectangle |
| this.y = y; //top of background rectangle |
| this.boxWidth = boxWidth; //background rectangle width |
| this.boxHeight = boxHeight; //background rectangle height |
| this.textYOffset = textYOffset; //the offset of the text element in relation to the upper side of the textbox rectangle |
| this.textStyles = textStyles; //array containing text attributes |
| if (!this.textStyles["font-size"]) { |
| this.textStyles["font-size"] = 15; |
| } |
| this.boxStyles = boxStyles; //array containing box styles attributes |
| this.cursorStyles = cursorStyles; //array containing text attributes |
| this.selBoxStyles = selBoxStyles; //array containing box styles attributes |
| //allowedChars contains regular expressions of allowed character ranges |
| if (allowedChars) { |
| if (typeof(allowedChars) == "string") { |
| if (allowedChars.length > 0) { |
| this.RegExp = new RegExp(allowedChars); |
| } |
| } |
| } |
| else { |
| this.RegExp = undefined; |
| } |
| this.functionToCall = functionToCall; //function to be called if textbox looses focus or enter key is pressed |
| this.textboxRect = null; //later holds reference to rect element |
| this.textboxText = null; //later holds reference to text element |
| this.textboxTextContent = null; //later holds reference to content of text element (first child) |
| this.textboxCursor = null; //later holds reference to cursor |
| this.textboxStatus = 0; //status 0 means unitialized, 1 means partially initalized, 2 means fully initialized and ready to remove event listeners again, 5 means new value was set by method .setValue() |
| this.cursorPosition = 0; //position in whole string |
| this.transX = 0; //offset on the left if text string is larger than box |
| this.textVal = this.defaultVal; //this is the current text string of the content |
| this.shiftDown = false; //boolean value that says if shift was pressed |
| this.mouseDown = false; //boolean value that says if mousedown is active |
| this.startSelection = 0; //position of the start of the selection |
| this.startOrigSelection = 0; //original start position of selection |
| this.endSelection = 0; //position of the end of the selection |
| this.selectionRectVisible = false; //indicates if selection rect is visible or not |
| this.svg = null; //later a nested svg that does clipping |
| this.supportsCharGeom = true; //defines if viewer supports geometry calculations on individual characters, such as .getCharAtPosition(SVGPoint) |
| } |
| else { |
| createTextBox = false; |
| alert("Error ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters."); |
| } |
| if (createTextBox) { |
| this.timer = new Timer(this); //a Timer instance for calling the functionToCall |
| this.timerMs = 200; //a constant of this object that is used in conjunction with the timer - functionToCall is called after 200 ms |
| this.createTextbox(); //method to initialize textbox |
| } |
| else { |
| alert("Could not create textbox with id '"+id+"' due to errors in the constructor parameters"); |
| } |
| } |
| |
| //create textbox |
| textbox.prototype.createTextbox = function() { |
| var result = this.testParent(); |
| if (result) { |
| //create a textbox parent group |
| this.textboxParent = document.createElementNS(svgNS,"g"); |
| this.parentGroup.appendChild(this.textboxParent); |
| |
| //create background rect |
| this.textboxRect = document.createElementNS(svgNS,"rect"); |
| this.textboxRect.setAttributeNS(null,"x",this.x); |
| this.textboxRect.setAttributeNS(null,"y",this.y); |
| this.textboxRect.setAttributeNS(null,"width",this.boxWidth); |
| this.textboxRect.setAttributeNS(null,"height",this.boxHeight); |
| this.textboxRect.setAttributeNS(null,"pointer-events","fill"); |
| for (var attrib in this.boxStyles) { |
| this.textboxRect.setAttributeNS(null,attrib,this.boxStyles[attrib]); |
| } |
| this.textboxParent.appendChild(this.textboxRect); |
| |
| this.svg = document.createElementNS(svgNS,"svg"); |
| this.svg.setAttributeNS(null,"x",this.x + this.textStyles["font-size"] / 4); |
| this.svg.setAttributeNS(null,"y",this.y + this.boxHeight * 0.02); |
| this.svg.setAttributeNS(null,"width",this.boxWidth - (this.textStyles["font-size"]) / 2); |
| this.svg.setAttributeNS(null,"height",this.boxHeight * 0.96); |
| this.svg.setAttributeNS(null,"viewBox",(this.x + this.textStyles["font-size"] / 4)+" "+(this.y + this.boxHeight * 0.02)+" "+(this.boxWidth - (this.textStyles["font-size"]) / 2)+" "+(this.boxHeight * 0.96)); |
| this.textboxParent.appendChild(this.svg); |
| |
| //create group to hold text, selectionRect and cursor |
| this.textboxTextGroup = document.createElementNS(svgNS,"g"); |
| this.svg.appendChild(this.textboxTextGroup); |
| |
| //create text element |
| this.textboxText = document.createElementNS(svgNS,"text"); |
| this.textboxText.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.textboxText.setAttributeNS(null,"y",(this.y + this.textYOffset)); |
| for (var attrib in this.textStyles) { |
| value = this.textStyles[attrib]; |
| if (attrib == "font-size") { |
| value += "px"; |
| } |
| this.textboxText.setAttributeNS(null,attrib,value); |
| } |
| this.textboxText.setAttributeNS(null,"id",this.id+"Text"); |
| if (myMapApp.navigator != "Opera") { |
| this.textboxText.setAttributeNS(null,"pointer-events","none"); |
| } |
| this.textboxText.setAttributeNS("http://www.w3.org/XML/1998/namespace","space","preserve"); |
| //check if defaultVal is longer than maxChars and truncate if necessary |
| if (this.defaultVal.length <= this.maxChars) { |
| this.textboxTextContent = document.createTextNode(this.defaultVal); |
| this.cursorPosition = this.defaultVal.length - 1; |
| } |
| else { |
| alert("the default textbox value is longer than the maximum of allowed characters\nDefault val will be truncated."); |
| this.textVal = this.defaultVal.substr(0,(this.maxChars - 1)); |
| this.textboxTextContent = document.createTextNode(this.textVal); |
| this.cursorPosition = this.maxChars - 1; |
| } |
| this.textboxText.appendChild(this.textboxTextContent); |
| this.textboxTextGroup.appendChild(this.textboxText); |
| |
| //create selection rectangle |
| this.selectionRect = document.createElementNS(svgNS,"rect"); |
| this.selectionRect.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.selectionRect.setAttributeNS(null,"y",(this.y + this.textYOffset - this.textStyles["font-size"] * 0.9)); |
| this.selectionRect.setAttributeNS(null,"width",(this.textStyles["font-size"] * 2)); |
| this.selectionRect.setAttributeNS(null,"height",this.textStyles["font-size"] * 1.1); |
| for (var attrib in this.selBoxStyles) { |
| this.selectionRect.setAttributeNS(null,attrib,this.selBoxStyles[attrib]); |
| } |
| this.selectionRect.setAttributeNS(null,"display","none"); |
| this.textboxTextGroup.appendChild(this.selectionRect); |
| |
| //create cursor element |
| this.textboxCursor = document.createElementNS(svgNS,"line"); |
| this.textboxCursor.setAttributeNS(null,"x1",this.x); |
| this.textboxCursor.setAttributeNS(null,"y1",(this.y + this.textYOffset + this.textStyles["font-size"] * 0.2)); |
| this.textboxCursor.setAttributeNS(null,"x2",this.x); |
| this.textboxCursor.setAttributeNS(null,"y2",(this.y + this.textYOffset - this.textStyles["font-size"] * 0.9)); |
| for (var attrib in this.cursorStyles) { |
| this.textboxCursor.setAttributeNS(null,attrib,this.cursorStyles[attrib]); |
| } |
| this.textboxCursor.setAttributeNS(null,"id",this.id+"Cursor"); |
| this.textboxCursor.setAttributeNS(null,"visibility","hidden"); |
| this.textboxTextGroup.appendChild(this.textboxCursor); |
| |
| // add event listeners to the textbox group |
| this.textboxParent.addEventListener("mousedown",this,false); |
| this.textboxParent.addEventListener("mousemove",this,false); |
| this.textboxParent.addEventListener("mouseup",this,false); |
| this.textboxParent.setAttributeNS(null,"cursor","text"); |
| |
| //test if the svgviewer supports getting geometries of individual characters |
| this.timer.setTimeout("testSupportsChar",this.timerMs); |
| } |
| else { |
| alert("could not create or reference 'parentNode' of textbox with id '"+this.id+"'"); |
| } |
| } |
| |
| textbox.prototype.testSupportsChar = function() { |
| //determine whether viewer is capable of charGeom functions |
| var isEmpty = false; |
| //temporarily create a space to test if getStartPosition is available |
| if (this.textVal.length == 0) { |
| isEmpty = true; |
| this.textboxTextContent.nodeValue = " "; |
| } |
| try { |
| var dummy = this.textboxText.getStartPositionOfChar(0).x; |
| } |
| catch(er) { |
| this.supportsCharGeom = false; |
| } |
| if (isEmpty) { |
| this.textboxTextContent.nodeValue = ""; |
| } |
| } |
| |
| //test if window group exists or create a new group at the end of the file |
| textbox.prototype.testParent = function() { |
| //test if of type object |
| var nodeValid = false; |
| if (typeof(this.parentNode) == "object") { |
| if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g") { |
| this.parentGroup = this.parentNode; |
| nodeValid = true; |
| } |
| } |
| else if (typeof(this.parentNode) == "string") { |
| //first test if textbox group exists |
| if (!document.getElementById(this.parentNode)) { |
| this.parentGroup = document.createElementNS(svgNS,"g"); |
| this.parentGroup.setAttributeNS(null,"id",this.parentNode); |
| document.documentElement.appendChild(this.parentGroup); |
| nodeValid = true; |
| } |
| else { |
| this.parentGroup = document.getElementById(this.parentNode); |
| nodeValid = true; |
| } |
| } |
| return nodeValid; |
| } |
| |
| //remove all textbox elements |
| textbox.prototype.removeTextbox = function() { |
| this.parentGroup.removeChild(this.textboxParent); |
| } |
| |
| //event handler functions |
| textbox.prototype.handleEvent = function(evt) { |
| if (evt.type == "mousedown") { |
| //this case is when the user mousedowns outside the textbox; in this case the textbox should behave like the user |
| //pressed the enter key |
| if ((evt.currentTarget.nodeName == "svg" || evt.currentTarget.nodeName == "svg:svg") && this.textboxStatus == 2) { |
| this.release(); |
| } |
| else { |
| //this is for preparing the textbox with first mousedown and to reposition cursor with each subsequent mousedowns |
| if (evt.currentTarget.nodeName == "g" || evt.currentTarget.nodeName == "svg:g") { |
| this.calcCursorPosFromMouseEvt(evt); |
| // set event listeners, this is only done on first mousedown in the textbox |
| if (this.textboxStatus == 0) { |
| if (myMapApp.navigator == "Adobe") { |
| document.documentElement.addEventListener("keydown",this,false); |
| } |
| document.documentElement.addEventListener("keypress",this,false); |
| document.documentElement.addEventListener("mousedown",this,false); |
| document.documentElement.addEventListener("mouseup",this,false); |
| document.documentElement.addEventListener("mousemove",this,false); |
| // set textbox status |
| this.textboxStatus = 1; |
| // set cursor visibility |
| this.textboxCursor.setAttributeNS(null,"visibility","visible"); |
| } |
| else { |
| evt.stopPropagation(); |
| } |
| this.setCursorPos(); |
| //start text selection |
| this.startOrigSelection = this.cursorPosition + 1; |
| this.startSelection = this.cursorPosition + 1; |
| this.endSelection = this.cursorPosition + 2; |
| //remove previous selections |
| this.selectionRect.setAttributeNS(null,"display","none"); |
| this.selectionRectVisible = false; |
| //set status of shiftDown and mouseDown |
| this.shiftDown = true; |
| this.mouseDown = true; |
| } |
| //this mouseup should be received from background rectangle (received via document element) |
| else { |
| this.textboxStatus = 2; |
| } |
| } |
| } |
| if (evt.type == "mousemove") { |
| if (this.textboxStatus == 2 && this.shiftDown && this.mouseDown && this.supportsCharGeom) { |
| this.calcCursorPosFromMouseEvt(evt); |
| this.setCursorPos(); |
| if (this.cursorPosition + 1 != this.startOrigSelection) { |
| if (this.cursorPosition + 1 < this.startOrigSelection) { |
| this.endSelection = this.startOrigSelection; |
| this.startSelection = this.cursorPosition + 1; |
| } |
| else { |
| this.startSelection = this.startOrigSelection; |
| this.endSelection = this.cursorPosition + 1; |
| } |
| this.selectionRect.setAttributeNS(null,"display","inherit"); |
| this.selectionRectVisible = true; |
| var rectX = this.textboxText.getStartPositionOfChar(this.startSelection).x |
| this.selectionRect.setAttributeNS(null,"x",rectX); |
| this.selectionRect.setAttributeNS(null,"width",(this.textboxText.getEndPositionOfChar(this.endSelection - 1).x - rectX)); |
| var cursorX = parseInt(this.textboxCursor.getAttributeNS(null,"x1")); |
| //if cursor runs out on the right, scroll to the right |
| if ((cursorX + this.transX) > (this.x + this.boxWidth - this.textStyles["font-size"] / 3)) { |
| this.transX = (this.x + this.boxWidth - this.textStyles["font-size"] / 3) - cursorX; |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| //if cursor runs out on the left, scroll to the left |
| if ((cursorX + this.transX) < (this.x + this.textStyles["font-size"] / 3)) { |
| this.transX += (this.x + this.textStyles["font-size"] / 3) - (cursorX + this.transX); |
| if (this.transX * -1 < (this.boxWidth - this.textStyles["font-size"])) { |
| this.transX = 0; |
| } |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| } |
| } |
| } |
| if (evt.type == "mouseup") { |
| if (this.textboxStatus == 2 && this.shiftDown && this.mouseDown) { |
| this.mouseDown = false; |
| } |
| } |
| if (evt.type == "keypress") { |
| if (evt.keyCode) { |
| var charCode = evt.keyCode; |
| } |
| else { |
| var charCode = evt.charCode; |
| } |
| var keyCode = parseInt(charCode); |
| var charCode = undefined; |
| this.changed = false; //this tracks if the text was actually changed (if the content was changed) |
| //alert("keyCode="+evt.keyCode+", charCode="+evt.charCode+", shiftKey"+evt.shiftKey); |
| |
| if (myMapApp.navigator != "Adobe") { |
| //note that Adobe SVG enters this method through the keydown event |
| this.specialCharacters(evt); |
| } |
| |
| if (myMapApp.navigator == "Opera") { |
| if (evt.keyCode > 31 && evt.keyCode != 35 && evt.keyCode != 36 && evt.keyCode != 37 && evt.keyCode != 39 && evt.keyCode != 46) { |
| evt.charCode = evt.keyCode; |
| } |
| } |
| |
| //all real characters |
| if (keyCode > 31 && keyCode != 127 && keyCode < 65535 && evt.charCode && evt.charCode < 65535) { |
| var textChanged = false; |
| var keychar = String.fromCharCode(keyCode); |
| var result = 0; |
| if (this.RegExp) { |
| result = keychar.search(this.RegExp); |
| } |
| if (result == 0) { |
| if (this.shiftDown && this.selectionRectVisible) { |
| var tempText = this.textVal.substring(0,this.startSelection) + keychar + this.textVal.substring(this.endSelection,this.textVal.length); |
| this.textVal = tempText; |
| this.cursorPosition = this.startSelection - 1; |
| textChanged = true; |
| this.releaseShift(); |
| } |
| else if (this.textVal.length < this.maxChars) { |
| if (this.cursorPosition == this.textVal.length -1) { |
| this.textVal += keychar; // append new input character |
| } |
| else { |
| var tempText = this.textVal.substring(0,(this.cursorPosition + 1)) + keychar + this.textVal.substring((this.cursorPosition + 1),(this.textVal.length)); |
| this.textVal = tempText; |
| } |
| textChanged = true; |
| } |
| if (this.textVal.length < this.maxChars) { |
| this.cursorPosition++; |
| } |
| else { |
| if (textChanged) { |
| if (this.cursorPosition < this.textVal.length) { |
| this.cursorPosition++; |
| } |
| else { |
| this.cursorPosition = this.textVal.length - 1; |
| } |
| } |
| } |
| //make sure that the selections and shift key are resetted |
| this.startSelection = this.cursorPosition; |
| this.endSelection = this.cursorPosition; |
| this.shiftDown = false; |
| if (textChanged) { |
| this.textboxTextContent.nodeValue=this.textVal; |
| this.changed = true; |
| //update cursor position |
| this.setCursorPos(); |
| var cursorX = parseInt(this.textboxCursor.getAttributeNS(null,"x1")); |
| if ((cursorX + this.transX) > (this.x + this.boxWidth - this.textStyles["font-size"] / 3)) { |
| this.transX = (this.x + this.boxWidth - this.textStyles["font-size"] / 3) - (cursorX + this.transX) + this.transX; |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| } |
| } |
| } |
| //fire function if text changed |
| if (this.changed) { |
| this.timer.setTimeout("fireFunction",this.timerMs); |
| } |
| //suppress unwanted browser shortcuts. e.g. in Opera or Mozilla |
| evt.preventDefault(); |
| } |
| //this part is only because the Adobe viewer doesn't return certain keys "onkeypress" |
| if (evt.type == "keydown") { |
| this.specialCharacters(evt); |
| } |
| } |
| |
| textbox.prototype.specialCharacters = function(evt) { |
| if (evt.keyCode) { |
| var charCode = evt.keyCode; |
| } |
| else { |
| var charCode = evt.charCode; |
| } |
| var keyCode = parseInt(charCode); |
| var charCode = undefined; |
| |
| //backspace key |
| if (keyCode == 8) { |
| //only do it if there is still text and cursor is not at start position |
| if (this.textVal.length > 0 && this.cursorPosition > -2) { |
| //first deal with text content, delete chars according to cursor position |
| if (this.shiftDown && this.selectionRectVisible) { |
| var tempText = this.textVal.substring(0,this.startSelection) + this.textVal.substring(this.endSelection,this.textVal.length); |
| this.textVal = tempText; |
| this.cursorPosition = this.startSelection - 1; |
| this.releaseShift(); |
| } |
| else { |
| if (this.cursorPosition == this.textVal.length - 1) { |
| //cursor is at the end of textVal |
| this.textVal=this.textVal.substring(0,this.textVal.length-1); |
| } |
| else { |
| //cursor is in between |
| var tempText = this.textVal.substring(0,(this.cursorPosition)) + this.textVal.substring((this.cursorPosition + 1),(this.textVal.length)); |
| this.textVal = tempText; |
| } |
| //decrease cursor position |
| if (this.cursorPosition > -1) { |
| this.cursorPosition--; |
| } |
| } |
| this.textboxTextContent.nodeValue=this.textVal; |
| this.setCursorPos(); |
| if (this.cursorPosition > 0) { |
| //retransform text element when cursor is at the left side of the box |
| if (this.supportsCharGeom) { |
| var cursorX = this.textboxText.getStartPositionOfChar(this.cursorPosition).x; |
| } |
| else { |
| var bbox = this.textboxText.getBBox(); |
| var cursorX = bbox.x + bbox.width; |
| } |
| if ((cursorX + this.transX) < (this.x + this.textStyles["font-size"] / 3)) { |
| this.transX += (this.x + this.textStyles["font-size"] / 3) - (cursorX + this.transX); |
| if (this.transX * -1 < (this.boxWidth - this.textStyles["font-size"])) { |
| this.transX = 0; |
| } |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| } |
| this.changed = true; |
| } |
| } |
| //the two enter keys |
| else if (keyCode == 10 || keyCode == 13) { // press return (enter) |
| this.release(); |
| } |
| //end key |
| else if (keyCode == 35 && !(charCode)) { |
| if (evt.shiftKey) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition + 1; |
| this.startSelection = this.cursorPosition + 1; |
| this.shiftDown = true; |
| } |
| } |
| this.cursorPosition = this.textVal.length - 1; |
| this.setCursorPos(); |
| //if text string is too long |
| var cursorX = parseInt(this.textboxCursor.getAttributeNS(null,"x1")); |
| if ((cursorX + this.transX) > (this.x + this.boxWidth - this.textStyles["font-size"] / 3)) { |
| this.transX = (this.x + this.boxWidth - this.textStyles["font-size"] / 3) - cursorX; |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| this.setCursorPos(); |
| if (evt.shiftKey) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition; |
| this.startSelection = this.cursorPosition; |
| this.shiftDown = true; |
| } |
| this.endSelection = this.cursorPosition + 1; |
| this.selectionRect.setAttributeNS(null,"display","inherit"); |
| this.selectionRectVisible = true; |
| if (this.supportsCharGeom) { |
| var rectX = this.textboxText.getStartPositionOfChar(this.startSelection).x; |
| var width = (this.textboxText.getEndPositionOfChar(this.endSelection - 1).x - rectX); |
| } |
| else { |
| var bbox = this.textboxText.getBBox(); |
| var rectX = this.x + this.textStyles["font-size"] / 3; |
| var width = this.x + bbox.width + this.textStyles["font-size"] / 3; |
| } |
| this.selectionRect.setAttributeNS(null,"x",rectX); |
| this.selectionRect.setAttributeNS(null,"width",width); |
| } |
| if (this.shiftDown && evt.shiftKey == false) { |
| this.releaseShift(); |
| } |
| } |
| //home key |
| else if (keyCode == 36 && !(charCode)) { |
| if (evt.shiftKey) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition + 1; |
| this.startSelection = this.cursorPosition + 1; |
| this.shiftDown = true; |
| } |
| } |
| this.cursorPosition = -1; |
| this.textboxText.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate(0,0)"); |
| this.transX = 0; |
| this.setCursorPos(); |
| if (evt.shiftKey) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition; |
| this.startSelection = this.cursorPosition; |
| this.shiftDown = true; |
| } |
| this.endSelection = this.startSelection; |
| this.startSelection = 0; |
| this.selectionRect.setAttributeNS(null,"display","inherit"); |
| this.selectionRectVisible = true; |
| if (this.supportsCharGeom) { |
| var rectX = this.textboxText.getStartPositionOfChar(this.startSelection).x; |
| var width = (this.textboxText.getEndPositionOfChar(this.endSelection - 1).x - rectX); |
| } |
| else { |
| var bbox = this.textboxText.getBBox(); |
| var rectX = this.x + this.textStyles["font-size"] / 3; |
| var width = this.x + bbox.width + this.textStyles["font-size"] / 3; |
| } |
| this.selectionRect.setAttributeNS(null,"x",rectX); |
| this.selectionRect.setAttributeNS(null,"width",width); |
| } |
| if (this.shiftDown && evt.shiftKey == false) { |
| this.releaseShift(); |
| } |
| } |
| //left key |
| else if (keyCode == 37 && !(charCode)) { |
| if (this.cursorPosition > -1) { |
| this.cursorPosition--; |
| this.setCursorPos(); |
| var cursorX = parseInt(this.textboxCursor.getAttributeNS(null,"x1")); |
| if ((cursorX + this.transX) < (this.x + this.textStyles["font-size"] / 3)) { |
| this.transX += (this.x + this.textStyles["font-size"] / 3) - (cursorX + this.transX); |
| if (this.transX * -1 < (this.boxWidth - this.textStyles["font-size"])) { |
| this.transX = 0; |
| } |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| //do selection if shift key is pressed |
| if (evt.shiftKey && this.supportsCharGeom) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition + 2; |
| this.startSelection = this.cursorPosition + 2; |
| this.shiftDown = true; |
| } |
| this.endSelection = this.startOrigSelection; |
| this.startSelection = this.cursorPosition + 1; |
| this.selectionRect.setAttributeNS(null,"display","inherit"); |
| this.selectionRectVisible = true; |
| var rectX = this.textboxText.getStartPositionOfChar(this.startSelection).x |
| this.selectionRect.setAttributeNS(null,"x",rectX); |
| this.selectionRect.setAttributeNS(null,"width",(this.textboxText.getEndPositionOfChar(this.endSelection - 1).x - rectX)); |
| } |
| else { |
| if (this.shiftDown) { |
| this.releaseShift(); |
| } |
| } |
| } |
| } |
| //right key |
| else if (keyCode == 39 && !(charCode)) { |
| if (this.cursorPosition < this.textVal.length - 1) { |
| this.cursorPosition++; |
| this.setCursorPos(); |
| var cursorX = parseInt(this.textboxCursor.getAttributeNS(null,"x1")); |
| if ((cursorX + this.transX) > (this.x + this.boxWidth - this.textStyles["font-size"] / 3)) { |
| this.transX = (this.x + this.boxWidth - this.textStyles["font-size"] / 3) - cursorX; |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate("+this.transX+",0)"); |
| } |
| //do selection if shift key is pressed |
| if (evt.shiftKey && this.supportsCharGeom) { |
| if (this.shiftDown == false) { |
| this.startOrigSelection = this.cursorPosition; |
| this.startSelection = this.cursorPosition; |
| this.shiftDown = true; |
| } |
| this.endSelection = this.cursorPosition + 1; |
| this.selectionRect.setAttributeNS(null,"display","inherit"); |
| this.selectionRectVisible = true; |
| var rectX = this.textboxText.getStartPositionOfChar(this.startSelection).x |
| this.selectionRect.setAttributeNS(null,"x",rectX); |
| this.selectionRect.setAttributeNS(null,"width",(this.textboxText.getEndPositionOfChar(this.endSelection - 1).x - rectX)); |
| } |
| else { |
| if (this.shiftDown) { |
| this.releaseShift(); |
| } |
| } |
| } |
| } |
| //delete key |
| else if ((keyCode == 127 || keyCode == 12 || keyCode == 46) && !(charCode)) { |
| if ((this.textVal.length > 0) && (this.cursorPosition < (this.textVal.length))) { |
| var tempText = null; |
| if (this.shiftDown && evt.shiftKey == false && this.startSelection < this.textVal.length) { |
| //we need to delete selected text |
| var tempText = this.textVal.substring(0,this.startSelection) + this.textVal.substring(this.endSelection,this.textVal.length); |
| this.cursorPosition = this.startSelection - 1; |
| this.releaseShift(); |
| this.changed = true; |
| } |
| else { |
| if (this.cursorPosition < (this.textVal.length - 1)) { |
| //we need to delete the next character, if cursor is not at the end of the textstring |
| var tempText = this.textVal.substring(0,(this.cursorPosition + 1)) + this.textVal.substring((this.cursorPosition + 2),(this.textVal.length)); |
| this.changed = true; |
| } |
| } |
| if (this.changed) { |
| if(tempText != null) { |
| this.textVal = tempText; |
| this.textboxTextContent.nodeValue=this.textVal; |
| this.setCursorPos(); |
| } |
| } |
| } |
| } |
| //fire function if text changed |
| if (myMapApp.navigator == "Adobe") { |
| if (this.changed) { |
| this.timer.setTimeout("fireFunction",this.timerMs); |
| } |
| } |
| } |
| |
| textbox.prototype.setCursorPos = function() { |
| //cursor is not at first position |
| if (this.cursorPosition > -1) { |
| if (this.supportsCharGeom) { |
| if (this.textVal.length > 0) { |
| var cursorPos = this.textboxText.getEndPositionOfChar(this.cursorPosition).x; |
| } |
| else { |
| var cursorPos = (this.x + this.textStyles["font-size"] / 3); |
| } |
| this.textboxCursor.setAttributeNS(null,"x1",cursorPos); |
| this.textboxCursor.setAttributeNS(null,"x2",cursorPos); |
| } |
| else { |
| //case MozillaSVG 1.5 or other SVG viewers not implementing .getEndPositionOfChar |
| var bbox = this.textboxText.getBBox(); |
| this.textboxCursor.setAttributeNS(null,"x1",(bbox.x + bbox.width + this.textStyles["font-size"] / 3)); |
| this.textboxCursor.setAttributeNS(null,"x2",(bbox.x + bbox.width + this.textStyles["font-size"] / 3)); |
| } |
| } |
| else { |
| //cursor is at first position |
| //reset transformations |
| this.textboxText.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.textboxTextGroup.setAttributeNS(null,"transform","translate(0,0)"); |
| this.transX = 0; |
| if (this.supportsCharGeom) { |
| if (this.textboxTextContent.length > 0) { |
| var cursorPos = this.textboxText.getStartPositionOfChar(0).x; |
| } |
| else { |
| var cursorPos = this.x + this.textStyles["font-size"] / 3; |
| } |
| } |
| else { |
| var cursorPos = this.x + this.textStyles["font-size"] / 3; |
| } |
| this.textboxCursor.setAttributeNS(null,"x1",cursorPos); |
| this.textboxCursor.setAttributeNS(null,"x2",cursorPos); |
| } |
| } |
| |
| textbox.prototype.fireFunction = function() { |
| var changeType = "change"; |
| if (this.textboxStatus == 0) { |
| changeType = "release"; |
| } |
| if (this.textboxStatus == 5) { |
| this.textboxStatus = 0; |
| changeType = "set"; |
| } |
| if (typeof(this.functionToCall) == "function") { |
| this.functionToCall(this.id,this.textVal,changeType); |
| } |
| if (typeof(this.functionToCall) == "object") { |
| this.functionToCall.textboxChanged(this.id,this.textVal,changeType); |
| } |
| if (typeof(this.functionToCall) == undefined) { |
| return; |
| } |
| } |
| |
| textbox.prototype.getValue = function() { |
| return this.textVal; |
| } |
| |
| textbox.prototype.setValue = function(value,fireFunction) { |
| this.textVal = value.toString(); |
| this.textboxTextContent.nodeValue=this.textVal; |
| //set the cursor to beginning and remove previous transforms |
| this.cursorPosition = -1; |
| this.setCursorPos(); |
| if (fireFunction == true) { |
| this.textboxStatus = 5; //5 means is set by setValue |
| this.fireFunction(); |
| } |
| } |
| |
| textbox.prototype.release = function() { |
| // set textbox status |
| this.textboxStatus = 0; |
| // remove event listeners |
| document.documentElement.removeEventListener("keypress",this,false); |
| if (myMapApp.navigator == "Adobe") { |
| document.documentElement.removeEventListener("keydown",this,false); |
| } |
| document.documentElement.removeEventListener("mousedown",this,false); |
| document.documentElement.removeEventListener("mousemove",this,false); |
| document.documentElement.removeEventListener("mouseup",this,false); |
| //set cursor and text selection to invisible |
| this.textboxCursor.setAttributeNS(null,"visibility","hidden"); |
| this.releaseShift(); |
| this.timer.setTimeout("fireFunction",this.timerMs); |
| } |
| |
| textbox.prototype.releaseShift = function() { |
| this.selectionRect.setAttributeNS(null,"display","none"); |
| this.selectionRectVisible = false; |
| this.shiftDown = false; |
| } |
| |
| textbox.prototype.calcCursorPosFromMouseEvt = function(evt) { |
| //determine cursor position of mouse event |
| var myCoords = myMapApp.calcCoord(evt,this.textboxText); |
| //create an SVG Point object |
| var mySVGPoint = document.documentElement.createSVGPoint(); |
| mySVGPoint.x = myCoords.x; |
| mySVGPoint.y = myCoords.y; |
| //set new cursor position |
| if (this.textboxTextContent.length > 0) { |
| if (this.supportsCharGeom) { |
| //for regular SVG viewers that support .getCharNumAtPosition |
| this.cursorPosition = this.textboxText.getCharNumAtPosition(mySVGPoint); |
| if (this.cursorPosition > this.textVal.length - 1) { |
| this.cursorPosition = this.textVal.length - 1; |
| } |
| //in this case the user did not correctly touch the text element |
| if (this.cursorPosition == -1) { |
| //first check if we can fix the position by moving the y-coordinate |
| mySVGPoint.y = (this.textboxText.getBBox().y + this.textStyles["font-size"] * 0.5); |
| this.cursorPosition = this.textboxText.getCharNumAtPosition(mySVGPoint); |
| //check if cursor is to the right of the end of the text |
| if (this.cursorPosition == -1) { |
| if (mySVGPoint.x > (this.textboxText.getBBox().x + this.textboxText.getBBox().width)) { |
| this.cursorPosition = this.textVal.length - 1; |
| } |
| } |
| } |
| } |
| else { |
| //workaround for firefox 1.5/2.0 and other viewers not supporting .getCharNumAtPosition |
| var bbox = this.textboxText.getBBox(); |
| var diffLeft = Math.abs(mySVGPoint.x - bbox.x); |
| var diffRight = Math.abs(mySVGPoint.x - (bbox.x + bbox.width)); |
| if (diffLeft < diffRight) { |
| this.cursorPosition = -1; |
| } |
| else { |
| this.cursorPosition = this.textVal.length - 1; |
| } |
| } |
| } |
| else { |
| //in case the text is empty |
| this.cursorPosition = -1; |
| } |
| } |
| |
| textbox.prototype.moveTo = function(moveX,moveY) { |
| this.x = moveX; |
| this.y = moveY; |
| //reposition textbox |
| this.textboxRect.setAttributeNS(null,"x",this.x); |
| this.textboxRect.setAttributeNS(null,"y",this.y); |
| //reposition svg element |
| this.svg.setAttributeNS(null,"x",this.x + this.textStyles["font-size"] / 4); |
| this.svg.setAttributeNS(null,"y",this.y + this.boxHeight * 0.02); |
| this.svg.setAttributeNS(null,"viewBox",(this.x + this.textStyles["font-size"] / 4)+" "+(this.y + this.boxHeight * 0.02)+" "+(this.boxWidth - (this.textStyles["font-size"]) / 2)+" "+(this.boxHeight * 0.96)); |
| //reposition text element |
| this.textboxText.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.textboxText.setAttributeNS(null,"y",(this.y + this.textYOffset)); |
| //reposition selection element |
| this.selectionRect.setAttributeNS(null,"x",(this.x + this.textStyles["font-size"] / 3)); |
| this.selectionRect.setAttributeNS(null,"y",(this.y + this.textYOffset - this.textStyles["font-size"] * 0.9)); |
| //reposition cursor |
| this.textboxCursor.setAttributeNS(null,"x1",this.x); |
| this.textboxCursor.setAttributeNS(null,"y1",(this.y + this.textYOffset + this.textStyles["font-size"] * 0.2)); |
| this.textboxCursor.setAttributeNS(null,"x2",this.x); |
| this.textboxCursor.setAttributeNS(null,"y2",(this.y + this.textYOffset - this.textStyles["font-size"] * 0.9)); |
| //set the cursor to beginning and remove previous transforms |
| this.cursorPosition = -1; |
| this.setCursorPos(); |
| } |
| |
| textbox.prototype.resize = function(newWidth) { |
| this.boxWidth = newWidth; |
| //resize textbox rectangle |
| this.textboxRect.setAttributeNS(null,"width",this.boxWidth); |
| //resize svg element |
| this.svg.setAttributeNS(null,"width",this.boxWidth - (this.textStyles["font-size"]) / 2); |
| this.svg.setAttributeNS(null,"viewBox",(this.x + this.textStyles["font-size"] / 4)+" "+(this.y + this.boxHeight * 0.02)+" "+(this.boxWidth - (this.textStyles["font-size"]) / 2)+" "+(this.boxHeight * 0.96)); |
| //set the cursor to beginning and remove previous transforms |
| this.cursorPosition = -1; |
| this.setCursorPos(); |
| } |
