egroupware/etemplate/js/et2_dataview_view_rowProvider.js

/**
 * eGroupWare eTemplate2 - Class which contains a factory method for rows
 *
 * @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$
 */

/*egw:uses
	jquery.jquery;
	et2_core_inheritance;
	et2_core_interfaces;
	et2_core_arrayMgr;
	et2_core_widget;
*/

/**
 * The row provider contains prototypes (full clonable dom-trees) 
 * for all registered row types.
 */
var et2_dataview_rowProvider = Class.extend({

	init: function(_outerId, _columnIds) {
		// Copy the given parameters
		this._outerId = _outerId;
		this._columnIds = _columnIds;
		this._prototypes = {};

		this._template = null;
		this._mgrs = null;
		this._rootWidget = null;

		// Create the default row "prototypes"
		this._createFullRowPrototype();
		this._createDefaultPrototype();
		this._createEmptyPrototype();
	},

	/**
	 * Returns a clone of the prototype with the given name. If the generator
	 * callback function is given, this function is called if the prototype
	 * does not yet registered.
	 */
	getPrototype: function(_name, _generator, _context) {
		if (typeof this._prototypes[_name] == "undefined")
		{
			if (typeof _generator != "undefined")
			{
				this._prototypes[_name] = _generator.call(_context, this._outerId,
					this._columnIds);
			}
			else
			{
				return null;
			}
		}

		return this._prototypes[_name].clone();
	},

	/**
	 * Returns an array containing objects which have variable attributes
	 */
	_getVariableAttributeSet: function(_widget) {
		var variableAttributes = [];

		_widget.iterateOver(function(_widget) {
			// Create the attribtues
			var hasAttr = false;
			var widgetData = {
				"widget": _widget,
				"data": []
			};

			// Get all attribute values
			for (var key in _widget.attributes)
			{
				if (!_widget.attributes[key].ignore &&
				    typeof _widget.options[key] != "undefined")
				{
					var val = _widget.options[key];

					// TODO: Improve detection
					if (typeof val == "string" && val.indexOf("$") >= 0)
					{
						hasAttr = true;
						widgetData.data.push({
							"attribute": key,
							"expression": val
						});
					}
				}
			}

			// Add the entry if there is any data in it
			if (hasAttr)
			{
				variableAttributes.push(widgetData);
			}

		}, this);

		return variableAttributes;
	},

	_seperateWidgets: function(_varAttrs) {
		// The detachable array contains all widgets which implement the
		// et2_IDetachedDOM interface for all needed attributes
		var detachable = [];

		// The remaining array creates all widgets which have to be completely
		// cloned when the widget tree is created
		var remaining = [];

		// Iterate over the widgets
		for (var i = 0; i < _varAttrs.length; i++)
		{
			var widget = _varAttrs[i].widget;

			// Check whether the widget parents are not allready in the "remaining"
			// slot -  if this is the case do not include the widget at all.
			var insertWidget = true;
			var checkWidget = function (_widget) {
				if (_widget.parent != null)
				{
					for (var i = 0; i < remaining.length; i++)
					{
						if (remaining[i].widget == _widget.parent)
						{
							insertWidget = false;
							return;
						}
					}

					checkWidget(_widget.parent);
				}
			};
			checkWidget(widget);

			// Handle the next widget if this one should not be included.
			if (!insertWidget)
			{
				continue;
			}

			// Check whether the widget implements the et2_IDetachedDOM interface
			var isDetachable = false;
			if (widget.implements(et2_IDetachedDOM))
			{
				// Get all attributes the widgets supports to be set in the
				// "detached" mode
				var supportedAttrs = [];
				widget.getDetachedAttributes(supportedAttrs);
				supportedAttrs.push("id");
				isDetachable = true;

				for (var j = 0; j < _varAttrs[i].data.length/* && isDetachable*/; j++)
				{
					var data = _varAttrs[i].data[j];

					var supportsAttr = supportedAttrs.indexOf(data.attribute) != -1;

					if (!supportsAttr)
					{
						et2_debug("warn", "et2_IDetachedDOM widget " +
							widget._type + " does not support " + data.attribute);
					}

					isDetachable &= supportsAttr;
				}
			}

			// Insert the widget into the correct slot
			if (isDetachable)
			{
				detachable.push(_varAttrs[i]);
			}
			else
			{
				remaining.push(_varAttrs[i]);
			}
		}

		return {
			"detachable": detachable,
			"remaining": remaining
		};
	},

	/**
	 * Removes to DOM code for all widgets in the "remaining" slot
	 */
	_stripTemplateRow: function(_rowTemplate) {
		_rowTemplate.placeholders = [];

		for (var i = 0; i < _rowTemplate.seperated.remaining.length; i++)
		{
			var entry = _rowTemplate.seperated.remaining[i];

			// Issue a warning - widgets which do not implement et2_IDOMNode
			// are very slow
			et2_debug("warn", "Non-clonable widget '"+ entry.widget._type + "' in dataview row - this " + 
				"might be slow", entry);

			// Set the placeholder for the entry to null
			entry.placeholder = null;

			// Get the outer DOM-Node of the widget
			if (entry.widget.implements(et2_IDOMNode))
			{
				var node = entry.widget.getDOMNode(entry.widget);

				if (node && node.parentNode)
				{
					// Get the parent node and replace the node with a placeholder
					entry.placeholder = document.createElement("span");
					node.parentNode.replaceChild(entry.placeholder, node);
					_rowTemplate.placeholders.push({
						"widget": entry.widget,
						"func": this._compileDOMAccessFunc(_rowTemplate.row,
							entry.placeholder)
					});
				}
			}
		}
	},

	_nodeIndex: function(_node) {
		if(_node.parentNode == null) 
		{
			return 0;
		}
		for (var i = 0; i < _node.parentNode.childNodes.length; i++)
		{
			if (_node.parentNode.childNodes[i] == _node)
			{
				return i;
			}
		}

		return -1;
	},

	/**
	 * Returns a function which does a relative access on the given DOM-Node
	 */
	_compileDOMAccessFunc: function(_root, _target) {
		function recordPath(_root, _target, _path)
		{
			if (typeof _path == "undefined")
			{
				_path = [];
			}

			if (_root != _target && _target)
			{
				// Get the index of _target in its parent node
				var idx = this._nodeIndex(_target);
				if (idx >= 0)
				{
					// Add the access selector
					_path.unshift("childNodes[" + idx + "]");

					// Record the remaining path
					return recordPath.call(this, _root, _target.parentNode, _path);
				}

				throw("Internal error while compiling DOM access function.");
			}
			else
			{
				_path.unshift("_node");
				return "return " + _path.join(".") + ";";
			}
		}

		return new Function("_node", recordPath.call(this, _root, _target));
	},

	/**
	 * Builds relative paths to the DOM-Nodes and compiles fast-access functions
	 */
	_buildNodeAccessFuncs: function(_rowTemplate) {
		for (var i = 0; i < _rowTemplate.seperated.detachable.length; i++)
		{
			var entry = _rowTemplate.seperated.detachable[i];

			// Get all needed nodes from the widget
			var nodes = entry.widget.getDetachedNodes();
			var nodeFuncs = entry.nodeFuncs = new Array(nodes.length);

			// Record the path to each DOM-Node
			for (var j = 0; j < nodes.length; j++)
			{
				nodeFuncs[j] = this._compileDOMAccessFunc(_rowTemplate.row,
					nodes[j]);
			}
		}
	},

	/**
	 * Creates the data row prototype
	 */
	setDataRowTemplate: function(_widgets, _rootWidget) {
		// Copy the root widget
		this._rootWidget = _rootWidget;

		// Create the base row
		var row = this.getPrototype("default");

		// Copy the row template
		var rowTemplate = {
			"row": row[0],
			"widgets": _widgets,
			"root": _rootWidget,
			"seperated": null,
			"mgrs": _rootWidget.getArrayMgrs()
		};

		// Create the row widget and insert the given widgets into the row
		var rowWidget = new et2_dataview_rowWidget(rowTemplate.mgrs, row[0]);
		rowWidget._parent = _rootWidget;
		rowWidget.createWidgets(_widgets);

		// Get the set containing all variable attributes
		var variableAttributes = this._getVariableAttributeSet(rowWidget);

		// Filter out all widgets which do not implement the et2_IDetachedDOM
		// interface or do not support all attributes listed in the et2_IDetachedDOM
		// interface. A warning is issued for all those widgets as they heavily
		// degrade the performance of the dataview
		var seperated = rowTemplate.seperated = 
			this._seperateWidgets(variableAttributes);

		// Remove all DOM-Nodes of all widgets inside the "remaining" slot from
		// the row-template, then build the access functions for the detachable
		// widgets
		this._stripTemplateRow(rowTemplate);
		this._buildNodeAccessFuncs(rowTemplate);

		this._prototypes["dataRow"] = row;
		this._template = rowTemplate;
	},

	getDataRow: function(_data, _row, _idx) {

		// Create array managers with the given data merged in
		var mgrs = et2_arrayMgrs_expand(rowWidget, this._template.mgrs,
			_data, _idx);

		// Insert the widgets into the row which do not provide the functions
		// to set the _data directly
		var rowWidget = null;
		if (this._template.seperated.remaining.length > 0)
		{
			// Transform the variable attributes
			for (var i = 0; i < this._template.seperated.remaining.length; i++)
			{
				var entry = this._template.seperated.remaining[i];

				for (var j = 0; j < entry.data.length; j++)
				{
					var set = entry.data[j];
					entry.widget.options[set.attribute] = mgrs["content"].expandName(set.expression);
				}
			}

			// Create the row widget
			var rowWidget = new et2_dataview_rowTemplateWidget(this._rootWidget,
				_row[0]);

			// Let the row widget create the widgets
			rowWidget.createWidgets(mgrs, this._template.placeholders);
		}

		// Update the content of all other widgets
		for (var i = 0; i < this._template.seperated.detachable.length; i++)
		{
			var entry = this._template.seperated.detachable[i];

			// Parse the attribute expressions
			var data = {};
			for (var j = 0; j < entry.data.length; j++)
			{
				var set = entry.data[j];
				data[set.attribute] = mgrs["content"].expandName(set.expression);
			}

			// Retrieve all DOM-Nodes
			var nodes = new Array(entry.nodeFuncs.length);
			for (var j = 0; j < nodes.length; j++)
			{
				// Use the previously compiled node function to get the node
				// from the entry
				nodes[j] = entry.nodeFuncs[j](_row[0]);
			}

			// Set the array managers first
			entry.widget._mgrs = mgrs;
			if (typeof data.id != "undefined")
			{
				entry.widget.id = data.id;
			}

			// Adjust data for that row
			entry.widget.transformAttributes.call(entry.widget,data);

			// Call the setDetachedAttributes function
			entry.widget.setDetachedAttributes(nodes, data);
		}

		return rowWidget;
	},

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

	_createFullRowPrototype: function() {
		var tr = $j(document.createElement("tr"));
		var td = $j(document.createElement("td"))
			.attr("span", this._columnIds.length)
			.appendTo(tr);
		var div = $j(document.createElement("div"))
			.addClass(this._outerId + "_div_fullRow")
			.appendTo(td);

		this._prototypes["fullRow"] = tr;
	},

	_createDefaultPrototype: function() {
		var tr = $j(document.createElement("tr"));

		// Append a td for each column
		for (var i = 0; i < this._columnIds.length; i++)
		{
			var td = $j(document.createElement("td"))
				.addClass(this._outerId + "_td_" + this._columnIds[i])
				.appendTo(tr);
			var div = $j(document.createElement("div"))
				.addClass(this._outerId + "_div_" + this._columnIds[i])
				.addClass("innerContainer")
				.appendTo(td);
		}

		this._prototypes["default"] = tr;
	},

	_createEmptyPrototype: function() {
		this._prototypes["empty"] = $j(document.createElement("tr"));
	}

});

