R36309 - in /trunk/etemplate/js: ./ test/

[igel457]

Author: igel457
New Revision: 36309

URL: http://svn.stylite.de/viewvc/egroupware?rev=36309&view=rev
Log:
Added et2_extension_nextmatch_dynheight.js which cares about resizing a div to the maximum possible height - this is needed because the new grid has to be explicitily sized to a given width and height

Added:
trunk/etemplate/js/et2_extension_nextmatch_dynheight.js
Modified:
trunk/etemplate/js/et2_extension_nextmatch.js
trunk/etemplate/js/etemplate2.js
trunk/etemplate/js/test/test.css
trunk/etemplate/js/test/test_xml.html

Modified: trunk/etemplate/js/et2_extension_nextmatch.js
URL: http://svn.stylite.de/viewvc/egroupware/trunk/etemplate/js/et2_extension_nextmatch.js?rev=36309&r1=36308&r2=36309&view=diff

— trunk/etemplate/js/et2_extension_nextmatch.js (original)
+++ trunk/etemplate/js/et2_extension_nextmatch.js Thu Aug 25 17:54:15 2011
@@ -20,6 +20,7 @@
et2_widget_template;
et2_widget_grid;
et2_widget_selectbox;

• et2_extension_nextmatch_dynheight;
  */

