From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f --- includes/js/dojox/layout/ResizeHandle.js | 271 +++++++++++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 includes/js/dojox/layout/ResizeHandle.js (limited to 'includes/js/dojox/layout/ResizeHandle.js') diff --git a/includes/js/dojox/layout/ResizeHandle.js b/includes/js/dojox/layout/ResizeHandle.js new file mode 100644 index 0000000..0441c98 --- /dev/null +++ b/includes/js/dojox/layout/ResizeHandle.js @@ -0,0 +1,271 @@ +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: '
', + + 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); + } +}); + +} -- cgit v1.2.3