var et2_dataview_rowWidget = et2_widget.extend(et2_IDOMNode, {

	init: function(_mgrs, _row) {
		// Call the parent constructor with some dummy attributes
		this._super(null, {"id": "", "type": "rowWidget"});

		// Initialize some variables
		this._widgets = [];

		// Copy the given DOM node and the content arrays
		this._mgrs = _mgrs;
		this._row = _row;
	},

	/**
	 * Copies the given array manager and clones the given widgets and inserts
	 * them into the row which has been passed in the constructor.
	 */
	createWidgets: function(_widgets) {
		// Clone the given the widgets with this element as parent
		this._widgets = new Array(_widgets.length);
		for (var i = 0; i < _widgets.length; i++)
		{
			this._widgets[i] = _widgets[i].clone(this);
			this._widgets[i].loadingFinished();
		}
	},

	/**
	 * Returns the column node for the given sender
	 */
	getDOMNode: function(_sender) {
		for (var i = 0; i < this._widgets.length; i++)
		{
			if (this._widgets[i] == _sender)
			{
				return this._row.childNodes[i].childNodes[0]; // Return the i-th td tag
			}
		}

		return null;
	}

});

var et2_dataview_rowTemplateWidget = et2_widget.extend(et2_IDOMNode, {

	init: function(_root, _row) {
		// Call the parent constructor with some dummy attributes
		this._super(null, {"id": "", "type": "rowTemplateWidget"});

		this._root = _root;
		this._mgrs = {};
		this._row = _row;

		// Clone the widgets inside the placeholders array
		this._widgets = [];
	},

	createWidgets: function(_mgrs, _widgets) {
		// Set the array managers - don't use setArrayMgrs here as this creates
		// an unnecessary copy of the object
		this._mgrs = _mgrs;

		this._widgets = new Array(_widgets.length);
		for (var i = 0; i < _widgets.length; i++)
		{
			this._row.childNodes[0].childNodes[0];

			this._widgets[i] = {
				"widget": _widgets[i].widget.clone(this),
				"node": _widgets[i].func(this._row)
			};
			this._widgets[i].widget.loadingFinished();
		}
	},

	/**
	 * Returns the column node for the given sender
	 */
	getDOMNode: function(_sender) {

		for (var i = 0; i < this._widgets.length; i++)
		{
			if (this._widgets[i].widget == _sender)
			{
				return this._widgets[i].node;
			}
		}

		return null;
	}

});