Author: zhen
Date: Fri Jan 11 16:02:34 2008
New Revision: 611334
URL: http://svn.apache.org/viewvc?rev=611334&view=rev
Log:
Added "dynamic-height" support using IFPC.
Added:
incubator/shindig/trunk/javascript/container/sample6.html (with props)
Modified:
incubator/shindig/trunk/features/dynamic-height/dynamic-height.js
incubator/shindig/trunk/javascript/container/gadgets.js
Modified: incubator/shindig/trunk/features/dynamic-height/dynamic-height.js
URL:
http://svn.apache.org/viewvc/incubator/shindig/trunk/features/dynamic-height/dynamic-height.js?rev=611334&r1=611333&r2=611334&view=diff
==============================================================================
--- incubator/shindig/trunk/features/dynamic-height/dynamic-height.js (original)
+++ incubator/shindig/trunk/features/dynamic-height/dynamic-height.js Fri Jan
11 16:02:34 2008
@@ -24,10 +24,105 @@
gadgets.Window = gadgets.Window || {};
/**
+ * Detects the inner dimensions of a frame.
+ * See: http://www.quirksmode.org/viewport/compatibility.html
+ * @returns {Object} An object with width and height properties.
+ */
+gadgets.Window.getViewportDimensions = function() {
+ var x,y;
+ if (self.innerHeight) {
+ // all except Explorer
+ x = self.innerWidth;
+ y = self.innerHeight;
+ } else if (document.documentElement &&
+ document.documentElement.clientHeight) {
+ // Explorer 6 Strict Mode
+ x = document.documentElement.clientWidth;
+ y = document.documentElement.clientHeight;
+ } else if (document.body) {
+ // other Explorers
+ x = document.body.clientWidth;
+ y = document.body.clientHeight;
+ } else {
+ x = 0;
+ y = 0;
+ }
+ return {width: x, height: y};
+};
+
+/**
* Adjusts the gadget height
* @param {Number} opt_height Preferred height in pixels.
*/
gadgets.Window.adjustHeight = function(opt_height) {
- // TODO
+ var newHeight = parseInt(opt_height, 10);
+ if (isNaN(newHeight)) {
+ // Resize the gadget to fit its content.
+
+ // Calculating inner content height is hard and different between
+ // browsers rendering in Strict vs. Quirks mode. We use a combination of
+ // three properties within document.body and document.documentElement:
+ // - scrollHeight
+ // - offsetHeight
+ // - clientHeight
+ // These values differ significantly between browsers and rendering modes.
+ // But there are patterns. It just takes a lot of time and persistence
+ // to figure out.
+
+ // Get the height of the viewport
+ var vh = gadgets.Window.getViewportDimensions().height;
+ var body = document.body;
+ var docEl = document.documentElement;
+ if (document.compatMode == 'CSS1Compat' && docEl.scrollHeight) {
+ // In Strict mode:
+ // The inner content height is contained in either:
+ // document.documentElement.scrollHeight
+ // document.documentElement.offsetHeight
+ // Based on studying the values output by different browsers,
+ // use the value that's NOT equal to the viewport height found above.
+ newHeight = docEl.scrollHeight != vh ?
+ docEl.scrollHeight : docEl.offsetHeight;
+ } else {
+ // In Quirks mode:
+ // documentElement.clientHeight is equal to documentElement.offsetHeight
+ // except in IE. In most browsers, document.documentElement can be used
+ // to calculate the inner content height.
+ // However, in other browsers (e.g. IE), document.body must be used
+ // instead. How do we know which one to use?
+ // If document.documentElement.clientHeight does NOT equal
+ // document.documentElement.offsetHeight, then use document.body.
+ var sh = docEl.scrollHeight;
+ var oh = docEl.offsetHeight;
+ if (docEl.clientHeight != oh) {
+ sh = body.scrollHeight;
+ oh = body.offsetHeight;
+ }
+
+ // Detect whether the inner content height is bigger or smaller
+ // than the bounding box (viewport). If bigger, take the larger
+ // value. If smaller, take the smaller value.
+ if (sh > vh) {
+ // Content is larger
+ newHeight = sh > oh ? sh : oh;
+ } else {
+ // Content is smaller
+ newHeight = sh < oh ? sh : oh;
+ }
+ }
+ }
+
+ // Only make the IFPC call if height has changed
+ if (newHeight != gadgets.Window.oldHeight_) {
+ gadgets.Window.oldHeight_ = newHeight;
+ var modId = 'remote_module_' + (new gadgets.Prefs()).getModuleId();
+ var ifpcRelay = gadgets.util.getUrlParameters().parent || '';
+ gadgets.IFPC_.call(modId, "resize_iframe", [modId, newHeight],
+ ifpcRelay, null, '');
+ }
};
+
+// Alias for legacy code
+var _IG_AdjustIFrameHeight = gadgets.Window.adjustHeight;
+
+// TODO Attach gadgets.Window.adjustHeight to the onresize event
Modified: incubator/shindig/trunk/javascript/container/gadgets.js
URL:
http://svn.apache.org/viewvc/incubator/shindig/trunk/javascript/container/gadgets.js?rev=611334&r1=611333&r2=611334&view=diff
==============================================================================
--- incubator/shindig/trunk/javascript/container/gadgets.js (original)
+++ incubator/shindig/trunk/javascript/container/gadgets.js Fri Jan 11 16:02:34
2008
@@ -434,7 +434,7 @@
gadgets.IfrGadget.inherits(gadgets.Gadget);
-gadgets.IfrGadget.prototype.GADGET_IFRAME_PREFIX_ = 'remote_iframe_';
+gadgets.IfrGadget.prototype.GADGET_IFRAME_PREFIX_ = 'remote_module_';
gadgets.IfrGadget.prototype.SYND = 'gadgets';
Added: incubator/shindig/trunk/javascript/container/sample6.html
URL:
http://svn.apache.org/viewvc/incubator/shindig/trunk/javascript/container/sample6.html?rev=611334&view=auto
==============================================================================
--- incubator/shindig/trunk/javascript/container/sample6.html (added)
+++ incubator/shindig/trunk/javascript/container/sample6.html Fri Jan 11
16:02:34 2008
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Sample: dynamic-height support</title>
+<!-- default container look and feel -->
+<link rel="stylesheet" href="gadgets.css">
+<script type="text/javascript" src="json.js"></script>
+<script type="text/javascript" src="ifpc.js"></script>
+<script type="text/javascript" src="cookies.js"></script>
+<script type="text/javascript" src="gadgets.js"></script>
+<script type="text/javascript">
+var specUrl0 = 'http://www.google.com/ig/modules/aue07otr.xml';
+
+function init() {
+ gadgets.container.layoutManager =
+ new gadgets.FloatLeftLayoutManager('gadget-parent');
+
+ gadgets.container.setParentUrl('ifpc_relay.html');
+ var gadget = gadgets.container.createGadget({specUrl: specUrl0});
+ gadget.setServerBase('http://localhost:8080/gadgets/');
+ gadgets.container.addGadget(gadget);
+};
+
+function renderGadgets() {
+ gadgets.container.renderGadgets();
+};
+</script>
+</head>
+<body onLoad="init();renderGadgets()">
+ <h2>Sample: dynamic-height support</h2>
+ <div>(Requires a Shindig server running at http://localhost:8080)</div>
+ <div id="gadget-parent" class="gadgets-gadget-parent"></div>
+</body>
+</html>
Propchange: incubator/shindig/trunk/javascript/container/sample6.html
------------------------------------------------------------------------------
svn:executable = *
