Opened 13 years ago

Closed 13 years ago

#1569 closed enhancement (duplicate)

[patch][cla] Posted new widget: ElasticPane

Reported by: aum Owned by: bill
Priority: high Milestone: 0.9
Component: Widgets Version: 0.3
Keywords: widget, container Cc:
Blocked By: Blocking:

Description

The attached patch adds to Dojo a new widget called ElasticPane?.

ElasticPane? is a widget which sets its own position and size according to the size of its parent widget, via html attributes. It is suited for layouts where you want control over how widgets expand and contract as the window is resized. For instance, you might have a thin left pane with links, and a large right pane for content. You can implement these panes as ElasticPane?, so that the left pane has a minimum width and doesn't stretch fast, while the right pane takes up all remaining space. I wrote this to overcome a painful limitation in CSS - the inability to base position/size on formulas, rather than percentage OR pixels.

The patch places the implementation in src/widget/ElasticPane.js and a simple clear example in tests/widget/test_ElasticPane.html

Patch is below (I wish I could attach it as a file instead). Apply it from within the directory in which the dojo root dir resides.

diff -Naur dojo/src/widget/ElasticPane.js dojonew/src/widget/ElasticPane.js --- dojo/src/widget/ElasticPane.js 1970-01-01 12:00:00.000000000 +1200 +++ dojonew/src/widget/ElasticPane.js 2006-09-29 22:53:56.000000000 +1200 @@ -0,0 +1,125 @@ + + + ElasticPane? - a widget sensitive to window resizing. Allows + options for setting the rules for resizing child widgets + + Usage: just like ContentPane?, but with the ability to provide + expressions in x,y,w,h html attributes. + + Each 'x', 'y', 'w' or 'y' attribute you provide will be evaluated + as an expression, then assigned to the dom node's corresponding + 'left', 'top', 'width' or 'height' attribute. + The context in which this expression is executed is a function + which is called with the parent's width and height values, as + arguments 'w' and 'h'. + + For example: + <div dojoType="ElasticPane?" x="20+w/2"... + becomes: + this.domNode.style.left = + (20+w/2) + 'px'; + + Refer test_ElasticPane.html for a clear simple example of usage. + +dojo.provide("dojo.widget.ElasticPane?"); + +dojo.require("dojo.widget.*"); +dojo.require("dojo.io.*"); +dojo.require("dojo.widget.*"); +dojo.require("dojo.widget.ContentPane?"); + +dojo.widget.defineWidget( + widget name and class + "dojo.widget.ElasticPane?", + + + superclass + dojo.widget.Widget, + dojo.widget.HtmlWidget?, + dojo.widget.ContentPane?, + + properties and methods + { + widgetType: "dojo.widget.ElasticPane?", + + isContainer: true, + + for setting sizer funcs + x:"", y:"", w:"", h:"", + sizerFunc: null, + + initialisation + postCreate: function() { + + this.inherited("postCreate",[]); + + get a domNode ref, if none exists + if (this.domNode == null) { + this.domNode = dojo.byId(this.widgetId); + } + + must have absolute position + this.domNode.style.position = "absolute"; + + set up to receive onResize, but only if we are the top + of the tree + if (!this.parent) { + dojo.event.connect(window, "onresize", this, "onResized"); + } + + build a resizer function, if one or more + sizer expressions given + stmts = ""; + stmts = "dojo.debug("w="+w+" h="+h); " + if (this.x != "") { + stmts += "s.left=+("+this.x+")+'px'; "; + } + if (this.y != "") { + stmts += "s.top=+("+this.y+")+'px'; " + } + if (this.w != "") { + stmts += "s.width=+("+this.w+")+'px'; " + } + if (this.h != "") { + stmts += "s.height=+("+this.h+")+'px'; " + } + if (stmts != "") { + var code = "function (w,h){var s=this.domNode.style; "; + code += (stmts + "}"); + dojo.debug("func="+code); + this.sizerFunc = eval(code); + } + }, + + executes sizer expression, if any + doResize: function() { + + if (!this.sizerFunc) { return; } + + get parent dimensions + var w, h; + if (this.parent) { + get parent size + w = this.parent.domNode.offsetWidth; + h = this.parent.domNode.offsetHeight; + } else { + get window size + w = window.innerWidth; + h = window.innerHeight; + } + + this.sizerFunc(w, h); + }, + + onResized: function() { + + this.doResize(); + + resize the kids + this.notifyChildrenOfResize(); + }, + + + } +); + +dojo.debug("finished loading ElasticPane?.js");

No newline at end of file

diff -Naur dojo/tests/widget/test_ElasticPane.html dojonew/tests/widget/test_ElasticPane.html --- dojo/tests/widget/test_ElasticPane.html 1970-01-01 12:00:00.000000000 +1200 +++ dojonew/tests/widget/test_ElasticPane.html 2006-09-29 22:51:03.000000000 +1200 @@ -0,0 +1,46 @@ +<html> +<head> +<title>elastic test</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +</style> +<script language="JavaScript?" type="text/javascript"> + Dojo configuration +djConfig = { isDebug: true }; +</script> +<script type="text/javascript" src="../../dojo.js"></script> +<script type="text/javascript"> + my js stuff + +dojo.require("dojo.widget.*"); +dojo.require("dojo.debug.console"); +dojo.require("dojo.widget.ElasticPane?"); + +</script> + +</head> +<body> +<h1>ElasticPane? test</h1> + +<div id="panefixed" dojoType="ElasticPane?" + style="border: solid black 1px" + x="20" y="60" w="60" h="40" + >Fixed pos</div> + +<div id="panex" dojoType="ElasticPane?" + style="border: solid blue 1px" + x="90" y="60" w="40+0.2*w" h="40" + >Stretch horiz</div> + +<div id="paney" dojoType="ElasticPane?" + style="border: solid #ff00ff 1px" + x="20" y="120" w="60" h="40+0.1*h" + >Stretch vert</div> + +<div id="panexy" dojoType="ElasticPane?" + style="border: solid #ff0000 1px" + x="90" y="120" w="0.6*w-240" h="-40+0.4*h" + >Stretch both ways, more elastic than the others</div> + +</body> +</html>

Attachments (1)

ElasticPane.patch (5.3 KB) - added by aum 13 years ago.
patch which adds ElasticPanel?.js and test_ElasticPanel.html

Download all attachments as: .zip

Change History (3)

Changed 13 years ago by aum

Attachment: ElasticPane.patch added

patch which adds ElasticPanel?.js and test_ElasticPanel.html

comment:1 Changed 13 years ago by dylan

Milestone: 0.5
Summary: Posted new widget: ElasticPane[patch][cla] Posted new widget: ElasticPane

comment:2 Changed 13 years ago by tk

Resolution: duplicate
Status: newclosed

references #1578

Note: See TracTickets for help on using tickets.