egroupware/api/js/etemplate/et2_dataview_view_row.ts

/**
 * EGroupware eTemplate2 - dataview
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage dataview
 * @link https://www.egroupware.org
 * @author Andreas Stöckel
 * @copyright EGroupware GmbH 2011-2021
 */

/*egw:uses
	egw_action.egw_action;

	et2_dataview_view_container;
*/

import {et2_dataview_IViewRange} from "./et2_dataview_interfaces";
import {et2_dataview_container} from "./et2_dataview_view_container";

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
			&& this.expansionContainer.implements(et2_dataview_IViewRange))
		{
			// 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);
		}
	}

}