Merge remote branch 'main/WebGUI8' into WebGUI8

This commit is contained in:
David Delikat 2011-11-07 17:49:29 +00:00
commit 546932869a
156 changed files with 5488 additions and 582 deletions

View file

@ -0,0 +1,60 @@
/**
* wg-datatable-html.css
* CSS rules for DataTable assets
*
* Add as attachment to Default DetaTable template (HTML)
*/
/* start content at top of cells */
.dataTable table>tbody>tr>td {
vertical-align: 0;
}
.dataTable>table>tbody>tr>td>p:first-child { /* for htmlarea, but really applies to the starting p of any cell */
margin-top: 0;
}
/* padding in all data cells */
.dataTable table>tbody>tr>td {
padding-left: 10px;
padding-right: 10px;
}
/* examples of further styles */
/* limited textarea/htmlarea cells, show vertical scrollbar if needed */
/*
.dataTable table>tbody>tr>td {
height: 70px;
width: 200px;
overflow-y: auto;
}
*/
/* styling a particular DataTable in the page, by assetId */
/*
#dataTablesrvp2vk8QJqY5E0imSRQag.dataTable table>tbody>tr>td {
color:red;
height:auto;
width:150px;
overflow-y: visible
}
*/
/* minimum row height */
/*
.dataTable table>tbody>tr>td {
min-height:70px;
height:auto !important;
height:70px;
}
*/
/* styling a particular column (e.g column 2), by assetId */
/*
#dataTablesvE67R6JQfmEI__T9pIAkQ.dataTable table>tbody>tr>td:first-child+td {
color:blue;
}
*/

View file

@ -0,0 +1,59 @@
/**
* wg-datatable-yui.css
* CSS rules for DataTable assets
*
* Add as attachment to Default DetaTable template (YUI)
*/
/* start content at top of cells */
.yui-dt-editable {
vertical-align: 0;
}
.wg-dt-htmlarea>p:first-child {
margin-top: 0;
}
/* padding in all data cells */
td.yui-dt-editable .yui-dt-liner {
padding-left: 10px;
padding-right: 10px;
}
/* examples of further styles */
/* limited textarea/htmlarea cells, show vertical scrollbar if needed */
/*
.wg-dt-textarea, .wg-dt-htmlarea {
height: 70px;
width: 200px;
overflow-y: auto;
}
*/
/* styling a particular DataTable in the page */
/*
#dataTablesrvp2vk8QJqY5E0imSRQag .wg-dt-textarea, #dataTablesrvp2vk8QJqY5E0imSRQag .wg-dt-htmlarea {
color:red;
height:auto;
width:150px;
overflow:visible;
}
*/
/* minimum row height */
/*
td.yui-dt-editable .yui-dt-liner {
min-height:70px;
height:auto !important;
height:70px;
}
*/
/* styling a particular column */
/*
#dataTablesrvp2vk8QJqY5E0imSRQag .yui-dt-col-col1 .yui-dt-liner {
color:blue;
}
*/

View file