/**
@@ -44,7 +45,7 @@
/**

• Class which implements the “nextmatch” XET-Tag
  */
  -var et2_nextmatch = et2_DOMWidget.extend({
  +var et2_nextmatch = et2_DOMWidget.extend(et2_IResizeable, {

  attributes: {
  “template”: {
  @@ -62,6 +63,10 @@
  this.div = $j(document.createElement(“div”))
  .addClass(“et2_nextmatch”);

•   // Create the dynheight component which dynamically scales the inner
  

•   // container.
  

•   this.dynheight = new et2_dynheight(null, this.div, 150);
  

•   // Create the outer grid container
    this.dataviewContainer = new et2_dataview_gridContainer(this.div);
  

@@ -70,10 +75,14 @@
},

destroy: function() {

•   // Destroy the dataview objects
    this.dataviewContainer.free();
  

•   this._super.apply(this, arguments);
  

•   this.dynheight.free();
  

•   this._super.apply(this, arguments);
  

• },

• resize: function() {

•   this.dynheight.update();
  

  },

  /**
  @@ -297,7 +306,7 @@
  });

et2_register_widget(et2_nextmatch_header, [‘nextmatch-header’,

• ‘nextmatch-accountfilter’, ‘nextmatch-customfilter’, ‘nextmatch-customfields’]);

• ‘nextmatch-customfilter’, ‘nextmatch-customfields’]);

var et2_nextmatch_sortheader = et2_nextmatch_header.extend(et2_INextmatchSortable, {

@@ -347,5 +356,6 @@

});

-et2_register_widget(et2_nextmatch_filterheader, [‘nextmatch-filterheader’]);

+et2_register_widget(et2_nextmatch_filterheader, [‘nextmatch-filterheader’,

• ‘nextmatch-accountfilter’]);

Added: trunk/etemplate/js/et2_extension_nextmatch_dynheight.js
URL: http://svn.stylite.de/viewvc/egroupware/trunk/etemplate/js/et2_extension_nextmatch_dynheight.js?rev=36309&view=auto

— trunk/etemplate/js/et2_extension_nextmatch_dynheight.js (added)
+++ trunk/etemplate/js/et2_extension_nextmatch_dynheight.js Thu Aug 25 17:54:15 2011
@@ -1,0 +1,173 @@
+/**

• • eGroupWare eTemplate2 - JS Dynheight 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
• • @copyright Stylite 2011
• • @version $Id$
• */

+“use strict”
+
+/*egw:use

• jquery.jquery;
• et2_core_inheritance;
  +*/

+/**

• • Object which resizes an inner node to the maximum extend of an outer node
• • (without creating a scrollbar) - it achieves that by performing some very
• • nasty and time consuming calculations.
• */
  +var et2_dynheight = Class.extend({
• /**
• • Constructor for the dynheight object
• • @param _outerNode is the node which surrounds the _innerNode and to
• • which extend the innerNode should be expanded without creating a
• • scrollbar. Note: The outer node must be a parent of the inner node.
• • If “null” is passed, the outer node is set to “window”.
• • @param _innerNode is the node which should be scaled. Call update to
• • scale the node.
• • @param _minHeight is the minimum height the inner node should have
• */
• init: function(_outerNode, _innerNode, _minHeight) {

•   this.outerNode = _outerNode ? $j(_outerNode) : $j(window);
  

•   this.innerNode = $j(_innerNode);
  

•   this.minHeight = _minHeight;
  

•   this.bottomNodes = [];
  

•   this.initialized = false;
  

•   this.innerMargin = 0;
  

•   this.outerMargin = 0;
  

• },
• /**
• • Resizes the inner node. When this is done, the callback function is
• • called.
• */
• update: function(_callback, _context) {

•   // Check whether the inner node is actually visible - if not, don't
  

•   // trigger the callback function
  

•   if (this.innerNode.is(":visible"))
  

•   {
  

•   	// Initialize the height calculation
  

•   	this._initialize();
  

•   	// Get the outer container height
  

•   	var oh = this.outerNode.height();
  

•   	// Get top and height of the inner node
  

•   	var it = this.innerNode.offset().top;
  

•   	// Calculate the height of the "bottomNodes"
  

•   	var bminTop = 0;
  

•   	var bmaxBot = 0;
  

•   	for (var i = 0; i < this.bottomNodes.length; i++)
  

•   	{
  

•   		// Get height, top and bottom and calculate the maximum/minimum
  

•   		var bh = this.bottomNodes[i].outerHeight(true);
  

•   		var bt = this.bottomNodes[i].offset().top;
  

•   		var bb = bh + bt;
  

•   		if (i == 0 || bminTop > bt)
  

•   		{
  

•   			bminTop = bt;
  

•   		}
  

•   		if (i == 0 || bmaxBot < bb)
  

•   		{
  

•   			bmaxBot = bb;
  

•   		}
  

•   	}
  

•   	// Get the height of the bottom container
  

•   	var bh = bmaxBot - bminTop;
  

•   	// Calculate the new height of the inner container
  

•   	var w = this.innerNode.width();
  

•   	var h = Math.max(this.minHeight, oh - it - bh -
  

•   		this.innerMargin - this.outerMargin);
  

•   	this.innerNode.height(h);
  

•   	// Call the callback function
  

•   	if (typeof _callback != "undefined")
  

•   	{
  

•   		_callback.call(_context, _w, _h);
  

•   	}
  

•   }
  

• },
• /**
• • Function used internally which collects all DOM-Nodes which are located
• • below this element.
• */
• _collectBottomNodes: function(_node, _bottom) {

•   // Calculate the bottom position of the inner node
  

•   if (typeof _bottom == "undefined")
  

•   {
  

•   	_bottom = this.innerNode.offset().top + this.innerNode.height();
  

•   }
  

•   if (_node)
  

•   {
  

•   	// Accumulate the outer margin of the parent elements
  

•   	var node = $j(_node);
  

•   	var ooh = node.outerHeight(true);
  

•   	var oh = node.height();
  

•   	this.outerMargin += (ooh - oh) / 2; // Divide by 2 as the value contains margin-top and -bottom
  

•   	// Iterate over the children of the given node and do the same
  

•   	// recursively to the parent nodes until the _outerNode or body is
  

•   	// reached.
  

•   	var self = this;
  

•   	$j(_node).children().each(function() {
  

•   		var $this = $j(this);
  

•   		var top = $this.offset().top;
  

•   		if (this != self.innerNode[0] && top > _bottom)
  

•   		{
  

•   			self.bottomNodes.push($this);
  

•   		}
  

•   	});
  

•   	if (_node != this.outerNode[0] && _node != $j("body")[0])
  

•   	{
  

•   		this._collectBottomNodes(_node.parentNode, _bottom);
  

•   	}
  

•   }
  

• },
• /**
• • Used internally to calculate some information which will not change over
• • the time.
• */
• _initialize: function() {

•   if (!this.initialized)
  

•   {
  

•   	// Collect all bottomNodes and calculates the outer margin
  

•   	this.bottomNodes = [];
  

•   	this.outerMargin = 0;
  

•   	this._collectBottomNodes(this.innerNode[0].parentNode);
  

•   	// Calculate the inner margin
  

•   	var ioh = this.innerNode.outerHeight(true);
  

•   	var ih = this.innerNode.height();
  

•   	this.innerMargin = ioh - ih;
  

•   	// Calculate the outer margin
  

•   	var node = this.outerNode;
  

•   	if (node[0] == window)
  

•   	{
  

•   		node = $j("body");
  

•   	}
  

•   	this.initialized = true;
  

•   }
  

• }

+});
+

Modified: trunk/etemplate/js/etemplate2.js
URL: http://svn.stylite.de/viewvc/egroupware/trunk/etemplate/js/etemplate2.js?rev=36309&r1=36308&r2=36309&view=diff

— trunk/etemplate/js/etemplate2.js (original)
+++ trunk/etemplate/js/etemplate2.js Thu Aug 25 17:54:15 2011
@@ -34,6 +34,7 @@
// Requirements for the etemplate2 object
et2_core_xml;
et2_core_arrayMgr;

• et2_core_interfaces;
  */

/**
@@ -57,8 +58,26 @@
// Preset the object variable
this.widgetContainer = null;

• // Connect to the window resize event
• $j(window).resize(this, function(e) {e.data.resize()});
• // Associative array with the event listeners
  this.listeners = {};
  +}

+/**

• • Calls the resize event of all widgets
• */
  +etemplate2.prototype.resize = function()
  +{
• if (this.widgetContainer)
• {

•   // Call the "resize" event of all functions which implement the
  

•   // "IResizeable" interface
  

•   this.widgetContainer.iterateOver(function(_widget) {
  

•   	_widget.resize();
  

•   }, this, et2_IResizeable);
  

• }
  }

/**
@@ -129,8 +148,12 @@
et2_loadXMLFromURL(_url, function(_xmldoc) {
// Read the XML structure
this.widgetContainer.loadFromXML(_xmldoc);
+
// Inform the widget tree that it has been successfully loaded.
this.widgetContainer.loadingFinished();
+

•   // Trigger the "resize" event
  

•   this.resize();
  

  }, this);

  // Clear any existing instance

Modified: trunk/etemplate/js/test/test.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/etemplate/js/test/test.css?rev=36309&r1=36308&r2=36309&view=diff

— trunk/etemplate/js/test/test.css (original)
+++ trunk/etemplate/js/test/test.css Thu Aug 25 17:54:15 2011
@@ -9,6 +9,7 @@
body, table, td {
font-family: Lucida Grande, sans-serif;
font-size: 10pt;
+/* overflow: hidden;*/
}

#linklist a {

Modified: trunk/etemplate/js/test/test_xml.html
URL: http://svn.stylite.de/viewvc/egroupware/trunk/etemplate/js/test/test_xml.html?rev=36309&r1=36308&r2=36309&view=diff

— trunk/etemplate/js/test/test_xml.html (original)
+++ trunk/etemplate/js/test/test_xml.html Thu Aug 25 17:54:15 2011
@@ -32,6 +32,7 @@

	<script src="../et2_extension_nextmatch.js"></script>

•   <script src="../et2_extension_nextmatch_dynheight.js"></script>
    <script src="../et2_dataview_view_gridcontainer.js"></script>
  
    <script src="../etemplate2.js"></script>
  

@@ -79,6 +80,7 @@

ETemplate2 container:

•   <div style="color: silver;">[Just here to test the dynheight component...]</div>
    <script>
    	var et2 = new etemplate2(document.getElementById("container"), "");
  

---

EMC VNX: the world’s simplest storage, starting under $10K
The only unified storage solution that offers unified management
Up to 160% more powerful than alternatives and 25% more efficient.
Guaranteed. http://p.sf.net/sfu/emc-vnx-dev2dev

---

eGroupWare-cvs mailing list
eGroupWare-cvs@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/egroupware-cvs