Now using the etemplate code from the root instance (etemplate2.js acts as a egw api plugin); fixed egw.json plugins; fixed problem with 'instanceof Object', which does not work when sharing code over multiple windows

etemplate/inc/class.etemplate_new.inc.php

@@ -162,7 +162,7 @@ class etemplate_new extends etemplate_widget_template
 			echo '
 		<div id="container"></div>
 		<script>
-			var et2 = new etemplate2(document.getElementById("container"), "etemplate_new::ajax_process_content");
+			var et2 = new (egw().etemplate2)(document.getElementById("container"), "etemplate_new::ajax_process_content");
 			et2.load("'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).');
 		</script>
 ';

etemplate/js/et2_core_arrayMgr.js

@@ -170,7 +170,7 @@ var et2_arrayMgr = Class.extend({
 		{
 			// Abort if the current entry is not an object (associative array) and
 			// we should descend further into it.
-			var isObject = entry instanceof Object;
+			var isObject = typeof entry === 'object';
 			if (!isObject && !_referenceInto)
 			{
 				return null;
@@ -339,7 +339,7 @@ var et2_readonlysArrayMgr = et2_arrayMgr.extend({
 		}
 
 		// Let the array entry override the read only attribute entry
-		if (typeof entry != "undefined" && !(entry instanceof Object))
+		if (typeof entry != "undefined" && !(typeof entry === 'object'))
 		{
 			return entry;
 		}

etemplate/js/et2_core_baseWidget.js

@@ -180,7 +180,7 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
 		// Detach this node from the tooltip node
 		if (this._tooltipElem)
 		{
-			egw_global_tooltip.unbindFromElement(this._tooltipElem);
+			this.egw().tooltipUnbind(this._tooltipElem);
 			this._tooltipElem = null;
 		}
 
@@ -258,13 +258,13 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
 			//If a tooltip is already attached to the element, remove it first
 			if (this._tooltipElem)
 			{
-				egw_global_tooltip.unbindFromElement(this._tooltipElem);
+				this.egw().tooltipUnbind(this._tooltipElem);
 				this._tooltipElem = null;
 			}
 
 			if (_value && _value != '')
 			{
-				egw_global_tooltip.bindToElement(elem, _value);
+				this.egw().tooltipBind(elem, _value);
 				this._tooltipElem = elem;
 			}
 		}

etemplate/js/et2_core_widget.js

@@ -526,12 +526,12 @@ var et2_widget = Class.extend({
 			if(this.getArrayMgr("modifications"))
 			{
 				var data = this.getArrayMgr("modifications").getEntry(this.id);
-				if (data instanceof Object)
+				if (typeof data === 'object')
 				{
 					for (var key in data)
 					{
 						// TODO: Why? 
-						if (!(data[key] instanceof Object))
+						if (!(typeof data[key] === 'object'))
 						{
 							_attrs[key] = data[key];
 						}
@@ -792,7 +792,7 @@ var et2_widget = Class.extend({
 			}
 
 			// Check whether the manager has a namespace for the id of this object
-			if (mgr.getEntry(this.id) instanceof Object)
+			if (typeof mgr.getEntry(this.id) === 'object')
 			{
 				// The content manager has an own node for this object, so
 				// create an own perspective.

etemplate/js/et2_extension_customfields.js

@@ -174,7 +174,7 @@ var et2_customfields_list = et2_DOMWidget.extend([et2_IDetachedDOM], {
 			if(global_data) data = jQuery.extend({}, data, global_data);
 			for(var key in data)
 			{
-				if(data[key] instanceof Object && ! _attrs[key]) _attrs[key] = data[key];
+				if(typeof data[key] === 'object' && ! _attrs[key]) _attrs[key] = data[key];
 			}
 		}
 

etemplate/js/et2_extension_nextmatch.js

@@ -1088,7 +1088,7 @@ var et2_nextmatch_customfields = et2_nextmatch_header.extend({
 			if(!data) data = this.getArrayMgr("modifications").getRoot().getEntry('~custom_fields~', true);
 			for(var key in data)
 			{
-				if(data[key] instanceof Object && ! _attrs[key]) _attrs[key] = data[key];
+				if(typeof data[key] === 'object' && ! _attrs[key]) _attrs[key] = data[key];
 			}
 		}
 	},

etemplate/js/et2_widget_date.js

@@ -89,9 +89,9 @@ var et2_date = et2_inputWidget.extend({
 				daFormat: dateformat,
 				firstDay: this.egw().preference("weekdaystarts","calendar")
 			};
-			window.setTimeout(function() {
+			/*window.setTimeout(function() {
 				Calendar.setup(setup);
-			}, 500);
+			}, 500);*/
 		}
 
 		// If date also has a time, or browser doesn't support HTML5 time type 

etemplate/js/et2_widget_selectbox.js

@@ -14,7 +14,6 @@
 "use strict";
 
 /*egw:uses
-	lib/tooltip;
 	jquery.jquery;
 	et2_core_xml;
 	et2_core_DOMWidget;
@@ -208,7 +207,7 @@ var et2_selectbox = et2_inputWidget.extend({
 			// Translate the options
 			if(!this.options.no_lang)
 			{
-				if (_options[key] instanceof Object)
+				if (typeof _options[key] === 'object')
 				{
 					if(_options[key]["label"]) _options[key]["label"] = this.egw().lang(_options[key]["label"]);
 					if(_options[key]["title"]) _options[key]["title"] = this.egw().lang(_options[key]["title"]);
@@ -219,7 +218,7 @@ var et2_selectbox = et2_inputWidget.extend({
 				}
 			}
 
-			if (_options[key] instanceof Object)
+			if (typeof _options[key] === 'object')
 			{
 				this._appendOptionElement(key, 
 					_options[key]["label"] ? _options[key]["label"] : "",
@@ -284,12 +283,12 @@ var et2_selectbox_ro = et2_selectbox.extend([et2_IDetachedDOM], {
 	set_value: function(_value) {
 		this.value = _value;
 		var option = this.optionValues[_value];
-		if (option instanceof Object)
+		if (typeof option === 'object')
 		{
 			this.span.text(option.label);
 			this.set_statustext(option.title);
 		}
-		else if (typeof option == "string")
+		else if (typeof option === 'string')
 		{
 			this.span.text(option);
 		}

etemplate/js/et2_widget_template.js

@@ -67,14 +67,10 @@ var et2_template = et2_DOMWidget.extend({
 
 		if (this.id != "")
 		{
-			// Get the window this object belongs to
-			var node = this.getDOMNode();
-			var wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
-
 			// Set the api instance to the first part of the name of the
 			// template
 			var splitted = this.id.split('.');
-			this.setApiInstance(egw(splitted[0], wnd));
+			this.setApiInstance(egw(splitted[0], this._parent.egw().window));
 
 			this.createProxy();
 		}

etemplate/js/etemplate2.js

@@ -48,6 +48,8 @@
 	jsapi.egw_json;
 */
 
+egw.extend('etemplate2', egw.MODULE_GLOBAL, function() {
+
 /**
  * The etemplate2 class manages a certain etemplate2 instance.
  *
@@ -169,6 +171,7 @@ etemplate2.prototype.load = function(_url, _data)
 
 	// Create the basic widget container and attach it to the DOM
 	this.widgetContainer = new et2_container(null);
+	this.widgetContainer.setApiInstance(egw(egw.elemWindow(this.DOMContainer)));
 	this.widgetContainer.setInstanceManager(this);
 	this.widgetContainer.setParentDOMNode(this.DOMContainer);
 
@@ -253,8 +256,7 @@ etemplate2.prototype.submit = function(button)
 		// Create the request object
 		if (typeof egw_json_request != "undefined" && this.menuaction)
 		{
-			var api = egw(window);
+			var api = this.widgetContainer.egw();
-//			api.debug("Blablub");
 			var request = api.json(this.menuaction, [this.etemplate_exec_id,values], null, this);
 			request.sendRequest();
 		}
@@ -307,13 +309,13 @@ etemplate2.prototype.getValues = function(_root)
 		for (var i = 0; i < path.length; i++)
 		{
 			// Create a new object for not-existing path nodes
-			if (typeof _target[path[i]] == "undefined")
+			if (typeof _target[path[i]] === 'undefined')
 			{
 				_target[path[i]] = {};
 			}
 
 			// Check whether the path node is really an object
-			if (_target[path[i]] instanceof Object)
+			if (typeof _target[path[i]] === 'object')
 			{
 				_target = _target[path[i]];
 			}
@@ -348,7 +350,7 @@ function etemplate2_handle_load(_type, _response)
 {
 	// Check the parameters
 	var data = _response.data;
-	if (typeof data.url == "string" && data.data instanceof Object)
+	if (typeof data.url == "string" && typeof data.data === 'object')
 	{
 		this.load(data.url, data.data);
 		return true;
@@ -363,17 +365,13 @@ function etemplate2_handle_validation_error(_type, _response)
 	//$j(':input',this.DOMContainer).data("validator").invalidate(_response.data);
 }
 
+// Calls etemplate2_handle_response in the context of the object which
+// requested the response from the server
+egw(window).registerJSONPlugin(etemplate2_handle_load, null, 'et2_load');
+egw(window).registerJSONPlugin(etemplate2_handle_validation_error, null, 'et2_validation_error');
 
-// Register the egw_json result object
+// Return the etemplate2 constructor
-if (typeof egw != "undefined")
+return {'etemplate2': etemplate2};
-{
+
-	// Calls etemplate2_handle_response in the context of the object which
+});
-	// requested the response from the server
-	egw(window).registerJSONPlugin(etemplate2_handle_load, null, 'et2_load');
-	egw(window).registerJSONPlugin(etemplate2_handle_validation_error, null, 'et2_validation_error');
-}
-else
-{
-	egw.debug("info", "EGW JSON Plugin could not be registered, running ET2 standalone.");
-}
 

etemplate/js/lib/tooltip.js

@@ -1,186 +0,0 @@
-/**
- * eGroupware2 UI - Tooltip JS
- *
- * This javascript file contains the JavaScript code for the etemplate2 tooltip
- *
- * @link http://www.egroupware.org
- * @author Andreas Stoeckel (as@stylite.de)
- * @version $Id: tooltip.js 31497 2010-07-22 09:50:11Z igel457 $
- */
-
-/* Tooltip handling */
-function egw_tooltip()
-{
-	this.tooltip_div = null;
-	this.current_elem = null;
-	this.time_delta = 100;
-	this.show_delta = 0;
-	this.show_delay = 800;
-	this.x = 0;
-	this.y = 0;
-}
-
-egw_tooltip.prototype.bindToElement = function(_elem, _text)
-{
-	if (_text != '')
-	{
-		var self = this;
-		_elem.bind('mouseenter.tooltip', function(e) {
-			if (_elem != self.current_elem)
-			{
-				//Prepare the tooltip
-				self._prepare(_text);
-
-				self.current_elem = _elem;
-				self.show_delta = 0;
-				self.x = e.clientX;
-				self.y = e.clientY;
-
-				window.setTimeout(function() {self.showHintTimeout();}, self.time_delta);
-			}
-
-			return false;
-		});
-
-		_elem.bind('mouseleave.tooltip', function() {
-			self.current_elem = null;
-			self.show_delta = 0;
-			//self.hide();
-			if (self.tooltip_div)
-			{
-				self.tooltip_div.fadeOut(100);
-			}
-		});
-
-		_elem.bind('mousemove.tooltip', function(e) {
-			//Calculate the distance the mouse took since the last call of mousemove
-			var dx = self.x - e.clientX;
-			var dy = self.y - e.clientY;
-			var movedist = Math.sqrt(dx * dx + dy * dy);
-
-			//Block appereance of the tooltip on fast movements (with small movedistances)
-			if (movedist > 2)
-				self.show_delta = 0;
-
-			self.x = e.clientX;
-			self.y = e.clientY;
-		});
-	}
-}
-
-egw_tooltip.prototype.unbindFromElement = function(_elem)
-{
-	if (this.current_elem == _elem)
-	{
-		this.hide();
-		this.current_elem = null;
-	}
-
-	_elem.unbind('mouseenter.tooltip');
-	_elem.unbind('mouseleave.tooltip');
-	_elem.unbind('mousemove.tooltip');
-}
-
-egw_tooltip.prototype.showHintTimeout = function()
-{
-	if (this.current_elem != null)
-	{
-		this.show_delta += this.time_delta;
-		if (this.show_delta < this.show_delay)
-		{
-			//Repeat the call of timeout
-			var self = this;
-			window.setTimeout(function() {self.showHintTimeout();}, this.time_delta);
-		}
-		else
-		{	
-			this.show_delta = 0;
-			this.show();
-		}
-	}
-}
-
-egw_tooltip.prototype._prepare = function(_text)
-{
-	var self = this;
-
-	//Remove the old tooltip
-	if (this.tooltip_div)
-		this.hide();
-
-	//Generate the tooltip div, set it's text and append it to the body tag
-	this.tooltip_div = $j(document.createElement('div'));
-	this.tooltip_div.hide();
-	this.tooltip_div.append(_text);
-	this.tooltip_div.addClass("egw_tooltip");
-	$j('body').append(this.tooltip_div);
-
-	//The tooltip should automatically hide when the mouse comes over it
-	this.tooltip_div.mouseenter(function() {
-			self.hide();
-	});
-}
-
-egw_tooltip.prototype.show = function()
-{
-	if (this.tooltip_div)
-	{
-		//Calculate the cursor_rectangle - this is a space the tooltip might
-		//not overlap with
-		var cursor_rect = {
-			left: (this.x - 8),
-			top: (this.y - 8),
-			right: (this.x + 8),
-			bottom: (this.y + 8)
-		};
-
-		//Calculate how much space is left on each side of the rectangle
-		var window_width = $j(document).width();
-		var window_height = $j(document).height();
-		var space_left = {
-			left: (cursor_rect.left),
-			top: (cursor_rect.top),
-			right: (window_width - cursor_rect.right),
-			bottom: (window_height - cursor_rect.bottom)
-		};
-
-		//Get the width and the height of the tooltip
-		var tooltip_width = this.tooltip_div.width();
-		if (tooltip_width > 300) tooltip_width = 300;
-		var tooltip_height = this.tooltip_div.height();
-
-
-		if (space_left.right < tooltip_width) {
-			this.tooltip_div.css('left', cursor_rect.left - tooltip_width);
-		} else if (space_left.left >= tooltip_width) {
-			this.tooltip_div.css('left', cursor_rect.right);
-		} else	{
-			this.tooltip_div.css('left', cursor_rect.right);
-			this.tooltip_div.css('max-width', space_left.right);
-		}
-
-		if (space_left.bottom < tooltip_height) {
-			this.tooltip_div.css('top', cursor_rect.top - tooltip_height);
-		} else if (space_left.top >= tooltip_height) {
-			this.tooltip_div.css('top', cursor_rect.bottom);
-		} else	{
-			this.tooltip_div.css('top', cursor_rect.bottom);
-			this.tooltip_div.css('max-height', space_left.bottom);
-		}
-
-		this.tooltip_div.fadeIn(100);
-	}
-}
-
-egw_tooltip.prototype.hide = function()
-{
-	if (this.tooltip_div)
-	{
-		this.tooltip_div.remove();
-		this.tooltip_div = null;
-	}
-}
-
-//A reference to the current tooltip object
-window.egw_global_tooltip = new egw_tooltip();
-

phpgwapi/js/jsapi/egw.js

@@ -24,5 +24,6 @@
 	egw_jsonq;
 	egw_files;
 	egw_json;
+	egw_tooltip;
 */
 

phpgwapi/js/jsapi/egw_debug.js

@@ -16,7 +16,7 @@
 	egw_core;
 */
 
-egw.extend('debug', egw.MODULE_WND_LOCAL, function(_egw, _wnd) {
+egw.extend('debug', egw.MODULE_GLOBAL, function(_egw, _wnd) {
 
 	/**
 	 * DEBUGLEVEL specifies which messages are printed to the console.

phpgwapi/js/jsapi/egw_json.js

@@ -97,20 +97,26 @@ egw.extend('json', egw.MODULE_WND_LOCAL, function(_egw, _wnd) {
 		{
 			for (var i = 0; i < data.response.length; i++)
 			{
-				for (var key in plugins) {
+				// Get the response object
-					try {
+				var res = data.response[i];
-						// Get a reference to the plugin
-						var plugin = plugins[key];
 
-						// Call the plugin callback
+				// Check whether a plugin for the given type exists
-						plugin.callback.call(
+				if (typeof plugins[res.type] !== 'undefined')
-							plugin.context ? plugin.context : this.context,
+				{
-							data.response[i].type,
+					for (var j = 0; j < plugins[res.type].length; j++) {
-							data.response[i],
+						try {
-							this
+							// Get a reference to the plugin
-						);
+							var plugin = plugins[res.type][j];
 
-					} catch(e) {
+							// Call the plugin callback
+							plugin.callback.call(
+								plugin.context ? plugin.context : this.context,
+								res.type, res, this
+							);
+
+						} catch(e) {
+							this.egw.debug('error', e);
+						}
 					}
 				}
 			}
@@ -367,7 +373,7 @@ egw.extend('json', egw.MODULE_WND_LOCAL, function(_egw, _wnd) {
 			// Empty the document tree
 			while (_wnd.document.childNodes.length > 0)
 			{
-				_wnd.document.removeChild(document.childNodes[0]);
+				_wnd.document.removeChild(_wnd.document.childNodes[0]);
 			}
 
 			// Write the given content

phpgwapi/js/jsapi/egw_tooltip.js

@@ -0,0 +1,218 @@
+/**
+ * EGroupware clientside API object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Andreas Stöckel (as AT stylite.de)
+ * @author Ralf Becker <RalfBecker@outdoor-training.de>
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	jquery.jquery;
+	egw_core;
+*/
+
+egw.extend('tooltip', egw.MODULE_WND_LOCAL, function(_egw, _wnd) {
+
+	var tooltip_div = null;
+	var current_elem = null;
+
+	var time_delta = 100;
+	var show_delta = 0;
+	var show_delay = 800;
+
+	var x = 0;
+	var y = 0;
+
+	/**
+	 * Removes the tooltip_div from the DOM if it does exist.
+	 */
+	function hide()
+	{
+		if (tooltip_div != null)
+		{
+			tooltip_div.remove();
+			tooltip_div = null;
+		}
+	}
+
+	/**
+	 * Shows the tooltip at the current cursor position.
+	 */
+	function show()
+	{
+		if (tooltip_div)
+		{
+			//Calculate the cursor_rectangle - this is a space the tooltip might
+			//not overlap with
+			var cursor_rect = {
+				left: (x - 8),
+				top: (y - 8),
+				right: (x + 8),
+				bottom: (y + 8)
+			};
+
+			//Calculate how much space is left on each side of the rectangle
+			var window_width = $j(_wnd.document).width();
+			var window_height = $j(_wnd.document).height();
+			var space_left = {
+				left: (cursor_rect.left),
+				top: (cursor_rect.top),
+				right: (window_width - cursor_rect.right),
+				bottom: (window_height - cursor_rect.bottom)
+			};
+
+			//Get the width and the height of the tooltip
+			var tooltip_width = tooltip_div.width();
+			if (tooltip_width > 300) tooltip_width = 300;
+			var tooltip_height = tooltip_div.height();
+
+			if (space_left.right < tooltip_width) {
+				tooltip_div.css('left', cursor_rect.left - tooltip_width);
+			} else if (space_left.left >= tooltip_width) {
+				tooltip_div.css('left', cursor_rect.right);
+			} else	{
+				tooltip_div.css('left', cursor_rect.right);
+				tooltip_div.css('max-width', space_left.right);
+			}
+
+			if (space_left.bottom < tooltip_height) {
+				tooltip_div.css('top', cursor_rect.top - tooltip_height);
+			} else if (space_left.top >= tooltip_height) {
+				tooltip_div.css('top', cursor_rect.bottom);
+			} else	{
+				tooltip_div.css('top', cursor_rect.bottom);
+				tooltip_div.css('max-height', space_left.bottom);
+			}
+
+			tooltip_div.fadeIn(100);
+		}
+	}
+
+	/**
+	 * Creates the tooltip_div with the given text.
+	 */
+	function prepare(_html)
+	{
+		// Free and null the old tooltip_div
+		hide();
+
+		//Generate the tooltip div, set it's text and append it to the body tag
+		tooltip_div = $j(_wnd.document.createElement('div'));
+		tooltip_div.hide();
+		tooltip_div.append(_html);
+		tooltip_div.addClass("egw_tooltip");
+		$j(_wnd.document.body).append(tooltip_div);
+
+		//The tooltip should automatically hide when the mouse comes over it
+		tooltip_div.mouseenter(function() {
+				hide();
+		});
+	}
+
+	/**
+	 * showTooltipTimeout is used to prepare showing the tooltip.
+	 */
+	function showTooltipTimeout()
+	{
+		if (current_elem != null)
+		{
+			show_delta += time_delta;
+			if (show_delta < show_delay)
+			{
+				//Repeat the call of timeout
+				_wnd.setTimeout(showTooltipTimeout, time_delta);
+			}
+			else
+			{
+				show_delta = 0;
+				show();
+			}
+		}
+	}
+
+	return {
+		/**
+		 * Binds a tooltip to the given DOM-Node with the given html.
+		 * It is important to remove all tooltips from all elements which are
+		 * no longer needed, in order to prevent memory leaks.
+		 * 
+		 * @param _elem is the element to which the tooltip should get bound. It
+		 * 	has to be a jQuery node.
+		 * @param _html is the html code which should be shown as tooltip.
+		 */
+		tooltipBind: function(_elem, _html) {
+			if (_html != '')
+			{
+				_elem.bind('mouseenter.tooltip', function(e) {
+					if (_elem != current_elem)
+					{
+						//Prepare the tooltip
+						prepare(_html);
+
+						// Set the current element the mouse is over and
+						// initialize the position variables
+						current_elem = _elem;
+						show_delta = 0;
+						x = e.clientX;
+						y = e.clientY;
+
+						// Create the timeout for showing the timeout
+						_wnd.setTimeout(showTooltipTimeout, time_delta);
+					}
+
+					return false;
+				});
+
+				_elem.bind('mouseleave.tooltip', function() {
+					current_elem = null;
+					show_delta = 0;
+					if (tooltip_div)
+					{
+						tooltip_div.fadeOut(100);
+					}
+				});
+
+				_elem.bind('mousemove.tooltip', function(e) {
+					//Calculate the distance the mouse took since the last call of mousemove
+					var dx = x - e.clientX;
+					var dy = y - e.clientY;
+					var movedist = Math.sqrt(dx * dx + dy * dy);
+
+					//Block appereance of the tooltip on fast movements (with small movedistances)
+					if (movedist > 2)
+					{
+						show_delta = 0;
+					}
+
+					x = e.clientX;
+					y = e.clientY;
+				});
+			}
+		},
+
+		/**
+		 * Unbinds the tooltip from the given DOM-Node.
+		 * 
+		 * @param _elem is the element from which the tooltip should get
+		 * removed. _elem has to be a jQuery node.
+		 */
+		tooltipUnbind: function(_elem) {
+			if (current_elem == _elem)
+			{
+				hide();
+				current_elem = null;
+			}
+
+			// Unbind all "tooltip" events from the given element
+			_elem.unbind('.tooltip');
+		}
+	}
+
+});
+

phpgwapi/js/jsapi/egw_utils.js

@@ -149,6 +149,13 @@ egw.extend('utils', egw.MODULE_GLOBAL, function() {
 
 		ajaxUrl: function(_menuaction) {
 			return this.webserverUrl + '/json.php?menuaction=' + _menuaction;
+		},
+
+		elemWindow: function(_elem) {
+			var res =
+				_elem.ownerDocument.parentNode ||
+				_elem.ownerDocument.defaultView;
+			return res;
 		}
 
 	};