@ -0,0 +1,118 @@
// Initialize namespace
if (typeof WebGUI == "undefined") {
var WebGUI = {};
}
if (typeof WebGUI.Asset == "undefined") {
WebGUI.Asset = {};
}
if(typeof WebGUI.Asset.Sku == "undefined") {
WebGUI.Asset.Sku = {};
}
if(typeof WebGUI.Asset.Sku.EMSBadge == "undefined") {
WebGUI.Asset.Sku.EMSBadge = {};
}
var timeout = null;
var searchResults = [];
WebGUI.Asset.Sku.EMSBadge = {
delayLookup : function( ) {
if(timeout != null) {
clearTimeout(timeout);
}
timeout = setTimeout(WebGUI.Asset.Sku.EMSBadge.lookupAddress,300);
},
initForm : function( ) {
var addressCol = document.getElementById("emsbadge_container");
var divs = addressCol.getElementsByTagName('div');
for( var i = 0; i < divs.length; i++ ) {
WebGUI.Asset.Sku.EMSBadge.setHoverStates( divs[i] );
YAHOO.util.Event.addListener( divs[i], "click", WebGUI.Asset.Sku.EMSBadge.setAddress );
}
var formTbl = document.getElementById("emsbadge_form_tbl");
var inputs = formTbl.getElementsByTagName('input');
for( var i = 0; i < inputs.length; i++ ) {
var inputEl = inputs[i];
YAHOO.util.Event.addListener(inputEl, "keydown", WebGUI.Asset.Sku.EMSBadge.delayLookup);
}
},
lookupAddress : function( ) {
timeout = null;
var url = searchUrl + ";" + WebGUI.Form.buildQueryString("emsbadge_form",{ name: ['func'] });
YAHOO.util.Connect.asyncRequest('GET', url, {
success: function(o) {
searchResults = YAHOO.lang.JSON.parse(o.responseText);
for( var i = 1; i <= 3; i++ ) {
document.getElementById('emsbadge_address_' + i).style.display='none';
}
for( var i = 0; i < searchResults.length; i++ ) {
if(i > 3) break;
var addressEl = document.getElementById('emsbadge_address_' + (i+1));
var address = searchResults[i];
var addressStr = "<span style='color:blue'>" + address.username + "</span>"
+ "<br />";
addressStr += address.firstName + " " + address.lastName
+ "<br />"
+ address.address1
+ "<br />";
if(address.state) {
addressStr += address.city + ", " + address.state + " " + address.code;
}
else {
addressStr += address.city + ", " + address.country;
}
if(address.email) {
addressStr += "<br />" + address.email;
}
addressEl.innerHTML = addressStr;
addressEl.style.display = '';
}
},
failure: function(o) {}
});
},
setAddress : function ( e ) {
var el = YAHOO.util.Event.getTarget(e);
if(el.tagName == "SPAN") {
el = el.parentNode;
}
var divClicked = el.id;
var parts = divClicked.split("_");
var index = parseInt(parts[2]);
var result = searchResults[(index -1)];
if( result == null ) return;
document.getElementById('name_formId').value = result.firstName + " " + result.lastName;
document.getElementById('organization_formId').value = result.organization;
document.getElementById('address1_formId').value = result.address1;
document.getElementById('address2_formId').value = result.address2;
document.getElementById('address3_formId').value = result.address3;
document.getElementById('city_formId').value = result.city;
document.getElementById('state_formId').value = result.state;
document.getElementById('zipcode_formId').value = result.code;
document.getElementById('country_formId').value = result.country;
document.getElementById('phone_formId').value = result.phoneNumber;
document.getElementById('email_formId').value = result.email;
},
setHoverStates : function( el ) {
el.setAttribute("oldclass", el.className);
el.onmouseover = function() { this.className = this.getAttribute("oldclass") + "_on"; };
el.onmouseout = function() { this.className = this.getAttribute("oldclass"); };
}
}
YAHOO.util.Event.onDOMReady( function () {
WebGUI.Asset.Sku.EMSBadge.initForm();
});

View file

@ -0,0 +1,21 @@
/**
* datatable.css
* CSS rules for Edit DataTable
*/
/* prevent collapsing of empty rows */
.yui-dt-editable .yui-dt-liner {
min-height: 10px;
}
/* displaying the initial blank line in HTMLarea is not useful */
.wg-dt-htmlarea>p:first-child {
margin-top: 0;
}
/* size of Textarea/HTMLarea cell */
.wg-dt-textarea, .wg-dt-htmlarea {
height: 50px;
width: 150px;
overflow-y: auto;
}

View file

