2011-08-06 16:36:44 +02:00
/ * *
2013-04-13 21:00:13 +02:00
* EGroupware eTemplate2 - JS Grid object
2011-08-06 16:36:44 +02:00
*
* @ license http : //opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @ package etemplate
* @ subpackage api
* @ link http : //www.egroupware.org
* @ author Andreas Stöckel
* @ copyright Stylite 2011
2011-08-07 15:43:46 +02:00
* @ version $Id$
2011-08-06 16:36:44 +02:00
* /
/ * e g w : u s e s
jquery . jquery ;
2011-08-24 12:18:07 +02:00
et2 _core _DOMWidget ;
et2 _core _xml ;
2011-08-06 16:36:44 +02:00
* /
/ * *
* Class which implements the "grid" XET - Tag
2013-08-16 10:11:06 +02:00
*
2012-03-21 22:31:47 +01:00
* This also includes repeating the last row in the grid and filling
* it with content data
2013-08-16 10:11:06 +02:00
*
2013-04-13 21:00:13 +02:00
* @ augments et2 _DOMWidget
2013-08-16 10:11:06 +02:00
* /
2016-02-29 21:40:43 +01:00
var et2 _grid = ( function ( ) { "use strict" ; return et2 _DOMWidget . extend ( [ et2 _IDetachedDOM , et2 _IAligned , et2 _IResizeable ] ,
2013-04-13 21:00:13 +02:00
{
2012-06-27 00:56:35 +02:00
createNamespace : true ,
2012-03-23 20:25:50 +01:00
attributes : {
// Better to use CSS, no need to warn about it
"border" : {
"ignore" : true
} ,
2012-07-23 20:01:04 +02:00
"align" : {
"name" : "Align" ,
"type" : "string" ,
"default" : "left" ,
"description" : "Position of this element in the parent hbox"
} ,
2012-03-23 20:25:50 +01:00
"spacing" : {
"ignore" : true
} ,
"padding" : {
"ignore" : true
2013-07-04 01:16:15 +02:00
} ,
"sortable" : {
"name" : "Sortable callback" ,
"type" : "string" ,
"default" : et2 _no _init ,
"description" : "PHP function called when user sorts the grid. Setting this enables sorting the grid rows. The callback will be passed the ID of the grid and the new order of the rows."
2012-03-23 20:25:50 +01:00
}
} ,
2013-08-16 10:11:06 +02:00
2013-04-13 21:00:13 +02:00
/ * *
* Constructor
2013-08-16 10:11:06 +02:00
*
2013-04-13 21:00:13 +02:00
* @ memberOf et2 _grid
* /
2011-08-24 12:05:52 +02:00
init : function ( ) {
2011-08-06 16:36:44 +02:00
// Create the table body and the table
2011-08-07 15:43:46 +02:00
this . table = $j ( document . createElement ( "table" ) )
. addClass ( "et2_grid" ) ;
2015-03-17 10:44:14 +01:00
this . thead = $j ( document . createElement ( "thead" ) )
. appendTo ( this . table ) ;
this . tfoot = $j ( document . createElement ( "tfoot" ) )
. appendTo ( this . table ) ;
this . tbody = $j ( document . createElement ( "tbody" ) )
. appendTo ( this . table ) ;
2011-08-06 16:36:44 +02:00
// Call the parent constructor
this . _super . apply ( this , arguments ) ;
// Counters for rows and columns
this . rowCount = 0 ;
this . columnCount = 0 ;
// 2D-Array which holds references to the DOM td tags
this . cells = [ ] ;
2011-08-25 15:35:53 +02:00
this . rowData = [ ] ;
2011-08-26 11:58:25 +02:00
this . colData = [ ] ;
2011-08-06 16:36:44 +02:00
this . managementArray = [ ] ;
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
// Keep the template node for later regeneration
this . template _node = null ;
2014-02-18 21:20:35 +01:00
// Wrapper div for height & overflow, if needed
this . wrapper = null ;
2011-08-06 16:36:44 +02:00
} ,
destroy : function ( ) {
2011-08-15 18:03:53 +02:00
this . _super . call ( this , arguments ) ;
2011-08-06 16:36:44 +02:00
} ,
_initCells : function ( _colData , _rowData ) {
// Copy the width and height
var w = _colData . length ;
var h = _rowData . length ;
// Create the 2D-Cells array
var cells = new Array ( h ) ;
for ( var y = 0 ; y < h ; y ++ )
{
cells [ y ] = new Array ( w ) ;
// Initialize the cell description objects
for ( var x = 0 ; x < w ; x ++ )
{
2016-03-09 18:29:29 +01:00
// Some columns (nm) we do not parse into a boolean
var col _disabled = typeof _colData [ x ] . disabled == 'boolean' ?
_colData [ x ] . disabled :
this . getArrayMgr ( "content" ) . parseBoolExpression ( _colData [ x ] . disabled ) ;
2011-08-06 16:36:44 +02:00
cells [ y ] [ x ] = {
"td" : null ,
"widget" : null ,
"colData" : _colData [ x ] ,
"rowData" : _rowData [ y ] ,
2016-03-09 18:29:29 +01:00
"disabled" : col _disabled || _rowData [ y ] . disabled ,
2011-08-25 15:35:53 +02:00
"class" : _colData [ x ] [ "class" ] ,
2011-08-06 16:36:44 +02:00
"colSpan" : 1 ,
2011-08-07 15:43:46 +02:00
"autoColSpan" : false ,
2011-08-06 16:36:44 +02:00
"rowSpan" : 1 ,
2011-08-07 15:43:46 +02:00
"autoRowSpan" : false ,
2011-08-26 11:58:25 +02:00
"width" : _colData [ x ] . width ,
2011-08-06 16:36:44 +02:00
"x" : x ,
"y" : y
} ;
}
}
return cells ;
} ,
_getColDataEntry : function ( ) {
return {
"width" : "auto" ,
"class" : "" ,
"align" : "" ,
2011-08-22 17:58:47 +02:00
"span" : "1" ,
"disabled" : false
2011-08-06 16:36:44 +02:00
} ;
} ,
_getRowDataEntry : function ( ) {
return {
"height" : "auto" ,
"class" : "" ,
2012-06-11 17:45:37 +02:00
"valign" : "top" ,
2011-08-22 17:58:47 +02:00
"span" : "1" ,
"disabled" : false
2011-08-06 16:36:44 +02:00
} ;
} ,
_getCell : function ( _cells , _x , _y ) {
if ( ( 0 <= _y ) && ( _y < _cells . length ) )
{
var row = _cells [ _y ] ;
if ( ( 0 <= _x ) && ( _x < row . length ) )
{
return row [ _x ] ;
}
}
throw ( "Error while accessing grid cells, invalid element count or span value!" ) ;
} ,
_forceNumber : function ( _val ) {
if ( isNaN ( _val ) )
{
throw ( _val + " is not a number!" ) ;
}
return parseInt ( _val ) ;
} ,
_fetchRowColData : function ( columns , rows , colData , rowData ) {
2016-03-09 18:29:29 +01:00
// Some things cannot be done inside a nextmatch - nm will do the expansion later
var nm = false ;
var widget = this ;
while ( ! nm && widget != this . getRoot ( ) )
{
nm = ( widget . _type == 'nextmatch' ) ;
widget = widget . getParent ( ) ;
}
2011-08-06 16:36:44 +02:00
// Parse the columns tag
et2 _filteredNodeIterator ( columns , function ( node , nodeName ) {
var colDataEntry = this . _getColDataEntry ( ) ;
2016-03-09 18:29:29 +01:00
// This cannot be done inside a nm, it will expand it later
2016-03-11 19:57:18 +01:00
colDataEntry [ "disabled" ] = nm ?
et2 _readAttrWithDefault ( node , "disabled" , "" ) :
2016-03-09 18:29:29 +01:00
this . getArrayMgr ( "content" )
2011-08-22 17:58:47 +02:00
. parseBoolExpression ( et2 _readAttrWithDefault ( node , "disabled" , "" ) ) ;
2011-08-06 16:36:44 +02:00
if ( nodeName == "column" )
{
2011-08-10 16:36:31 +02:00
colDataEntry [ "width" ] = et2 _readAttrWithDefault ( node , "width" , "auto" ) ;
colDataEntry [ "class" ] = et2 _readAttrWithDefault ( node , "class" , "" ) ;
colDataEntry [ "align" ] = et2 _readAttrWithDefault ( node , "align" , "" ) ;
colDataEntry [ "span" ] = et2 _readAttrWithDefault ( node , "span" , "1" ) ;
2015-03-17 10:44:14 +01:00
2014-08-20 01:33:06 +02:00
// Keep any others attributes set, there's no 'column' widget
for ( var i in node . attributes )
{
var attr = node . attributes [ i ] ;
if ( attr . nodeType == 2 && typeof colDataEntry [ attr . nodeName ] == 'undefined' )
{
colDataEntry [ attr . nodeName ] = attr . value ;
}
}
2011-08-06 16:36:44 +02:00
}
else
{
colDataEntry [ "span" ] = "all" ;
}
colData . push ( colDataEntry ) ;
} , this ) ;
// Parse the rows tag
et2 _filteredNodeIterator ( rows , function ( node , nodeName ) {
var rowDataEntry = this . _getRowDataEntry ( ) ;
2011-08-22 17:58:47 +02:00
rowDataEntry [ "disabled" ] = this . getArrayMgr ( "content" )
. parseBoolExpression ( et2 _readAttrWithDefault ( node , "disabled" , "" ) ) ;
2011-08-06 16:36:44 +02:00
if ( nodeName == "row" )
{
2012-03-21 22:31:47 +01:00
// Remember this row for auto-repeat - it'll eventually be the last one
this . lastRowNode = node ;
2011-08-10 16:36:31 +02:00
rowDataEntry [ "height" ] = et2 _readAttrWithDefault ( node , "height" , "auto" ) ;
rowDataEntry [ "class" ] = et2 _readAttrWithDefault ( node , "class" , "" ) ;
rowDataEntry [ "valign" ] = et2 _readAttrWithDefault ( node , "valign" , "" ) ;
rowDataEntry [ "span" ] = et2 _readAttrWithDefault ( node , "span" , "1" ) ;
2015-03-17 10:44:14 +01:00
rowDataEntry [ "part" ] = et2 _readAttrWithDefault ( node , "part" , "body" ) ;
2013-08-16 10:11:06 +02:00
2013-07-16 18:22:20 +02:00
var id = et2 _readAttrWithDefault ( node , "id" , "" ) ;
if ( id )
{
rowDataEntry [ "id" ] = id ;
}
2011-08-06 16:36:44 +02:00
}
else
{
rowDataEntry [ "span" ] = "all" ;
}
rowData . push ( rowDataEntry ) ;
} , this ) ;
2012-03-21 22:31:47 +01:00
// Add in repeated rows
// TODO: It would be nice if we could skip header (thead) & footer (tfoot) or treat them separately
if ( this . getArrayMgr ( "content" ) )
{
var content = this . getArrayMgr ( "content" ) ;
var rowDataEntry = rowData [ rowData . length - 1 ] ;
2013-02-05 09:31:08 +01:00
var rowIndex = rowData . length - 1 ;
2012-03-21 22:31:47 +01:00
// Find out if we have any content rows, and how many
2013-09-09 20:52:11 +02:00
var cont = true ;
while ( cont )
2012-03-21 22:31:47 +01:00
{
if ( content . data [ rowIndex ] )
{
2013-07-16 18:22:20 +02:00
rowData [ rowIndex ] = jQuery . extend ( { } , rowDataEntry ) ;
2013-08-16 10:11:06 +02:00
2012-03-21 22:31:47 +01:00
rowIndex ++ ;
}
2013-10-04 15:03:58 +02:00
2013-09-09 20:52:11 +02:00
else if ( this . lastRowNode != null )
{
// Have to look through actual widgets to support const[$row]
// style names - should be avoided so we can remove this extra check
// Old etemplate checked first two widgets, or first two box children
2013-09-10 18:09:12 +02:00
// This cannot be done inside a nextmatch - nm will do the expansion later
var nm = false ;
if ( nm )
{
// No further checks for repeated rows
break ;
}
2013-10-04 15:03:58 +02:00
2013-09-10 18:09:12 +02:00
// Not in a nextmatch, so we can expand with abandon
2013-09-09 20:52:11 +02:00
var currentPerspective = jQuery . extend ( { } , content . perspectiveData ) ;
var check = function ( node , nodeName )
{
if ( nodeName == 'box' || nodeName == 'hbox' || nodeName == 'vbox' )
{
return et2 _filteredNodeIterator ( node , check , this ) ;
}
content . perspectiveData . row = rowIndex ;
for ( var attr in node . attributes )
{
var value = et2 _readAttrWithDefault ( node , node . attributes [ attr ] . name , "" ) ;
// Don't include first char, those should be handled by normal means
// and it would break nextmatch
if ( value . indexOf ( '@' ) > 0 || value . indexOf ( '$' ) > 0 )
{
2013-09-11 01:25:51 +02:00
// Ok, we found something. How many? Check for values.
2013-09-10 18:09:12 +02:00
var ident = content . expandName ( value ) ;
2013-09-11 01:25:51 +02:00
// expandName() handles index into content (@), but we have to look up
// regular values
2016-02-13 17:25:50 +01:00
if ( value [ 0 ] != '@' )
2013-09-11 01:25:51 +02:00
{
// Returns null if there isn't an actual value
ident = content . getEntry ( ident , false , true ) ;
}
while ( ident != null && rowIndex < 1000 )
2013-09-10 18:09:12 +02:00
{
rowData [ rowIndex ] = jQuery . extend ( { } , rowDataEntry ) ;
content . perspectiveData . row = ++ rowIndex ;
ident = content . expandName ( value ) ;
2016-02-13 17:25:50 +01:00
if ( value [ 0 ] != '@' )
2013-09-11 01:25:51 +02:00
{
// Returns null if there isn't an actual value
ident = content . getEntry ( ident , false , true ) ;
}
}
if ( rowIndex >= 1000 )
{
egw . debug ( "error" , "Problem in autorepeat fallback: too many rows for '%s'. Use a nextmatch, or start debugging." , value ) ;
2013-09-10 18:09:12 +02:00
}
2013-09-09 20:52:11 +02:00
return ;
}
}
} ;
et2 _filteredNodeIterator ( this . lastRowNode , check , this ) ;
cont = false ;
content . perspectiveData = currentPerspective ;
}
2013-10-04 15:03:58 +02:00
2012-03-21 22:31:47 +01:00
else
{
// No more rows, stop
break ;
}
}
}
2013-02-05 09:31:08 +01:00
if ( rowIndex <= rowData . length - 1 )
2012-03-21 22:31:47 +01:00
{
// No auto-repeat
this . lastRowNode = null ;
}
2011-08-06 16:36:44 +02:00
} ,
_fillCells : function ( cells , columns , rows ) {
2011-08-07 15:43:46 +02:00
var h = cells . length ;
var w = ( h > 0 ) ? cells [ 0 ] . length : 0 ;
2013-10-19 01:24:49 +02:00
var currentPerspective = jQuery . extend ( { } , this . getArrayMgr ( "content" ) . perspectiveData ) ;
2011-08-07 15:43:46 +02:00
2011-08-06 16:36:44 +02:00
// Read the elements inside the columns
var x = 0 ;
2011-08-07 15:43:46 +02:00
2011-08-06 16:36:44 +02:00
et2 _filteredNodeIterator ( columns , function ( node , nodeName ) {
function _readColNode ( node , nodeName ) {
2011-08-07 15:43:46 +02:00
if ( y >= h )
{
2012-03-05 14:07:38 +01:00
this . egw ( ) . debug ( "warn" , "Skipped grid cell in column, '" +
2011-08-07 15:43:46 +02:00
nodeName + "'" ) ;
return ;
}
2011-08-06 16:36:44 +02:00
var cell = this . _getCell ( cells , x , y ) ;
// Read the span value of the element
2015-08-20 16:57:18 +02:00
if ( node . getAttribute ( "span" ) )
2011-08-06 16:36:44 +02:00
{
2015-08-20 16:57:18 +02:00
cell . rowSpan = node . getAttribute ( "span" ) ;
2011-08-06 16:36:44 +02:00
}
else
{
cell . rowSpan = cell . colData [ "span" ] ;
2011-08-07 15:43:46 +02:00
cell . autoRowSpan = true ;
2011-08-06 16:36:44 +02:00
}
if ( cell . rowSpan == "all" )
{
cell . rowSpan = cells . length ;
}
var span = cell . rowSpan = this . _forceNumber ( cell . rowSpan ) ;
// Create the widget
var widget = this . createElementFromNode ( node , nodeName ) ;
// Fill all cells the widget is spanning
for ( var i = 0 ; i < span && y < cells . length ; i ++ , y ++ )
{
this . _getCell ( cells , x , y ) . widget = widget ;
}
} ;
// If the node is a column, create the widgets which belong into
// the column
var y = 0 ;
if ( nodeName == "column" )
{
et2 _filteredNodeIterator ( node , _readColNode , this ) ;
}
else
{
_readColNode . call ( this , node , nodeName ) ;
}
x ++ ;
} , this ) ;
// Read the elements inside the rows
var y = 0 ;
2012-03-21 22:31:47 +01:00
var x = 0 ;
var readRowNode ;
2013-10-04 15:03:58 +02:00
var nm = false ;
var widget = this ;
while ( ! nm && widget != this . getRoot ( ) )
{
nm = ( widget . _type == 'nextmatch' ) ;
widget = widget . getParent ( ) ;
}
2011-08-06 16:36:44 +02:00
et2 _filteredNodeIterator ( rows , function ( node , nodeName ) {
2012-03-21 22:31:47 +01:00
readRowNode = function _readRowNode ( node , nodeName ) {
2011-08-07 15:43:46 +02:00
if ( x >= w )
{
2012-07-24 01:54:16 +02:00
if ( nodeName != "description" )
{
// Only notify it skipping other than description,
// description used to pad
this . egw ( ) . debug ( "warn" , "Skipped grid cell in row, '" +
nodeName + "'" ) ;
}
2011-08-07 15:43:46 +02:00
return ;
}
2011-08-06 16:36:44 +02:00
var cell = this . _getCell ( cells , x , y ) ;
// Read the span value of the element
2015-08-20 16:57:18 +02:00
if ( node . getAttribute ( "span" ) )
2011-08-06 16:36:44 +02:00
{
2015-08-20 16:57:18 +02:00
cell . colSpan = node . getAttribute ( "span" ) ;
2011-08-06 16:36:44 +02:00
}
else
{
cell . colSpan = cell . rowData [ "span" ] ;
2011-08-07 15:43:46 +02:00
cell . autoColSpan = true ;
2011-08-06 16:36:44 +02:00
}
if ( cell . colSpan == "all" )
{
cell . colSpan = cells [ y ] . length ;
}
var span = cell . colSpan = this . _forceNumber ( cell . colSpan ) ;
2012-03-28 20:57:37 +02:00
// Read the align value of the element
2015-08-20 16:57:18 +02:00
if ( node . getAttribute ( "align" ) )
2012-03-28 20:57:37 +02:00
{
2015-08-20 16:57:18 +02:00
cell . align = node . getAttribute ( "align" ) ;
2012-03-28 20:57:37 +02:00
}
2012-03-21 22:31:47 +01:00
2014-01-27 12:06:44 +01:00
// store id of nextmatch-*headers, so it is available for disabled widgets, which get not instanciated
if ( nodeName . substr ( 0 , 10 ) == 'nextmatch-' )
{
2015-08-20 16:57:18 +02:00
cell . nm _id = node . getAttribute ( 'id' ) ;
2014-01-27 12:06:44 +01:00
}
2012-03-28 21:21:40 +02:00
// Apply widget's class to td, for backward compatability
2015-08-20 16:57:18 +02:00
if ( node . getAttribute ( "class" ) )
2012-03-28 21:21:40 +02:00
{
2015-08-20 16:57:18 +02:00
cell . class += ( cell . class ? " " : "" ) + node . getAttribute ( "class" ) ;
2012-03-28 21:21:40 +02:00
}
2011-08-06 16:36:44 +02:00
// Create the element
2013-06-24 22:50:37 +02:00
if ( ! cell . disabled )
{
2013-10-04 15:03:58 +02:00
//Skip if it is a nextmatch while the nextmatch handles row adjustment by itself
if ( ! nm )
{
// Adjust for the row
var mgrs = this . getArrayMgrs ( ) ;
for ( var name in mgrs )
{
this . getArrayMgr ( name ) . perspectiveData . row = y ;
}
if ( this . _getCell ( cells , x , y ) . rowData . id )
{
this . _getCell ( cells , x , y ) . rowData . id = this . getArrayMgr ( "content" ) . expandName ( this . _getCell ( cells , x , y ) . rowData . id ) ;
}
if ( this . _getCell ( cells , x , y ) . rowData . class )
{
this . _getCell ( cells , x , y ) . rowData . class = this . getArrayMgr ( "content" ) . expandName ( this . _getCell ( cells , x , y ) . rowData . class ) ;
}
}
2015-08-20 16:57:18 +02:00
var widget = this . createElementFromNode ( node , nodeName ) ;
2013-06-24 22:50:37 +02:00
}
2011-08-06 16:36:44 +02:00
// Fill all cells the widget is spanning
for ( var i = 0 ; i < span && x < cells [ y ] . length ; i ++ , x ++ )
{
cell = this . _getCell ( cells , x , y ) ;
if ( cell . widget == null )
{
cell . widget = widget ;
}
else
{
2013-08-16 10:11:06 +02:00
throw ( "Grid cell collision, two elements " +
2011-08-06 16:36:44 +02:00
"defined for cell (" + x + "," + y + ")!" ) ;
}
}
2013-04-13 21:00:13 +02:00
} ;
2011-08-06 16:36:44 +02:00
// If the node is a row, create the widgets which belong into
// the row
2012-03-21 22:31:47 +01:00
x = 0 ;
if ( this . lastRowNode && node == this . lastRowNode )
{
return ;
}
2011-08-06 16:36:44 +02:00
if ( nodeName == "row" )
{
2012-03-21 22:31:47 +01:00
// Adjust for the row
for ( var name in this . getArrayMgrs ( ) )
{
//this.getArrayMgr(name).perspectiveData.row = y;
}
2013-07-16 18:22:20 +02:00
if ( this . _getCell ( cells , x , y ) . rowData . id )
{
this . getArrayMgr ( "content" ) . expandName ( this . rowData [ y ] . id ) ;
}
2012-03-30 18:25:30 +02:00
// If row disabled, just skip it
var disabled = false ;
2015-08-20 16:57:18 +02:00
if ( node . getAttribute ( "disabled" ) == "1" )
2012-03-30 18:25:30 +02:00
{
disabled = true ;
}
if ( ! disabled )
{
et2 _filteredNodeIterator ( node , readRowNode , this ) ;
}
2011-08-06 16:36:44 +02:00
}
else
{
2012-03-21 22:31:47 +01:00
readRowNode . call ( this , node , nodeName ) ;
2011-08-06 16:36:44 +02:00
}
y ++ ;
} , this ) ;
2012-03-21 22:31:47 +01:00
// Extra content rows
for ( y ; y < h ; y ++ ) {
var x = 0 ;
2013-08-16 10:11:06 +02:00
2012-03-21 22:31:47 +01:00
et2 _filteredNodeIterator ( this . lastRowNode , readRowNode , this ) ;
}
// Reset
for ( var name in this . getArrayMgrs ( ) )
{
this . getArrayMgr ( name ) . perspectiveData = currentPerspective ;
}
2011-08-06 16:36:44 +02:00
} ,
2011-08-07 15:43:46 +02:00
_expandLastCells : function ( _cells ) {
var h = _cells . length ;
var w = ( h > 0 ) ? _cells [ 0 ] . length : 0 ;
// Determine the last cell in each row and expand its span value if
// the span has not been explicitly set.
for ( var y = 0 ; y < h ; y ++ )
{
for ( var x = w - 1 ; x >= 0 ; x -- )
{
var cell = _cells [ y ] [ x ] ;
if ( cell . widget != null )
{
if ( cell . autoColSpan )
{
cell . colSpan = w - x ;
}
break ;
}
}
}
// Determine the last cell in each column and expand its span value if
// the span has not been explicitly set.
for ( var x = 0 ; x < w ; x ++ )
{
for ( var y = h - 1 ; y >= 0 ; y -- )
{
var cell = _cells [ y ] [ x ] ;
if ( cell . widget != null )
{
if ( cell . autoRowSpan )
{
cell . rowSpan = h - y ;
}
break ;
}
}
}
} ,
2011-08-06 16:36:44 +02:00
/ * *
* As the does not fit very well into the default widget structure , we ' re
2015-08-20 16:57:18 +02:00
* overwriting the loadFromXML function and doing a two - pass reading -
2013-08-16 10:11:06 +02:00
* in the first step the
2014-01-27 12:06:44 +01:00
*
* @ param { object } _node xml node to process
2011-08-06 16:36:44 +02:00
* /
2015-08-20 16:57:18 +02:00
loadFromXML : function ( _node ) {
2013-10-19 01:24:49 +02:00
// Keep the node for later changing / reloading
this . template _node = _node ;
2014-01-27 12:06:44 +01:00
2011-08-06 16:36:44 +02:00
// Get the columns and rows tag
2015-08-20 16:57:18 +02:00
var rowsElems = et2 _directChildrenByTagName ( _node , "rows" ) ;
var columnsElems = et2 _directChildrenByTagName ( _node , "columns" ) ;
2011-08-06 16:36:44 +02:00
2015-08-20 16:57:18 +02:00
if ( rowsElems . length == 1 && columnsElems . length == 1 )
2011-08-06 16:36:44 +02:00
{
2015-08-20 16:57:18 +02:00
var columns = columnsElems [ 0 ] ;
var rows = rowsElems [ 0 ] ;
2011-08-06 16:36:44 +02:00
var colData = [ ] ;
var rowData = [ ] ;
// Fetch the column and row data
this . _fetchRowColData ( columns , rows , colData , rowData ) ;
// Initialize the cells
var cells = this . _initCells ( colData , rowData ) ;
// Create the widgets inside the cells and read the span values
this . _fillCells ( cells , columns , rows ) ;
2011-08-07 15:43:46 +02:00
// Expand the span values of the last cells
this . _expandLastCells ( cells ) ;
2011-08-06 16:36:44 +02:00
// Create the table rows
2011-08-26 11:58:25 +02:00
this . createTableFromCells ( cells , colData , rowData ) ;
2011-08-06 16:36:44 +02:00
}
else
{
throw ( "Error while parsing grid, none or multiple rows or columns tags!" ) ;
}
} ,
2011-08-26 11:58:25 +02:00
createTableFromCells : function ( _cells , _colData , _rowData ) {
2011-08-06 16:36:44 +02:00
this . managementArray = [ ] ;
this . cells = _cells ;
2011-08-26 11:58:25 +02:00
this . colData = _colData ;
2011-08-25 15:35:53 +02:00
this . rowData = _rowData ;
2011-08-06 16:36:44 +02:00
2012-03-21 22:31:47 +01:00
// Set the rowCount and columnCount variables
var h = this . rowCount = _cells . length ;
var w = this . columnCount = ( h > 0 ) ? _cells [ 0 ] . length : 0 ;
2011-08-06 16:36:44 +02:00
// Create the table rows.
for ( var y = 0 ; y < h ; y ++ )
{
var row = _cells [ y ] ;
2015-03-17 10:44:14 +01:00
var parent = this . tbody ;
switch ( this . rowData [ y ] [ "part" ] )
{
case 'header' :
if ( ! this . tbody . children ( ) . length && ! this . tfoot . children ( ) . length )
{
parent = this . thead ;
}
break ;
case 'footer' :
if ( ! this . tbody . children ( ) . length )
{
parent = this . tfoot ;
}
break ;
}
var tr = $j ( document . createElement ( "tr" ) ) . appendTo ( parent )
2011-08-25 15:35:53 +02:00
. addClass ( this . rowData [ y ] [ "class" ] ) ;
if ( this . rowData [ y ] . disabled )
{
tr . hide ( ) ;
}
2011-08-06 16:36:44 +02:00
2011-08-26 11:58:25 +02:00
if ( this . rowData [ y ] . height != "auto" )
{
tr . height ( this . rowData [ y ] . height ) ;
}
2012-04-09 23:55:35 +02:00
if ( this . rowData [ y ] . valign )
{
tr . attr ( "valign" , this . rowData [ y ] . valign ) ;
}
2013-08-16 10:11:06 +02:00
2013-07-16 18:22:20 +02:00
if ( this . rowData [ y ] . id )
{
tr . attr ( "id" , this . rowData [ y ] . id ) ;
}
2011-08-06 16:36:44 +02:00
// Create the cells. x is incremented by the colSpan value of the
// cell.
for ( var x = 0 ; x < w ; )
{
// Fetch a cell from the cells
var cell = this . _getCell ( _cells , x , y ) ;
if ( cell . td == null && cell . widget != null )
{
// Create the cell
2011-08-25 15:35:53 +02:00
var td = $j ( document . createElement ( "td" ) ) . appendTo ( tr )
. addClass ( cell [ "class" ] ) ;
2011-08-06 16:36:44 +02:00
2011-08-22 17:58:47 +02:00
if ( cell . disabled )
{
td . hide ( ) ;
2013-03-15 18:46:53 +01:00
cell . widget . options = cell . disabled ;
2011-08-22 17:58:47 +02:00
}
2011-08-26 11:58:25 +02:00
if ( cell . width != "auto" )
{
td . width ( cell . width ) ;
}
2012-03-28 20:57:37 +02:00
if ( cell . align )
{
td . attr ( "align" , cell . align ) ;
}
2011-08-06 16:36:44 +02:00
// Add the entry for the widget to the management array
this . managementArray . push ( {
"cell" : td [ 0 ] ,
2011-08-22 17:58:47 +02:00
"widget" : cell . widget ,
"disabled" : cell . disabled
2011-08-06 16:36:44 +02:00
} ) ;
// Set the span values of the cell
2011-08-07 15:43:46 +02:00
var cs = ( x == w - 1 ) ? w - x : Math . min ( w - x , cell . colSpan ) ;
var rs = ( y == h - 1 ) ? h - y : Math . min ( h - y , cell . rowSpan ) ;
2011-08-06 16:36:44 +02:00
// Set the col and row span values
if ( cs > 1 ) {
td . attr ( "colspan" , cs ) ;
}
if ( rs > 1 ) {
td . attr ( "rowspan" , rs ) ;
}
// Assign the td to the cell
for ( var sx = x ; sx < x + cs ; sx ++ )
{
for ( var sy = y ; sy < y + rs ; sy ++ )
{
this . _getCell ( _cells , sx , sy ) . td = td ;
}
}
x += cell . colSpan ;
}
else
{
x ++ ;
}
}
}
} ,
getDOMNode : function ( _sender ) {
// If the parent class functions are asking for the DOM-Node, return the
// outer table.
2013-07-05 17:13:05 +02:00
if ( _sender == this || typeof _sender == 'undefined' )
2011-08-06 16:36:44 +02:00
{
2014-02-18 21:20:35 +01:00
return this . wrapper != null ? this . wrapper [ 0 ] : this . table [ 0 ] ;
2011-08-06 16:36:44 +02:00
}
// Check whether the _sender object exists inside the management array
for ( var i = 0 ; i < this . managementArray . length ; i ++ )
{
if ( this . managementArray [ i ] . widget == _sender )
{
return this . managementArray [ i ] . cell ;
}
}
return null ;
2011-08-12 18:29:24 +02:00
} ,
2011-08-22 17:58:47 +02:00
isInTree : function ( _sender ) {
var vis = true ;
if ( typeof _sender != "undefined" && _sender != this )
{
vis = false ;
// Check whether the _sender object exists inside the management array
for ( var i = 0 ; i < this . managementArray . length ; i ++ )
{
if ( this . managementArray [ i ] . widget == _sender )
{
vis = ! ( this . managementArray [ i ] . disabled ) ;
break ;
}
}
}
2011-08-12 18:29:24 +02:00
2011-08-22 17:58:47 +02:00
return this . _super ( this , vis ) ;
2011-10-24 21:35:04 +02:00
} ,
2011-08-06 16:36:44 +02:00
2014-02-18 21:20:35 +01:00
/ * *
* Set the overflow attribute
*
* Grid needs special handling because HTML tables don ' t do overflow . We
* create a wrapper DIV to handle it .
2014-02-19 18:18:54 +01:00
* No value or default visible needs no wrapper , as table is always overflow visible .
2014-02-18 21:20:35 +01:00
*
2014-02-19 18:18:54 +01:00
* @ param { string } _value Overflow value , must be a valid CSS overflow value , default 'visible'
2014-02-18 21:20:35 +01:00
* /
set _overflow : function ( _value ) {
var wrapper = this . wrapper || this . table . parent ( '[id$="_grid_wrapper"]' ) ;
this . overflow = _value ;
2014-02-19 18:18:54 +01:00
if ( wrapper . length == 0 && _value && _value !== 'visible' )
2014-02-18 21:20:35 +01:00
{
this . wrapper = wrapper = this . table . wrap ( '<div id="' + this . id + '_grid_wrapper"></div>' ) . parent ( ) ;
if ( this . height )
{
wrapper . css ( 'height' , this . height ) ;
}
}
wrapper . css ( 'overflow' , _value ) ;
2014-02-19 18:18:54 +01:00
if ( wrapper . length && ( ! _value || _value == null || _value === 'visible' ) )
2014-02-18 21:20:35 +01:00
{
2014-02-19 18:18:54 +01:00
this . table . unwrap ( ) ;
2014-02-18 21:20:35 +01:00
}
} ,
2012-07-23 20:01:04 +02:00
set _align : function ( _value ) {
2013-04-13 21:00:13 +02:00
this . align = _value ;
} ,
2012-07-23 20:01:04 +02:00
2013-04-13 21:00:13 +02:00
get _align : function ( _value ) {
return this . align ;
} ,
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
/ * *
* Change the content for the grid , and re - generate its contents .
2014-01-27 12:06:44 +01:00
*
2013-10-19 01:24:49 +02:00
* Changing the content does not allow changing the structure of the grid ,
* as that is loaded from the template file . The rows and widgets inside
2014-01-27 12:06:44 +01:00
* will be re - created ( including auto - repeat ) .
*
2013-10-19 01:24:49 +02:00
* @ param { Object } _value New data for the grid
* @ param { Object } [ _value . content ] New content
* @ param { Object } [ _value . sel _options ] New select options
* @ param { Object } [ _value . readonlys ] New read - only values
2014-01-27 12:06:44 +01:00
* /
2013-10-19 01:24:49 +02:00
set _value : function ( _value ) {
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
// Destroy children, empty grid
for ( var i = 0 ; i < this . managementArray . length ; i ++ )
{
var cell = this . managementArray [ i ] ;
if ( cell . widget )
{
cell . widget . destroy ( ) ;
}
}
this . managementArray = [ ] ;
2015-03-17 10:44:14 +01:00
this . thead . empty ( ) ;
this . tfoot . empty ( ) ;
2013-10-19 01:24:49 +02:00
this . tbody . empty ( ) ;
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
// Update array managers
for ( var key in _value )
{
this . getArrayMgr ( key ) . data = _value [ key ] ;
}
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
// Rebuild grid
2015-08-20 16:57:18 +02:00
this . loadFromXML ( this . template _node ) ;
2014-01-27 12:06:44 +01:00
2013-10-19 01:24:49 +02:00
// New widgets need to finish
this . loadingFinished ( ) ;
} ,
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
/ * *
* Sortable allows you to reorder grid rows using the mouse .
2013-08-16 10:11:06 +02:00
* The new order is returned as part of the value of the
2013-07-04 01:16:15 +02:00
* grid , in 'sort_order' .
2013-08-16 10:11:06 +02:00
*
2013-07-04 01:16:15 +02:00
* @ param { boolean | function } sortable Callback or false to disable
2013-08-16 10:11:06 +02:00
* /
2013-07-04 01:16:15 +02:00
set _sortable : function ( sortable ) {
if ( ! sortable )
{
this . tbody . sortable ( "destroy" ) ;
return ;
}
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
// Make sure rows have IDs, so sortable has something to return
$j ( 'tr' , this . tbody ) . each ( function ( index ) {
var $this = $j ( this ) ;
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
// Header does not participate in sorting
if ( $this . hasClass ( 'th' ) ) return ;
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
// If row doesn't have an ID, assign the index as ID
if ( ! $this . attr ( "id" ) ) $this . attr ( "id" , index ) ;
} ) ;
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
var self = this ;
2013-08-16 10:11:06 +02:00
2013-07-04 01:16:15 +02:00
// Set up sortable
this . tbody . sortable ( {
// Header does not participate in sorting
items : "tr:not(.th)" ,
distance : 15 ,
stop : function ( event , ui ) {
2015-02-23 12:27:22 +01:00
self . egw ( window ) . json ( sortable , [ self . tbody . sortable ( "toArray" ) , self . id ] ,
2013-07-04 01:16:15 +02:00
null ,
2015-02-23 12:27:22 +01:00
self ,
true
) . sendRequest ( ) ;
2013-07-04 01:16:15 +02:00
}
} ) ;
} ,
2012-07-23 20:01:04 +02:00
2013-07-05 17:13:05 +02:00
/ * *
* Override parent to apply actions on each row
2013-08-16 10:11:06 +02:00
*
2014-01-27 12:06:44 +01:00
* @ param { array } actions [ { ID : attributes . . } + ] as for set _actions
2013-07-05 17:13:05 +02:00
* /
2013-07-20 18:47:33 +02:00
_link _actions : function ( actions )
2013-07-05 17:13:05 +02:00
{
// Get the top level element for the tree
var objectManager = egw _getAppObjectManager ( true ) ;
2015-08-05 23:24:07 +02:00
objectManager = objectManager . getObjectById ( this . getInstanceManager ( ) . uniqueId , 2 ) || objectManager ;
2013-07-05 17:13:05 +02:00
var widget _object = objectManager . getObjectById ( this . id ) ;
if ( widget _object == null ) {
// Add a new container to the object manager which will hold the widget
// objects
widget _object = objectManager . insertObject ( false , new egwActionObject (
this . id , objectManager , new et2 _action _object _impl ( this ) ,
2015-08-11 17:37:20 +02:00
this . _actionManager || objectManager . manager . getActionById ( this . id ) || objectManager . manager
2013-07-05 17:13:05 +02:00
) ) ;
}
// Delete all old objects
widget _object . clear ( ) ;
// Go over the widget & add links - this is where we decide which actions are
// 'allowed' for this widget at this time
2013-07-22 16:11:58 +02:00
var action _links = this . _get _action _links ( actions ) ;
2013-07-05 17:13:05 +02:00
2016-03-11 19:57:18 +01:00
// Deal with each row in tbody, ignore action-wise rows in thead or tfooter for now
for ( var i = 0 , r = 0 ; i < this . rowData . length ; i ++ )
2013-07-05 17:13:05 +02:00
{
2016-03-11 19:57:18 +01:00
if ( this . rowData [ i ] . part != 'body' ) continue ;
2014-07-14 22:47:52 +02:00
var content = this . getArrayMgr ( 'content' ) . getEntry ( i ) ;
if ( content )
{
2016-03-11 19:57:18 +01:00
// Add a new action object to the object manager
var row = $j ( 'tr' , this . tbody ) [ r ] ;
var aoi = new et2 _action _object _impl ( this , row ) ;
var obj = widget _object . addObject ( content . id || "row_" + r , aoi ) ;
// Set the data to the content so it's available for the action
2014-07-14 22:47:52 +02:00
obj . data = content ;
2014-02-19 18:18:54 +01:00
2016-03-11 19:57:18 +01:00
obj . updateActionLinks ( action _links ) ;
}
r ++ ;
2013-07-05 17:13:05 +02:00
}
} ,
2013-08-16 10:11:06 +02:00
2011-10-24 21:35:04 +02:00
/ * *
2013-04-13 21:00:13 +02:00
* Code for implementing et2 _IDetachedDOM
2011-10-24 21:35:04 +02:00
* This doesn ' t need to be implemented .
* Individual widgets are detected and handled by the grid , but the interface is needed for this to happen
2014-01-27 12:06:44 +01:00
*
* @ param { array } _attrs array to add further attributes to
2013-04-13 21:00:13 +02:00
* /
getDetachedAttributes : function ( _attrs ) {
} ,
2011-08-06 16:36:44 +02:00
2013-04-13 21:00:13 +02:00
getDetachedNodes : function ( ) {
return [ this . getDOMNode ( ) ] ;
} ,
2011-08-06 16:36:44 +02:00
2013-04-13 21:00:13 +02:00
setDetachedAttributes : function ( _nodes , _values ) {
2014-01-27 12:06:44 +01:00
} ,
/ * *
* Generates nextmatch column name for headers in a grid
*
* Implemented here as default implementation in et2 _externsion _nextmatch
* only considers children , but grid does NOT instanciate disabled rows as children .
*
* @ return { string }
* /
_getColumnName : function ( )
{
var ids = [ ] ;
for ( var r = 0 ; r < this . cells . length ; ++ r )
{
var cols = this . cells [ r ] ;
for ( var c = 0 ; c < cols . length ; ++ c )
{
if ( cols [ c ] . nm _id ) ids . push ( cols [ c ] . nm _id ) ;
}
}
return ids . join ( '_' ) ;
2014-12-04 17:38:34 +01:00
} ,
2015-03-17 10:44:14 +01:00
2014-12-04 17:38:34 +01:00
resize : function ( _height )
{
2014-12-22 10:42:04 +01:00
if ( typeof this . options != 'undefined' && _height
&& typeof this . options . resize _ratio != 'undefined' && this . options . resize _ratio )
2014-12-04 17:38:34 +01:00
{
// apply the ratio
2014-12-05 18:29:41 +01:00
_height = ( this . options . resize _ratio != '' ) ? _height * this . options . resize _ratio : _height ;
2015-01-23 15:29:46 +01:00
if ( _height != 0 )
{
if ( this . wrapper )
{
this . wrapper . height ( this . wrapper . height ( ) + _height ) ;
}
else
{
this . table . height ( this . table . height ( ) + _height ) ;
}
}
2015-03-17 10:44:14 +01:00
2014-12-04 17:38:34 +01:00
}
2015-03-20 03:12:33 +01:00
} ,
/ * *
* Get a dummy row object containing all widget of a row
*
* This is only a temp . solution until rows are implemented as eT2 containers and
* _sender . getParent ( ) will return a real row container .
*
* @ param { et2 _widget } _sender
* @ returns { Array | undefined }
* /
getRow : function ( _sender )
{
if ( ! _sender || ! this . cells ) return ;
for ( var r = 0 ; r < this . cells . length ; ++ r )
{
var row = this . cells [ r ] ;
for ( var c = 0 ; c < row . length ; ++ c )
{
if ( ! row [ c ] . widget ) continue ;
var found = row [ c ] . widget === _sender ;
if ( ! found ) row [ c ] . widget . iterateOver ( function ( _widget ) { if ( _widget === _sender ) found = true ; } ) ;
if ( found )
{
// return a fake row object allowing to iterate over it's children
var row _obj = new et2 _widget ( this , { } ) ;
for ( var c = 0 ; c < row . length ; ++ c )
{
if ( row [ c ] . widget ) row _obj . _children . push ( row [ c ] . widget ) ;
}
row _obj . isInTree = jQuery . proxy ( this . isInTree , this ) ;
// we must not free the children!
row _obj . destroy = function ( ) {
delete row _obj . _children ;
} ;
return row _obj ;
}
}
}
2013-04-13 21:00:13 +02:00
}
2016-02-29 21:40:43 +01:00
} ) ; } ) . call ( this ) ;
2013-07-04 01:16:15 +02:00
et2 _register _widget ( et2 _grid , [ "grid" ] ) ;