☰

Greasy Fork is available in English.

JS Forms Library B

Encapulates and extends many HTML forms elements.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greatest.deepsurf.us/scripts/409/1286/JS%20Forms%20Library%20B.js 

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