@ -1,4 +1,3 @@
/*global WebGUI*/
// Initialize namespace
if (typeof WebGUI == "undefined") {
@ -8,7 +7,6 @@ if (typeof WebGUI.Form == "undefined") {
WebGUI.Form = {};
}
/**
* This object contains scripts for the DataTable form control
*/
@ -39,6 +37,21 @@ WebGUI.Form.DataTable
this.options = options;
this.schemaDialog = undefined;
/************************************************************************
* editorByFormat ( event, data )
* Return the DataTable editor type that matches the given format
*/
this.editorByFormat
= function ( format ) {
switch( format ) {
case "text":
case "number":
case "link":
return "textbox";
}
return format;
};
/************************************************************************
* addRow ( event, data )
* Add a row to the bottom of the table
@ -59,11 +72,18 @@ WebGUI.Form.DataTable
/************************************************************************
* deleteSelectedRows ( )
* Delete the selected rows after confirming
* If there is an editor in the deleted row, cancel it
*/
this.deleteSelectedRows
= function ( ) {
if ( confirm( this.i18n.get( "Form_DataTable", "delete confirm" ) ) ) {
var rows = this.dataTable.getSelectedRows();
// Cancel editor if present
if ( this.dataTable.getCellEditor() ) {
this.dataTable.cancelCellEditor();
}
for ( var i = 0; i < rows.length; i++ ) {
this.dataTable.deleteRow( this.dataTable.getRecord( rows[i] ) );
}
@ -98,16 +118,21 @@ WebGUI.Form.DataTable
/************************************************************************
* handleEditorKeyEvent ( obj )
* Handle a keypress when the Cell Editor is open
* Enter will close the editor and move down
* Not implemented: Enter will close the editor and move down
* Tab will close the editor and move right.
* Use the handleTableKeyEvent() to handle the moving
* Open a new cell editor on the newly focused cell
*/
this.handleEditorKeyEvent
= function ( obj ) {
// 9 = tab, 13 = enter
var e = obj.event;
if ( e.keyCode == 9 || e.keyCode == 13 ) {
// Avoid terminating the editor on enter
if ( e.keyCode == 13) {
return false;
}
if ( e.keyCode == 9) {
var cell = this.dataTable.getCellEditor().getTdEl();
var nextCell = this.dataTable.getNextTdEl( cell );
this.dataTable.saveCellEditor();
@ -121,8 +146,6 @@ WebGUI.Form.DataTable
// No next cell, make a new row and open the editor for that one
this.dataTable.addRow( {} );
}
// BUG: If pressing Enter, editor gets hidden right away due to YUI default event
// putting e.preventDefault() and return false here makes no difference
}
};
@ -152,7 +175,10 @@ WebGUI.Form.DataTable
* handleTableKeyEvent ( obj )
* Handle a keypress inside the DataTable
* Space will open the cell editor
* Note: it doesn't currently work: getSelectedTdEls() always returns [] when selectionMode is "standard"
* Commented out for now.
*/
/*
this.handleTableKeyEvent
= function ( obj ) {
// 9 = tab, 13 = enter, 32 = space
@ -164,6 +190,7 @@ WebGUI.Form.DataTable
}
}
};
*/
/************************************************************************
* hideSchemaDialog ( )
@ -204,7 +231,13 @@ WebGUI.Form.DataTable
}
var dataTableOptions = {
dateOptions : { format : this.options.dateFormat }
dateOptions : {
format : this.options.dateFormat,
MSG_LOADING : this.i18n.get( "WebGUI", "Loading..." ),
MSG_ERROR : this.i18n.get( "Form_DataTable", "data error" ),
MSG_SORTASC : this.i18n.get( "Form_DataTable", "sort ascending" ),
MSG_SORTDESC : this.i18n.get( "Form_DataTable", "sort descending" )
}
};
if ( this.options.showEdit ) {
@ -215,6 +248,40 @@ WebGUI.Form.DataTable
dataTableOptions.initialRequest = "";
}
for ( var i = 0; i < this.columns.length; i++ ) {
this.columns[ i ].editor = this.editorByFormat( this.columns[ i ].formatter );
}
var widget = YAHOO.widget,
DT = widget.DataTable;
// Dynamically add HTMLarea field type
// HTMLAreaCellEditor is like TextareaCellEditor, but with an additional property "htmlarea" which is true
var HTMLAreaCellEditor = function(a) {
widget.TextareaCellEditor.superclass.constructor.call(this, a);
};
YAHOO.lang.extend( HTMLAreaCellEditor, widget.TextareaCellEditor, {
htmlarea : true
} );
// Extend the static arrays of editors and formatters
DT.Editors[ "htmlarea" ] = HTMLAreaCellEditor;
// Define classes "wg-dt-textarea" and "wg-dt-htmlarea" that can be overided by a stylesheet
// (e.g. in the extraHeadTags of the asset).
var formatter = function ( type ) {
var fmt = function( el, oRecord, oColumn, oData ) {
var value = YAHOO.lang.isValue(oData) ? oData : "";
el.innerHTML = "<div class='wg-dt-" + type + "'>" + value + "</div>";
};
return fmt;
};
DT.Formatter[ "textarea" ] = formatter( "textarea" );
DT.Formatter[ "htmlarea" ] = formatter( "htmlarea" );
// XXX need to do it with YUI API
widget.BaseCellEditor.prototype.LABEL_SAVE = this.i18n.get( "Form_DataTable", "save" );
widget.BaseCellEditor.prototype.LABEL_CANCEL = this.i18n.get( "Form_DataTable", "cancel" );
this.dataTable = new YAHOO.widget.DataTable(
this.containerId,
this.columns,
@ -223,12 +290,52 @@ WebGUI.Form.DataTable
);
if ( this.options.showEdit ) {
var tinymceEdit = "tinymce-edit";
var saveThis = this;
this.dataTable.doBeforeShowCellEditor = function( oCellEditor ) {
if ( !oCellEditor.htmlarea ) {
return true;
}
oCellEditor.getInputValue = function() {
return tinyMCE.activeEditor.getContent();
};
oCellEditor.textarea.setAttribute( 'id', tinymceEdit );
tinyMCE.execCommand( 'mceAddControl', false, tinymceEdit );
setTimeout(function(){ tinyMCE.execCommand( 'mceFocus',false, tinymceEdit ); }, 0);
// watch hitting tab, which should save the current cell and open an editor on the next
tinyMCE.activeEditor.onKeyDown.add(
function( eh, t ) {
return function(ed, e) { // ed unused
eh.call( t, { event: e } );
};
}( saveThis.handleEditorKeyEvent, saveThis )
);
return true;
};
// Remove TinyMCE on save or cancel
var mceRemoveControl = function ( oArgs ) {
var oCellEditor = oArgs.editor;
if ( oCellEditor.htmlarea ) {
tinyMCE.execCommand( 'mceRemoveControl', false, tinymceEdit );
oCellEditor.textarea.removeAttribute( 'id' );
}
};
this.dataTable.subscribe( "editorSaveEvent", mceRemoveControl );
this.dataTable.subscribe( "editorCancelEvent", mceRemoveControl );
// Add the class so our editors get the right skin
YAHOO.util.Dom.addClass( document.body, "yui-skin-sam" );
this.dataTable.subscribe( "cellDblclickEvent", this.dataTable.onEventShowCellEditor );
this.dataTable.subscribe( "rowClickEvent", this.dataTable.onEventSelectRow );
this.dataTable.subscribe( "tableKeyEvent", this.handleTableKeyEvent, this, true );
/* this.handleTableKeyEvent() is commented out, see there for the reason */
/* this.dataTable.subscribe( "tableKeyEvent", this.handleTableKeyEvent, this, true ); */
this.dataTable.subscribe( "editorKeydownEvent", this.handleEditorKeyEvent, this, true );
this.dataTable.subscribe( "editorShowEvent", this.handleEditorShowEvent, this, true );
this.dataTable.subscribe( "rowAddEvent", this.handleRowAdd, this, true );
@ -281,7 +388,6 @@ WebGUI.Form.DataTable
scope : this
}
} );
// This data table will be submitted async
if ( this.options.ajaxSaveUrl ) {
var save = new YAHOO.widget.Button( {
@ -333,6 +439,8 @@ WebGUI.Form.DataTable
"format link",
"format number",
"format date",
"format textarea",
"format htmlarea",
"add column",
"cancel",
"ok",
@ -342,7 +450,13 @@ WebGUI.Form.DataTable
"help select row",
"help add row",
"help default sort",
"help reorder column"
"help reorder column",
"data error",
"sort ascending",
"sort descending"
],
'WebGUI' : [
"Loading..."
]
},
onpreload : {
@ -365,7 +479,7 @@ WebGUI.Form.DataTable
var helpDialog = new YAHOO.widget.Panel( "helpWindow", {
modal : false,
draggable : true,
zIndex : 1000
zIndex : 10000
} );
helpDialog.setHeader( "DataTable Help" );
helpDialog.setBody(
@ -404,28 +518,16 @@ WebGUI.Form.DataTable
};
var buttonLabel = this.i18n.get( "Form_DataTable", "delete column" );
var availableFormats = [
{
"value" : "text",
"label" : this.i18n.get( "Form_DataTable", "format text" )
},
{
"value" : "number",
"label" : this.i18n.get( "Form_DataTable", "format number" )
},
{
"value" : "email",
"label" : this.i18n.get( "Form_DataTable", "format email" )
},
{
"value" : "link",
"label" : this.i18n.get( "Form_DataTable", "format link" )
},
{
"value" : "date",
"label" : this.i18n.get( "Form_DataTable", "format date" )
}
];
var availableFormats = [];
var formatType = [ "text", "number", "email", "link", "date", "textarea", "htmlarea" ];
for ( var fti = 0; fti < formatType.length; fti++) {
availableFormats.push(
{
"value" : formatType[fti],
"label" : this.i18n.get( "Form_DataTable", "format " + formatType[fti] )
}
);
}
// function for creating new database columns to the table schema
var createTableColumn = function(i,cols) {
@ -595,7 +697,7 @@ WebGUI.Form.DataTable
this.updateSchema
= function () {
var data = this.schemaDialog.getData();
// First delete columns
var deleteCols = YAHOO.lang.JSON.parse( data[ "deleteCols" ] );
for ( var x = 0; x < deleteCols.length; x++ ) {
@ -623,7 +725,7 @@ WebGUI.Form.DataTable
var rows = this.dataTable.getRecordSet().getRecords();
for ( var r = 0; r < rows.length; r++ ) {
rows[ r ].setData( newKey, rows[ r ].getData( oldKey ) );
rows[ r ].setData( oldKey, undefined );
rows[ r ].setData( oldKey, undefined );
}
}
@ -633,7 +735,7 @@ WebGUI.Form.DataTable
formatter : format,
resizeable : ( col ? col.resizeable : 1 ),
sortable : ( col ? col.sortable : 1 ),
editor : ( format == "date" ? "date" : "textbox")
editor : this.editorByFormat( format )
};
if ( format == "date" ) {
newCol["dateOptions"] = { format : this.options.dateFormat };
@ -664,9 +766,9 @@ WebGUI.Form.DataTable
}
}
}
i++;
}
this.dataTable.render();
this.schemaDialog.cancel();
};

