☰

JS Forms Library B

Encapulates and extends many HTML forms elements.

当前为 2014-04-14 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/418/1300/JS%20Forms%20Library%20B.js 

  1. // ==UserScript==
  2. // @name           JS Forms Library B
  3. // @namespace      MerricksdadJSFormsLibraryB
  4. // @description    Encapulates and extends many HTML forms elements.
  5. // @license        http://creativecommons.org/licenses/by-nc-nd/3.0/us/
  6. // @include        file:///C:/Users/Charlie/Desktop/*
  7. // @version        0.0.0.12
  8. // @copyright      Charlie Ewing except where noted
  9. // ==/UserScript==
  10.  
  11. //this script requires some functions in the WM Common Library
  12. //this script needs access to a pre-defined JSON object
  13.  
  14. (function() {
  15. 	var sandbox=this;
  16. 		
  17. 	//element helper functions
  18. 	sandbox.elementOuterWidth=function(e){
  19. 		return parseInt(e.offsetWidth||0);
  20. 	};
  21. 	sandbox.elementOuterHeight=function(e){
  22. 		return parseInt(e.offsetHeight||0);
  23. 	};
  24. 	sandbox.elementInnerWidth=function(e){
  25. 		var curWidth = e.style.width;
  26. 		e.style.width="0";
  27. 		var difference = elementOuterWidth(e);
  28. 		e.style.width=curWidth;
  29. 		return elementOuterWidth(e)-difference;
  30. 	};	
  31. 	sandbox.elementInnerHeight=function(e){
  32. 		var curHeight = e.style.height;
  33. 		e.style.height="0";
  34. 		var difference = elementOuterHeight(e);
  35. 		e.style.height=curHeight;
  36. 		return elementOuterHeight(e)-difference;
  37. 	};		
  38.  
  39. 	//forms library B
  40. 	sandbox.jsForms = {
  41. 	
  42. 		colorData:{
  43. 			webSafe:[],
  44. 			system:["ActiveBorder","ActiveCaption","ActiveCaptionText","AppWorkspace","ButtonFace","ButtonHighlight","ButtonShadow","Control","ControlDark","ControlDarkDark","ControlLight","ControlLightLight","ControlText","Desktop","GradientActiveCaption","GradientInactiveCaption","GrayText","Highlight","HighlightText","HotTrack","InactiveBorder","InactiveCaption","InactiveCaptionText","Info","InfoText","Menu","MenuBar","MenuHighlight","MenuText","ScrollBar","Transparent","Window","WindowFrame","WindowText"],
  45. 			colorWords:["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenrod","DarkGray","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DodgerBlue","Firebrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","Goldenrod","Gray","Green","GreenYellow","Honeydew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenrodYellow","LightGray","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquamarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenrod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"],
  46. 			custom:[
  47. 				{name:"Attribute",value:"rgba(255, 0, 0, 0.75)"},
  48. 				{name:"BlueWindow",value:"rgba(156, 246, 255, 0.75)"},
  49. 				{name:"Bookmark",value:"rgba(191, 210, 249, 0.75)"},
  50. 				{name:"BookmarkText",value:"rgba(128, 128, 128, 0.75)"},
  51. 				{name:"Breakpoint",value:"rgba(150, 58, 70, 0.75)"},
  52. 				{name:"BreakpointText",value:"rgba(255, 219, 163, 0.75)"},
  53. 				{name:"BrownText",value:"rgba(88, 60, 31, 0.75)"},
  54. 				{name:"Buy",value:"rgba(83, 196, 251, 0.75)"},
  55. 				{name:"Caret",value:"rgba(128, 0, 255, 0.75)"},
  56. 				{name:"CDATA",value:"rgba(255, 128, 0, 0.75)"},
  57. 				{name:"Close",value:"rgba(195, 70, 58, 0.75)"},
  58. 				{name:"Comment",value:"rgba(0, 100, 0, 0.75)"},
  59. 				{name:"CurrentLine",value:"rgba(232, 232, 232, 0.75)"},
  60. 				{name:"Experimental",value:"rgba(156, 244, 156, 0.75)"},
  61. 				{name:"GoTo",value:"rgba(102, 204, 51, 0.75)"},
  62. 				{name:"GreenWindow",value:"rgba(207, 255, 180, 0.75)"},
  63. 				{name:"Hint",value:"rgba(174, 129, 235, 0.75)"},
  64. 				{name:"ID",value:"rgba(0, 128, 255, 0.75)"},
  65. 				{name:"InactiveSelected",value:"rgba(191, 205, 219, 0.75)"},
  66. 				{name:"InactiveSelectedText",value:"rgba(67, 78, 84, 0.75)"},
  67. 				{name:"ItemDone",value:"#91FF91"}, 
  68. 				{name:"ItemFailed",value:"#FF7171"}, 
  69. 				{name:"ItemProcessing",value:"#FFFF7D"}, 
  70. 				{name:"Keyword",value:"rgba(0, 0, 255, 0.75)"},
  71. 				{name:"LineNumber",value:"rgba(43, 145, 175, 0.75)"},
  72. 				{name:"Number",value:"rgba(255, 0, 0, 0.75)"},
  73. 				{name:"PRE",value:"rgba(246, 246, 242, 0.75)"},
  74. 				{name:"QuoteText",value:"rgba(85, 85, 85, 0.75)"},
  75. 				{name:"Regex",value:"rgba(128, 0, 255, 0.75)"},
  76. 				{name:"SelectedText",value:"rgba(192, 192, 192, 0.75)"},
  77. 				{name:"SmartHightlighting",value:"rgba(0, 255, 0, 0.75)"},
  78. 				{name:"String",value:"rgba(163, 21, 21, 0.75)"},
  79. 				{name:"Tag",value:"rgba(0, 0, 255, 0.75)"},
  80. 				{name:"TanWindow",value:"rgba(255, 233, 180, 0.75)"},
  81. 				{name:"TrackChange",value:"rgba(108, 226, 108, 0.75)"},
  82. 				{name:"Unsaved",value:"rgba(255, 238, 98, 0.75)"},
  83. 				{name:"Value",value:"rgba(0, 0, 0, 0.75)"}
  84. 				
  85. 			]
  86. 		},
  87. 	
  88. 		globalStyle:function(){
  89. 			//control element styles
  90. 			return ".jsfButton {"+
  91. 				//"display: block;"+
  92. 				"width: 17px;"+
  93. 				"border: 1px solid buttonshadow;"+
  94. 				"border-radius: 15%;"+
  95. 				"padding: 0px;"+
  96. 				"line-height: 0;"+
  97. 				"font-size: 16px;"+
  98. 				"box-shadow: 0 5px 10px buttonhighlight inset, 0 3px 10px buttonhighlight inset,0 -5px 10px buttonshadow inset, 1px 1px 0 buttonhighlight inset, -1px -1px 0 buttonhighlight inset;"+
  99. 				"vertical-align: middle;"+
  100. 				"background-color: buttonface;"+
  101. 				"position:relative;"+
  102. 				"}\n"+
  103. 			".jsfButton:hover {"+
  104. 				"border: 1px solid highlight;"+
  105. 				"box-shadow: 0 5px 10px buttonhighlight inset, 0 3px 10px buttonhighlight inset,0 -3px 10px highlight inset, 1px 1px 0 buttonhighlight inset, -1px -1px 0 buttonhighlight inset;"+
  106. 				"}\n"+
  107. 			".jsfButton>span {position:absolute;}\n"+
  108. 			
  109. 			//tab styles
  110. 			".jsfTabControl>.tabs {display:block;}\n"+
  111. 			".jsfTabControl>.pages {overflow:auto; display:block; padding:3px; border-radius: 0 5px 5px 5px; border: 1px solid; z-index:1; position:relative; top:-1px; background-color:buttonface; padding:5px;}\n"+
  112. 			".jsfTabControl>.pages>div {display:block; height:100%;}\n"+
  113. 			".jsfTab {z-index:0; top:2px; background-color:buttonshadow; display:inline-block;border:1px solid; border-bottom:none; border-radius:5px 5px 0 0; padding: 4px 8px; position:relative;}\n"+
  114. 			".jsfTab.selected {z-index:999; top:0; background-color:buttonface;}\n"+
  115. 			".jsfTab>img {vertical-align:middle; width:16px; height:16px; padding-right:4px; display:inline-block;}\n"+
  116. 			".jsfTab>div {vertical-align:middle; display:inline-block;}\n"+
  117. 			
  118. 				//left side tabs variant
  119. 				".jsfTabControl.alignLeft>.tabs {display:inline-block; vertical-align:top;}\n"+
  120. 				".jsfTabControl.alignLeft>.pages {display:inline-block; vertical-align:top; left:-1px; top:0;}\n"+
  121. 				".jsfTabControl.alignLeft>.tabs>.jsfTab {border-radius:5px 0 0 5px; border:1px solid; border-right:none; display:block; left:2px; top:0;}\n"+
  122. 				".jsfTabControl.alignLeft>.tabs>.jsfTab.selected {left:0;}\n"+
  123. 				".jsfTabControl.alignLeft>.tabs>.jsfTab>img {}\n"+
  124. 				".jsfTabControl.alignLeft>.tabs>.jsfTab>div {}\n"+
  125. 		
  126. 				//right side tabs variant
  127. 				".jsfTabControl.alignRight>.tabs {display:inline-block; vertical-align:top;}\n"+
  128. 				".jsfTabControl.alignRight>.pages {display:inline-block; vertical-align:top; right:-1px; top:0; border-radius:5px 0 5px 5px;}\n"+
  129. 				".jsfTabControl.alignRight>.tabs>.jsfTab {border-radius:0 5px 5px 0; border:1px solid; border-left:none; display:block; right:2px; top:0;}\n"+
  130. 				".jsfTabControl.alignRight>.tabs>.jsfTab.selected {right:0;}\n"+
  131. 				".jsfTabControl.alignRight>.tabs>.jsfTab>img {}\n"+
  132. 				".jsfTabControl.alignRight>.tabs>.jsfTab>div {}\n"+
  133.  
  134. 				//bottom tabs variant
  135. 				".jsfTabControl.alignBottom>.tabs {}\n"+
  136. 				".jsfTabControl.alignBottom>.pages {border-radius:5px 5px 5px 0; top:1px;}\n"+
  137. 				".jsfTabControl.alignBottom>.tabs>.jsfTab {border:1px solid; border-top:none; border-radius:0 0 5px 5px; top:-2px;}\n"+
  138. 				".jsfTabControl.alignBottom>.tabs>.jsfTab.selected {top:0;}\n"+
  139. 				".jsfTabControl.alignBottom>.tabs>.jsfTab>img {}\n"+
  140. 				".jsfTabControl.alignBottom>.tabs>.jsfTab>div {}\n"+
  141.  
  142. 				//coolbar top variant
  143. 				".jsfTabControl.coolBar>.tabs {background-color:window;}\n"+
  144. 				".jsfTabControl.coolBar>.pages {top:0; border-radius:0; border:none; border-top:solid 1px windowframe; box-shadow:inset 0 1px buttonhighlight; padding: 15px 11px;}\n"+
  145. 				".jsfTabControl.coolBar>.tabs>.jsfTab {margin-left:2px; top:0px; background-color:transparent; border-radius:0; border:none; text-align:center;}\n"+
  146. 				".jsfTabControl.coolBar>.tabs>.jsfTab:first-child {margin-left:11px;}\n"+
  147. 				".jsfTabControl.coolBar>.tabs>.jsfTab.selected {background-color:activecaption;}\n"+
  148. 				".jsfTabControl.coolBar.hotTrack>.tabs>.jsfTab.selected:hover {background-color:activecaption;}\n"+
  149. 				".jsfTabControl.coolBar>.tabs>.jsfTab>img {width:32px; height:32px; padding-right:0px;}\n"+
  150. 				".jsfTabControl.coolBar>.tabs>.jsfTab>div {display:block; padding-top:5px;}\n"+
  151.  
  152. 				//coolbar left variant
  153. 				".jsfTabControl.coolBar.alignLeft>.tabs {}\n"+
  154. 				".jsfTabControl.coolBar.alignLeft>.pages {left:0; border:none; border-left:solid 1px windowframe; box-shadow:inset 1px 0 buttonhighlight;}\n"+
  155. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
  156. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
  157. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab.selected {}\n"+
  158. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>img {}\n"+
  159. 				".jsfTabControl.coolBar.alignLeft>.tabs>.jsfTab>div {}\n"+
  160.  
  161. 				//coolbar right variant
  162. 				".jsfTabControl.coolBar.alignRight>.tabs {}\n"+
  163. 				".jsfTabControl.coolBar.alignRight>.pages {left:0; border:none; border-right:solid 1px windowframe; box-shadow:inset -1px 0 buttonhighlight;}\n"+
  164. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab {left:0px; margin-left:0px; margin-top:2px;}\n"+
  165. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab:first-child {margin-left:0px; margin-top:11px;}\n"+
  166. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab.selected {}\n"+
  167. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>img {}\n"+
  168. 				".jsfTabControl.coolBar.alignRight>.tabs>.jsfTab>div {}\n"+
  169.  
  170. 				//coolbar bottom variant
  171. 				".jsfTabControl.coolBar.alignBottom>.tabs {}\n"+
  172. 				".jsfTabControl.coolBar.alignBottom>.pages {border:none; border-bottom:solid 1px windowframe; box-shadow:inset 0 -1px buttonhighlight;}\n"+
  173. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab {}\n"+
  174. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab:first-child {}\n"+
  175. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab.selected {}\n"+
  176. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>img {}\n"+
  177. 				".jsfTabControl.coolBar.alignBottom>.tabs>.jsfTab>div {}\n"+
  178. 				
  179. 				//hottracking variant
  180. 				".hotTrack>.tabs>.jsfTab:hover {background-color:inactivecaption;}\n"+
  181. 				".hotTrack>.tabs>.jsfTab.selected:hover {background-color:buttonface;}\n"+
  182. 				
  183. 			//draw styles
  184. 			".jsfblock {display:block !important;}\n"+
  185. 			".jsftableRow {display:table-row !important;}\n"+
  186. 			".jsftableCell {display:table-cell !important;}\n"+
  187. 			".jsfinlineBlock {display:inline-block !important;}\n"+
  188. 			".jsfinline {display:inline !important;}\n"+
  189. 			".jsftable {display:table !important;}\n"+		
  190. 			".jsfhidden {display:none !important;}\n"+
  191. 			
  192. 			".jsfBlock {display:block !important;}\n"+
  193. 			".jsfTableRow {display:table-row !important;}\n"+
  194. 			".jsfTableCell {display:table-cell !important;}\n"+
  195. 			".jsfInlineBlock {display:inline-block !important;}\n"+
  196. 			".jsfInline {display:inline !important;}\n"+
  197. 			".jsfTable {display:table !important;}\n"+		
  198. 			".jsfHidden {display:none !important;}\n"+
  199. 			
  200. 		
  201. 			//form docking
  202. 			".jsfDockTop {position:absolute !important; top:0px !important;}\n"+
  203. 			".jsfDockBottom {position:absolute !important; bottom:0px !important;}\n"+
  204. 			".jsfDockRight {position:absolute !important; right:0px !important;}\n"+
  205. 			".jsfDockLeft {position:absolute !important; left:0px !important;}\n"+
  206.  
  207. 			""//leave here
  208. 		},
  209. 	
  210. 		//basic constructor
  211. 		createElement:function(type,params){try{
  212. 			if (type=="createElement") {
  213. 				log("jsForms.createElement: Whoa! That would create an infinite loop.");
  214. 				return null;
  215. 			} else if (exists(jsForms[type])) {
  216. 				return new jsForms[type](params);
  217. 			}
  218. 		}catch(e){log("jsForms.createElement: "+e);}},		
  219. 	
  220. 		//basic parts for every element
  221. 		basicElement:function(params){try{
  222. 			var self=this;
  223. 			params=params||{};
  224. 			
  225. 			//defaults
  226. 			this._enabled=true;
  227. 			this.parent=null; //container element
  228. 			this.tag=null;
  229. 			this.causesValidation=true;
  230. 			
  231. 			//events
  232. 			this.onCreated=null;
  233. 			
  234. 			//set the accessibility of the element			
  235. 			this.__defineGetter__("enabled", function(){
  236. 				return this._enabled;
  237. 			});		   
  238. 			this.__defineSetter__("enabled", function(v){
  239. 				this._enabled = cBool(v);
  240. 				if (this.node) this.node.enabled=this.enabled;
  241. 			});
  242. 			
  243. 			//enable/disable commands
  244. 			this.enable=function(){this.enabled=true;};
  245. 			this.disable=function(){this.enabled=false;};
  246.  
  247. 			//init
  248. 			for (var p in params) this[p]=params[p];
  249. 			
  250. 			//return it
  251. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  252. 			return self;
  253. 		}catch(e){log("jsForms.basicElement.init: "+e);}},
  254. 	
  255. 		//basic parts for visual elements
  256. 		visualElement:function(params){try{
  257. 			var self=this;
  258. 			params=params||{};
  259. 			
  260. 			//attach basics
  261. 			self=extend(self,new jsForms.basicElement() );
  262. 			
  263. 			//defaults
  264. 			this._backColor="";
  265. 			this._foreColor="";
  266. 			this._font="";//"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif
  267. 			this._cursor="";
  268. 			this._visible=true;
  269. 			this._position={top:"",left:"",right:"",bottom:""};
  270. 			this._size={height:"",width:""};
  271. 			this._maximumSize={height:"",width:""};
  272. 			this._minimumSize={height:"",width:""};
  273. 			this._margin={top:"",left:"",right:"",bottom:""};
  274. 			this._padding={top:"",left:"",right:"",bottom:""};
  275. 			this._node=null;
  276. 			this.backgroundNode=null;
  277. 			this.borderNode=null;
  278. 			//_backgroundImage: url
  279. 			//_backgroundImageLayout: "", time, stretch, center, zoom
  280. 			this._borderStyle="None"; //[None, FixedSingle, Fixed3D]
  281. 			this._drawStyle="inline-block";
  282. 			this._borderCSS="1px solid #646464";
  283. 			this._borderRadius={topLeft:"",topRight:"",bottomRight:"",bottomLeft:""};
  284. 			this._toolTipText="";
  285. 			this._dock="none";
  286. 			
  287. 			//events
  288. 			this.onClick=null;
  289. 			this.onFocus=null;
  290. 			this.onBlur=null;
  291. 			
  292. 			//add css className
  293. 			this.addClassName=function(s){try{
  294. 				if (!isArray(s)) s=[s];
  295. 				var css=this.node.className;
  296. 				for (var w=0,len=s.length;(w<len);w++) {
  297. 					var word=s[w];
  298. 					this.node.className=css.addWord("jsf"+word);
  299. 				}
  300. 			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};
  301.  
  302. 			//remove css className
  303. 			this.removeClassName=function(s){try{
  304. 				if (!isArray(s)) s=[s];
  305. 				var css=this.node.className;
  306. 				for (var w=0,len=s.length;(w<len);w++) {
  307. 					var word=s[w];
  308. 					this.node.className=css.removeWord("jsf"+word);
  309. 				}
  310. 			}catch(e){log("jsForms.visualElement.addClassName: "+e);}};
  311. 			
  312. 			//autoFit parent element
  313. 			this.__defineGetter__("dock", function(){
  314. 				return this._dock;
  315. 			});
  316. 			this.__defineSetter__("dock", function(v){try{
  317. 				this._dock = (v=v.toString());
  318. 				
  319. 				//clear classes
  320. 				this.removeClassName(["dockTop","dockBottom","dockFill","dockRight","dockLeft"]);
  321. 				
  322. 				//calculate display, height, width and position
  323. 				var d, w, h, p=this.node.parentNode||null;
  324. 				switch(v) {
  325. 					case "none":
  326. 						//use given heights and widths
  327. 						d=this._drawStyle;
  328. 						w=this.size.width||"";
  329. 						h=this.size.height||"";						
  330. 						break;
  331. 					case "fill":
  332. 						//fully dock with parent object
  333. 						if (!p) return;
  334. 						d="block";
  335. 						w="";
  336. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  337. 						break;
  338. 					case "fillAndShare":
  339. 						//dock with parent object
  340. 						//using any space left by other children
  341. 						//this assumes all siblings are blocks
  342. 						if (!p) return;
  343. 						d="block";
  344. 						w="";
  345. 						//detect maximum possible height
  346. 						h=
  347. 							//parent inner height
  348. 							elementInnerHeight(p)
  349. 							//minus the outer requirements for this element
  350. 							-(this.outerHeight-this.innerHeight);
  351. 						//detect sibling elements' heights
  352. 						var sibH=0;
  353. 						for (var s in p.childNodes){
  354. 							sib=p.childNodes[s];
  355. 							if (sib!=this.node) {
  356. 								sibH+=elementOuterHeight(sib);
  357. 							}
  358. 						}
  359. 						h=(h-sibH)+"px";
  360. 						break;
  361. 					case "top":
  362. 						//dock to the top of the parent
  363. 						d="block";
  364. 						w="";
  365. 						h=this.size.height||"";
  366. 						this.addClassName("dockTop");
  367. 						break;
  368. 					case "bottom":
  369. 						//dock to the bottom of the parent
  370. 						d="block";
  371. 						w="";
  372. 						h=this.size.height||"";
  373. 						this.addClassName("dockBottom");
  374. 						break;
  375. 					case "right":
  376. 						//dock to the right of the parent
  377. 						d=this._drawStyle;
  378. 						w=this.size.width||"";
  379. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  380. 						this.addClassName("dockRight");
  381. 						break;
  382. 					case "left":
  383. 						//dock to the right of the parent
  384. 						d=this._drawStyle;
  385. 						w=this.size.width||"";
  386. 						h=elementInnerHeight(p)-(this.outerHeight-this.innerHeight)+"px";
  387. 						this.addClassName("dockLeft");
  388. 						break;
  389. 				}
  390. 				
  391. 				//apply non-class changes
  392. 				this.node.style.display=d;
  393. 				this.node.style.width=w;
  394. 				this.node.style.height=h;
  395. 			}catch(e){log("jsForms.visualElement.autoFit: "+e);}});
  396.  
  397. 			//set css background color
  398. 			this.__defineGetter__("backColor", function(){
  399. 				return this._backColor;
  400. 			});
  401. 			this.__defineSetter__("backColor", function(v){try{
  402. 				this._backColor = (v.toString());
  403. 				if (this.backgroundNode) this.backgroundNode.style.backgroundColor=this.backColor;
  404. 			}catch(e){log("jsForms.visualElement.backColor: "+e);}});
  405. 			
  406. 			//set draw style (display)
  407. 			this.__defineGetter__("drawStyle", function(){
  408. 				return this._drawStyle;
  409. 			});
  410. 			this.__defineSetter__("drawStyle", function(v){try{
  411. 				this._drawStyle = (v.toString());
  412. 				this.dock=this._dock;
  413. 			}catch(e){log("jsForms.visualElement.drawStyle: "+e);}});
  414.  
  415. 			//set tooltiptext/title
  416. 			this.__defineGetter__("toolTipText", function(){
  417. 				return this._toolTipText;
  418. 			});
  419. 			this.__defineSetter__("toolTipText", function(v){try{
  420. 				this._toolTipText = (v.toString());
  421. 				if (this.node) this.node.title=this._toolTipText;
  422. 			}catch(e){log("jsForms.visualElement.toolTipText: "+e);}});
  423.  
  424. 			//set css foreground color
  425. 			this.__defineGetter__("foreColor", function(){
  426. 				return this._foreColor;
  427. 			});		   
  428. 			this.__defineSetter__("foreColor", function(v){try{
  429. 				this._foreColor = (v.toString());
  430. 				if (this.node) this.node.style.color=this.foreColor;
  431. 			}catch(e){log("jsForms.visualElement.foreColor: "+e);}});
  432. 			
  433. 			//set the font used in both the box and the list
  434. 			this.__defineGetter__("font", function(){
  435. 				return this._font;
  436. 			});			   
  437. 			this.__defineSetter__("font", function(v){try{
  438. 				this._font = (v.toString());
  439. 				if (this.node) this.node.style.fontFamily=this.font;
  440. 			}catch(e){log("jsForms.visualElement.font: "+e);}});
  441.  
  442. 			//set the node element css class
  443. 			this.__defineGetter__("className", function(){
  444. 				return this.node.className;
  445. 			});			   
  446. 			this.__defineSetter__("className", function(v){try{
  447. 				if (this.node) this.node.className=v;
  448. 			}catch(e){log("jsForms.visualElement.className: "+e);}});
  449.  
  450. 			//set the cursor used in the element
  451. 			this.__defineGetter__("cursor", function(){
  452. 				return this._cursor;
  453. 			});
  454. 			this.__defineSetter__("cursor", function(v){try{
  455. 				this._cursor = (v.toString());
  456. 				if (this.node) this.node.style.cursor=this.cursor;
  457. 			}catch(e){log("jsForms.visualElement.cursor: "+e);}});
  458.  
  459. 			//set if the dropdown is visible
  460. 			this.__defineGetter__("visible", function(){
  461. 				return this._visible;
  462. 			});			   
  463. 			this.__defineSetter__("visible", function(v){try{
  464. 				this._visible = cBool(v);
  465. 				//log(this._visible);
  466. 				if (this._visible) this.removeClassName("hidden"); 
  467. 				else this.addClassName("hidden");
  468. 			}catch(e){log("jsForms.visualElement.visible: "+e);}});
  469.  
  470. 			//set the location based on the upper left of the container box
  471. 			//values are copied from the passed object so that a reference to the
  472. 			//passed object does not remain
  473. 			this.__defineGetter__("position", function(){
  474. 				return this._position;
  475. 			});			   
  476. 			this.__defineSetter__("position", function(v){try{
  477. 				if (isObject(v)) {
  478. 					this._position.top=v.top||"";
  479. 					this._position.left=v.left||"";
  480. 					this._position.right=v.right||"";
  481. 					this._position.bottom=v.bottom||"";
  482. 				} else {
  483. 					//value was not an object
  484. 					log("jsForms.visualElement.position.set: input was not an object");
  485. 					this._position={top:"",left:"",right:"",bottom:""}
  486. 				}
  487. 				if (this.node) {
  488. 					this.node.style.top=this.position.top;
  489. 					this.node.style.left=this.position.left;
  490. 					this.node.style.right=this.position.right;
  491. 					this.node.style.bottom=this.position.bottom;
  492. 				}
  493. 			}catch(e){log("jsForms.visualElement.position: "+e);}});
  494.  
  495. 			//set the height and width of the box
  496. 			this.__defineGetter__("size", function(){
  497. 				return this._size;
  498. 			});			   
  499. 			this.__defineSetter__("size", function(v){try{
  500. 				if (isObject(v)) {
  501. 					this._size.height=v.height||"";
  502. 					this._size.width=v.width||"";
  503. 				} else {
  504. 					//value was not an object
  505. 					log("jsForms.visualElement.size.set: input was not an object");
  506. 					this._size={height:"",width:""}
  507. 				}
  508. 				//now use the dock function to finish sizing
  509. 				this.dock = this._dock;
  510. 			}catch(e){log("jsForms.visualElement.size: "+e);}});
  511.  
  512. 			//set the max height and width of the box
  513. 			this.__defineGetter__("maximumSize", function(){
  514. 				return this._maximumSize;
  515. 			});			   
  516. 			this.__defineSetter__("maximumSize", function(v){try{
  517. 				if (isObject(v)) {
  518. 					this._maximumSize.height=v.height||"";
  519. 					this._maximumSize.width=v.width||"";
  520. 				} else {
  521. 					//value was not an object
  522. 					log("jsForms.visualElement.maximumSize.set: input was not an object");
  523. 					this._maximumSize={height:"",width:""}
  524. 				}
  525. 				if (this.node) {
  526. 					this.node.style.maxHeight=this.maximumSize.height;
  527. 					this.node.style.maxWidth=this.maximumSize.width;
  528. 				}
  529. 			}catch(e){log("jsForms.visualElement.maximumSize: "+e);}});
  530.  
  531. 			//set the min height and width of the box
  532. 			this.__defineGetter__("minimumSize", function(){
  533. 				return this._minimumSize;
  534. 			});			   
  535. 			this.__defineSetter__("minimumSize", function(v){try{
  536. 				if (isObject(v)) {
  537. 					this._minimumSize.height=v.height||"";
  538. 					this._minimumSize.width=v.width||"";
  539. 				} else {
  540. 					//value was not an object
  541. 					log("jsForms.visualElement.minimumSize.set: input was not an object");
  542. 					this._minimumSize={height:"",width:""}
  543. 				}
  544. 				if (this.node) {
  545. 					this.node.style.minHeight=this.minimumSize.height;
  546. 					this.node.style.minWidth=this.minimumSize.width;
  547. 				}
  548. 			}catch(e){log("jsForms.visualElement.minimumSize: "+e);}});
  549.  
  550. 			//set the margins of the object {top, left, right, bottom}
  551. 			this.__defineGetter__("margin", function(){
  552. 				return this._margin;
  553. 			});			   
  554. 			this.__defineSetter__("margin", function(v){try{
  555. 				if (isObject(v)) {
  556. 					this._margin.top=v.top||"";
  557. 					this._margin.left=v.left||"";
  558. 					this._margin.right=v.right||"";
  559. 					this._margin.bottom=v.bottom||"";
  560. 				} else {
  561. 					//value was not an object
  562. 					log("jsForms.visualElement.margin.set: input was not an object");
  563. 					this._margin={top:"",left:"",right:"",bottom:""}
  564. 				}
  565. 				if (this.node) {
  566. 					this.node.style.margin=
  567. 						this.margin.top+" "+
  568. 						this.margin.right+" "+
  569. 						this.margin.bottom+" "+
  570. 						this.margin.left;
  571. 				}
  572. 			}catch(e){log("jsForms.visualElement.margin: "+e);}});
  573.  
  574. 			//set the padding of the object {top, left, right, bottom}
  575. 			this.__defineGetter__("padding", function(){
  576. 				return this._padding;
  577. 			});			   
  578. 			this.__defineSetter__("padding", function(v){try{
  579. 				if (isObject(v)) {
  580. 					this._padding.top=v.top||"";
  581. 					this._padding.left=v.left||"";
  582. 					this._padding.right=v.right||"";
  583. 					this._padding.bottom=v.bottom||"";
  584. 				} else {
  585. 					//value was not an object
  586. 					log("jsForms.visualElement.padding.set: input was not an object");
  587. 					this._padding={top:"",left:"",right:"",bottom:""}
  588. 				}
  589. 				if (this.node) {
  590. 					this.node.style.paddingTop=this.padding.top;
  591. 					this.node.style.paddingLeft=this.padding.left;
  592. 					this.node.style.paddingRight=this.padding.right;
  593. 					this.node.style.paddingBottom=this.padding.bottom;
  594. 				}
  595. 			}catch(e){log("jsForms.visualElement.padding: "+e);}});
  596.  
  597. 			//set the border radius of the object 
  598. 			this.__defineGetter__("borderRadius", function(){
  599. 				return this._borderRadius;
  600. 			});			   
  601. 			this.__defineSetter__("borderRadius", function(v){try{
  602. 				if (isObject(v)) {
  603. 					this._borderRadius.topLeft=v.topLeft||"";
  604. 					this._borderRadius.bottomLeft=v.bottomLeft||"";
  605. 					this._borderRadius.topRight=v.topRight||"";
  606. 					this._borderRadius.bottomRight=v.bottomRight||"";
  607. 				} else {
  608. 					//value was not an object
  609. 					log("jsForms.visualElement.borderRadius.set: input was not an object");
  610. 					this._borderRadius={topLeft:"",bottomLeft:"",topRight:"",bottomRight:""}
  611. 				}
  612. 				if (this.borderNode) {
  613. 					this.borderNode.style.borderTopLeftRadius=this.borderRadius.topLeft;
  614. 					this.borderNode.style.borderTopRightRadius=this.borderRadius.topRight;
  615. 					this.borderNode.style.borderBottomLeftRadius=this.borderRadius.bottomLeft;
  616. 					this.borderNode.style.borderBottomRightRadius=this.borderRadius.bottomRight;
  617. 				}
  618. 			}catch(e){log("jsForms.visualElement.borderRadius: "+e);}});
  619.  
  620. 			//set the border style of the element
  621. 			this.__defineGetter__("borderStyle", function(){
  622. 				return this._borderStyle;
  623. 			});
  624. 			this.__defineSetter__("borderStyle", function(v){try{
  625. 				this._borderStyle = (v.toString());
  626. 				if (this.borderNode){
  627. 					this.borderNode.style.border=(
  628. 						(this._borderStyle=="Fixed3D")?"2px inset buttonface":
  629. 						(this._borderStyle=="FixedSingle")?this._borderCSS:
  630. 						"none"
  631. 					);
  632. 				}
  633. 			}catch(e){log("jsForms.visualElement.borderStyle: "+e);}});
  634.  
  635. 			//set default border css for borderStyle FixedSingle
  636. 			this.__defineGetter__("borderCSS", function(){
  637. 				return this._borderCSS;
  638. 			});			   
  639. 			this.__defineSetter__("borderCSS", function(v){try{
  640. 				this._borderCSS = (v.toString());
  641. 				this.borderStyle = this._borderStyle;
  642. 			}catch(e){log("jsForms.visualElement.borderCSS: "+e);}});
  643.  
  644. 			//return the dom node
  645. 			this.__defineGetter__("node", function(){
  646. 				return this._node;
  647. 			});	
  648.  
  649. 			//calculate inner and outer actual sizes
  650. 			this.__defineGetter__("outerWidth", function(){
  651. 				return elementOuterWidth(this._node);
  652. 			});	
  653.  
  654. 			this.__defineGetter__("innerWidth", function(){
  655. 				return elementInnerWidth(this._node);
  656. 			});	
  657.  
  658. 			this.__defineGetter__("outerHeight", function(){
  659. 				return elementOuterHeight(this._node);
  660. 			});	
  661.  
  662. 			this.__defineGetter__("innerHeight", function(){
  663. 				return elementInnerHeight(this._node);
  664. 			});				
  665.  
  666. 			//show/hide the visual element
  667. 			this.show=function(){
  668. 				this.visible=true;
  669. 			};
  670. 			this.hide=function(){
  671. 				this.visible=false;
  672. 			};
  673.  
  674. 			//draw the housing
  675. 			this._node=createElement("div",{
  676. 				style:(
  677. 					"display:"+this._drawStyle+";"+
  678. 					"vertical-align:middle;"+
  679. 					""//leave here
  680. 				)
  681. 			});
  682. 			
  683. 			//set nodes for bordering and background
  684. 			this.borderNode=this._node;
  685. 			this.backgroundNode=this._node;
  686. 			
  687. 			//init
  688. 			for (var p in params) this[p]=params[p];
  689. 			//confirm(JSON.stringify(this));
  690.  
  691. 			//return it
  692. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  693. 			return self;
  694. 		}catch(e){log("jsForms.visualElement.init: "+e);}},
  695. 	
  696. 		//icon specific parts
  697. 		icon:function(params){try{
  698. 			var self=this;
  699. 			params=params||{};
  700. 			
  701. 			//attach basic elements
  702. 			self=extend(self,new jsForms.visualElement() );
  703.  
  704. 			//defaults
  705. 			this._src=null;
  706. 			this._defaultImage=null;
  707. 			this._altImage=null;
  708. 			this.imageNode=null;
  709. 			this.node.style.overflow="hidden";
  710. 			this._selectedImage="_src";
  711. 						
  712. 			//set the image
  713. 			this.__defineGetter__("src", function(){
  714. 				return this._src;
  715. 			});
  716. 			this.__defineSetter__("_src", function(v){try{
  717. 				this._src = (v.toString());
  718. 				if (this._selectedImage=="_src") this.redraw();
  719. 			}catch(e){log("jsForms.icon.src: "+e);}});
  720. 			
  721. 			//set the default image
  722. 			this.__defineGetter__("defaultImage", function(){
  723. 				return this._defaultImage;
  724. 			});
  725. 			this.__defineSetter__("defaultImage", function(v){try{
  726. 				this._defaultImage = (v.toString());
  727. 				if (this._selectedImage=="_defaultImage") this.redraw();
  728. 			}catch(e){log("jsForms.icon.defaultImage: "+e);}});
  729.  
  730. 			//set the alt image
  731. 			this.__defineGetter__("altImage", function(){
  732. 				return this._altImage;
  733. 			});
  734. 			this.__defineSetter__("altImage", function(v){try{
  735. 				this._altImage = (v.toString());
  736. 				if (this._selectedImage=="_altImage") this.redraw();
  737. 			}catch(e){log("jsForms.icon.altImage: "+e);}});
  738. 			
  739. 			//show different images
  740. 			this.showPrimary=function(){
  741. 				this._selectedImage="_src";
  742. 				this.redraw();
  743. 			};
  744. 			this.showDefault=function(){
  745. 				this._selectedImage="_defaultImage";
  746. 				this.redraw();
  747. 			};
  748. 			this.showAlt=function(){
  749. 				this._selectedImage="_altImage";
  750. 				this.redraw();
  751. 			};
  752. 			
  753. 			//redraw
  754. 			this.redraw=function(){try{
  755. 				if (this.imageNode) {
  756. 					this.imageNode.src=(this[this._selectedImage]||this._defaultImage);
  757. 				}
  758. 			}catch(e){log("jsForms.icon.src: "+e);}};
  759. 			
  760. 			//draw it
  761. 			if (this.node){
  762. 				this.node.appendChild(
  763. 					this.imageNode=createElement("img",{
  764. 						style:(
  765. 							"width:inherit;"+
  766. 							"height:inherit;"+
  767. 							""//leave here
  768. 						),
  769. 					})
  770. 				);
  771. 			}			
  772.  
  773. 			//init
  774. 			for (var p in params) {try{
  775. 				//separate event functions
  776. 				if (p.startsWith("on")) {
  777. 					//apply event functions to intended objects
  778. 					if (["onCreated"].inArray(p)) {
  779. 						this[p]=params[p];
  780. 					} else this.imageNode[p.toLowerCase()]=params[p];
  781. 				} else this[p]=params[p];
  782. 			}catch(e){log("jsForms.icon.init (params): "+e);}};
  783. 			//confirm(JSON.stringify(this));
  784.  
  785. 			/*/preload images
  786. 			new Image().src = this._altImage;
  787. 			new Image().src = this._defaultImage;
  788. 			new Image().src = this._src;
  789. 			*/
  790.  
  791. 			//return it
  792. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  793. 			return self;
  794. 		}catch(e){log("jsForms.icon.init: "+e);}},
  795. 	
  796. 		//textbox specific parts
  797. 		textBox:function(params){try{
  798. 			var self=this;
  799. 			params=params||{};
  800. 			
  801. 			//attach basic elements
  802. 			self=extend(self,new jsForms.visualElement() );
  803.  
  804. 			//defaults
  805. 			this._text="";
  806. 			this._emptyText="";
  807. 			this._maxLength=32767;
  808. 			this.textNode=null;
  809. 			this.borderNode=null;
  810. 			this.backgroundNode=null;
  811. 			this._borderStyle="FixedSingle";
  812. 			//this._drawStyle="block";
  813. 			
  814. 			//events
  815. 			this.onChange=null;
  816.  
  817. 			//set the text shown in the box
  818. 			this.__defineGetter__("text", function(){
  819. 				return this._text;
  820. 			});
  821. 			this.__defineSetter__("text", function(v){try{
  822. 				this._text = (v.toString());
  823. 				if (this.textNode) this.textNode.value=v;
  824. 				if (this.causesValidation && this.onChange) {var caller=this; doAction(function(){caller.onChange(caller);})};
  825. 			}catch(e){log("jsForms.textBox.text: "+e);}});
  826.  
  827. 			//text to display when text=""
  828. 			this.__defineGetter__("emptyText", function(){
  829. 				return this._emptyText;
  830. 			});
  831. 			this.__defineSetter__("emptyText", function(v){try{
  832. 				this._emptyText = (v.toString());
  833. 				if (this.node) this.node.title=this.emptyText;
  834. 			}catch(e){log("jsForms.textBox.emptyText: "+e);}});
  835.  
  836. 			//set the max number of characters that can be entered in the box
  837. 			this.__defineGetter__("maxLength", function(){
  838. 				return this._maxLength;
  839. 			});
  840. 			this.__defineSetter__("maxLength", function(v){try{
  841. 				this._maxLength = parseInt(v);
  842. 				if (this.node) this.node.maxLength=this.maxLength;
  843. 			}catch(e){log("jsForms.textBox.maxLength: "+e);}});
  844.  
  845. 			//get the default value as text
  846. 			this.__defineGetter__("value", function(){
  847. 				return this._text;
  848. 			});
  849. 						
  850. 			//draw it
  851. 			this._node.appendChild(
  852. 				this.textNode=createElement("input",{
  853. 					maxLength:this._maxLength, 
  854. 					value:this._text, 
  855. 					title:this._emptyText, 
  856. 					enabled:this._enabled, 
  857. 					style:(
  858. 						"display:"+this._drawStyle+";"+
  859. 						"width:inherit;"+
  860. 						"height:inherit;"+
  861. 						"minWidth:inherit;"+
  862. 						"minHeight:inherit;"+
  863. 						"maxWidth:inherit;"+
  864. 						"maxHeight:inherit;"+
  865. 						"margin-top:inherit;"+
  866. 						"margin-left:inherit;"+
  867. 						"margin-right:inherit;"+
  868. 						"margin-bottom:inherit;"+
  869. 						"top:inherit;"+
  870. 						"left:inherit;"+
  871. 						"right:inherit;"+
  872. 						"bottom:inherit;"+
  873. 						"cursor:inherit;"+
  874. 						//"font-family:inherit;"+
  875. 						//"background-color:"+this._backColor+";"+
  876. 						"color:inherit;"+
  877. 						/*"border:"+(
  878. 							(this.borderStyle=="Fixed3D")?"":
  879. 							(this.borderStyle=="FixedSingle")?this.borderCSS:
  880. 							"none"
  881. 						)+";"+
  882. 						"border-top-left-radius:"+this.borderRadius.topLeft+";"+
  883. 						"border-top-right-radius:"+this.borderRadius.bottomLeft+";"+
  884. 						"border-bottom-left-radius:"+this.borderRadius.topRight+";"+
  885. 						"border-bottom-right-radius:"+this.borderRadius.bottomRight+";"+
  886. 						*/
  887.  
  888.  
  889. 						""//leave here					
  890. 					),
  891. 					onclick:self.onClick,
  892. 					ondblclick:self.onDoubleClick,
  893. 					onmousedown:self.onMouseDown,
  894. 					onmouseup:self.onMouseUp,
  895. 					onmousemove:self.onMouseMove,
  896. 					onmouseover:self.onMouseOver,
  897. 					onmouseout:self.onMouseOut,
  898. 					onkeydown:self.onKeyDown,
  899. 					onkeypress:self.onKeyPress,
  900. 					onkeyup:self.onKeyPress,
  901. 					onblur:self.onBlur,
  902. 					onfocus:self.onFocus,
  903. 					onselect:self.onSelect,
  904. 					onchange:function(){
  905. 						self.text=this.value;
  906. 					},
  907. 				})
  908. 			);
  909. 			
  910. 			//set nodes for bordering and background
  911. 			this.borderNode=this.textNode;
  912. 			this.backgroundNode=this.textNode;
  913. 			
  914. 			//init
  915. 			for (var p in params) this[p]=params[p];
  916. 			//confirm(JSON.stringify(this));
  917.  
  918. 			//return it
  919. 			if (this.causesValidation && this.onCreated) doAction(function(){this.onCreated(this);});
  920. 			return this;
  921. 		}catch(e){log("jsForms.textBox.init: "+e);}},
  922.  
  923. 		//numeric up/down specific parts
  924. 		spinBox:function(params){try{
  925. 			var self=this;
  926. 			params=params||{};
  927. 			
  928. 			//attach basic elements
  929. 			self=extend(self,new jsForms.textBox() );
  930.  
  931. 			//defaults
  932. 			//this._hexadecimal=false;
  933. 			//this._thousandsSeparator=false;
  934. 			this._upDownAlign="right";
  935. 			//this._decimalPlaces=0;
  936. 			this._increment=1;
  937. 			this._maximum=100;
  938. 			this._minimum=0;
  939. 			this._rollOver=false; //start at the other end if past boundary
  940. 			
  941. 			//set the max value
  942. 			this.__defineGetter__("maximum", function(){
  943. 				return this._maximum;
  944. 			});
  945. 			this.__defineSetter__("maximum", function(v){try{
  946. 				this._maximum = parseInt(v);
  947. 			}catch(e){log("jsForms.spinBox.maximum: "+e);}});
  948.  
  949. 			//set the min value
  950. 			this.__defineGetter__("minimum", function(){
  951. 				return this._minimum;
  952. 			});
  953. 			this.__defineSetter__("minimum", function(v){try{
  954. 				this._minimum = parseInt(v);
  955. 			}catch(e){log("jsForms.spinBox.minimum: "+e);}});
  956.  
  957. 			//set the increment value
  958. 			this.__defineGetter__("increment", function(){
  959. 				return this._increment;
  960. 			});
  961. 			this.__defineSetter__("increment", function(v){try{
  962. 				this._increment = parseInt(v);
  963. 			}catch(e){log("jsForms.spinBox.increment: "+e);}});
  964.  
  965. 			//set the rollOver flag
  966. 			this.__defineGetter__("rollOver", function(){
  967. 				return this._rollOver;
  968. 			});
  969. 			this.__defineSetter__("rollOver", function(v){try{
  970. 				this._rollOver = cBool(v);
  971. 			}catch(e){log("jsForms.spinBox.rollOver: "+e);}});
  972.  
  973. 			//up and down functions
  974. 			this.up=function(){
  975. 				this.change(this._increment);
  976. 			};
  977. 			this.down=function(){
  978. 				this.change(-(this._increment));
  979. 			};
  980. 			this.change=function(n){
  981. 				var v=parseInt(this.text),hasChanged=false;
  982. 				v=v+n;
  983. 				//validate boundaries
  984. 				if ((v<=this._maximum)&&(v>=this._minimum)){
  985. 					hasChanged=true;
  986. 				} else {
  987. 					if (this._rollOver) {
  988. 						//perform rollover
  989. 						if (v>this._maximum) v=this._minimum;
  990. 						else v=this._maximum;
  991. 						hasChanged=true;
  992. 					}
  993. 				}
  994. 				if (hasChanged){
  995. 					//format output
  996. 					//v=v.toString();
  997. 					//v=v.format("#,##0");
  998. 					//print it
  999. 					this.text=v;
  1000. 				}
  1001. 			};			
  1002. 			
  1003. 			//append buttons to the textbox portion
  1004. 			this.node.style.position="relative";
  1005. 			this.textNode.style.textAlign=(this._upDownAlign=="left")?"right":"left";
  1006. 			this.textNode.style.verticalAlign="middle";
  1007. 			this.node.appendChild(
  1008. 				this.buttonNode=createElement("div",{
  1009. 					style:(
  1010. 						"vertical-align: middle;"+
  1011. 						"position: relative;"+
  1012. 						"display: inline-block;"+
  1013. 						""//leave here
  1014. 					),
  1015. 				},[
  1016. 					this.incrementNode=createElement("button",{
  1017. 						className:"jsfButton jsfblock",
  1018. 						title:"Up",
  1019. 						onclick:function(){
  1020. 							self.up();
  1021. 						},
  1022. 					},[
  1023. 						createElement("span",{
  1024. 							textContent:"\u25B4",
  1025. 						})
  1026. 					]),
  1027. 					this.decrementNode=createElement("button",{
  1028. 						className:"jsfButton jsfblock",
  1029. 						title:"Down",
  1030. 						onclick:function(){
  1031. 							self.down();
  1032. 						},
  1033. 					},[
  1034. 						createElement("span",{
  1035. 							textContent:"\u25BE",
  1036. 						})
  1037. 					])
  1038. 				])
  1039. 			);
  1040. 			
  1041. 			//init
  1042. 			for (var p in params) this[p]=params[p];
  1043.  
  1044. 			//resize its buttons
  1045. 			this.fixSizes=function(){
  1046. 				var self=this;
  1047. 				var btn=this.incrementNode;
  1048. 				var h=elementOuterHeight(this.textNode);
  1049. 				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
  1050. 				if (!isNaN(h) && !isNaN(i) && h>0){
  1051. 					//resize buttons
  1052. 					btn.style.height=(h/2)-i+"px";
  1053. 					self.decrementNode.style.height=
  1054. 						btn.style.height;
  1055. 					//move child text to center
  1056. 					var span=btn.childNodes[0];
  1057. 					span.style.left=
  1058. 						Math.floor((
  1059. 							elementInnerWidth(btn)-elementOuterWidth(span))/2
  1060. 						)+"px";
  1061. 					span.style.bottom=
  1062. 						Math.floor((
  1063. 							elementInnerHeight(btn)-elementOuterHeight(span))/2
  1064. 						)+"px";
  1065. 						
  1066. 					var span=self.decrementNode.childNodes[0];
  1067. 					span.style.left=
  1068. 						Math.floor(
  1069. 							(elementInnerWidth(self.decrementNode)-elementOuterWidth(span))/2
  1070. 						)+"px";
  1071. 					span.style.bottom=
  1072. 						Math.floor(
  1073. 							(elementInnerHeight(self.decrementNode)-elementOuterHeight(span))/2
  1074. 						)+"px";
  1075. 				} else {
  1076. 					setTimeout(function(){self.fixSizes();},100);
  1077. 				}
  1078. 			};
  1079. 			this.fixSizes();
  1080.  
  1081. 			//return it
  1082. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1083. 			return self;			
  1084. 		}catch(e){log("jsForms.spinBox.init: "+e);}},	
  1085.  
  1086. 		//checkbox specific parts
  1087. 		checkBox:function(params){try{
  1088. 			var self=this;
  1089. 			params=params||{};
  1090. 			
  1091. 			//attach basic elements
  1092. 			self=extend(self,new jsForms.visualElement() );
  1093.  
  1094. 			//defaults
  1095. 			this._checked=false;
  1096. 			this._text=""; 
  1097. 			this._value="";
  1098. 			//_threeState: see checkedState
  1099. 			//_checkedState: [unchecked, checked, indeterminate]
  1100. 			this._autoCheck=true; //check on label click
  1101. 			this.checkNode=null;
  1102. 			this.labelNode=null;
  1103. 			this._highlightSelected=false;
  1104.  
  1105. 			//this._image="";
  1106. 			//this._textCheckRelation="After"; //[Above, Below, Before, After]
  1107. 			//this._textImageRelation="After"; //[Above, Below, Before, After]
  1108. 			
  1109. 			//events
  1110. 			this.onChecked=null;
  1111. 			this.onUnchecked=null;
  1112. 			
  1113. 			//set visible text of the checkbox
  1114. 			this.__defineGetter__("text", function(){
  1115. 				return this._text;
  1116. 			});
  1117. 			this.__defineSetter__("text", function(v){try{
  1118. 				this._text = (v.toString());
  1119. 				if (this.labelNode) this.labelNode.textContent=this._text;
  1120. 			}catch(e){log("jsForms.checkBox.text: "+e);}});
  1121.  
  1122. 			//set underlying value of the checkbox
  1123. 			this.__defineGetter__("value", function(){
  1124. 				return this._value;
  1125. 			});
  1126. 			this.__defineSetter__("value", function(v){try{
  1127. 				this._value =  v;
  1128. 				if (this.checkNode) this.checkNode.value=this._value;
  1129. 			}catch(e){log("jsForms.checkBox.value: "+e);}});
  1130.  
  1131. 			this.doAutoCheck=function(){try{
  1132. 				click(self.checkNode);
  1133. 				if (self.onLabelClick) self.onLabelClick();
  1134. 			}catch(e){log("jsForms.checkBox.doAutoCheck: "+e);}};
  1135. 			
  1136. 			//set autocheck on label click
  1137. 			this.__defineGetter__("autoCheck", function(){
  1138. 				return this._autoCheck;
  1139. 			});
  1140. 			this.__defineSetter__("autoCheck", function(v){try{
  1141. 				this._autoCheck = cBool(v);
  1142. 				this.labelNode.onclick=(!this._autoCheck)?this.onLabelClick:this.doAutoCheck;
  1143. 			}catch(e){log("jsForms.checkBox.autoCheck: "+e);}});
  1144.  
  1145. 			//set highlight on checked
  1146. 			this.__defineGetter__("highlightSelected", function(){
  1147. 				return this._highlightSelected;
  1148. 			});
  1149. 			this.__defineSetter__("highlightSelected", function(v){try{
  1150. 				this._highlightSelected = cBool(v);
  1151. 				if (this.node) {
  1152. 					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
  1153. 					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
  1154. 				}
  1155. 			}catch(e){log("jsForms.checkBox.highlightSelected: "+e);}});
  1156.  
  1157. 			//set checked state
  1158. 			this.__defineGetter__("checked", function(){
  1159. 				return this._checked;
  1160. 			});
  1161. 			this.__defineSetter__("checked", function(v){try{
  1162. 				this._checked = cBool(v);
  1163. 				if (this.checkNode) this.checkNode.checked=this._checked;
  1164. 				if (this.node) {
  1165. 					this.node.style.backgroundColor=(this._highlightSelected)?((this._checked)?"highlight":this.backColor):this.backColor;
  1166. 					this.node.style.color=(this._highlightSelected)?((this._checked)?"highlighttext":this.foreColor):this.foreColor;
  1167. 				}
  1168. 				if (this.causesValidation){
  1169. 					var caller=this;
  1170. 					if (this.onChecked && this._checked) doAction(function(){caller.onChecked(caller);});
  1171. 					if (this.onUnchecked && !this._checked) doAction(function(){caller.onChecked(caller);});
  1172. 					if (this.onChange) doAction(function(){caller.onChange(caller);});
  1173. 						/*confirm("-onchange");
  1174. 						window.setTimeout(function(){
  1175. 							confirm("-onchange delay");
  1176. 							caller.onChange(caller);
  1177. 						},1000);*/
  1178. 					//}
  1179. 				}
  1180. 			}catch(e){log("jsForms.checkBox.checked: "+e);}});
  1181. 			
  1182. 			//register the initial params
  1183. 			for (var p in params) this[p]=params[p];
  1184. 			
  1185. 			//draw it
  1186. 			this.node.appendChild(
  1187. 				this.checkNode=createElement("input",{
  1188. 					type: "checkbox",
  1189. 					value: this._value,
  1190. 					checked: this._checked,
  1191. 					style:(
  1192. 						"margin-right: 4px;"+
  1193. 						"vertical-align: middle;"+
  1194. 						
  1195. 						"" //leave here
  1196. 					),
  1197. 					onclick:self.onClick,
  1198. 					ondblclick:self.onDoubleClick,
  1199. 					onmousedown:self.onMouseDown,
  1200. 					onmouseup:self.onMouseUp,
  1201. 					onmousemove:self.onMouseMove,
  1202. 					onmouseover:self.onMouseOver,
  1203. 					onmouseout:self.onMouseOut,
  1204. 					onkeydown:self.onKeyDown,
  1205. 					onkeypress:self.onKeyPress,
  1206. 					onkeyup:self.onKeyPress,
  1207. 					onblur:self.onBlur,
  1208. 					onfocus:self.onFocus,
  1209. 					onchange:function(){
  1210. 						self.checked=this.checked;
  1211. 					},
  1212. 				})
  1213. 			);			
  1214. 			
  1215. 			this.node.appendChild(
  1216. 				this.labelNode=createElement("label",{
  1217. 					textContent:this._text,
  1218. 					style:(
  1219. 						"margin-right: 4px;"+
  1220. 						"vertical-align: middle;"+
  1221. 						"font-weight: normal;"+
  1222. 						"color: inherit;"+
  1223. 						
  1224. 						"" //leave here
  1225. 					),
  1226. 					onclick:(this._autoCheck)?self.doAutoCheck:self.onLabelClick,
  1227. 					ondblclick:self.onLabelDoubleClick,
  1228. 					onmousedown:self.onMouseDown,
  1229. 					onmouseup:self.onMouseUp,
  1230. 					onmousemove:self.onMouseMove,
  1231. 					onmouseover:self.onMouseOver,
  1232. 					onmouseout:self.onMouseOut,
  1233. 					onkeydown:self.onKeyDown,
  1234. 					onkeypress:self.onKeyPress,
  1235. 					onkeyup:self.onKeyPress,
  1236. 					onblur:self.onBlur,
  1237. 					onfocus:self.onFocus,
  1238. 				})
  1239. 			);
  1240. 			
  1241. 			//return it
  1242. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1243. 			return self;
  1244. 		}catch(e){log("jsForms.checkBox.init: "+e);}},
  1245. 		
  1246. 		//toolBox for containing tool icons
  1247. 		toolBox:function(params){try{
  1248. 			var self=this;
  1249. 			params=params||{};
  1250. 			
  1251. 			//attach basic elements
  1252. 			self=extend(self,new jsForms.listBox({items:params.items}) );
  1253. 			delete params.items;
  1254.  
  1255. 			//defaults
  1256. 			this.node.style.position="absolute";
  1257. 			this.drawStyle="block";
  1258. 			//this.node.style.overflow=""; //make it expand as needed
  1259. 			this.position={top:"0px",right:"0px"};
  1260. 			
  1261. 			//init
  1262. 			for (var p in params) this[p]=params[p];
  1263. 			//confirm(JSON.stringify(this));
  1264.  
  1265. 			//return it
  1266. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1267. 			return self;			
  1268. 		}catch(e){log("jsForms.toolBox.init: "+e);}},		
  1269. 		
  1270. 		//listbox specific parts
  1271. 		listBox:function(params){try{
  1272. 			var self=this;
  1273. 			params=params||{};
  1274. 			
  1275. 			//attach basic elements
  1276. 			self=extend(self, new jsForms.visualElement() );
  1277.  
  1278. 			//defaults
  1279. 			this._maxItems=32767;
  1280. 			this._maxSelectedItems=32767;
  1281. 			this._sorted=false;
  1282. 			this._sortBy=["text"];
  1283. 			this._sortOrder="asc";
  1284. 			this.listNode=this.node;
  1285. 			this._items=[];
  1286. 			this._firstItemSelectsAll=false;
  1287. 			this._explicitClose=false;
  1288. 			this._valueMember="value";
  1289. 			this._highlightSelected=false;
  1290. 			this.node.style.overflow="scroll";
  1291. 			this._allowMoveChildren=false;
  1292. 			
  1293. 			//events
  1294. 			this.onItemSelected=null;
  1295. 			this.onItemChecked=null;
  1296. 			this.onItemUnselected=null;
  1297. 			this.onItemUnchecked=null;
  1298. 			this.onMaxItemsSelected=null;
  1299. 			
  1300. 			//set the max number of items to show in the list
  1301. 			this.__defineGetter__("maxItems", function(){
  1302. 				return this._maxItems;
  1303. 			});
  1304. 			this.__defineSetter__("maxItems", function(v){try{
  1305. 				this._maxItems = parseInt(v);
  1306. 			}catch(e){log("jsForms.listBox.maxItems: "+e);}});
  1307.  
  1308. 			//set the max number of items that can be selected
  1309. 			this.__defineGetter__("maxSelectedItems", function(){
  1310. 				return this._maxSelectedItems;
  1311. 			});
  1312. 			this.__defineSetter__("maxSelectedItems", function(v){try{
  1313. 				this._maxSelectedItems = parseInt(v);
  1314. 			}catch(e){log("jsForms.listBox.maxSelectedItems: "+e);}});
  1315.  
  1316. 			//set if the list is to be sorted
  1317. 			this.__defineGetter__("sorted", function(){
  1318. 				return this._sorted;
  1319. 			});
  1320. 			this.__defineSetter__("sorted", function(v){try{
  1321. 				this._sorted = cBool(v);
  1322. 				if (this._sorted) this.sort();
  1323. 			}catch(e){log("jsForms.listBox.sorted: "+e);}});
  1324. 			
  1325. 			//set if the list children can be moved around
  1326. 			this.__defineGetter__("allowMoveChildren", function(){
  1327. 				return this._allowMoveChildren;
  1328. 			});
  1329. 			this.__defineSetter__("allowMoveChilden", function(v){try{
  1330. 				this._allowMoveChildren = cBool(v);
  1331. 				//add||remove tools for each child
  1332. 				for (var i=0,child;(child=this.items[i]);i++){
  1333. 					if (this._allowMoveChildren) {
  1334. 						//add item to toolbox
  1335. 					} else {
  1336. 						//remove item from toolbox
  1337. 					}
  1338. 				}				
  1339. 			}catch(e){log("jsForms.listBox.allowMoveChildren: "+e);}});
  1340.  
  1341. 			//set highlight if selected
  1342. 			this.__defineGetter__("highlightSelected", function(){
  1343. 				return this._highlightSelected;
  1344. 			});
  1345. 			this.__defineSetter__("highlightSelected", function(v){try{
  1346. 				this._highlightSelected = cBool(v);
  1347. 				for (var i=0,child;(child=this.items[i]);i++){
  1348. 					child.highlightSelected=this._highlightSelected;
  1349. 				}
  1350. 			}catch(e){log("jsForms.listBox.highlightSelected: "+e);}});
  1351.  
  1352. 			//set the parameters by which the list is to be sorted
  1353. 			this.__defineGetter__("sortBy", function(){
  1354. 				return this._sortBy;
  1355. 			});
  1356. 			this.__defineSetter__("sortBy", function(v){try{
  1357. 				if (isArray(v) || isString(v)) {
  1358. 					this._sortBy = v;
  1359. 					if (this._sorted) this.sort();
  1360. 				} else {
  1361. 					log("jsForms.listBox.sortBy: Expected array or string, found "+typeof v);
  1362. 				}
  1363. 			}catch(e){log("jsForms.listBox.sortBy: "+e);}});
  1364. 			
  1365. 			//set the direction by which the sorting is done
  1366. 			this.__defineGetter__("sortOrder", function(){
  1367. 				return this._sortOrder;
  1368. 			});
  1369. 			this.__defineSetter__("sortOrder", function(v){try{
  1370. 				this._sortOrder = v.toString();
  1371. 				if (this._sorted) this.sort();
  1372. 			}catch(e){log("jsForms.listBox.sortOrder: "+e);}});
  1373.  
  1374. 			//get the items list of the list
  1375. 			this.__defineGetter__("items", function(){
  1376. 				return this._items;
  1377. 			});
  1378. 			this.__defineSetter__("items", function(v){try{
  1379. 				this._items = v;
  1380. 			}catch(e){log("jsForms.listBox.items: "+e);}});
  1381. 			
  1382. 			//alias for items list
  1383. 			this.__defineGetter__("options", function(){
  1384. 				return this._items;
  1385. 			});
  1386.  
  1387. 			//set the parameter of the sub item that is to be used as a value
  1388. 			this.__defineGetter__("valueMember", function(){
  1389. 				return this._valueMember;
  1390. 			});
  1391. 			this.__defineSetter__("valueMember", function(v){try{
  1392. 				this._valueMember = (v.toString());
  1393. 			}catch(e){log("jsForms.listBox.valueMember: "+e);}});
  1394.  
  1395. 			//an object to display at the end of the
  1396. 			//...list that can be clicked to close a dropdown
  1397. 			this.__defineGetter__("explicitClose", function(){
  1398. 				return this._explicitClose;
  1399. 			});
  1400. 			this.__defineSetter__("explicitClose", function(v){try{
  1401. 				this._explicitClose = cBool(v);
  1402. 			}catch(e){log("jsForms.listBox.explicitClose: "+e);}});
  1403. 			
  1404. 			//set if the special selectAll option appears
  1405. 			this.__defineGetter__("firstItemSelectsAll", function(){
  1406. 				return this._firstItemSelectsAll;
  1407. 			});
  1408. 			this.__defineSetter__("firstItemSelectsAll", function(v){try{
  1409. 				this._firstItemSelectsAll = cBool(v);
  1410. 			}catch(e){log("jsForms.listBox.firstItemSelectsAll: "+e);}});
  1411.  
  1412. 			//get the default value as text
  1413. 			this.__defineGetter__("value", function(){try{
  1414. 				var ret=[];
  1415. 				var sel=this.selectedItems;
  1416. 				for (var i=0,child;(child=sel[i]);i++){
  1417. 					ret.push(child[this._valueMember]);
  1418. 				}
  1419. 				return ret;
  1420. 			}catch(e){log("jsForms.listBox.value: "+e);}});
  1421. 			
  1422. 			//get an array of selected options/checkboxes
  1423. 			this.__defineGetter__("selectedItems", function(){try{
  1424. 				var ret=[];
  1425. 				for (var i=0,child;(child=this.items[i]);i++){
  1426. 					if (exists(child.selected)) {
  1427. 						//check for option types that are selected
  1428. 						if (child.selected) ret.push(child);
  1429. 					} else if (exists(child.checked)) {
  1430. 						//check for checkbox types that are checked
  1431. 						if (child.checked) ret.push(child);
  1432. 					}
  1433. 				}
  1434. 				return ret;
  1435. 			}catch(e){log("jsForms.listBox.selectedItems: "+e);}});
  1436.  
  1437. 			//sort the list and redraw
  1438. 			//p accepts {direction:string, by:array:string}
  1439. 			//sorting is done using by[len-1] to by[0] so that
  1440. 			//...sorting by ["lastName","firstName"] results in
  1441. 			//...items being sorted by lastName first in the output
  1442. 			this.sort=function(p){try{
  1443. 				var params=p||{};
  1444. 				params.by=params.by||this._sortBy||["text"];
  1445. 				if (!isArray(params.by)) params.by=[].push(params.by);
  1446. 				params.direction=params.direction||this._sortOrder||"asc";
  1447. 				//var arrList=methodsToArray(this._items);
  1448. 				var arrList=this._items;
  1449. 				var dir=params.direction.toLowerCase();
  1450. 				//for each passed sort by entry, sort the list
  1451. 				for (var i=this.params.by.length,by;(by=this.params.by[i]);i--){
  1452. 					arrList.sort(function(a,b){
  1453. 						if (["ascending","asc"].inArray(dir)) return a[by]>=b[by];
  1454. 						if (["descending","desc"].inArray(dir)) return a[by]<=b[by];
  1455. 						return true;
  1456. 					});
  1457. 				};
  1458. 				//this._items=arrayToMethods(arrList);
  1459. 				this._items=arrList;
  1460. 				this.redraw();
  1461. 			}catch(e){log("jsForms.listBox.sort: "+e);}};
  1462. 			
  1463. 			//redraw the list of items
  1464. 			this.redraw=function(){try{
  1465. 				//clear all items
  1466. 				for (var n in this.node){
  1467. 					remove(n);
  1468. 				}
  1469. 				//append selectall button if needed
  1470. 				if (this._firstItemSelectsAll) {
  1471. 					this.node.appendChild(this._selectAllNode);
  1472. 				}
  1473. 				//redraw in current order
  1474. 				for (var i=0,child;(child=this.items[i]);i++){
  1475. 					this.node.appendChild(child.node||child);
  1476. 				}
  1477. 				//append explicitclose button if needed
  1478. 				if (this._explicitClose){
  1479. 					this.node.appendChild(this._explicitCloseNode);
  1480. 				}
  1481. 			}catch(e){log("jsForms.listBox.redraw: "+e);}};
  1482. 			
  1483. 			//generic close function, to be replaced by parent objects
  1484. 			this.close=function(){
  1485. 				this.visible=false;
  1486. 			};
  1487. 			//collapse the list down to a single element
  1488. 			this.collapse=function(){try{
  1489. 				this.node.style.height=this.items[0].node.offsetHeight;
  1490. 				this.node.style.overflowX="hidden";
  1491. 				this.node.style.overflowY="hidden";
  1492. 			}catch(e){log("jsForms.listBox.collapse: "+e);}};
  1493. 			//expand the list to the specified size
  1494. 			this.expand=function(){try{
  1495. 				this.node.style.height=this.size.height;
  1496. 				this.node.style.overflowX="hidden";
  1497. 				this.node.style.overflowY="scroll";
  1498. 			}catch(e){log("jsForms.listBox.expand: "+e);}};
  1499.  
  1500. 			//update visual details, such as border
  1501. 			this.borderStyle="FixedSingle";
  1502.  
  1503. 			//register the initial params
  1504. 			for (var p in params) {try{
  1505. 				this[p]=params[p];
  1506. 			}catch(e){log("jsForms.listBox.init(params "+p+"): "+e);}};
  1507. 									
  1508. 			//modify children
  1509. 			for (var i=0,child;(child=this.items[i]);i++){try{
  1510. 				//append onchange value to every list item
  1511. 				child.onChange=function(){
  1512. 					if (self.causesValidation && self.onChange) {
  1513. 						doAction(function(){self.onChange(self);});
  1514. 					}
  1515. 				};
  1516. 				//change the drawstyle of each listitem
  1517. 				(child.node||child).style.display="block";
  1518. 				//set the highlightSelected attribute
  1519. 				child.highlightSelected=this._highlightSelected;
  1520. 			}catch(e){log("jsForms.listBox.init(modify children): "+e);}};
  1521. 						
  1522. 			//create the maybe-needed explicit close button
  1523. 			this._explicitCloseNode=createElement("button",{
  1524. 				textContent:"Close",
  1525. 				style:(
  1526. 					"float:right;"+
  1527. 					""//leave here
  1528. 				),
  1529. 				onclick:function(){
  1530. 					if (self.close) doAction(function(){self.close();});
  1531. 				},
  1532. 			});
  1533. 			
  1534. 			//create the maybe-needed select all node
  1535. 			var o=new jsForms.checkBox({
  1536. 				text:"Select All",
  1537. 				onChange:function(){
  1538. 					for (var i=0,child;(child=self._items[i]);i++){
  1539. 						if (exists(child.selected)) child.selected=this.checked;
  1540. 						if (exists(child.checked)) child.checked=this.checked;
  1541. 					}
  1542. 				},
  1543. 			});
  1544. 			this._selectAllNode=o.node;
  1545. 			o.labelNode.style.fontWeight="bold";
  1546. 			
  1547. 			//draw it
  1548. 			this.node.style.overflowX="hidden";
  1549. 			this.node.style.overflowY="scroll";
  1550. 			this.redraw();
  1551. 			
  1552. 			//return it
  1553. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1554. 			return self;
  1555. 		}catch(e){log("jsForms.listBox.init: "+e);}},
  1556.  
  1557. 		//combobox, dropdown, select-multi
  1558. 		comboBox:function(params){try{
  1559. 			var self=this;
  1560. 			params=params||{};
  1561. 			
  1562. 			//attach basic elements
  1563. 			self=extend(self,new jsForms.textBox() );
  1564. 			
  1565. 			//defaults
  1566. 			this._dropDownStyle="dropDown";
  1567. 			this._dropDownZIndex="999";
  1568. 			this.node.style.position="relative";
  1569. 			this.textNode.style.verticalAlign="middle";
  1570. 			this.textNode.disabled=true; //prevent typing in the box
  1571. 			
  1572. 			//sub items
  1573. 			try{
  1574. 				this._dropDown=new jsForms.listBox({
  1575. 					parent:this,
  1576. 					items:params.items,
  1577. 					onChange:function(){
  1578. 						self.text=this.value;
  1579. 						//confirm(this.value);
  1580. 					},
  1581. 					firstItemSelectsAll:params.firstItemSelectsAll,
  1582. 					explicitClose:params.explicitClose,
  1583. 					backColor:params.backColor||"window",
  1584. 					//size:{width:"100%"},
  1585. 					highlightSelected:params.highlightSelected,
  1586. 					size:params.dropDownSize,
  1587. 					drawStyle:"block",
  1588. 				});
  1589. 				//close the dropdown by default
  1590. 				if (this._dropDownStyle!="simple") this._dropDown.hide();
  1591. 				
  1592. 				this._dropDown.node.style.zIndex=this._dropDownZIndex;
  1593. 				this._dropDown.node.style.position="absolute";
  1594. 				
  1595. 				//set the text based on what was passed as selected
  1596. 				this.text=this._dropDown.value;
  1597. 			}catch(e){log("jsForms.comboBox.init(create list): "+e);};
  1598. 			
  1599. 			//scrap items we don't want appended to this object
  1600. 			delete params.items;
  1601. 			delete params.explicitClose;
  1602. 			delete params.firstItemSelectsAll;
  1603. 			delete params.highlightSelected;
  1604. 			delete params.dropDownSize;
  1605.  
  1606. 			//get the dropdown sub object
  1607. 			this.__defineGetter__("dropDown", function(){
  1608. 				return this._dropDown;
  1609. 			});
  1610.  
  1611. 			//set the dropdown visual style
  1612. 			//simple: no dropdown, elements shown directly below all the time
  1613. 			//dropdown: dropdown, elements in hidden list, allow typing in top box
  1614. 			//dropdownList: same as dropdown minus typing in top box
  1615. 			this.__defineGetter__("dropDownStyle", function(){
  1616. 				return this._dropDownStyle;
  1617. 			});
  1618. 			this.__defineSetter__("dropDownStyle", function(v){try{
  1619. 				this._dropDownStyle = (v.toString());
  1620. 				this._dropDown.visible=((this._dropDownStyle=="simple")?true:false);
  1621. 			}catch(e){log("jsForms.comboBox.dropDownStyle: "+e);}});
  1622.  
  1623. 			//set the z-index of the dropdown portion when open
  1624. 			this.__defineGetter__("dropDownZIndex", function(){
  1625. 				return this._dropDownZIndex;
  1626. 			});
  1627. 			this.__defineSetter__("dropDownZIndex", function(v){try{
  1628. 				this._dropDownZIndex = parseInt(v);
  1629. 				this._dropDown.node.style.zIndex=this._dropDownZIndex;
  1630. 			}catch(e){log("jsForms.comboBox.dropDownZIndex: "+e);}});
  1631. 			
  1632. 			//redefine value: get the dropdown value array
  1633. 			this.__defineGetter__("value", function(){
  1634. 				return this._dropDown.value;
  1635. 			});
  1636. 			
  1637. 			//show/hide dropdown
  1638. 			this.showDropDown=function(){
  1639. 				this._dropDown.show();
  1640. 				this.buttonTextNode.textContent="\u25B4";
  1641. 			};
  1642. 			this.hideDropDown=function(){
  1643. 				this._dropDown.hide();
  1644. 				this.buttonTextNode.textContent="\u25BE";
  1645. 			};
  1646. 			this.toggleDropDown=function(){
  1647. 				var dd=this._dropDown;
  1648. 				if (dd.visible) this.hideDropDown(); else this.showDropDown();
  1649. 			};
  1650. 			
  1651. 			//register the initial params
  1652. 			for (var p in params) this[p]=params[p];
  1653. 			
  1654. 			//append a button to the textbox portion
  1655. 			this.node.appendChild(
  1656. 				this.buttonNode=createElement("button",{					
  1657. 					className:"jsfButton jsfinlineBlock",
  1658. 					onclick:function(){
  1659. 						self.toggleDropDown();
  1660. 					},
  1661. 				},[
  1662. 					this.buttonTextNode=createElement("span",{
  1663. 						textContent:"\u25BE",
  1664. 					})
  1665. 				])
  1666. 			);
  1667. 			
  1668. 			//append the dropdown list
  1669. 			this.node.appendChild(this._dropDown.node);
  1670. 			
  1671. 			//resize its parts
  1672. 			this.fixSizes=function(){
  1673. 				var self=this;
  1674. 				//resize dropdown button
  1675. 				var btn=this.buttonNode;
  1676. 				var h=elementOuterHeight(this.textNode);
  1677. 				var i=elementOuterHeight(btn)-elementInnerHeight(btn);
  1678. 				if (!isNaN(h) && !isNaN(i) && h>0){
  1679. 					btn.style.height=(h-i)+"px";
  1680. 					var span=btn.childNodes[0];
  1681. 					span.style.left=
  1682. 						Math.floor((
  1683. 							elementInnerWidth(btn)-elementOuterWidth(span))/2
  1684. 						)+"px";
  1685. 					span.style.bottom=
  1686. 						Math.floor((
  1687. 							elementInnerHeight(btn)-elementOuterHeight(span))/2
  1688. 						)+"px";
  1689. 					
  1690. 				} else {
  1691. 					setTimeout(function(){self.fixSizes();},100);
  1692. 				}
  1693.  
  1694. 				//resize dropdown
  1695. 				this._dropDown.node.style.width=
  1696. 					this.innerWidth-
  1697. 					(this._dropDown.outerWidth-this._dropDown.innerWidth)+
  1698. 					"px";
  1699. 				
  1700. 			};
  1701. 			this.fixSizes();
  1702.  
  1703. 			//return it
  1704. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1705. 			return self;
  1706. 		}catch(e){log("jsForms.comboBox.init: "+e);}},
  1707.  
  1708. 		//css color picker
  1709. 		colorPicker:function(params){try{
  1710. 			var self=this;
  1711. 			params=params||{};
  1712. 			
  1713. 			//attach basic elements
  1714. 			self=extend(self,new jsForms.textBox() );
  1715. 			
  1716. 			//defaults
  1717. 			this._dropDownStyle="dropDown";
  1718. 			this._dropDownZIndex="999";
  1719. 					
  1720. 			//functions			
  1721. 			var spanClick=function(){
  1722. 				self.text=this.getAttribute("data-ft");
  1723. 				self.hideDropDowns();
  1724. 				self.colorBox.style.backgroundColor=self.text;				
  1725. 			};
  1726. 			
  1727. 			var makeSpans=function(data,e){
  1728. 				var ret=[];
  1729. 				if (isArrayAndNotEmpty(data)) for (var i=0,d;(d=data[i]);i++){
  1730. 					var value=(typeof d == "object")?d.value:d;
  1731. 					var name=(typeof d == "object")?d.name:d;
  1732. 			
  1733. 					ret.push(createElement("span",{
  1734. 						onclick:spanClick,
  1735. 						style:(
  1736. 							//"color: white !important;"+
  1737. 							//"text-shadow: 0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black,0px 0px 1px black;"+
  1738. 							//"font-weight:bold;"+
  1739. 							"display:block;"+
  1740. 							""//leave here
  1741. 						),
  1742. 						"data-ft":value,
  1743. 					},[
  1744. 						createElement("div",{
  1745. 							style:(
  1746. 								"background-color:"+value+" !important;"+
  1747. 								"margin:0px 6px 0px 3px;"+
  1748. 								"border:1px solid black;"+
  1749. 								"width:20px; height:10px;"+
  1750. 								"vertical-align:baseline;"+
  1751. 								"display:inline-block;"+
  1752. 								""//leave here
  1753. 							),
  1754. 						}),
  1755. 						createElement("text",name)
  1756. 					]));
  1757. 				}
  1758. 				return ret;
  1759. 			};
  1760. 					
  1761. 			//sub items
  1762. 			var shareStyle=(
  1763. 				"background-color:"+(params.backColor||"window")+";"+
  1764. 				"height:"+params.dropDownSize.height+";"+
  1765. 				"z-index:"+this._dropDownZIndex+";"+
  1766. 				"position:absolute;"+
  1767. 				"display:none;"+
  1768. 				"overflow-x:hidden;"+
  1769. 				"overflow-y:auto;"+
  1770. 				""//leave here
  1771. 			);
  1772. 			try{
  1773. 				this._webSafe=createElement("div",{
  1774. 						style:shareStyle,
  1775. 					},
  1776. 					makeSpans(jsForms.colorData.webSafe)
  1777. 				);
  1778. 			}catch(e){log("jsForms.colorPicker.init(webSafe): "+e);};
  1779. 			try{
  1780. 				this._colorWords=createElement("div",{
  1781. 						style:shareStyle,
  1782. 					},
  1783. 					makeSpans(jsForms.colorData.colorWords)
  1784. 				);
  1785. 			}catch(e){log("jsForms.colorPicker.init(colorWords): "+e);};
  1786. 			try{
  1787. 				this._system=createElement("div",{
  1788. 						style:shareStyle,
  1789. 					},
  1790. 					makeSpans(jsForms.colorData.system)
  1791. 				);
  1792. 			}catch(e){log("jsForms.colorPicker.init(system): "+e);};
  1793. 			try{
  1794. 				this._custom=createElement("div",{
  1795. 						style:shareStyle,
  1796. 					},
  1797. 					makeSpans(jsForms.colorData.custom)
  1798. 				);
  1799. 			}catch(e){log("jsForms.colorPicker.init(custom): "+e);};
  1800. 			delete params.dropDownSize;
  1801. 			
  1802. 			//set the z-index of the dropdown portion when open
  1803. 			this.__defineGetter__("dropDownZIndex", function(){
  1804. 				return this._dropDownZIndex;
  1805. 			});
  1806. 			this.__defineSetter__("dropDownZIndex", function(v){try{
  1807. 				this._dropDownZIndex = parseInt(v);
  1808. 				this._webSafe.style.zIndex=this._dropDownZIndex;
  1809. 				this._system.style.zIndex=this._dropDownZIndex;
  1810. 				this._colorNames.style.zIndex=this._dropDownZIndex;
  1811. 				this._custom.style.zIndex=this._dropDownZIndex;
  1812. 			}catch(e){log("jsForms.colorPicker.dropDownZIndex: "+e);}});
  1813. 			
  1814. 			//redefine value: get the dropdown value array
  1815. 			this.__defineGetter__("value", function(){
  1816. 				return this.textNode.value;
  1817. 			});
  1818.  
  1819. 			//resize the dropdown to fit our control
  1820. 			this.resizeDropDown=function(e){
  1821. 				var w=this.innerWidth-
  1822. 					( elementOuterWidth(this[e])-elementInnerWidth(this[e]) )+
  1823. 					"px";
  1824. 				//confirm(w);
  1825. 				this[e].style.width=w;
  1826. 			};
  1827. 			
  1828. 			//show/hide dropdown
  1829. 			this.showDropDown=function(e){
  1830. 				this.hideDropDowns();
  1831. 				this.resizeDropDown(e);
  1832. 				this[e].style.display="block"
  1833. 			};
  1834. 			this.hideDropDowns=function(){
  1835. 				this._webSafe.style.display="none";
  1836. 				this._system.style.display="none";
  1837. 				this._colorWords.style.display="none";
  1838. 				this._custom.style.display="none";
  1839. 			};
  1840. 			this.toggleDropDown=function(e){
  1841. 				var hidden=(this[e].style.display=="none");
  1842. 				if (hidden) this.showDropDown(e); else this.hideDropDowns();
  1843. 			};
  1844. 			
  1845. 			//init
  1846. 			for (var p in params) this[p]=params[p];
  1847.  
  1848. 			//append a button to the textbox portion
  1849. 			this.node.style.position="relative";
  1850. 			this.node.appendChild(
  1851. 				createElement("button",{					
  1852. 					style:(
  1853. 						"position: relative;"+
  1854. 						"font-size: 18px;"+
  1855. 						"padding: 0px;"+
  1856. 						"line-height: 0px;"+
  1857. 						"border: 1px solid buttonshadow;"+
  1858. 						"height:16px; width:17px;"+
  1859. 						"background-color: buttonface;"+
  1860. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1861. 						"vertical-align:middle;"+
  1862. 						""//leave here
  1863. 					),
  1864. 					onclick:function(){
  1865. 						self.toggleDropDown("_webSafe");
  1866. 					},
  1867. 				},[
  1868. 					createElement("span",{
  1869. 						textContent:"\u25BE",
  1870. 						style:(
  1871. 							"position: relative;"+
  1872. 							"left:-3px;"+
  1873. 							""//leave here
  1874. 						)
  1875. 					})
  1876. 				])
  1877. 			);
  1878. 			this.node.appendChild(
  1879. 				createElement("button",{					
  1880. 					style:(
  1881. 						"position: relative;"+
  1882. 						"font-size: 18px;"+
  1883. 						"padding: 0px;"+
  1884. 						"line-height: 0px;"+
  1885. 						"border: 1px solid buttonshadow;"+
  1886. 						"height:16px; width:17px;"+
  1887. 						"background-color: buttonface;"+
  1888. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1889. 						"vertical-align:middle;"+
  1890. 						""//leave here
  1891. 					),
  1892. 					onclick:function(){
  1893. 						self.toggleDropDown("_colorWords");
  1894. 					},
  1895. 				},[
  1896. 					createElement("span",{
  1897. 						textContent:"\u25BE",
  1898. 						style:(
  1899. 							"position: relative;"+
  1900. 							"left:-3px;"+
  1901. 							""//leave here
  1902. 						)
  1903. 					})
  1904. 				])
  1905. 			);
  1906. 			this.node.appendChild(
  1907. 				createElement("button",{					
  1908. 					style:(
  1909. 						"position: relative;"+
  1910. 						"font-size: 18px;"+
  1911. 						"padding: 0px;"+
  1912. 						"line-height: 0px;"+
  1913. 						"border: 1px solid buttonshadow;"+
  1914. 						"height:16px; width:17px;"+
  1915. 						"background-color: buttonface;"+
  1916. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1917. 						"vertical-align:middle;"+
  1918. 						""//leave here
  1919. 					),
  1920. 					onclick:function(){
  1921. 						self.toggleDropDown("_system");
  1922. 					},
  1923. 				},[
  1924. 					createElement("span",{
  1925. 						textContent:"\u25BE",
  1926. 						style:(
  1927. 							"position: relative;"+
  1928. 							"left:-3px;"+
  1929. 							""//leave here
  1930. 						)
  1931. 					})
  1932. 				])
  1933. 			);
  1934. 			this.node.appendChild(
  1935. 				createElement("button",{					
  1936. 					style:(
  1937. 						"position: relative;"+
  1938. 						"font-size: 18px;"+
  1939. 						"padding: 0px;"+
  1940. 						"line-height: 0px;"+
  1941. 						"border: 1px solid buttonshadow;"+
  1942. 						"height:16px; width:17px;"+
  1943. 						"background-color: buttonface;"+
  1944. 						"box-shadow:1px 1px buttonhighlight inset, -1px -1px buttonhighlight inset;"+
  1945. 						"vertical-align:middle;"+
  1946. 						""//leave here
  1947. 					),
  1948. 					onclick:function(){
  1949. 						self.toggleDropDown("_custom");
  1950. 					},
  1951. 				},[
  1952. 					createElement("span",{
  1953. 						textContent:"\u25BE",
  1954. 						style:(
  1955. 							"position: relative;"+
  1956. 							"left:-3px;"+
  1957. 							""//leave here
  1958. 						)
  1959. 					})
  1960. 				])
  1961. 			);	
  1962. 			
  1963. 			//append the dropdown list
  1964. 			this.node.appendChild(this._webSafe);			
  1965. 			this.node.appendChild(this._colorWords);			
  1966. 			this.node.appendChild(this._system);			
  1967. 			this.node.appendChild(this._custom);			
  1968. 			
  1969. 			//append the colorbox before the textbox
  1970. 			this.colorBox=createElement("div",{
  1971. 				style:(
  1972. 					"background-color:"+this.text+";"+
  1973. 					"margin:0px 6px 0px 3px;"+
  1974. 					"border:1px solid black;"+
  1975. 					"width:20px; height:10px;"+
  1976. 					"vertical-align:middle;"+
  1977. 					"display:inline-block;"+
  1978. 					""//leave here
  1979. 				),
  1980. 			});
  1981. 			this.node.insertBefore(this.colorBox,this.textNode);
  1982. 			this.textNode.style.verticalAlign="middle";
  1983. 			var oldOnChange=this.textNode.onchange||null;
  1984. 			this.textNode.onchange=function(){				
  1985. 				self.text=this.value;
  1986. 				self.colorBox.style.backgroundColor=this.value;
  1987. 			};
  1988. 			
  1989. 			//return it
  1990. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  1991. 			return self;
  1992. 		}catch(e){log("jsForms.colorPicker.init: "+e);}},		
  1993. 		
  1994. 		//tabcontrol inner control
  1995. 		tabPage:function(params){try{
  1996. 			var self=this;
  1997. 			params=params||{};
  1998. 			
  1999. 			//attach basic elements
  2000. 			self=extend(self,new jsForms.visualElement() );
  2001.  
  2002. 			//make sure we know our parent
  2003. 			this.parent=params.parent||null;
  2004. 			delete params.parent;
  2005.  
  2006. 			//defaults
  2007. 			this._text="";
  2008. 			this._image="";
  2009. 			//this._autoScroll=true;
  2010. 			this._showImage=true;
  2011. 			this.buttonNode=null;
  2012. 			this.imageNode=null;
  2013. 			this.textNode=null;
  2014. 			this.pageNode=null;
  2015. 			this._drawStyle="block";
  2016. 			
  2017. 			//set the text shown in the tab button
  2018. 			this.__defineGetter__("text", function(){
  2019. 				return this._text;
  2020. 			});
  2021. 			this.__defineSetter__("text", function(v){try{
  2022. 				this._text = (v.toString());
  2023. 				if (this.textNode) this.textNode.textContent=this._text;
  2024. 			}catch(e){log("jsForms.tabPage.text: "+e);}});
  2025.  
  2026. 			//return if the parent knows we are selected
  2027. 			this.__defineGetter__("selected", function(){
  2028. 				return (this.parent._selectedTab===this);
  2029. 			});
  2030.  
  2031. 			//set the image shown in the tab button
  2032. 			this.__defineGetter__("image", function(){
  2033. 				return this._image;
  2034. 			});
  2035. 			this.__defineSetter__("image", function(v){try{
  2036. 				this._image = ((v||"").toString());
  2037. 				if (this.imageNode) {
  2038. 					this.imageNode.src=this._image;
  2039. 					this.imageNode.className=
  2040. 						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
  2041. 				}
  2042. 			}catch(e){log("jsForms.tabPage.image: "+e);}});
  2043.  
  2044. 			//image className
  2045. 			this.__defineGetter__("imageClass", function(){
  2046. 				return this._imageClass;
  2047. 			});
  2048. 			this.__defineSetter__("imageClass", function(v){try{
  2049. 				var oldClass=this._imageClass;
  2050. 				this._imageClass = ((v||"").toString());
  2051. 				if (this.imageNode) {
  2052. 					this.imageNode.className=
  2053. 						this.imageNode.className.removeWord(oldClass).addWord(this._imageClass);
  2054. 				}
  2055. 			}catch(e){log("jsForms.tabPage.imageClass: "+e);}});
  2056.  
  2057. 			//show/hide the tab button image
  2058. 			this.__defineGetter__("showImage", function(){
  2059. 				return this._showImage;
  2060. 			});
  2061. 			this.__defineSetter__("showImage", function(v){try{
  2062. 				this._showImage = cBool(v);
  2063. 				if (this.imageNode) {
  2064. 					this.imageNode.className=
  2065. 						this.imageNode.className[((this._showImage && (this._image||this._imageClass))?"remove":"add")+"Word"]("jsfHidden");
  2066. 				}
  2067. 			}catch(e){log("jsForms.tabPage.showImage: "+e);}});
  2068.  
  2069. 			//select tab
  2070. 			this.select=function(){
  2071. 				this.parent.selectTab(this);
  2072. 			}
  2073. 			
  2074. 			//init
  2075. 			var selected=params.selected||false;
  2076. 			delete params.selected;
  2077. 			var content=params.content||null;
  2078. 			delete params.content;
  2079. 			for (var p in params) this[p]=params[p];
  2080.  
  2081. 			//draw it
  2082. 			if (this.parent) {
  2083. 				//add button to parent node
  2084. 				this.parent.tabsNode.appendChild(
  2085. 					this.buttonNode=createElement("div",{
  2086. 						className:"jsfTab",
  2087. 						style:(
  2088. 							""//leave here
  2089. 						),
  2090. 						onclick:function(){self.select();},
  2091. 					},[
  2092. 						this.imageNode=createElement("img",{
  2093. 							className:this._imageClass+((this._showImage && (this._image||this._imageClass))?"":" jsfHidden"),
  2094. 							style:(
  2095. 								""//leave here
  2096. 							),
  2097. 							src:this._image||"",
  2098. 						}),
  2099. 						this.textNode=createElement("div",{
  2100. 							textContent:this._text.upperWords(),
  2101. 							style:(
  2102. 								""//leave here
  2103. 							),
  2104. 						}),
  2105. 					])
  2106. 				);
  2107. 				
  2108. 				//add page to parent node
  2109. 				if (content) {
  2110. 					if (!isArray(content)) content=[content];
  2111. 					for (var i=0,contentNode;(contentNode=content[i]);i++){
  2112. 						this.node.appendChild(contentNode);
  2113. 					}
  2114. 				}
  2115. 				this.parent.pagesNode.appendChild(this.node);
  2116. 				this.pageNode=this.node;
  2117. 									
  2118. 				//make selected if needed
  2119. 				this.hide();
  2120. 				this.dock=this._dock;
  2121. 				if (selected) this.select();
  2122. 			}
  2123. 			
  2124. 			//return it
  2125. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2126. 			return self;
  2127. 		}catch(e){log("jsForms.tabPage.init: "+e);}},
  2128.  
  2129. 		//tabcontrol uppermost control
  2130. 		tabControl:function(params){try{
  2131. 			var self=this;
  2132. 			params=params||{};
  2133. 			
  2134. 			//attach basic elements
  2135. 			self=extend(self,new jsForms.visualElement() );
  2136. 			
  2137. 			//defaults
  2138. 			this._alignment="top"; //[top, left, right, bottom]
  2139. 			//this._appearance="normal"; //[normal,buttons,flat buttons]
  2140. 			this._hotTrack=true; //mouseover glow on buttons
  2141. 			this._multiLine=false; //allow multiple lines of tabs
  2142. 			//this._sizeMode="normal"; //[normal,fixed,filltoright]
  2143. 			this._shareSinglePage=false; //all tabs use the same pageNode
  2144. 			this.tabs=[];
  2145. 			this.tabsNode=null;
  2146. 			this.pagesNode=null;
  2147. 			this._selectedTab=null;
  2148. 			this.node.className=this.node.className.addWord("jsfTabControl hotTrack");
  2149. 			this.sharedPageNode=null; //container for shared tabPage
  2150. 			this.preventAutoSelectTab=false;
  2151.  
  2152. 			//subStyle
  2153. 			this.__defineGetter__("subStyle", function(){
  2154. 				return this._subStyle;
  2155. 			});
  2156. 			this.__defineSetter__("subStyle", function(v){try{
  2157. 				this.node.className=this.node.className.removeWord(this._subStyle);
  2158. 				this._subStyle = (v.toString());
  2159. 				this.node.className=this.node.className.addWord(this._subStyle);
  2160. 			}catch(e){log("jsForms.tabControl.subStyle: "+e);}});
  2161.  
  2162. 			//tabs alignment
  2163. 			this.__defineGetter__("alignment", function(){
  2164. 				return this._alignment;
  2165. 			});
  2166. 			this.__defineSetter__("alignment", function(v){try{
  2167. 				this._alignment = (v.toString().toLowerCase().upperWords());
  2168. 				//remove all alignment css words
  2169. 				this.node.className=this.node.className.removeWord(["alignTop","alignLeft","alignBottom","alignRight"]);
  2170. 				this.node.className=this.node.className.addWord("align"+this._alignment);
  2171. 				this.redraw();
  2172. 			}catch(e){log("jsForms.tabControl.alignment: "+e);}});
  2173.  
  2174. 			//tab bar hot tracking
  2175. 			this.__defineGetter__("hotTrack", function(){
  2176. 				return this._hotTrack;
  2177. 			});
  2178. 			this.__defineSetter__("hotTrack", function(v){try{
  2179. 				this._hotTrack = cBool(v);
  2180. 				this.node.className=this.node.className[((this._hotTrack)?"add":"remove")+"Word"]("hotTrack");
  2181. 			}catch(e){log("jsForms.tabControl.hotTrack: "+e);}});
  2182.  
  2183. 			//use a single tabPage for all tabs
  2184. 			this.__defineGetter__("shareSinglePage", function(){
  2185. 				return this._shareSinglePage;
  2186. 			});
  2187. 			this.__defineSetter__("shareSinglePage", function(v){try{
  2188. 				this._shareSinglePage = cBool(v);
  2189. 			}catch(e){log("jsForms.tabControl.shareSinglePage: "+e);}});
  2190.  
  2191. 			//select tab by index or by passed object
  2192. 			this.selectTab=function(v){try{
  2193. 				var lastSelected=this._selectedTab;
  2194. 				switch(typeof v){
  2195. 					case "object":
  2196. 						this._selectedTab=v;
  2197. 						break;
  2198. 					case "number":
  2199. 						this._selectedTab=this.tabs[v];
  2200. 						break;
  2201. 				}
  2202. 				//move the selected tab forward, unselected backward
  2203. 				if (lastSelected) {
  2204. 					if (!this._shareSinglePage) lastSelected.hide();
  2205. 					with (lastSelected.buttonNode) {
  2206. 						className=className.removeWord("selected");
  2207. 					}
  2208. 				}
  2209. 				if (!this._shareSinglePage) this._selectedTab.show();
  2210. 				with (this._selectedTab.buttonNode) {
  2211. 					className=className.addWord("selected");
  2212. 				}
  2213. 				
  2214. 				//do onSelect event
  2215. 				if (this._selectedTab.onSelect) {
  2216. 					this._selectedTab.onSelect(this._selectedTab);
  2217. 				}
  2218. 			}catch(e){log("jsForms.tabControl.selectTab: "+e);}};
  2219. 			
  2220. 			//capture the sizes we need for this tabcontrol
  2221. 			//and redraw its borders
  2222. 			this.redraw=function(){try{
  2223. 				//reset self first
  2224. 				this.dock=this._dock;
  2225. 			
  2226. 				//pages fit this minus the tabs bar
  2227. 				this.pagesNode.style.height=
  2228. 					(this._alignment=="Top" || this._alignment=="Bottom")?(
  2229. 						this.innerHeight
  2230. 						- elementOuterHeight(this.tabsNode)
  2231. 						- (
  2232. 							elementOuterHeight(this.pagesNode)
  2233. 							- elementInnerHeight(this.pagesNode)
  2234. 						) + "px"
  2235. 					):(
  2236. 						this.innerHeight
  2237. 						-(
  2238. 							elementOuterHeight(this.pagesNode)
  2239. 							- elementInnerHeight(this.pagesNode)							
  2240. 						) + "px"
  2241. 					);
  2242. 				this.pagesNode.style.width=
  2243. 					(this._alignment=="Left" || this._alignment=="Right")?(
  2244. 						this.innerWidth
  2245. 						- elementOuterWidth(this.tabsNode)
  2246. 						- (
  2247. 							elementOuterWidth(this.pagesNode)
  2248. 							- elementInnerWidth(this.pagesNode)
  2249. 						) + "px"
  2250. 					):("");//automatic
  2251. 					
  2252. 				//order the tabs in relation to the pages based on alignment
  2253. 				if (this._alignment=="Bottom" || this._alignment=="Right"){
  2254. 					this.node.insertBefore(this.pagesNode,this.tabsNode);
  2255. 				} else {
  2256. 					this.node.insertBefore(this.tabsNode,this.pagesNode);
  2257. 				}
  2258. 			}catch(e){log("jsForms.tabControl.redraw: "+e);}};
  2259. 			
  2260. 			//addTab using tab construction params
  2261. 			this.addTab=function(params){try{
  2262. 				params.parent=this;
  2263. 				var tab;
  2264. 				this.tabs.push(tab=new jsForms.tabPage(params));
  2265. 				return tab;
  2266. 			}catch(e){log("jsForms.tabControl.addTab: "+e);}};
  2267.  
  2268. 			//removeTab using tab object reference
  2269. 			this.removeTab=function(tab){try{
  2270. 				this.tabs.removeByValue(tab);
  2271. 				remove(tab.node);
  2272. 			}catch(e){log("jsForms.tabControl.removeTab: "+e);}};
  2273. 						
  2274. 			//create tab button container
  2275. 			this.node.appendChild(
  2276. 				this.tabsNode=createElement("div",{
  2277. 					className:"tabs",
  2278. 					style:(
  2279. 						((!this._multiLine)?"overflow: hidden;":"")+
  2280. 						//(!this._multiLine)?"height:24px;":""+
  2281. 						//"width:"+(parseInt(this.size.width)-5)+"px;"+
  2282. 						""//leave here
  2283. 					),
  2284. 				})
  2285. 			);
  2286. 			
  2287. 			//append tab page container
  2288. 			this.node.appendChild(
  2289. 				this.pagesNode=createElement("div",{
  2290. 					className:"pages",
  2291. 					style:(
  2292. 						((this._autoFit)?"display:block;":"")+
  2293. 						//(!this._multiLine && this.size.height)?"height:"+(parseInt(this.size.height)-32)+"px;":""+
  2294. 						""//leave here
  2295. 					),
  2296. 				})
  2297. 			);
  2298. 			
  2299. 			//append a shared tabPage if required
  2300. 			this._shareSinglePage=params.shareSinglePage||false;
  2301. 			if (this._shareSinglePage){
  2302. 				var content=params.sharedContent;
  2303. 				delete params.sharedContent;
  2304. 				if (content) {
  2305. 					if (!isArray(content)) content=[content];
  2306. 				}
  2307. 				this.pagesNode.appendChild(
  2308. 					this.sharedPageNode=createElement("div",{},content)
  2309. 				);
  2310. 			}
  2311. 			
  2312. 			//init the tabs
  2313. 			if (isArrayAndNotEmpty(params.tabs)) {
  2314. 				for (var i=0,tab;(tab=params.tabs[i]);i++) {
  2315. 					this.addTab(tab);
  2316. 				}
  2317. 				//select an initial tab if none already selected
  2318. 				var autoTab=!(params.preventAutoSelectTab||false);
  2319. 				if (autoTab && !this._selectedTab) this.selectTab(0);
  2320. 			}
  2321. 			delete params.tabs;
  2322. 			
  2323. 			//init the rest
  2324. 			for (var p in params) this[p]=params[p];
  2325. 			
  2326. 			//draw
  2327. 			this.alignment=this._alignment; //and it redraws here
  2328. 			
  2329. 			//return it
  2330. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2331. 			return self;
  2332. 		}catch(e){log("jsForms.tabControl.init: "+e);}},
  2333. 		
  2334. 		//coolBar version of tabcontrol
  2335. 		coolBar:function(params){try{
  2336. 			var self=this;
  2337. 			params=params||{};
  2338. 			params.hotTrack=true;
  2339. 			params.subStyle="coolBar";
  2340. 			
  2341. 			//attach basic elements
  2342. 			//this is basically the exact same thing as a tabcontrol
  2343. 			self=extend(self,new jsForms.tabControl(params) );
  2344. 						
  2345. 			//return it
  2346. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2347. 			return self;
  2348. 		}catch(e){log("jsForms.coolBar.init: "+e);}},
  2349.  
  2350. 		//treeview inner controls
  2351. 		treeNode:function(params){try{
  2352. 			var self=this;
  2353. 			params=params||{};
  2354. 			
  2355. 			//attach basic elements
  2356. 			self=extend(self,new jsForms.visualElement() );
  2357.  
  2358. 			//defaults
  2359. 			this._text="";
  2360. 			this._checked=false;
  2361. 			this._image="";
  2362. 			this._selected=false;
  2363. 			this.TreeView=null;
  2364. 			
  2365. 			//fullPath
  2366. 			//getNodeCount //full count of child tree nodes
  2367. 			//level //depth in the tree
  2368. 			//remove
  2369. 			//isEditing
  2370. 			//toggle (expanded/collapsed)
  2371.  
  2372. 			//edit label
  2373. 			this.beginEdit=function(){
  2374. 			};
  2375. 			this.endEdit=function(){
  2376. 			};
  2377. 			
  2378. 			//expand/collapse (with children)
  2379. 			this.expand=function(ignoreChildren){
  2380. 			};
  2381. 			this.collapse=function(ignoreChildren){
  2382. 			};
  2383. 			
  2384. 			//copy
  2385. 			this.clone=function(){
  2386. 			};
  2387. 			
  2388. 			//open parent nodes and scroll into view
  2389. 			this.ensureVisible=function(){
  2390. 			};
  2391. 			
  2392. 			//init
  2393. 			for (var p in params) this[p]=params[p];
  2394. 			
  2395. 			//return it
  2396. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2397. 			return self;
  2398. 		}catch(e){log("jsForms.treeNode.init: "+e);}},
  2399.  
  2400. 		//treeview uppermost control
  2401. 		treeView:function(params){try{
  2402. 			var self=this;
  2403. 			params=params||{};
  2404. 			
  2405. 			//attach basic elements
  2406. 			self=extend(self, new jsForms.visualElement() );
  2407.  
  2408. 			//defaults
  2409. 			this._checkBoxes=false; //show checkboxes at nodes
  2410. 			this._fullRowSelect=false; //highlight the entire child
  2411. 			this._hotTracking=true;
  2412. 			this._indent="28px";
  2413. 			this._labelEdit=false; //allow edit of labels on node
  2414. 			this._nodes=[];
  2415. 			this._pathSeparator="\\";
  2416. 			this._scrollable=true;
  2417. 			this._showLines=false; //show node lines
  2418. 			this._showPlusMinus=true;
  2419. 			this._showRootLines=true;
  2420. 			this._sortBy="value";
  2421. 			this._sortOrder="asc";
  2422. 			
  2423. 			//get the dropdown sub object
  2424. 			this.__defineGetter__("hasChildren", function(){
  2425. 				return (this._nodes.length>0);
  2426. 			});
  2427. 						
  2428. 			//add remove nodes
  2429. 			this.addRoot=function(node){
  2430. 				//draw it
  2431. 				
  2432. 				//add it
  2433. 				this._nodes.push(node);
  2434. 			};
  2435. 			
  2436. 			//expand/collapse nodes
  2437. 			this.collapseAll=function(){
  2438. 				for (var i=0,child;(child=this._nodes[i]);i++) child.collapseAll();
  2439. 			};
  2440. 			this.expandAll=function(){
  2441. 				for (var i=0,child;(child=this._nodes[i]);i++) child.expandAll();
  2442. 			};
  2443. 			
  2444. 			//sort nodes
  2445. 			this.sort=function(){
  2446. 			};
  2447. 			
  2448. 			//init
  2449. 			for (var p in params) this[p]=params[p];
  2450. 			
  2451. 			//return it
  2452. 			if (self.causesValidation && self.onCreated) doAction(function(){self.onCreated(self);});
  2453. 			return self;
  2454. 		}catch(e){log("jsForms.treeView.init: "+e);}},
  2455.  
  2456. 		
  2457. 	};
  2458. 	
  2459. 	/*to do list
  2460. 		dropDown: simplified comboBox with only one item selectable
  2461. 		checkedListBox: uses listBox and assumes checks based on bound data or simple input		
  2462. 		checkedDropDown: uses comboBox and assumes checks
  2463. 		bindToData function
  2464. 		checkbox: check-image-text ordering/layout
  2465. 		checkbox: check hidden
  2466. 	*/
  2467. 	
  2468. 	//JSON-ready testing page
  2469. 	if (window.location.href.match(/^(http:\/\/www\.facebook\.com\/test)/) ||
  2470. 		window.location.href.match(/^(file:\/\/\/C:\/Users\/Charlie\/Desktop)/) ) {
  2471. 	
  2472. 		var textBox = new jsForms.textBox({
  2473. 			text:"hello world",
  2474. 			backColor:"window",
  2475. 			foreColor:"windowtext",
  2476. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2477. 			//borderStyle:"Fixed3D",
  2478. 			borderRadius:{topLeft:"5px", bottomRight:"5px"},
  2479. 			onChange:function(o){
  2480. 				confirm(o.text);
  2481. 			},
  2482. 		});
  2483. 		document.documentElement.appendChild(textBox.node,document.documentElement.childNodes[0]);
  2484. 		
  2485. 		var spinBox = new jsForms.spinBox({
  2486. 			text:"3",
  2487. 			backColor:"window",
  2488. 			foreColor:"windowtext",
  2489. 			minimum:0,
  2490. 			maximum:10,
  2491. 			rollOver:true,
  2492. 			increment:1,
  2493. 		});
  2494. 		document.documentElement.appendChild(spinBox.node,document.documentElement.childNodes[0]);
  2495.  
  2496. 		var checkBox = new jsForms.checkBox({
  2497. 			text:"hello world",
  2498. 			value:"1",
  2499. 			checked:true,
  2500. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2501. 			onChange:function(o){
  2502. 				confirm(o.checked);
  2503. 			},
  2504. 		});
  2505. 		document.documentElement.appendChild(checkBox.node,document.documentElement.childNodes[0]);
  2506. 		
  2507. 		var listBox = new jsForms.listBox({
  2508. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2509. 			onChange:function(o){
  2510. 				//confirm(o.value);
  2511. 			},
  2512. 			items:[
  2513. 				new jsForms.checkBox({text:"hello world"}),
  2514. 				new jsForms.checkBox({text:"hello moon"}),
  2515. 				new jsForms.checkBox({text:"goodnight moon"}),
  2516. 			],
  2517. 			borderStyle:"Fixed3D",
  2518. 			firstItemSelectsAll:true,
  2519. 			explicitClose:true,
  2520. 		});
  2521. 		document.documentElement.appendChild(listBox.node,document.documentElement.childNodes[0]);
  2522. 		
  2523. 		var postParts = {
  2524. 			//derived from post.testData
  2525. 			//this stuff is created in the main.which call
  2526. 			//so if that is not called yet, each will be undefined
  2527. 			"title":"The title of a post contains the bold text, usually including the poster's name, at the top of the post.",
  2528. 			"msg":"The msg of a post is the part the poster added as a comment.",
  2529. 			"caption":"The caption of a post is one of two lines just below the title.",
  2530. 			"desc":"The desc of a post is one of two lines just below the title.",
  2531. 			"link":"The link of a post is just the ORIGINAL link text, not the url.",
  2532. 			"url":"The url of a post is the address to which the post redirects the user when clicked.",
  2533. 			"img":"The img of a post is the url of the icon that displays with the post.",
  2534. 			"fromName":"The fromName is the name of the poster.",
  2535. 			"fromID":"The fromID is the ID of the poster.",
  2536. 			"targetName":"The targetName is a list of targets the poster intended the post to display to.",
  2537. 			"targetID":"The targetID is a list of targets' IDs that the poster intended the post to display to.",
  2538. 			"canvas":"The canvas of a post is location of the game code.",
  2539. 			"likeName":"The likeName is a list of names of users who liked this post.",
  2540. 			"likeID":"The likeID is a list of IDs of users who liked the post.",
  2541. 			"comments":"The comments is a list of all comments made to the post, excluding the initial msg.",
  2542. 			"commentorName":"The commentorName is a list of names of all commentors.",
  2543. 			"commentorID":"The commentorID is a list of IDs of all commentors.",
  2544. 			"body":"The body of a post is a compilation of the title, caption, and desc.",
  2545. 			"either":"The either of a post is the compilation of the link and body.",
  2546. 			"html":"The html of a post is the compilation of ALL visible FB attributes.",
  2547. 			
  2548. 			//right from the post object
  2549. 			"which":"The which of a post is its identified codename. The codename starts with an appID and ends with something the sidekick developer uses to key the bonus type.",
  2550. 			"idText":"The identified link text of a post.",
  2551. 			"date":"The date of a post is its creation time on FB. This time is read as a unix date.", //read as unix time
  2552. 			"status":"The status of a post is the return code created by the sidekick.",
  2553. 			"priority":"The priority of a post is set by the prioritizer.",
  2554. 			"appID":"The appID of the game for which this post belongs.",
  2555. 			"appName":"The appName of the game for which this post belongs, as reported by the FB database.",
  2556. 			"isStale":"Reports if a post is older than the user-set older limit.",
  2557. 			"isScam":"Reports if a post is suspected of being a scam. Usually if the canvas and appName do not match.",
  2558. 			"isCollect":"Reports if the post is set to be collected.",
  2559. 			"isExcluded":"Reports if the post has been set as excluded.",
  2560. 			"isFailed":"Reports if the post is set as having already failed.",
  2561. 			"isAccepted":"Reports if the post is set as having already been successfully collected.",
  2562. 			"isPaused":"Reports if the post's bonus type or app has been paused by the prioritizer. Paused objects to not process for collection.",
  2563. 			"isPinned":"Reports if the post is marked as being pinned.",
  2564. 			"isLiked":"Reports if the post has been identified as already being liked by the current user.",
  2565. 			"isMyPost":"Reports if the post belongs to the current user.",
  2566. 			"isUndefined":"Reports if the post does not match any id given by the sidekick.",
  2567. 			"isWishlist":"Reports if the post is deemed a whichlist request.",
  2568. 			"isTimeout":"Reports if the post has been marked as a timed out collection try.",
  2569. 			"isW2W":"Reports if the post is a Wall-To-Wall post, meaning that it was posted to a specific user's wall.",
  2570. 			"isForMe":"Reports if the W2W post targets the current user."
  2571. 		};
  2572. 		var search=["body"];
  2573.  
  2574. 		var comboBox = new jsForms.comboBox({
  2575. 			font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2576. 			onChange:function(o){
  2577. 				GM_log("combo changed");
  2578. 			},
  2579. 			items:(function(){
  2580. 				var ret=[];
  2581. 				for (var i in postParts){
  2582. 					ret.push(new jsForms.checkBox({
  2583. 						text:i,
  2584. 						value:i,
  2585. 						toolTipText:postParts[i],
  2586. 						checked:(search.inArray(i)),
  2587. 						size:{width:"200%"},
  2588. 					}));
  2589. 				}
  2590. 				return ret;
  2591. 			})(),
  2592. 			borderStyle:"Fixed3D",
  2593. 			borderRadius:{topLeft:"1px", bottomRight:"1px",topRight:"1px",bottomLeft:"1px"},
  2594. 			explicitClose:true,
  2595. 			highlightSelected:true,
  2596. 			dropDownSize:{height:"200px"},
  2597. 			sorted:true,
  2598. 		});
  2599. 		document.documentElement.appendChild(comboBox.node,document.documentElement.childNodes[0]);
  2600.  
  2601. 		//just a divider
  2602. 		document.documentElement.appendChild(createElement("div"));
  2603. 		var myConsole={};
  2604. 		var tabControl = new jsForms.tabControl({
  2605. 			//font:'"Bebas Neue","League Gothic",Haettenschweiler,"Arial Narrow",sans-serif',
  2606. 			tabs:[
  2607. 				{
  2608. 					text:"Tabs",
  2609. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/selLast.png",
  2610. 					//selected:true,
  2611. 					content:createElement("div",{},[
  2612. 						createElement("label",{textContent:"Alignment: "}),
  2613. 						createElement("select",{
  2614. 							onchange:function(){
  2615. 								tabControl.alignment=this.value;
  2616. 							},
  2617. 						},optionsFromArray([
  2618. 							"Top","Right","Bottom","Left"
  2619. 						])),
  2620. 						createElement("br"),
  2621. 						createElement("label",{textContent:"hotTrack: "}),
  2622. 						createElement("select",{
  2623. 							onchange:function(){
  2624. 								tabControl.hotTrack=this.value;
  2625. 							},
  2626. 						},optionsFromArray([
  2627. 							"false","true"
  2628. 						])),
  2629. 						createElement("br"),
  2630. 						createElement("label",{textContent:"subStyle: "}),
  2631. 						createElement("select",{
  2632. 							onchange:function(){
  2633. 								tabControl.subStyle=this.value;
  2634. 							},
  2635. 						},optionsFromArray([
  2636. 							"normal","coolBar"
  2637. 						])),
  2638. 					])
  2639. 				},
  2640. 				{
  2641. 					text:"red phone",
  2642. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/red%20phone%20128.png",
  2643. 				},
  2644. 				{
  2645. 					text:"firefox",
  2646. 					image:"file:///C:/Users/Charlie/Documents/From%20Disk%202/Wikia%20Frontwall/firefox_icon.png",
  2647. 				},
  2648. 			],
  2649. 			dock:"fill",
  2650. 		});
  2651. 		
  2652. 		(myConsole.phoneTab=tabControl.tabs[1]).node.appendChild(
  2653. 			new jsForms.textBox().node
  2654. 		);
  2655. 		(myConsole.ffTab=tabControl.tabs[2]).node.textContent="FireFox is the best!";
  2656. 		
  2657. 		document.documentElement.appendChild(
  2658. 			createElement("div",{
  2659. 				style:(
  2660. 					"height:500px;"+
  2661. 					""//leave here
  2662. 				),
  2663. 			},[
  2664. 				tabControl.node
  2665. 			])
  2666. 		);
  2667. 		tabControl.redraw();
  2668.  
  2669. 		var colorPicker = new jsForms.colorPicker({
  2670. 			borderStyle:"none",
  2671. 			dropDownSize:{height:"200px"},
  2672. 			sorted:true,
  2673. 			text:"",
  2674. 		});
  2675. 		document.documentElement.appendChild(colorPicker.node,document.documentElement.childNodes[0]);
  2676. 		
  2677.  
  2678. 	};
  2679. 	
  2680. 	//add own css
  2681. 	try{addGlobalStyle(jsForms.globalStyle(),"jsForms");}catch(e){log("jsForms.addGlobalStyle: "+e);};
  2682. 	
  2683. })();