| /* |
| Scripts to create interactive tabs in SVG using ECMA script |
| Copyright (C) <2006> <Andreas Neumann> |
| Version 1.2, 2006-04-03 |
| neumann@karto.baug.ethz.ch |
| http://www.carto.net/ |
| http://www.carto.net/neumann/ |
| |
| Credits: |
| * none so far |
| |
| ---- |
| |
| Documentation: http://www.carto.net/papers/svg/gui/tabgroup/ |
| |
| ---- |
| |
| current version: 1.2.1 |
| |
| version history: |
| 1.0 (2006-03-11) |
| initial version |
| |
| 1.1 (2006-04-03) |
| added ".moveTo(x,y)" and ".resize(width,height)" methods, added an additional g-element to hold transform values |
| |
| 1.2 (2006-06-19) |
| this.parentNode can now also be of type node reference (g or svg element); fixed a small bug when "hideContent" was set to true; changed this.parentGroup and introduced this.tabGroup |
| introduced id for group where content can be added, id name is: this.id+"__"+i+"_content" |
| |
| 1.2.1 (2006-07-07) |
| fixed a bug for multiline tabs (dy attribute of the tab texts). This bug was apparent when having more than two lines of text in the tabs |
| |
| ------- |
| |
| |
| 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/tabgroup/ |
| 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/tabgroup/) |
| somewhere in the source-code-comment or the "about" of your project and give credits, thanks! |
| |
| */ |
| |
| function tabgroup(id,parentNode,transx,transy,width,height,tabheight,cornerLeft,cornerRight,tabmargins,spaceBetweenTabs,tabStyles,activetabBGColor,tabwindowStyles,tabtextStyles,tabTitles,activeTabindex,hideContent,functionToCall) { |
| var nrArguments = 19; |
| var createTabgroup = true; |
| if (arguments.length == nrArguments) { |
| this.id = id; |
| this.parentNode = parentNode; //can be of type string (id) or node reference (svg or g node) |
| this.transx = transx; |
| this.transy = transy; |
| this.x = 0; |
| this.y = 0; |
| this.width = width; |
| this.height = height; |
| this.tabheight = tabheight; |
| this.cornerLeft = cornerLeft; //values are "rect","round","triangle" |
| this.cornerRight = cornerRight; //values are "rect","round","triangle" |
| this.tabmargins = tabmargins; |
| this.spaceBetweenTabs = spaceBetweenTabs; |
| this.tabStyles = tabStyles; |
| if (!this.tabStyles["fill"]) { |
| this.tabStyles["fill"] = "lightgray"; |
| } |
| this.activetabBGColor = activetabBGColor; |
| this.tabwindowStyles = tabwindowStyles; |
| this.tabtextStyles = tabtextStyles; |
| if (!this.tabtextStyles["font-size"]) { |
| this.tabtextStyles["font-size"] = 15; |
| } |
| this.tabTitles = tabTitles; |
| if (this.tabTitles instanceof Array) { |
| if (this.tabTitles.length == 0) { |
| createTabgroup = false; |
| alert("Error ("+this.id+"): the array 'tabTitles' has no elements!"); |
| } |
| } |
| else { |
| createTabgroup = false; |
| alert("Error ("+this.id+"): the array 'tabTitles' is not of type array!"); |
| } |
| this.activeTabindex = activeTabindex; |
| if (this.activeTabindex >= this.tabTitles.length) { |
| createTabgroup = false; |
| this.outOfBoundMessage(this.activeTabindex); |
| } |
| this.hideContent = hideContent; //boolean, defines whether the display of a tab should be set to "none","inherit" |
| this.functionToCall = functionToCall; |
| if (!(typeof(this.functionToCall) == "function" || typeof(this.functionToCall) == "object" || typeof(this.functionToCall) == "undefined")) { |
| createTabgroup = false; |
| alert("Error ("+this.id+"): functionToCall is of type '"+typeof(this.functionToCall)+"' and not of type 'function', 'object' or 'undefined'"); |
| } |
| } |
| else { |
| createTabgroup = false; |
| alert("Error ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters."); |
| } |
| if (createTabgroup) { |
| this.parentGroup = null; //later a node reference to the parent group |
| this.tabGroup = null; //later a reference to the group within the parentGroup |
| this.tabwindows = new Array(); |
| 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.createTabGroup(); |
| } |
| else { |
| alert("Could not create tabgroup with id '"+this.id+"' due to errors in the constructor parameters"); |
| } |
| } |
| |
| tabgroup.prototype.createTabGroup = function() { |
| var result = this.testParent(); |
| if (result) { |
| this.tabGroup = document.createElementNS(svgNS,"g"); |
| this.tabGroup.setAttributeNS(null,"transform","translate("+this.transx+","+this.transy+")"); |
| this.parentGroup.appendChild(this.tabGroup); |
| //loop to create all tabs |
| var currentX = this.x; |
| for (var i=0;i<this.tabTitles.length;i++) { |
| currentLeft = currentX; |
| this.tabwindows[i] = new Array(); |
| //create group |
| this.tabwindows[i]["group"] = document.createElementNS(svgNS,"g"); |
| this.tabGroup.appendChild(this.tabwindows[i]["group"]); |
| //create tabTitle |
| var tabtitles = this.tabTitles[i].split("\n"); |
| this.tabwindows[i]["tabTitle"] = document.createElementNS(svgNS,"text"); |
| this.tabwindows[i]["tabTitle"].setAttributeNS(null,"y",this.y + this.tabtextStyles["font-size"]); |
| var value=""; |
| for (var attrib in this.tabtextStyles) { |
| value = this.tabtextStyles[attrib]; |
| if (attrib == "font-size") { |
| value += "px"; |
| } |
| this.tabwindows[i]["tabTitle"].setAttributeNS(null,attrib,value); |
| } |
| this.tabwindows[i]["tabTitle"].setAttributeNS(null,"pointer-events","none"); |
| //create tspans and add text contents |
| for (var j=0;j<tabtitles.length;j++) { |
| var tspan = document.createElementNS(svgNS,"tspan"); |
| tspan.setAttributeNS(null,"x",currentX+this.tabmargins); |
| var dy = this.tabtextStyles["font-size"]*1.1; |
| if (j == 0) { |
| dy = 0; |
| } |
| tspan.setAttributeNS(null,"dy",dy); |
| var textNode = document.createTextNode(tabtitles[j]); |
| tspan.appendChild(textNode); |
| this.tabwindows[i]["tabTitle"].appendChild(tspan); |
| } |
| this.tabwindows[i]["group"].appendChild(this.tabwindows[i]["tabTitle"]); |
| //get bbox |
| var bbox = this.tabwindows[i]["tabTitle"].getBBox(); |
| currentX = Math.round(currentLeft + this.tabmargins * 2 + bbox.width); |
| //check if text-anchor is middle and shift the x-values accordingly |
| if (this.tabtextStyles["text-anchor"]) { |
| if (this.tabtextStyles["text-anchor"] == "middle") { |
| this.tabwindows[i]["tabTitle"].setAttributeNS(null,"transform","translate("+(bbox.width * 0.5)+" 0)"); |
| } |
| } |
| //now draw tabwindow background |
| this.tabwindows[i]["tabbg"] = document.createElementNS(svgNS,"path"); |
| for (var attrib in this.tabwindowStyles) { |
| this.tabwindows[i]["tabbg"].setAttributeNS(null,attrib,this.tabwindowStyles[attrib]); |
| } |
| //start the path for tab windows |
| var d = "M"; |
| //left corner of tab |
| if (this.cornerLeft == "rect") { |
| d += currentLeft+" "+this.y; |
| } |
| if (this.cornerLeft == "triangle") { |
| d += currentLeft+" "+(this.y+this.tabmargins)+"L"+(currentLeft+this.tabmargins)+" "+this.y; |
| } |
| if (this.cornerLeft == "round") { |
| d += currentLeft+" "+(this.y+this.tabmargins)+"a"+this.tabmargins+" "+this.tabmargins+" 0 0 1 "+this.tabmargins+" -"+this.tabmargins; |
| } |
| //right corner of tab |
| if (this.cornerRight == "rect") { |
| d += "L"+currentX+" "+this.y; |
| } |
| if (this.cornerRight == "triangle") { |
| d += "L"+(currentX-this.tabmargins)+" "+this.y+"L"+currentX+" "+(this.y+this.tabmargins); |
| } |
| if (this.cornerRight == "round") { |
| d += "L"+(currentX-this.tabmargins)+" "+this.y+"a"+this.tabmargins+" "+this.tabmargins+" 0 0 1 "+this.tabmargins+" "+this.tabmargins; |
| } |
| d += "L"+currentX+" "+(this.y+this.tabheight); |
| //complete the path for tab |
| var dtab = d + "L"+currentLeft+" "+(this.y+this.tabheight)+"z"; |
| //complete the path for tab window |
| d += "L"+(this.x+this.width)+" "+(this.y+this.tabheight)+"L"+(this.x+this.width)+" "+(this.y+this.height); |
| d += "L"+this.x+" "+(this.y+this.height); |
| if (currentLeft == this.x) { |
| d += "z"; |
| } |
| else { |
| d += "L"+this.x+" "+(this.y+this.tabheight)+"L"+currentLeft+" "+(this.y+this.tabheight)+"z"; |
| } |
| this.tabwindows[i]["tabbg"].setAttributeNS(null,"d",d); |
| this.tabwindows[i]["group"].insertBefore(this.tabwindows[i]["tabbg"],this.tabwindows[i]["tabTitle"]); |
| //create tab element |
| this.tabwindows[i]["tab"] = document.createElementNS(svgNS,"path"); |
| for (var attrib in this.tabStyles) { |
| this.tabwindows[i]["tab"].setAttributeNS(null,attrib,this.tabStyles[attrib]); |
| } |
| this.tabwindows[i]["tab"].setAttributeNS(null,"d",dtab); |
| this.tabwindows[i]["tab"].setAttributeNS(null,"id",this.id+"__"+i); |
| this.tabwindows[i]["tab"].addEventListener("click",this,false); |
| this.tabwindows[i]["group"].insertBefore(this.tabwindows[i]["tab"],this.tabwindows[i]["tabTitle"]); |
| //create group for tab content |
| this.tabwindows[i]["content"] = document.createElementNS(svgNS,"g"); |
| this.tabwindows[i]["content"].setAttributeNS(null,"id",this.id+"__"+i+"_content"); |
| if (this.hideContent) { |
| this.tabwindows[i]["content"].setAttributeNS(null,"display","none"); |
| } |
| this.tabwindows[i]["group"].appendChild(this.tabwindows[i]["content"]); |
| //set tab activate status |
| this.tabwindows[i].activeStatus = true; |
| //increment currentX with the space between tabs |
| currentX += this.spaceBetweenTabs; |
| } |
| //activate one tab |
| this.tabwindows[this.activeTabindex]["tab"].setAttributeNS(null,"fill",this.activetabBGColor); |
| this.tabGroup.appendChild(this.tabwindows[this.activeTabindex]["group"]); |
| if (this.hideContent) { |
| this.tabwindows[this.activeTabindex]["content"].setAttributeNS(null,"display","inherit"); |
| } |
| } |
| else { |
| alert("could not create or reference 'parentNode' of tabgroup with id '"+this.id+"'"); |
| } |
| } |
| |
| //test if window group exists or create a new group at the end of the file |
| tabgroup.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.parentGroup = this.parentNode; |
| nodeValid = true; |
| } |
| } |
| else if (typeof(this.parentNode) == "string") { |
| //first test if Windows 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; |
| } |
| |
| tabgroup.prototype.handleEvent = function(evt) { |
| var tab = evt.target; |
| var id = tab.getAttributeNS(null,"id"); |
| var idArray = id.split("__"); |
| var index = parseInt(idArray[1]); |
| this.activateTabByIndex(index,false); |
| //firefunction |
| this.timer.setTimeout("fireFunction",this.timerMs); |
| } |
| |
| tabgroup.prototype.fireFunction = function() { |
| if (typeof(this.functionToCall) == "function") { |
| this.functionToCall(this.id,this.tabTitles[this.activeTabindex],this.activeTabindex); |
| } |
| if (typeof(this.functionToCall) == "object") { |
| this.functionToCall.tabActivated(this.id,this.tabTitles[this.activeTabindex],this.activeTabindex); |
| } |
| if (typeof(this.functionToCall) == undefined) { |
| return; |
| } |
| } |
| |
| tabgroup.prototype.activateTabByIndex = function(tabindex,fireFunction) { |
| if (tabindex >= this.tabTitles.length) { |
| this.outOfBoundMessage(tabindex); |
| tabindex = 0; |
| } |
| //set old active tab to inactive |
| this.tabwindows[this.activeTabindex]["tab"].setAttributeNS(null,"fill",this.tabStyles["fill"]); |
| if (this.hideContent) { |
| this.tabwindows[this.activeTabindex]["content"].setAttributeNS(null,"display","none"); |
| } |
| //set new index |
| this.activeTabindex = tabindex; |
| //activate new tab |
| this.tabwindows[this.activeTabindex]["tab"].setAttributeNS(null,"fill",this.activetabBGColor); |
| //reorder tabs |
| this.tabGroup.appendChild(this.tabwindows[this.activeTabindex]["group"]); |
| //set display |
| if (this.hideContent) { |
| this.tabwindows[this.activeTabindex]["content"].setAttributeNS(null,"display","inherit"); |
| } |
| if (fireFunction) { |
| this.timer.setTimeout("fireFunction",this.timerMs); |
| } |
| } |
| |
| tabgroup.prototype.activateTabByTitle = function(title,fireFunction) { |
| var tabindex = -1; |
| for (var i=0;i<this.tabTitles.length;i++) { |
| if (this.tabTitles[i] == title) { |
| tabindex = i; |
| break; |
| } |
| } |
| if (tabindex != -1) { |
| this.activateTabByIndex(tabindex,fireFunction); |
| } |
| else { |
| alert("Error ("+this.id+"): Could not find title '"+title+"' in array tabTitles!"); |
| } |
| } |
| |
| //add content to this.tabwindows[tabindex]["content"] |
| tabgroup.prototype.addContent = function(node,tabindex,inheritDisplay) { |
| if (tabindex >= this.tabTitles.length) { |
| this.outOfBoundMessage(tabindex); |
| } |
| else { |
| if (typeof(node) == "string") { |
| node = document.getElementById(node); |
| } |
| if (node != undefined || node != "null") { |
| if (inheritDisplay) { |
| node.setAttributeNS(null,"display","inherit"); |
| } |
| this.tabwindows[tabindex]["content"].appendChild(node); |
| } |
| } |
| } |
| |
| //remove content from this.tabwindows[tabindex]["content"] |
| tabgroup.prototype.removeContent = function(node,tabindex) { |
| var deletedNode = undefined; |
| if (tabindex >= this.tabTitles.length) { |
| this.outOfBoundMessage(tabindex); |
| } |
| else { |
| if (typeof(node) == "string") { |
| node = document.getElementById(node); |
| } |
| if (node != undefined || node != "null") { |
| deletedNode = this.tabwindows[tabindex]["content"].removeChild(node); |
| } |
| } |
| return deletedNode; |
| } |
| |
| //move the tab, reference is upper left corner |
| tabgroup.prototype.moveTo = function(x,y) { |
| this.transx = x; |
| this.transy = y; |
| this.tabGroup.setAttributeNS(null,"transform","translate("+this.transx+","+this.transy+")"); |
| } |
| |
| //resize tabgroup |
| tabgroup.prototype.resize = function(width,height) { |
| this.width = width; |
| this.height = height; |
| //loop to change all tab sizes |
| var currentX = this.x; |
| for (var i=0;i<this.tabTitles.length;i++) { |
| currentLeft = currentX; |
| //get bbox |
| var bbox = this.tabwindows[i]["tabTitle"].getBBox(); |
| currentX = Math.round(currentLeft + this.tabmargins * 2 + bbox.width); |
| //start the path for tab windows |
| var d = "M"; |
| //left corner of tab |
| if (this.cornerLeft == "rect") { |
| d += currentLeft+" "+this.y; |
| } |
| if (this.cornerLeft == "triangle") { |
| d += currentLeft+" "+(this.y+this.tabmargins)+"L"+(currentLeft+this.tabmargins)+" "+this.y; |
| } |
| if (this.cornerLeft == "round") { |
| d += currentLeft+" "+(this.y+this.tabmargins)+"a"+this.tabmargins+" "+this.tabmargins+" 0 0 1 "+this.tabmargins+" -"+this.tabmargins; |
| } |
| //right corner of tab |
| if (this.cornerRight == "rect") { |
| d += "L"+currentX+" "+this.y; |
| } |
| if (this.cornerRight == "triangle") { |
| d += "L"+(currentX-this.tabmargins)+" "+this.y+"L"+currentX+" "+(this.y+this.tabmargins); |
| } |
| if (this.cornerRight == "round") { |
| d += "L"+(currentX-this.tabmargins)+" "+this.y+"a"+this.tabmargins+" "+this.tabmargins+" 0 0 1 "+this.tabmargins+" "+this.tabmargins; |
| } |
| d += "L"+currentX+" "+(this.y+this.tabheight); |
| //complete the path for tab window |
| d += "L"+(this.x+this.width)+" "+(this.y+this.tabheight)+"L"+(this.x+this.width)+" "+(this.y+this.height); |
| d += "L"+this.x+" "+(this.y+this.height); |
| if (currentLeft == this.x) { |
| d += "z"; |
| } |
| else { |
| d += "L"+this.x+" "+(this.y+this.tabheight)+"L"+currentLeft+" "+(this.y+this.tabheight)+"z"; |
| } |
| //set modified path elements |
| this.tabwindows[i]["tabbg"].setAttributeNS(null,"d",d); |
| //increment currentX with the space between tabs |
| currentX += this.spaceBetweenTabs; |
| } |
| } |
| |
| //deactivate a single tab |
| tabgroup.prototype.disableSingleTab = function(tabindex) { |
| if (tabindex >= this.tabTitles.length) { |
| this.outOfBoundMessage(tabindex); |
| } |
| else { |
| this.tabwindows[tabindex]["activeStatus"] = false; |
| if (!this.tabwindows[tabindex]["tabClone"]) { |
| this.tabwindows[tabindex]["tabClone"] = this.tabwindows[tabindex]["tab"].cloneNode(false); |
| this.tabwindows[tabindex]["tabClone"].removeEventListener("click",this,false); |
| this.tabwindows[tabindex]["tabClone"].setAttributeNS(null,"fill-opacity",0.5); |
| if (this.tabwindows[tabindex]["tabClone"].hasAttributeNS(null,"cursor")){ |
| this.tabwindows[tabindex]["tabClone"].removeAttributeNS(null,"cursor"); |
| } |
| this.tabwindows[tabindex]["group"].appendChild(this.tabwindows[tabindex]["tabClone"]); |
| } |
| else { |
| this.tabwindows[tabindex]["tabClone"].setAttributeNS(null,"display","inherit"); |
| this.tabwindows[tabindex]["group"].appendChild(this.tabwindows[tabindex]["tabClone"]); |
| } |
| } |
| } |
| |
| //deactivate all tabs |
| tabgroup.prototype.disableAllTabs = function() { |
| for (var i=0;i<this.tabTitles.length;i++) { |
| this.disableSingleTab(i); |
| } |
| } |
| |
| //deactivate all tabs |
| tabgroup.prototype.enableAllTabs = function() { |
| for (var i=0;i<this.tabTitles.length;i++) { |
| this.enableSingleTab(i); |
| } |
| } |
| |
| //activate a single tab |
| tabgroup.prototype.enableSingleTab = function(tabindex) { |
| if (tabindex >= this.tabTitles.length) { |
| this.outOfBoundMessage(tabindex); |
| } |
| else { |
| this.tabwindows[tabindex]["activeStatus"] = true; |
| if (this.tabwindows[tabindex]["tabClone"]) { |
| this.tabwindows[tabindex]["tabClone"].setAttributeNS(null,"display","none"); |
| } |
| } |
| } |
| |
| //out of bound error message |
| tabgroup.prototype.outOfBoundMessage = function(tabindex) { |
| alert("Error ("+this.id+"): the 'tabindex' (value: "+tabindex+") is out of bounds!\nThe index nr is bigger than the number of tabs."); |
| } |
