egroupware/api/js/etemplate/et2_dataview_view_row.ts

203 lines
4.1 KiB
TypeScript

/**
* EGroupware eTemplate2 - dataview
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage dataview
* @link http://www.egroupware.org
* @author Andreas Stöckel
* @copyright Stylite 2011-2012
* @version $Id$
*
/*egw:uses
egw_action.egw_action;
et2_dataview_view_container;
*/
import {et2_dataview_IViewRange} from "./et2_dataview_interfaces";
export class et2_dataview_row extends et2_dataview_container implements et2_dataview_IViewRange
{
/**
* Creates the row container. Use the "setRow" function to load the actual
* row content.
*
* @param _parent is the row parent container.
*/
constructor( _parent)
{
// Call the inherited constructor
super(_parent);
// Create the outer "tr" tag and append it to the container
this.tr = jQuery(document.createElement("tr"));
this.appendNode(this.tr);
// Grid row which gets expanded when clicking on the corresponding
// button
this.expansionContainer = null;
this.expansionVisible = false;
// Toggle button which is used to show and hide the expansionContainer
this.expansionButton = null;
}
destroy( )
{
if (this.expansionContainer != null)
{
this.expansionContainer.destroy();
}
super.destroy();
}
clear( )
{
this.tr.empty();
}
makeExpandable( _expandable, _callback, _context)
{
if (_expandable)
{
// Create the tr and the button if this has not been done yet
if (!this.expansionButton)
{
this.expansionButton = jQuery(document.createElement("span"));
this.expansionButton.addClass("arrow closed");
}
// Update context
var self = this;
this.expansionButton.off("click").on("click", function (e) {
self._handleExpansionButtonClick(_callback, _context);
e.stopImmediatePropagation();
});
jQuery("td:first", this.tr).prepend(this.expansionButton);
}
else
{
// If the row is made non-expandable, remove the created DOM-Nodes
if (this.expansionButton)
{
this.expansionButton.remove();
}
if (this.expansionContainer)
{
this.expansionContainer.destroy();
}
this.expansionButton = null;
this.expansionContainer = null;
}
}
removeFromTree( )
{
if (this.expansionContainer)
{
this.expansionContainer.removeFromTree();
}
this.expansionContainer = null;
this.expansionButton = null;
super.removeFromTree();
}
getDOMNode( )
{
return this.tr[0];
}
getJNode( )
{
return this.tr;
}
getHeight( )
{
var h = super.getHeight();
if (this.expansionContainer && this.expansionVisible)
{
h += this.expansionContainer.getHeight();
}
return h;
}
getAvgHeightData( )
{
// Only take the height of the own tr into account
//var oldVisible = this.expansionVisible;
this.expansionVisible = false;
var res = {
"avgHeight": this.getHeight(),
"avgCount": 1
};
this.expansionVisible = true;
return res;
}
/** -- PRIVATE FUNCTIONS -- **/
_handleExpansionButtonClick( _callback, _context)
{
// Create the "expansionContainer" if it does not exist yet
if (!this.expansionContainer)
{
this.expansionContainer = _callback.call(_context);
this.expansionContainer.insertIntoTree(this.tr);
this.expansionVisible = false;
}
// Toggle the visibility of the expansion tr
this.expansionVisible = !this.expansionVisible;
jQuery(this.expansionContainer._nodes[0]).toggle(this.expansionVisible);
// Set the class of the arrow
if (this.expansionVisible)
{
this.expansionButton.addClass("opened");
this.expansionButton.removeClass("closed");
}
else
{
this.expansionButton.addClass("closed");
this.expansionButton.removeClass("opened");
}
this.invalidate();
}
/** -- Implementation of et2_dataview_IViewRange -- **/
setViewRange( _range)
{
if (this.expansionContainer && this.expansionVisible
&& implements_et2_dataview_IViewRange(this.expansionContainer))
{
// Substract the height of the own row from the container
var oh = jQuery(this._nodes[0]).height();
_range.top -= oh;
// Proxy the setViewRange call to the expansion container
this.expansionContainer.setViewRange(_range);
}
}
}