egroupware/etemplate/js/et2_dataview_model_columns.js

/**
 * eGroupWare eTemplate2 - Class which contains a the columns model
 *
 * @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
	et2_inheritance;
*/

var ET2_COL_TYPE_DEFAULT = 0;
var ET2_COL_TYPE_NAME_ICON_FIXED = 1;

var ET2_COL_VISIBILITY_ALWAYS = 0;
var ET2_COL_VISIBILITY_VISIBLE = 1;
var ET2_COL_VISIBILITY_INVISIBLE = 2;
var ET2_COL_VISIBILITY_ALWAYS_NOSELECT = 3;

/**
 * Class which stores the data of a single column.
 */
var et2_dataview_column = Class.extend({

	attributes: {
		"id": {
			"name": "ID",
			"type": "string",
			"description": "Unique identifier for this column. It is used to " +
				"store changed column widths or visibilities."
		},
		"visibility": {
			"name": "Visibility",
			"type": "integer",
			"default": ET2_COL_VISIBILITY_VISIBLE,
			"description": "Defines the visibility state of this column."
		},
		"caption": {
			"name": "Caption",
			"type": "string",
			"description": "Caption of the column as it is displayed in the " +
				"select columns popup."
		},
		"type": {
			"name": "Column type",
			"type": "integer",
			"default": ET2_COL_TYPE_DEFAULT,
			"description": "Type of the column"
		},
		"width": {
			"name": "Width",
			"type": "dimension",
			"default": "auto",
			"description": "Width of the column."
		},
		"maxWidth": {
			"name": "Maximum width",
			"type": "integer",
			"default": 0,
			"description": "Maximum width of the column"
		}
	},

	init: function(_attrs) {
		this.fixedWidth = false;
		this.relativeWidth = false;

		// Do the sanity check on the attributes and load them
		this.generateAttributeSet(_attrs);
		this.initAttributes(_attrs);
	},

	set_width: function(_value) {
		// Parse the width parameter. Posible values are:
		// 	1. "100" => fixedWidth 100px
		// 	2. "100px" => fixedWidth 100px
		// 	3. "50%" => relativeWidth 50%
		// 	4. "auto" => fixedWidth false, relativeWidth false
		this.relativeWidth = false;
		this.fixedWidth = false;
		var w = _value;

		if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1)))
		{
			this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100;

			// Relative widths with more than 100% are not allowed!
			if (this.relativeWidth > 1)
			{
				this.relativeWidth = false;
			}
		}
		else if (w.substr(w.length - 2, 2) == "px" && !isNaN(w.substr(0, w.length - 2)))
		{
			this.fixedWidth = parseInt(w.substr(0, w.length - 2));
		}
	},

	set_visibility: function(_value) {
		// If visibility is always, don't turn it off
		if(this.visibility == ET2_COL_VISIBILITY_ALWAYS || this.visibility == ET2_COL_VISIBILITY_ALWAYS_NOSELECT) return;
		 
		if(_value === true)
		{
			this.visibility = ET2_COL_VISIBILITY_VISIBLE;
		}
		else if (_value === false)
		{
			this.visibility = ET2_COL_VISIBILITY_INVISIBLE;
		}
		else if (typeof _value == "number")
		{
			this.visibility = _value;
		}
		else
		{
			et2_debug("warn", "Invalid visibility option for column: ", _value);
		}
	}
});

/**
 * Contains logic for the columns class. The columns class represents the unique set
 * of columns a grid view owns. The parameters of the columns (except for visibility)
 * do normaly not change.
 */

