--- /dev/null
+if(!dojo._hasResource["dojox.layout.ResizeHandle"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.layout.ResizeHandle"] = true;
+dojo.provide("dojox.layout.ResizeHandle");
+dojo.experimental("dojox.layout.ResizeHandle");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojo.fx");
+
+dojo.declare("dojox.layout.ResizeHandle",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary: A dragable handle used to resize an attached node.
+ // description:
+ // The handle on the bottom-right corner of FloatingPane or other widgets that allows
+ // the widget to be resized.
+ // Typically not used directly.
+ //
+ // targetId: String
+ // id of the Widget OR DomNode that I will size
+ targetId: '',
+
+ // targetContainer: DomNode
+ // over-ride targetId and attch this handle directly to a reference of a DomNode
+ targetContainer: null,
+
+ // resizeAxis: String
+ // one of: x|y|xy limit resizing to a single axis, default to xy ...
+ resizeAxis: "xy",
+
+ // activeResize: Boolean
+ // if true, node will size realtime with mouse movement,
+ // if false, node will create virtual node, and only resize target on mouseUp
+ activeResize: false,
+
+ // activeResizeClass: String
+ // css class applied to virtual resize node.
+ activeResizeClass: 'dojoxResizeHandleClone',
+
+ // animateSizing: Boolean
+ // only applicable if activeResize = false. onMouseup, animate the node to the
+ // new size
+ animateSizing: true,
+
+ // animateMethod: String
+ // one of "chain" or "combine" ... visual effect only. combine will "scale"
+ // node to size, "chain" will alter width, then height
+ animateMethod: 'chain',
+
+ // animateDuration: Integer
+ // time in MS to run sizing animation. if animateMethod="chain", total animation
+ // playtime is 2*animateDuration
+ animateDuration: 225,
+
+ // minHeight: Integer
+ // smallest height in px resized node can be
+ minHeight: 100,
+
+ // minWidth: Integer
+ // smallest width in px resize node can be
+ minWidth: 100,
+
+ templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>',
+
+ postCreate: function(){
+ // summary: setup our one major listener upon creation
+ this.connect(this.resizeHandle, "onmousedown", "_beginSizing");
+ if(!this.activeResize){
+ // there shall be only a single resize rubberbox that at the top
+ // level so that we can overlay it on anything whenever the user
+ // resizes something. Since there is only one mouse pointer he
+ // can't at once resize multiple things interactively.
+ this._resizeHelper = dijit.byId('dojoxGlobalResizeHelper');
+
+ if (!this._resizeHelper){
+ var tmpNode = document.createElement('div');
+ tmpNode.style.display = "none";
+ dojo.body().appendChild(tmpNode);
+ dojo.addClass(tmpNode,this.activeResizeClass);
+ this._resizeHelper = new dojox.layout._ResizeHelper({
+ id: 'dojoxGlobalResizeHelper'},tmpNode);
+ this._resizeHelper.startup();
+ }
+ }else{ this.animateSizing = false; }
+
+ if (!this.minSize) {
+ this.minSize = { w: this.minWidth, h: this.minHeight };
+ }
+ // should we modify the css for the cursor hover to n-resize nw-resize and w-resize?
+ this._resizeX = this._resizeY = false;
+ switch (this.resizeAxis.toLowerCase()) {
+ case "xy" :
+ this._resizeX = this._resizeY = true;
+ // FIXME: need logic to determine NW or NE class to see
+ // based on which [todo] corner is clicked
+ dojo.addClass(this.resizeHandle,"dojoxResizeNW");
+ break;
+ case "x" :
+ this._resizeX = true;
+ dojo.addClass(this.resizeHandle,"dojoxResizeW");
+ break;
+ case "y" :
+ this._resizeY = true;
+ dojo.addClass(this.resizeHandle,"dojoxResizeN");
+ break;
+ }
+ },
+
+ _beginSizing: function(/*Event*/ e){
+ // summary: setup movement listeners and calculate initial size
+
+ if (this._isSizing){ return false; }
+
+ this.targetWidget = dijit.byId(this.targetId);
+
+ this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId);
+ if (this.targetContainer) { this.targetDomNode = this.targetContainer; }
+ if (!this.targetDomNode){ return false; }
+
+ if (!this.activeResize) {
+ var c = dojo.coords(this.targetDomNode, true);
+ this._resizeHelper.resize({l: c.x, t: c.y, w: c.w, h: c.h});
+ this._resizeHelper.show();
+ }
+
+ this._isSizing = true;
+ this.startPoint = {'x':e.clientX, 'y':e.clientY};
+
+ // FIXME: this is funky: marginBox adds height, contentBox ignores padding (expected, but foo!)
+ var mb = (this.targetWidget) ? dojo.marginBox(this.targetDomNode) : dojo.contentBox(this.targetDomNode);
+ this.startSize = { 'w':mb.w, 'h':mb.h };
+
+ this._pconnects = [];
+ this._pconnects.push(dojo.connect(document,"onmousemove",this,"_updateSizing"));
+ this._pconnects.push(dojo.connect(document,"onmouseup", this, "_endSizing"));
+
+ e.preventDefault();
+ },
+
+ _updateSizing: function(/*Event*/ e){
+ // summary: called when moving the ResizeHandle ... determines
+ // new size based on settings/position and sets styles.
+
+ if(this.activeResize){
+ this._changeSizing(e);
+ }else{
+ var tmp = this._getNewCoords(e);
+ if(tmp === false){ return; }
+ this._resizeHelper.resize(tmp);
+ }
+ e.preventDefault();
+ },
+
+ _getNewCoords: function(/* Event */ e){
+
+ // On IE, if you move the mouse above/to the left of the object being resized,
+ // sometimes clientX/Y aren't set, apparently. Just ignore the event.
+ try{
+ if(!e.clientX || !e.clientY){ return false; }
+ }catch(e){
+ // sometimes you get an exception accessing above fields...
+ return false;
+ }
+ this._activeResizeLastEvent = e;
+
+ var dx = this.startPoint.x - e.clientX;
+ var dy = this.startPoint.y - e.clientY;
+
+ var newW = (this._resizeX) ? this.startSize.w - dx : this.startSize.w;
+ var newH = (this._resizeY) ? this.startSize.h - dy : this.startSize.h;
+
+ // minimum size check
+ if(this.minSize){
+ //var mb = dojo.marginBox(this.targetDomNode);
+ if(newW < this.minSize.w){
+ newW = this.minSize.w;
+ }
+ if(newH < this.minSize.h){
+ newH = this.minSize.h;
+ }
+ }
+ return {w:newW, h:newH}; // Object
+ },
+
+ _changeSizing: function(/*Event*/ e){
+ // summary: apply sizing information based on information in (e) to attached node
+ var tmp = this._getNewCoords(e);
+ if(tmp===false){ return; }
+
+ if(this.targetWidget && typeof this.targetWidget.resize == "function"){
+ this.targetWidget.resize(tmp);
+ }else{
+ if(this.animateSizing){
+ var anim = dojo.fx[this.animateMethod]([
+ dojo.animateProperty({
+ node: this.targetDomNode,
+ properties: {
+ width: { start: this.startSize.w, end: tmp.w, unit:'px' }
+ },
+ duration: this.animateDuration
+ }),
+ dojo.animateProperty({
+ node: this.targetDomNode,
+ properties: {
+ height: { start: this.startSize.h, end: tmp.h, unit:'px' }
+ },
+ duration: this.animateDuration
+ })
+ ]);
+ anim.play();
+ }else{
+ dojo.style(this.targetDomNode,"width",tmp.w+"px");
+ dojo.style(this.targetDomNode,"height",tmp.h+"px");
+ }
+ }
+ },
+
+ _endSizing: function(/*Event*/ e){
+ // summary: disconnect listenrs and cleanup sizing
+ dojo.forEach(this._pconnects,dojo.disconnect);
+ if(!this.activeResize){
+ this._resizeHelper.hide();
+ this._changeSizing(e);
+ }
+ this._isSizing = false;
+ this.onResize(e);
+ },
+
+ onResize: function(e){
+ // summary: Stub fired when sizing is done, for things like Grid
+ }
+
+});
+
+dojo.declare("dojox.layout._ResizeHelper",
+ dijit._Widget,
+ {
+ // summary: A global private resize helper shared between any resizeHandle with activeSizing='false;
+
+ startup: function(){
+ if(this._started){ return; }
+ this.inherited(arguments);
+ },
+
+ show: function(){
+ // summary: show helper to start resizing
+ dojo.fadeIn({ node: this.domNode, duration:120,
+ beforeBegin: dojo.hitch(this,function(){
+ this.domNode.style.display='';
+ })
+ }).play();
+ },
+
+ hide: function(){
+ // summary: hide helper after resizing is complete
+ dojo.fadeOut({ node:this.domNode, duration:250,
+ onEnd: dojo.hitch(this,function(){
+ this.domNode.style.display="none";
+ })
+ }).play();
+ },
+
+ resize: function(/* Object */dim){
+ // summary: size the widget and place accordingly
+
+ // FIXME: this is off when padding present
+ dojo.marginBox(this.domNode, dim);
+ }
+});
+
+}
projects / eow / blobdiff