diff options
Diffstat (limited to 'js/dojo/dojox/layout/ScrollPane.js')
| -rw-r--r-- | js/dojo/dojox/layout/ScrollPane.js | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/js/dojo/dojox/layout/ScrollPane.js b/js/dojo/dojox/layout/ScrollPane.js new file mode 100644 index 0000000..edfe998 --- /dev/null +++ b/js/dojo/dojox/layout/ScrollPane.js @@ -0,0 +1,154 @@ +//>>built +require({cache:{ +'url:dojox/layout/resources/ScrollPane.html':"<div class=\"dojoxScrollWindow\" dojoAttachEvent=\"onmouseenter: _enter, onmouseleave: _leave\">\n <div class=\"dojoxScrollWrapper\" style=\"${style}\" dojoAttachPoint=\"wrapper\" dojoAttachEvent=\"onmousemove: _calc\">\n\t<div class=\"dojoxScrollPane\" dojoAttachPoint=\"containerNode\"></div>\n </div>\n <div dojoAttachPoint=\"helper\" class=\"dojoxScrollHelper\"><span class=\"helperInner\">|</span></div>\n</div>"}}); +define("dojox/layout/ScrollPane", ["dojo/_base/kernel","dojo/_base/declare","dojo/_base/html","dojo/_base/fx", + "dijit/_Templated","dijit/layout/ContentPane","dojo/dom-class", + "dojo/text!./resources/ScrollPane.html"], +function(kernel,declare,html,baseFx,Templated,ContentPane,domClass,template){ + +kernel.experimental("dojox.layout.ScrollPane"); + +// FIXME: need to adust the _line somehow, it stops scrolling + +/*===== + var ContentPane = dijit.layout.ContentPane, + Templated = dijit._Templated; +=====*/ + +declare("dojox.layout.ScrollPane",[ContentPane, Templated],{ + // summary: A pane that "scrolls" its content based on the mouse poisition inside + // + // description: + // A sizable container that takes it's content's natural size and creates + // a scroll effect based on the relative mouse position. It is an interesting + // way to display lists of data, or blocks of content, within a confined + // space. + // + // Horizontal scrolling is supported. Combination scrolling is not. + // + // example: + // | <div dojoType="dojox.layout.ScrollPane" style="width:150px height:300px;"> + // | <!-- any height content --> + // | </div> + // + // _line: dojo._Line + // storage for our top and bottom most scrollpoints + _line: null, + + // _lo: the height of the visible pane + _lo: null, + + _offset: 15, + + // orientation: String + // either "horizontal" or "vertical" for scroll orientation. + orientation: "vertical", + + // alwaysShow: Boolean + // whether the scroll helper should hide when mouseleave + autoHide: true, + templateString: template, + + resize: function(size){ + // summary: calculates required sizes. Call this if you add/remove content manually, or reload the content. + + // if size is passed, it means we need to take care of sizing ourself (this is for IE<8) + if(size){ + if(size.h){ + html.style(this.domNode,'height',size.h+'px'); + } + if(size.w){ + html.style(this.domNode,'width',size.w+'px'); + } + } + var dir = this._dir, + vert = this._vertical, + val = this.containerNode[(vert ? "scrollHeight" : "scrollWidth")]; + + html.style(this.wrapper, this._dir, this.domNode.style[this._dir]); + this._lo = html.coords(this.wrapper, true); + + this._size = Math.max(0, val - this._lo[(vert ? "h" : "w")]); + if(!this._size){ + this.helper.style.display="none"; + //make sure we reset scroll position, otherwise the content may be hidden + this.wrapper[this._scroll]=0; + return; + }else{ + this.helper.style.display=""; + } + this._line = new baseFx._Line(0 - this._offset, this._size + (this._offset * 2)); + + // share a relative position w the scroll offset via a line + var u = this._lo[(vert ? "h" : "w")], + r = Math.min(1, u / val), // ratio + s = u * r, // size + c = Math.floor(u - (u * r)); // center + + this._helpLine = new baseFx._Line(0, c); + + // size the helper + html.style(this.helper, dir, Math.floor(s) + "px"); + + }, + + postCreate: function(){ + this.inherited(arguments); + // for the helper + if(this.autoHide){ + this._showAnim = baseFx._fade({ node:this.helper, end:0.5, duration:350 }); + this._hideAnim = baseFx.fadeOut({ node:this.helper, duration: 750 }); + } + + // orientation helper + this._vertical = (this.orientation == "vertical"); + if(!this._vertical){ + domClass.add(this.containerNode,"dijitInline"); + this._dir = "width"; + this._edge = "left"; + this._scroll = "scrollLeft"; + }else{ + this._dir = "height"; + this._edge = "top"; + this._scroll = "scrollTop"; + } + + if(this._hideAnim){ + this._hideAnim.play(); + } + html.style(this.wrapper,"overflow","hidden"); + + }, + + _set: function(/* Float */n){ + if(!this._size){ return; } + // summary: set the pane's scroll offset, and position the virtual scroll helper + this.wrapper[this._scroll] = Math.floor(this._line.getValue(n)); + html.style(this.helper, this._edge, Math.floor(this._helpLine.getValue(n)) + "px"); + }, + + _calc: function(/* Event */e){ + // summary: calculate the relative offset of the cursor over the node, and call _set + if(!this._lo){ this.resize(); } + this._set(this._vertical ? + ((e.pageY - this._lo.y) / this._lo.h) : + ((e.pageX - this._lo.x) / this._lo.w) + ); + }, + + _enter: function(e){ + if(this._hideAnim){ + if(this._hideAnim.status() == "playing"){ + this._hideAnim.stop(); + } + this._showAnim.play(); + } + }, + + _leave: function(e){ + if(this._hideAnim){ + this._hideAnim.play(); + } + } +}); +});
\ No newline at end of file |