egroupware/etemplate/js/et2_dataview_view_grid.js

/**
 * eGroupWare eTemplate2 - Class which contains the "grid" base class
 *
 * @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
 * @version $Id$
 */

"use strict";

/*egw:uses
	jquery.jquery;
	et2_core_common;

	et2_dataview_interfaces;
	et2_dataview_view_partitionTree;
*/

/**
 * Determines how many pixels the view range of the gridview is extended.
 */
var ET2_GRID_VIEW_EXT = 25;

/**
 * Determines the timeout after which the scroll-event is processed.
 */
var ET2_GRID_SCROLL_TIMEOUT = 100;

var partitionTree = null;

var et2_dataview_grid = Class.extend(et2_dataview_IViewRange, {

	/**
	 * Creates the grid.
	 *
	 * @param _parent is the parent grid class - if null, this means that this
	 * 	is the outer grid which manages the scrollarea. If not null, all other
	 * 	parameters are ignored and copied from the given grid instance.
	 * @param _outerId is the id of the grid container it uses for the css
	 * 	classes.
	 * @param _columnIds is the id of the individual columns used for the css
	 * 	classes.
	 * @param _avgHeight is the starting average height of the column rows.
	 */
	init: function(_parent, _outerId, _columnIds, _dataProvider, _rowProvider, 
		_avgHeight) {

		// If the parent is given, copy all other parameters from it
		if (_parent != null)
		{
			this._outerId = _parent._outerId;
			this._columnIds = _parent._columnIds;
			this._dataProvider = _parent._dataProvider;
			this._avgHeight = _parent._partitionTree.getAverageHeight();
			this._rowProvider = _parent._rowProvider;
		}
		else
		{
			// Otherwise copy the given parameters
			this._outerId = _outerId;
			this._columnIds = _columnIds;
			this._dataProvider = _dataProvider;
			this._rowProvider = _rowProvider;
			this._avgHeight = _avgHeight;

			this._scrollHeight = 0;
			this._scrollTimeout = null;
		}

		// The "treeChanged" variable is called whenever the viewrange has been
		// set - changing the viewrange is the function which causes new elements
		// to be generated and thus the partition tree to degenerate
		this._treeChanged = false;

		// Count of elements which are buffered at top and bottom of the viewrange
		// before they get replaced with placeholders
		this._holdCount = 50;

		// The current range holds the currently visible nodes
		this._currentRange = et2_range(0, 0);

		// Build the grid outer nodes
		this._createNodes();

		// Create the partition tree object which is used to organize the tree
		// items.
		partitionTree = this._partitionTree = new et2_dataview_partitionTree(this._dataProvider, 
			this._rowProvider, this._avgHeight, this.innerTbody);

		// Setup the "rebuild" timer - it rebuilds the complete partition tree
		// if any change has been done to it. Rebuilding the partition tree is
		// necessary as the tree structure happens to degenerate.
		var self = this;
		this._rebuildTimer = window.setInterval(function() {
			self._checkTreeRebuild();
		}, 10 * 1000);
	},

	destroy: function() {
		// Stop the scroll timeout
		if (this._scrollTimeout)
		{
			window.clearTimeout(this._scrollTimeout);
		}

		// Stop the rebuild timer
		window.clearInterval(this._rebuildTimer);

		// Free the partition tree
		this._partitionTree.free();
	},

	/**
	 * The setViewRange function updates the range in which columns are shown.
	 */
	setViewRange: function(_range) {
		this._treeChanged = true;

		// Copy the given range
		this._currentRange = et2_bounds(_range.top, _range.bottom);

		// Display all elements in the given range
		var nodes = this._partitionTree.getRangeNodes(_range);

		for (var i = 0; i < nodes.length; i++)
		{
			if (nodes[i].implements(et2_dataview_IViewRange))
			{
				nodes[i].setViewRange(_range);
			}
		}

		// Deactivated the code below for testing purposes

		// Calculate the range of the actually shown elements
		var displayTop = _range.top;
		var displayBottom = _range.bottom;

		if (nodes.length > 0)
		{
			displayTop = nodes[0].getPosTop();
			displayBottom = nodes[nodes.length - 1].getPosBottom();
		}

		// Hide everything except for _holdCount elements at the top and bottom
		// of the viewrange
		var ah = this._partitionTree.getAverageHeight();
		var reduceHeight = ah * this._holdCount;

		if (displayTop > reduceHeight)
		{
			this._partitionTree.reduceRange(et2_bounds(0, displayTop - reduceHeight));
		}

		if (displayBottom + reduceHeight < this._partitionTree.getHeight())
		{
			this._partitionTree.reduceRange(et2_bounds(displayBottom + reduceHeight,
				this._partitionTree.getHeight()));
		}
	},

	/**
	 * Updates the scrollheight
	 */
	setScrollHeight: function(_height) {
		this._height = _height;

		// Update the height of the outer container
		if (this.scrollarea)
		{
			this.scrollarea.height(_height);
		}

		// Update the viewing range
		this.setViewRange(et2_range(this._currentRange.top, this._height));
	},

	/**
	 * Returns the JQuery outer DOM-Node
	 */
	getJNode: function() {
		return this.outerCell;
	},

	/* ---- PRIVATE FUNCTIONS ---- */

	/**
	 * Checks whether the partition tree has to be rebuilt and if yes, does
	 * that.
	 */
	_checkTreeRebuild: function() {
		if (this._treeChanged)
		{
			var depth = this._partitionTree.getDepth();
			var count = this._partitionTree.getManagedCount();

			// Check whether the depth of the tree is very unproportional
			// regarding to the count of elements managed in it
			if (count < Math.pow(ET2_PARTITION_TREE_WIDTH, depth - 1))
			{
				et2_debug("info", "Rebuilding dataview partition tree");
				this._partitionTree.rebuild();
				et2_debug("info", "Done.");
			}

			// Reset the "treeChanged" function.
			this._treeChanged = false;
		}
	},

	/**
	 * Creates the grid DOM-Nodes
	 */
	_createNodes: function() {
		this.outerCell = $j(document.createElement("td"))
			.addClass("frame")
			.attr("colspan", this._columnIds.length + (this._parent ? 0 : 1));

		// Create the scrollarea div if this is the outer grid
		this.scrollarea = null;
		if (this._parent == null)
		{
			this.scrollarea = $j(document.createElement("div"))
				.addClass("egwGridView_scrollarea")
				.scroll(this, function(e) {

						// Clear any older scroll timeout
						if (e.data._scrollTimeout)
						{
							window.clearTimeout(e.data._scrollTimeout);
						}

						// Set a new timeout which calls the setViewArea
						// function
						e.data._scrollTimeout = window.setTimeout(function() {
							if (typeof ET2_GRID_PAUSE != "undefined")
								return;

							e.data.setViewRange(et2_range(
								e.data.scrollarea.scrollTop() - ET2_GRID_VIEW_EXT,
								e.data._height + ET2_GRID_VIEW_EXT * 2
							));
						}, ET2_GRID_SCROLL_TIMEOUT);
					})
				.height(this._scrollHeight)
				.appendTo(this.outerCell);
		}

		// Create the inner table
		var table = $j(document.createElement("table"))
			.addClass("egwGridView_grid")
			.appendTo(this.scrollarea ? this.scrollarea : this.outerCell);

		this.innerTbody = $j(document.createElement("tbody"))
			.appendTo(table);
	}

});