var et2_dataview_columns = Class.extend({

	init: function(_columnData) {
		// Initialize some variables
		this.totalWidth = 0;
		this.columnWidths = [];

		// Create the columns object
		this.columns = new Array(_columnData.length);
		for (var i = 0; i < _columnData.length; i++)
		{
			this.columns[i] = new et2_dataview_column(_columnData[i]);
		}

		this.updated = true;
	},

	destroy: function() {
		// Free all column objects
		for (var i = 0; i < this.columns.length; i++)
		{
			this.columns[i].free();
		}
	},

	/**
	 * Set the total width of the header row
	 */
	setTotalWidth: function(_width) {
		if (_width != this.totalWidth && _width > 0)
		{
			this.totalWidth = _width;
			this.updated = true;
		}
	},

	/**
	 * Returns the index of the colum with the given id
	 */
	getColumnIndexById: function(_id) {
		for (var i = 0; i < this.columns.length; i++)
		{
			if (this.columns[i].id == _id)
			{
				return i;
			}
		}
		return -1;
	},

	/**
	 * Returns the column with the given id
	 */
	getColumnById: function(_id) {
		var idx = this.getColumnIndexById(_id);
		return (idx == -1) ? null : this.columns[idx];
	},

	/**
	 * Returns the width of the column with the given index
	 */
	getColumnWidth: function(_idx) {
		if (this.totalWidth > 0 && _idx >= 0 && _idx < this.columns.length)
		{
			// Recalculate the column widths if something has changed.
			if (this.updated)
			{
				this._calculateWidths();
				this.updated = false;
			}

			// Return the calculated width for the column with the given index.
			return this.columnWidths[_idx];
		}

		return 0;
	},

	/**
	 * Returns an array containing the width of the column and its visibility
	 * state.
	 */
	getColumnData: function() {
		var result = [];

		for (var i = 0; i < this.columns.length; i++)
		{
			result.push({
				"id": this.columns[i].id,
				"width": this.getColumnWidth(i),
				"visible": this.columns[i].visibility != ET2_COL_VISIBILITY_INVISIBLE
			});
		}

		return result;
	},

	/**
	 * Returns an associative array which contains data about the visibility
	 * state of the columns.
	 */
	getColumnVisibilitySet: function() {
		var result = {};

		for (var i = 0; i < this.columns.length; i++)
		{
			if (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
			{
				result[this.columns[i].id] = {
					"caption": this.columns[i].caption,
					"enabled": (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS) &&
						(this.columns[i].type != ET2_COL_TYPE_NAME_ICON_FIXED),
					"visible": this.columns[i].visibility != ET2_COL_VISIBILITY_INVISIBLE
				};
			}
		}

		return result;
	},

	/**
	 * Sets a column visiblity set
	 */
	setColumnVisibilitySet: function(_set) {
		for (var k in _set)
		{
			var col = this.getColumnById(k);
			if (col)
			{
				col.set_visibility(_set[k].visible ? ET2_COL_VISIBILITY_VISIBLE :
					ET2_COL_VISIBILITY_INVISIBLE);
			}
		}

		this.updated = true;
	},

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

	/**
	 * Calculates the absolute column width depending on the previously set
	 * "totalWidth" value. The calculated values are stored in the columnWidths
	 * array.
	 */
	_calculateWidths: function()
	{
		// Reset some values which are used during the calculation
		for (var i = 0; i < this.columns.length; i++)
		{
			this.columns[i]._larger = false;
			this.columns[i]._newWidth = false;
		}

		// Remove the spacing between the columns from the total width
		var tw = this.totalWidth;

		// Calculate how many space is - relatively - not occupied with columns with
		// relative or fixed width
		var remRelWidth = 1;
		var noWidthCount = 0

		for (var i = 0; i < this.columns.length; i++)
		{
			var col = this.columns[i];
			if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
			{
				if (col.relativeWidth)
				{
					remRelWidth -= col.relativeWidth;
				}
				else if (col.fixedWidth)
				{
					remRelWidth -= col.fixedWidth / tw;
				}
				else
				{
					noWidthCount++;
				}
			}
		}

		// Check whether the width of columns with relative width is larger than their
		// maxWidth
		var done;
		do
		{
			done = true;

			var noWidth = remRelWidth / noWidthCount;

			for (var i = 0; i < this.columns.length; i++)
			{
				var col = this.columns[i];

				if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
				{
					if (col.maxWidth && !col._larger)
					{
						if (col.relativeWidth)
						{
							var w = col.relativeWidth * tw;
							col._larger = w > col.maxWidth;
							if (col._larger)
							{
								// Recalculate the remaining relative width:
								// col.maxWidth / w is the relative amount of space p which
								// is remaining for the element. E.g. an element with
								// w = 150px and maxWidth = 100px => p = 2/3
								// The space which got removed is 1 - p => 1/3
								// ==> we have to add 1/3 * oldRelWidth to the remRelWidth
								// variable.
								remRelWidth += col.relativeWidth * (1 - col.maxWidth / w);
								done = false;
								break;
							}
						}
						else
						{
							col._larger = noWidth * tw > col.maxWidth;
							if (col._larger)
							{
								remRelWidth -= col.maxWidth / tw;
								noWidthCount--;
								done = false;
								break;
							}
						}
					}
				}
			}
		// As some columns take their max width, new space might come available, which
		// requires other columns to take their maximum width.
		} while (!done);


		// Check whether the columns where a relative width is specified have more
		// space than the remaining columns - if yes, make the relative ones larger
		for (var i = 0; i < this.columns.length; i++)
		{
			var col = this.columns[i];

			if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
			{
				if (col.relativeWidth && !col._larger)
				{
					if (col.relativeWidth < noWidth)
					{
						noWidthCount++;
						remRelWidth += col.relativeWidth;
						col._newWidth = true;
					}
					else
					{
						col._newWidth = false;
					}
				}
			}
		}

		// Now calculate the absolute width of the columns in pixels
		this.columnWidths = [];
		for (var i = 0; i < this.columns.length; i++)
		{
			var w = 0;
			var col = this.columns[i];
			if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE)
			{
				if (col._larger)
				{
					w = col.maxWidth;
				}
				else if (col.fixedWidth)
				{
					w = col.fixedWidth;
				}
				else if (col.relativeWidth && !col._newWidth)
				{
					w = Math.round(tw * col.relativeWidth);
				}
				else
				{
					w = Math.round(tw * (remRelWidth / noWidthCount));
				}

				if (w < 0)
				{
					w = 0;
				}
			}
			this.columnWidths.push(w);
		}
	}

});