View file

@ -96,6 +96,65 @@ WebGUI.Form.buildQueryString = function ( formId, excludes ) {
return sFormData;
};
/***********************************************************************************
* @description This method clears all the values of the form. This is different than reset which will restore default values
* @method clearForm
* @public
* @static
* @param {string || object} id or object of the form element to clear values for.
* @param {object} object containing array of form elements to exclude. { id:[], name:[], classNames:[], type:[] }
*/
WebGUI.Form.clearForm = function ( oElement, excludes ) {
var _isInArray = function ( value, array) {
if(!array || !value) return 0;
if(typeof array != 'object') return 0;
for(var i = 0; i < array.length; i++) {
if(array[i] == value) return 1;
}
return 0;
};
if(typeof oElement != 'object') oElement = document.getElementById(oElement);
for (i = 0; i < oElement.length; i++) {
var oType = oElement[i].type.toLowerCase();
var oClass = oElement[i].className;
var oName = oElement[i].name;
var oId = oElement[i].id;
if(_isInArray(oClass,excludes.classNames)) continue;
if(_isInArray(oId,excludes.id)) continue;
if(_isInArray(oName,excludes.name)) continue;
if(_isInArray(oType,excludes.type)) continue;
switch (oType) {
case "text":
case "password":
case "textarea":
case "hidden":
oElement[i].value = "";
break;
case "radio":
case "checkbox":
if (oElement[i].checked) {
oElement[i].checked = false;
}
break;
case "select-one":
case "select-multi":
oElement[i].selectedIndex = -1;
break;
default:
break;
}
}
return;
};
/***********************************************************************************
* @description This method gets the proper value of the form element passed in
* @method getFormValue