JavaXT
|
|
Form Classif(!javaxt) var javaxt={}; if(!javaxt.dhtml) javaxt.dhtml={}; //****************************************************************************** //** Form Class //****************************************************************************** /** * Used to create a container with form inputs * ******************************************************************************/ javaxt.dhtml.Form = function (parent, config) { this.className = "javaxt.dhtml.Form"; var me = this; var defaultConfig = { onsubmit: null, items: [], /** Style for individual elements within the component. Note that you can * provide CSS class names instead of individual style definitions. */ style:{ spacing: "8px", //vertical spacing btw form inputs form: { padding: "5px 5px 0 5px" }, label: { color: "#363636", whiteSpace: "nowrap", cursor: "default", paddingRight: "8px" }, addColon: true, //indicate whether icon: { }, input: { borderRadius: "4px", color: "#363636", display: "inline-block", fontSize: "14px", height: "26px", lineHeight: "26px", padding: "4px 6px", verticalAlign: "middle", transition: "border 0.2s linear 0s, box-shadow 0.2s linear 0s", backgroundColor: "#fff", border: "1px solid #ccc", boxShadow: "0 1px 1px rgba(0, 0, 0, 0.075) inset", boxSizing: "border-box" //important for inputs with 100% width }, radio: { margin: 0, padding: 0 }, checkbox: { margin: 0, padding: 0 }, //Container for buttons (footer) buttons: { padding: "0px 5px 3px 5px", textAlign: "right" //<-- sets button alignment }, //Style for individual buttons in the button bar (footer) button: { borderRadius: "3px", color: "#363636", display: "inline-block", fontSize: "14px", width: "80px", height: "26px", lineHeight: "26px", verticalAlign: "middle", textAlign: "center", backgroundColor: "#e4e4e4", border: "1px solid #b4b4b4", boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.2)", textShadow: "1px 1px 0px rgb(255, 255, 255)", cursor: "pointer", marginLeft: "7px" }, groupbox: { border: "1px solid #ccc", borderRadius: "4px", padding: "16px 8px 12px 13px" }, grouplabel: { margin: "8px 0 0 7px", backgroundColor: "white", padding: "0 5px 0 5px", color: "rgb(0, 70, 138)" } } }; var form; var outerTable; var formTable, buttonRow; var verticalSpacing; var inputs = []; var groups = []; var buttons = []; //************************************************************************** //** Constructor //************************************************************************** var init = function(){ if (typeof parent === "string"){ parent = document.getElementById(parent); } if (!parent) return; //Clone the config so we don't modify the original config object var clone = {}; merge(clone, config); //Merge clone with default config merge(clone, defaultConfig); config = clone; //Get cell padding verticalSpacing = config.style.spacing; //Create form form = createElement('form', parent, { padding: 0, margin: 0, height: "100%" }); form.setAttribute("desc", me.className); if (config.onsubmit) form.onsubmit = config.onsubmit; else{ form.onsubmit = function(e){ e.preventDefault(); }; } me.el = form; //Create table to store the form and buttons (2 rows, 1 column) outerTable = createTable("100%", "100%", me.className); form.appendChild(outerTable); var formRow = outerTable.addRow(); formRow.setAttribute("desc", "formRow"); var formCell = formRow.addColumn(config.style.form); formCell.style.width = "100%"; formCell.style.height = "100%"; formCell.style.verticalAlign = "top"; //Create table for the form inputs formTable = createTable("100%"); formCell.appendChild(formTable); //Add inputs defined in the config if (config.items){ for (var i=0; i<config.items.length; i++){ var item = config.items[i]; if (item.group){ addGroup(item.group, item.items, item.hidden); } else{ addItem(item); } } } //Add buttons defined in the config if (config.buttons){ for (var i=0; i<config.buttons.length; i++){ var button = config.buttons[i]; var name = button.name; var enabled = true; var onclick = button.onclick; me.addButton(name, enabled, onclick); } } //Watch for resize events addResizeListener(parent, function(){ me.resize(); }); onRender(parent, me.resize); }; //************************************************************************** //** onChange //************************************************************************** /** Called whenever a field changes value in the form */ this.onChange = function(input, value){}; //************************************************************************** //** onResize //************************************************************************** /** Called whenever the form is resized */ this.onResize = function(){}; //************************************************************************** //** resize //************************************************************************** /** Used to update the layout of all the elements in this component */ this.resize = function(){ for (var i=0; i<groups.length; i++){ updateGroup(groups[i]); } me.onResize(); }; //************************************************************************** //** getForm //************************************************************************** /** Returns the "form" element underpinning this component */ this.getForm = function(){ return form; }; //************************************************************************** //** reset //************************************************************************** /** Resets all inputs in the form to thier original values. */ this.reset = function(){ form.reset(); }; //************************************************************************** //** clear //************************************************************************** /** Clears all values in the form. */ this.clear = function(){ //Clear standard form inputs for (var i=0; i<form.elements.length; i++){ var input = form.elements[i]; var type = input.type; switch (type) { case 'text': case 'textarea': case 'password': case 'hidden': input.value = ''; break; case 'radio': case 'checkbox': input.checked = ''; break; case 'select-one': input.options[0].selected = true; break; case 'select-multiple': for (var z = 0; z < input.options.length; z++) { input.options[z].selected = false; } break; } } //Clear any custom form inputs (e.g. javaxt components) for (var i=0; i<inputs.length; i++){ var input = inputs[i]; if (input.clear) input.clear(); } }; //************************************************************************** //** getData //************************************************************************** /** Returns the values for all the form inputs in JSON notation. Note that * if the form has multiple inputs with the same name, the associated value * will be an array. You can test whether the value is an array using the * "instanceof Array" operator. */ this.getData = function(){ var values = {}; for (var i=0; i<inputs.length; i++){ var input = inputs[i]; var name = input.name; var value = input.getValue(); var currVal = values[name]; if (currVal){ var arr = []; if (currVal instanceof Array){ arr = currVal; } arr.push(value); values[name] = arr; } else{ values[name] = value; } } return values; }; //************************************************************************** //** getFormData //************************************************************************** /** Returns the values for all the form inputs as a FormData object */ this.getFormData = function(){ var formData = new FormData(); var data = me.getData(); for (var key in data) { if (data.hasOwnProperty(key)){ var val = data[key]; if (val instanceof Array){ var arr = val; for (var i=0; i<arr.length; i++){ formData.append(key, val); } } else{ formData.append(key, val); } } } return formData; }; //************************************************************************** //** addButton //************************************************************************** /** Used to add a button to the bottom of the form */ this.addButton = function (name, enabled, onclick){ //Create buttonRow as needed if (!buttonRow){ buttonRow = outerTable.addRow(); //buttonRow is a global variable and is redefined below... buttonRow.setAttribute("desc", "buttonRow"); var buttonCell = buttonRow.addColumn(config.style.buttons); //Create table for the buttons var buttonTable = createTable(); var buttonDiv = createElement('div', buttonCell); buttonDiv.style.display = "inline-block"; buttonDiv.appendChild(buttonTable); var align = config.style.buttons.textAlign; if (align===null) align = "right"; else align = align.toLowerCase(); if (align==="fit"){ buttonTable.style.width = "100%"; } else if (align==="right"){ buttonTable.align = "right"; } else if (align==="center"){ buttonTable.align = "center"; } buttonRow = buttonTable.addRow(); } var td = buttonRow.addColumn(); if (name.toLowerCase()==="spacer"){ td.style.width="100%"; } else{ var input = createElement('input', td); input.type = "button"; input.name = name; input.value = name; input.onclick = onclick; setStyle(input, "button"); buttons.push(input); } }; //************************************************************************** //** getButton //************************************************************************** /** Returns a button found at the bottom of the form * @param name Name of the button (input.name) */ this.getButton = function(name){ for (var i=0; i<buttons.length; i++){ if (buttons[i].name===name) return buttons[i]; } return null; }; //************************************************************************** //** getButtons //************************************************************************** /** Returns all the buttons found at the bottom of the form as an array */ this.getButtons = function(){ return buttons; }; //************************************************************************** //** createTextInput //************************************************************************** var createTextInput = function(config){ var type = config.type; var name = config.name; var label = config.label; var icon = config.icon; var value = config.value; var input; if (type=="textarea"){ input = createElement('textarea'); setStyle(input, "input"); //maybe we need a different style config for textareas? input.style.lineHeight = "normal"; input.style.resize = "none"; input.style.height = "100px"; if (config.height) input.style.height = config.height; if (config.spellcheck===false) input.setAttribute("spellcheck", "false"); //<-- enable spellcheck by default } else{ input = createElement('input'); setStyle(input, "input"); input.type = type; if (config.placeholder) input.setAttribute("placeholder", config.placeholder); if (config.spellcheck===true){} else input.setAttribute("spellcheck", "false"); //<-- disable spellcheck by default } input.name = name; if (value!=null) input.value = value; input.style.width = "100%"; input.setAttribute("autocomplete", "off"); var getValue = function(){ return input.value; }; var setValue = function(value, silent){ if (typeof value === "undefined") value = ""; var updateValue = input.value!=value; //Special case for zeros if (!updateValue){ if (value===0 && parseInt(input.value+"")!==0){ updateValue = true; } } if (updateValue){ input.value = value; if (silent===true) return; input.oninput(); //fire onchange event } }; var formInput = addInput(name, label, input, getValue, setValue, icon); input.oninput = function(){ me.onChange(formInput, input.value); }; input.onpaste = input.oninput; input.onpropertychange = input.oninput; }; //************************************************************************** //** createHiddenInput //************************************************************************** var createHiddenInput = function(name, value){ var input = createElement('textarea', form); input.style.display = "none"; input.name = name; if (value!=null) input.value = value; var getValue = function(){ return input.value; }; var setValue = function(value, silent){ if (typeof value === "undefined") value = ""; if (input.value!=value){ input.value = value; if (silent===true) return; input.onchange(); //fire onchange event } }; var formInput = { name: name, label: null, row: null, getValue: getValue, setValue: setValue }; input.onchange = function(){ me.onChange(formInput, input.value); }; inputs.push(formInput); }; //************************************************************************** //** createRadioInput //************************************************************************** /** Used to add radio inputs to the form. By default, the inputs are aligned * horizontally. This can be changed by specifying alignment: "vertical". */ var createRadioInput = function(label, name, item){ var formInput; var options = item.options; var alignment = item.alignment; var table = createTable("100%"); var tr; var arr = []; for (var i=0; i<options.length; i++){ if (alignment=="vertical"){ tr = table.addRow(); } else{ //horizontal if (i==0){ tr = table.addRow(); } } var td = tr.addColumn(); var t = createTable(); var r = t.addRow(); var c1 = r.addColumn(); var c2 = r.addColumn(); td.appendChild(t); var input = createElement('input', c1, config.style.radio); input.type = "radio"; input.name = name; input.value = options[i].value; if (options[i].checked===true || options[i].selected==true){ input.checked = true; } input.onchange = function(){ me.onChange(formInput, getValue()); }; arr.push(input); var span = createElement('span', c2, config.style.label); span.innerHTML = options[i].label; span.input = input; span.onclick = function(){ if (this.input.disabled==true) return; this.input.checked = true; this.input.focus(); dispatchEvent(this.input, "change"); }; } var getValue = function(){ for (var i=0; i<arr.length; i++){ if (arr[i].checked) return arr[i].value; } return null; }; var setValue = function(value, silent){ var numChanges = 0; for (var i=0; i<arr.length; i++){ if ((arr[i].value+"")==(value+"")){ if (arr[i].checked!==true) numChanges++; arr[i].checked = true; } else{ arr[i].checked = false; if (arr[i].checked===true) numChanges++; } } if (silent===true) return; if (numChanges>0) me.onChange(formInput, getValue()); }; formInput = addInput(name, label, table, getValue, setValue, item.icon); formInput.enable = function(){ for (var i=0; i<arr.length; i++) arr[i].disabled=false; var rows = table.getRows(); for (var i=0; i<rows.length; i++) rows[i].style.opacity = ""; }; formInput.disable = function(){ for (var i=0; i<arr.length; i++) arr[i].disabled=true; var rows = table.getRows(); for (var i=0; i<rows.length; i++) rows[i].style.opacity = "0.6"; }; }; //************************************************************************** //** createCheckboxInput //************************************************************************** /** Used to add checkbox inputs to the form. By default, the inputs are * aligned vertically. This can be changed by specifying "horizontal" * alignment */ var createCheckboxInput = function(label, name, item){ var formInput; var options = item.options; var alignment = item.alignment; var table = createTable("100%"); var tr; var arr = []; for (var i=0; i<options.length; i++){ if (alignment=="horizontal"){ if (i==0){ tr = table.addRow(); } } else{ //vertical tr = table.addRow(); } var td = tr.addColumn(); var t = createTable(); var r = t.addRow(); var c1 = r.addColumn(); var c2 = r.addColumn(); td.appendChild(t); var input = createElement('input', c1, config.style.checkbox); input.type = "checkbox"; input.name = name; input.value = options[i].value; if (options[i].checked===true || options[i].selected==true){ input.checked = true; } input.onchange = function(){ me.onChange(formInput, getValue()); }; arr.push(input); var span = createElement('span', c2, config.style.label); span.innerHTML = options[i].label; span.input = input; span.onclick = function(){ if (this.input.disabled==true) return; this.input.checked = !this.input.checked; //this.input.focus(); dispatchEvent(this.input, "change"); }; } var getValue = function(){ var values = ""; for (var i=0; i<arr.length; i++){ if (arr[i].checked){ if (values.length>0) values+=","; values += arr[i].value; } } return values.length==0 ? null : values; }; var setValue = function(value, silent){ //Convert value to an array of values if (!value){ value = [value]; } else{ if (!isArray(value)){ if (typeof value === "string"){ value = value.split(","); } else{ value = [value]; } } } var numChanges = 0; for (var i=0; i<arr.length; i++){ var input = arr[i]; var val = null; for (var x=0; x<value.length; x++){ if ((input.value+"")==(value[x]+"")){ val = value[x]; break; } } if ((input.value+"")==(val+"")){ if (input.checked!==true) numChanges++; input.checked = true; } else{ input.checked = false; if (input.checked===true) numChanges++; } } if (silent===true) return; if (numChanges>0) me.onChange(formInput, getValue()); }; formInput = addInput(name, label, table, getValue, setValue, item.icon); formInput.enable = function(){ for (var i=0; i<arr.length; i++) arr[i].disabled=false; var rows = table.getRows(); for (var i=0; i<rows.length; i++) rows[i].style.opacity = ""; }; formInput.disable = function(){ for (var i=0; i<arr.length; i++) arr[i].disabled=true; var rows = table.getRows(); for (var i=0; i<rows.length; i++) rows[i].style.opacity = "0.6"; }; }; //************************************************************************** //** addGroup //************************************************************************** /** Used to add a group of items. The items will be rendered inside a group * box. */ var addGroup = function(name, items, hidden){ //Create new row for the groupbox var startGroup = formTable.addRow(); startGroup.setAttribute("desc", "-- Group Start --"); //Calculate padding and border width for the group box var paddingLeft,paddingRight,paddingTop,paddingBottom,borderWidth,borderHeight; var style = getGroupboxStyle(); if (style){ paddingLeft = style.paddingLeft; paddingRight = style.paddingRight; paddingTop = style.paddingTop; paddingBottom = style.paddingBottom; borderWidth = style.borderLeft + style.borderRight; borderHeight = style.borderTop + style.borderBottom; } else{ paddingLeft = parseInt(verticalSpacing); paddingRight = paddingLeft; paddingTop = paddingLeft*2; paddingBottom = paddingTop; borderWidth = 2; //assumes border is 1 pixel on each side borderHeight = borderWidth; } //Add row for groupbox var td = startGroup.addColumn(); td.style.padding = (parseInt(verticalSpacing)*2) + "px " + borderWidth + "px " + paddingTop + "px 0"; td.colSpan = 3; var div = createElement('div', td); div.style.position = "relative"; div.style.width = "100%"; div.style.visibility = 'hidden'; div.style.display = 'block'; //Create groupbox var groupbox = createElement('div', div); setStyle(groupbox, "groupbox"); groupbox.style.padding = 0; //padding is a placeholder... groupbox.style.position = "absolute"; groupbox.style.width = "100%"; groupbox.style.zIndex = -1; //Create label for the groupbox var label = createElement('div', div); setStyle(label, "grouplabel"); label.style.position = "absolute"; label.style.left = 0; label.style.top = -(paddingTop+borderHeight)+"px"; label.innerHTML = name; label.style.zIndex = -1; //Add items to the form for (var i=0; i<items.length; i++){ if (hidden===true) items[i].hidden = true; addItem(items[i]); } //Add row below the last input for padding var endGroup = formTable.addRow(); endGroup.setAttribute("desc", "-- Group End --"); var td = endGroup.addColumn(); td.style.padding = (parseInt(verticalSpacing) + paddingBottom) + "px 0 0 0"; td.colSpan = 3; //Generate list of rows associated with the groupbox var getRows = function(){ var rows = []; var addRow = false; var childNodes = formTable.getRows(); for (var i=0; i<childNodes.length; i++){ var tr = childNodes[i]; if (tr===startGroup) addRow = true; if (addRow){ rows.push(tr); if (tr===endGroup){ addRow = false; break; } } } return rows; }; //Set groupbox height var setHeight = function(h){ //substract padding of last input h = h-parseInt(verticalSpacing); //add vertical padding for the groupbox h += (paddingTop + paddingBottom); groupbox.style.height = h + "px"; div.style.visibility = ''; }; //Add padding to the inputs var rows = getRows(); for (var i=1; i<rows.length-1; i++){ var tr = rows[i]; var cols = tr.childNodes; cols[0].style.paddingLeft = paddingLeft + "px"; cols[cols.length-1].style.paddingRight = (paddingRight+borderWidth) + "px"; } groups.push({ name: name, getRows: getRows, setHeight: setHeight }); showHideGroup(name, hidden); }; //************************************************************************** //** getGroups //************************************************************************** /** Returns an array of groups found in the form. Each entry in the array * has a name and custom methods for the group. */ this.getGroups = function(){ return groups; }; //************************************************************************** //** showGroup //************************************************************************** /** Used to display a hidden group. */ this.showGroup = function(name){ showHideGroup(name, false); }; //************************************************************************** //** hideGroup //************************************************************************** /** Used to hide a group box. */ this.hideGroup = function(name){ showHideGroup(name, true); }; //************************************************************************** //** showHideGroup //************************************************************************** /** Used to show or hide a group of inputs in the form. */ var showHideGroup = function(groupName, hide){ var group; for (var i=0; i<groups.length; i++){ if (groups[i].name===groupName){ group = groups[i]; break; } } if (group){ var rows = group.getRows(); for (var i=0; i<rows.length; i++){ var tr = rows[i]; if (hide){ tr.style.visibility = 'hidden'; tr.style.display = 'none'; } else{ tr.style.display = ''; tr.style.visibility = ''; } } } }; //************************************************************************** //** addItem //************************************************************************** var addItem = function(item){ var type = item.type; var name = item.name; var label = item.label; var icon = item.icon; var value = item.value; if (typeof type === "string"){ if (type==="text" || type==="password" || type==="textarea"){ createTextInput(item); } else if (type==="radio"){ createRadioInput(label, name, item); } else if (type==="checkbox"){ createCheckboxInput(label, name, item); } else if (type==="hidden"){ createHiddenInput(name, value); } } else{ var el; var getValue, setValue; var input = type; if (input.tagName){ if (input.tagName.toLowerCase()==="input"){ el = input; getValue = function(){ return input.value; }; setValue = function(value, silent){ if (typeof value === "undefined") value = ""; if (input.value!=value){ input.value = value; if (silent===true) return; input.onchange(); //fire onchange event } }; var formInput = addInput(name, label, el, getValue, setValue, icon); input.onchange = function(){ me.onChange(formInput, input.value); }; } } else{ if (input.el && input.getValue){ //hook for javaxt components (e.g. combobox) var formInput = addInput(name, label, input.el, input.getValue, input.setValue, icon); for (var key in input) { if (input.hasOwnProperty(key)){ if (typeof input[key] === "function"){ formInput[key] = input[key]; } } } input.onChange = function(){ me.onChange(formInput, input.getValue()); }; } } } }; //************************************************************************** //** addInput //************************************************************************** var addInput = function(name, label, el, getValue, setValue, icon){ //Create new row var row = formTable.addRow(); //Icon var td = row.addColumn(); if (icon){ setStyle(td, "icon"); createElement('div', td, icon); } //Label row.appendChild(createLabel(label)); //Input td = row.addColumn(); td.style.width = "100%"; td.style.paddingBottom=verticalSpacing; td.appendChild(el); var input = { name: name, label: label, row: row, getValue: getValue, setValue: setValue }; inputs.push(input); return input; }; //************************************************************************** //** createLabel //************************************************************************** /** Used to create a column with a form label. */ var createLabel = function(label){ var td = createElement('td', config.style.label); td.style.paddingBottom=verticalSpacing; td.onselectstart = function () {return false;}; td.onmousedown = function () {return false;}; if (label!=null){ label = label.replace(/^\s*/, "").replace(/\s*$/, ""); //trim if (label.length>0){ if (label.indexOf(":")!=label.length && config.style.addColon===true) label+=": "; else label+=" "; } } if (label!=null) td.innerHTML = label; return td; }; //************************************************************************** //** enableField //************************************************************************** /** Used to enable a form input. Returns true if the field was found and is * enabled. */ this.enableField = function(name){ var field = me.findField(name); if (field){ var row = field.row; for (var i=0; i<row.childNodes.length; i++){ var cell = row.childNodes[i]; var opacity = 1; if (i===2){ if (field.enable){ field.enable(); opacity = ""; } else cell.childNodes[0].disabled=false; } cell.style.opacity = opacity; } return true; } return false; }; //************************************************************************** //** disableField //************************************************************************** /** Used to disable a form input. Returns true if the field was found and is * disabled. */ this.disableField = function(name){ var field = me.findField(name); if (field){ var row = field.row; for (var i=0; i<row.childNodes.length; i++){ var cell = row.childNodes[i]; var opacity = "0.6"; if (i===2){ if (field.disable){ field.disable(); opacity = ""; } else cell.childNodes[0].disabled=true; } cell.style.opacity = opacity; } return true; } return false; }; //************************************************************************** //** hideField //************************************************************************** /** Used to hide a form input. Returns true if the field was found and * hidden from view. */ this.hideField = function(name){ var field = me.findField(name); if (field){ var row = field.row; //Update visibility row.style.visibility = 'hidden'; row.style.display = 'none'; //Check if the row is part of a group and update height as needed var group = findGroup(row); if (group) updateGroup(group); return true; } return false; }; //************************************************************************** //** showField //************************************************************************** /** Used to unhide a form input. Returns true if the field was found and * is visible. */ this.showField = function(name){ var field = me.findField(name); if (field){ var row = field.row; //Update visibility row.style.visibility = ''; row.style.display = ''; //Check if the row is part of a group and update height as needed var group = findGroup(row); if (group) updateGroup(group); return true; } return false; }; // this.submit = function(url, method){ // this.setAction(url); // this.setMethod(method); // form.submit(); // }; // // // this.setTarget = function(target){ // form.target = target; // }; // // this.setAction = function(url){ // if (url!=null) form.action = url; // }; // // this.setMethod = function(method){ // if (method!=null){ // method = method.toString().toLowerCase(); // if (method=="get" || method=="post") form.method = method; // } // }; //************************************************************************** //** getValue //************************************************************************** /** Returns the value for an input in the form. */ this.getValue = function(name){ var field = me.findField(name); if (field){ return field.getValue(); } return null; }; //************************************************************************** //** setValue //************************************************************************** /** Used to set the value for an input in the form. * @param name Input name or label associated with the input. * @param value A value for the input. * @param silent By default, if the input value is changed, it will fire. * the onChange event. When silent is set to true, the input will NOT fire * the onChange event. This parameter is optional. */ this.setValue = function(name, value, silent){ var field = me.findField(name); if (field){ field.setValue(value, silent); return true; } return false; }; //************************************************************************** //** findField //************************************************************************** /** Used to find a row in the form. * @param name Input name or label associated with the input. * @return An object with the following properties: * <ul> * <li>name (string)</li> * <li>label (string)</li> * <li>row (DOM object)</li> * <li>getValue (function)</li> * <li>setValue (function)</li> * </ul> */ this.findField = function(name){ for (var i=0; i <inputs.length; i++){ if (inputs[i].name===name) return inputs[i]; } for (var i=0; i <inputs.length; i++){ if (inputs[i].label===name) return inputs[i]; } return null; }; //************************************************************************** //** findGroup //************************************************************************** /** Used to find a groupbox associated with a given row. Returns null if the * row is not part of a groupbox. */ var findGroup = function(row){ for (var i=0; i<groups.length; i++){ var group = groups[i]; var rows = group.getRows(); for (var j=0; j<rows.length; j++){ var tr = rows[j]; if (tr===row) return group; } } return null; }; //************************************************************************** //** updateGroup //************************************************************************** /** Used to update the hight of a given groupbox. */ var updateGroup = function(group){ var rows = group.getRows(); var setHeight = group.setHeight; var arr = []; for (var i=1; i<rows.length-1; i++){ arr.push(rows[i]); } getHeight(arr, setHeight); }; //************************************************************************** //** getGroupboxStyle //************************************************************************** var getGroupboxStyle = function(){ if (config.groupbox) return config.groupbox; //Create temporary div to get groupbox style var temp = createElement("div", config.style.groupbox); temp.style.position = "absolute"; temp.style.visibility = 'hidden'; temp.style.display = 'block'; var body = document.getElementsByTagName("body")[0]; body.appendChild(temp); var style = temp.currentStyle || window.getComputedStyle(temp); var getStyle = function(prop){ if (style.getPropertyValue){ var val = style.getPropertyValue(prop); if (val && val.length>0) return val; prop = prop.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase(); return style.getPropertyValue(prop); } else{ return style[prop]; } }; config.groupbox = { paddingTop: parseInt(getStyle("paddingTop")), paddingBottom: parseInt(getStyle("paddingBottom")), paddingLeft: parseInt(getStyle("paddingLeft")), paddingRight: parseInt(getStyle("paddingRight")), borderLeft: parseInt(getStyle("borderLeftWidth")), borderRight: parseInt(getStyle("borderRightWidth")), borderTop: parseInt(getStyle("borderTopWidth")), borderBottom: parseInt(getStyle("borderBottomWidth")) }; body.removeChild(temp); temp = null; return config.groupbox; }; //************************************************************************** //** getHeight //************************************************************************** /** Used to calculate the total height of a given list of rows. If the * height is not immediately available, then the form's parent has not been * added to the document. In this case, we will periodically check to see * if the form's status changes so that we can set the height of the * groupbox. */ var getHeight = function(rows, callback){ var _getHeight = function(){ var h = 0; for (var i=0; i<rows.length; i++){ if (rows[i].style.display !== 'none'){ h+= rows[i].offsetHeight; } } return h; }; var h = _getHeight(rows); if (h===0 || isNaN(h)){ var timer; var checkHeight = function(){ var h = _getHeight(); if (h===0 || isNaN(h)){ timer = setTimeout(checkHeight, 100); } else{ clearTimeout(timer); callback.apply(me, [h]); } }; timer = setTimeout(checkHeight, 100); } else{ callback.apply(me, [h]); } }; //************************************************************************** //** stringToFunction //************************************************************************** /** Converts a string to a function or class. Example: * var DateInput = stringToFunction("javaxt.dhtml.DateInput"); * var dateInput = new DateInput(...); */ var stringToFunction = function(str) { var arr = str.split("."); var fn = (window || this); for (var i = 0, len = arr.length; i < len; i++) { fn = fn[arr[i]]; } if (typeof fn !== "function") { throw new Error("function not found"); } return fn; }; //************************************************************************** //** dispatchEvent //************************************************************************** var dispatchEvent = function(el, event){ if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, false, true); el.dispatchEvent(evt); } else{ el.fireEvent("on"+event); } }; //************************************************************************** //** createTable //************************************************************************** var createTable = function(width, height, desc){ var table = javaxt.dhtml.utils.createTable(); if (width) table.style.width = width; else table.style.width = ''; if (height) table.style.height = height; else table.style.height = ''; if (desc) table.setAttribute("desc", desc); return table; }; //************************************************************************** //** setStyle //************************************************************************** var setStyle = function(el, style){ javaxt.dhtml.utils.setStyle(el, config.style[style]); }; //************************************************************************** //** Utils //************************************************************************** var merge = javaxt.dhtml.utils.merge; var onRender = javaxt.dhtml.utils.onRender; var createElement = javaxt.dhtml.utils.createElement; var addResizeListener = javaxt.dhtml.utils.addResizeListener; var isArray = javaxt.dhtml.utils.isArray; init(); }; |