0.6.x/js/20_ui/15_ScrollBox.js

   1 \r
   2 \r
   3 function X_UI_ScrollBox_momentum( current, start, time, lowerMargin, wrapperSize, deceleration ){\r
   4         var distance = current - start,\r
   5                 speed    = Math.abs( distance ) / time,\r
   6                 destination,\r
   7                 duration;\r
   8 \r
   9         deceleration = deceleration === undefined ? 0.0006 : deceleration;\r
  10 \r
  11         destination  = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );\r
  12         duration     = speed / deceleration;\r
  13 \r
  14         if( destination < lowerMargin ){\r
  15                 destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;\r
  16                 distance    = Math.abs( destination - current );\r
  17                 duration    = distance / speed;\r
  18         } else\r
  19         if ( destination > 0 ) {\r
  20                 destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;\r
  21                 distance    = Math.abs( current ) + destination;\r
  22                 duration    = distance / speed;\r
  23         };\r
  24 \r
  25         return {\r
  26                 destination : Math.round( destination ),\r
  27                 duration    : duration\r
  28         };\r
  29 };\r
  30 \r
  31 var X_UI_ScrollBox_SUPPORT_ATTRS = {\r
  32                 // スクロール開始するために必要な移動距離、縦か横、どちらか制限する場合、より重要\r
  33                 directionLockThreshold : [     10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ],\r
  34                 scrollXEnabled         : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  35                 scrollYEnabled         : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  36                 scrollEnabled          : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  37                 bounceEnabled          : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  38                 bounceTime             : [    600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ],\r
  39                 useWheel               : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  40                 useKey                 : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  41                 hasScrollShadow        : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
  42                 scrollShadowColor      : [ '#000', X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.COLOR ]\r
  43         };\r
  44 \r
  45 \r
  46 X.UI._ScrollBox = X.UI._ChromeBox.inherits(\r
  47         '_ScrollBox',\r
  48         X_Class.PRIVATE_DATA | X_Class.SUPER_ACCESS,\r
  49         {\r
  50                 //elmScroll     : null,\r
  51                 //elmScroller   : null,\r
  52                 //elmScrollbar  : null,\r
  53                 \r
  54                 directionLockThreshold : 10,\r
  55                 scrollXEnabled         : true,\r
  56                 scrollYEnabled         : true,\r
  57                 scrollEnabled          : true,\r
  58                 bounceEnabled          : true,\r
  59                 momentumEnabled        : true,\r
  60                 bounceTime             : 600,\r
  61                 useWheel               : true,\r
  62                 useKey                 : true,\r
  63                 hasScrollShadow        : true,\r
  64                 scrollShadowColor      : '#000',\r
  65                 \r
  66                 supportAttrs    : XUI_Attr_createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ),\r
  67                 \r
  68                 scrolling       : false,\r
  69                 \r
  70                 initiated       : '',\r
  71                 moved               : false,\r
  72                 directionLocked : '',\r
  73                 startTime       : 0,\r
  74                 endTime         : 0,\r
  75                 isAnimating     : false,\r
  76                 isInTransition  : false,\r
  77 \r
  78                 hasHScroll      : false,\r
  79                 hasVScroll      : false,\r
  80 \r
  81                 wrapperOffset   : 0,\r
  82                 wheelTimeout    : 0,\r
  83                 requestFrameID  : 0,\r
  84                 \r
  85                 fontSize        : 0,\r
  86                 \r
  87                 scrollX         : 0, // px\r
  88                 scrollY         : 0, // px\r
  89                 maxScrollX      : 0, // px\r
  90                 maxScrollY      : 0, // px\r
  91                 startX          : 0, // px\r
  92                 startY          : 0, // px\r
  93                 absStartX       : 0, // px\r
  94                 absStartY       : 0, // px\r
  95                 pointX          : 0, // px\r
  96                 pointY          : 0, // px\r
  97                 distX               : 0, // px\r
  98                 distY               : 0, // px\r
  99                 directionX      : 0, // px\r
 100                 directionY      : 0, // px      \r
 101                 scrollXPercent  : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される\r
 102                 scrollYPercent  : 0,\r
 103                 \r
 104                 lastScrollWidth  : 0,\r
 105                 lastScrollHeight : 0,\r
 106                 lastBoxWidth     : 0,\r
 107                 lastBoxHeight    : 0,\r
 108                 \r
 109                 _containerNode : null,\r
 110                 scrollManager  : null,\r
 111                 \r
 112                 Constructor : function( layout, args ){\r
 113                         this[ 'Super' ]( layout, args );\r
 114                         this._containerNode = X_Class_getPrivate( this.containerNode );\r
 115                         this._containerXNode = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
 116                         this.xnode[ 'className' ]( 'ScrollBox' );\r
 117                 },\r
 118                 \r
 119                 creationComplete : function(){\r
 120                         X.UI._Box.prototype.creationComplete.apply( this, arguments );\r
 121                         this.scrollManager;\r
 122                 },\r
 123                 \r
 124                 calculate : function(){\r
 125                         this.lastScrollWidth  = this._containerNode.boxWidth;\r
 126                         this.lastScrollHeight = this._containerNode.boxHeight;\r
 127                         this.lastBoxWidth     = this.boxWidth;\r
 128                         this.lastBoxHeight    = this.boxHeight;\r
 129                         \r
 130                         X.UI._Box.prototype.calculate.apply( this, arguments );\r
 131                         \r
 132                         // TODO root の layout_complete 後に。\r
 133                         // TODO calculate 前に scroll の解放。\r
 134                         \r
 135                         if(\r
 136                                         this.lastScrollWidth  !== this._containerNode.boxWidth ||\r
 137                                         this.lastScrollHeight !== this._containerNode.boxHeight ||\r
 138                                         this.lastBoxWidth    !== this.boxWidth    || this.lastBoxHeight    !== this.boxHeight\r
 139                                 ){\r
 140                                         X_UI_rootData[ 'listenOnce' ]( X.UI.Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
 141                                 };\r
 142                 },\r
 143                 \r
 144                 scrollBy : function( x, y, opt_time, opt_easing ){\r
 145                         this.scrollTo( this.scrollX + x, this.scrollY + y, opt_time, opt_easing );\r
 146                 },\r
 147         \r
 148                 scrollTo : function( x, y, opt_time, opt_easing, opt_release ){\r
 149                         //if( this.scrollX === x && this.scrollY === y ) return;\r
 150                         \r
 151                         opt_time    = 0 <= opt_time ? opt_time : 0;\r
 152                         opt_easing  = opt_easing || 'circular';\r
 153                         opt_release = 0 <= opt_release ? opt_release : 300;\r
 154         \r
 155                         this.isInTransition = 0 < opt_time;\r
 156         \r
 157                         X_UI_ScrollBox_translate( this, x, y, opt_time, opt_easing, opt_release );\r
 158                 },\r
 159                 \r
 160                 _remove : function(){\r
 161                         X.UI._AbstractUINode.prototype._remove.apply( this, arguments );\r
 162                         if( this.scrolling ){\r
 163                                 // remove scroll\r
 164                         };\r
 165                 }\r
 166                 \r
 167         }\r
 168 );\r
 169 \r
 170 function X_UI_ScrollBox_onLayoutBefore( e ){\r
 171         //this._containerXNode.stop();\r
 172 };\r
 173 \r
 174 function X_UI_ScrollBox_onLayoutComplete( e ){\r
 175         // scroll の停止、GPU の解除\r
 176         var font = this.fontSize = this._containerXNode.call( 'fontSize' );\r
 177         \r
 178         this.maxScrollX = ( this.boxWidth  - this._containerNode.boxWidth ) * font;\r
 179         this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font;\r
 180 \r
 181         this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0;\r
 182         this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0;\r
 183 \r
 184         if( !this.hasHScroll ){\r
 185                 this.maxScrollX  = 0;\r
 186                 //this.scrollWidth = this.boxWidth;\r
 187         };\r
 188 \r
 189         if( !this.hasVScroll ){\r
 190                 this.maxScrollY   = 0;\r
 191                 //this.scrollHeight = this.boxHeight;\r
 192         };\r
 193 \r
 194         delete this.endTime;\r
 195         delete this.directionX;\r
 196         delete this.directionY;\r
 197 \r
 198         //this.wrapperOffset = this.xnodeWrapper[ 'offset' ]();\r
 199 \r
 200         //this[ 'dispatch' ]('refresh');\r
 201 \r
 202         X_UI_ScrollBox_resetPosition( this, 0 );\r
 203 \r
 204         if( this.hasHScroll || this.hasVScroll ){\r
 205                 // scroll が必要。\r
 206                 if( this.scrolling ){\r
 207                         this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent, 100 );\r
 208                 } else {\r
 209                         // scroller 作る\r
 210                         this[ 'listen' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
 211                         X_UI_rootData[ 'listen' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
 212                         \r
 213                         this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent );\r
 214                         this.scrolling = true;\r
 215                 };\r
 216         } else\r
 217         // scroll 不要\r
 218         if( this.scrolling ){\r
 219                 // scroller 削除\r
 220                 this[ 'unlisten' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
 221                 X_UI_rootData[ 'unlisten' ]( X.UI.Event.LAYOUT_BEFORE,   this, X_UI_ScrollBox_onLayoutBefore );\r
 222                 \r
 223                 ( this.scrollX !== 0 || this.scrollY !== 0 ) && this.scrollTo( 0, 0 );\r
 224                 \r
 225                 delete this.scrolling;\r
 226         };\r
 227 };\r
 228 \r
 229                 function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
 230                         \r
 231                         opt_time    = 0 <= opt_time ? opt_time : 0;\r
 232                         opt_easing  = opt_easing === '' ? '' : opt_easing || 'circular';\r
 233                         opt_release = 0 <= opt_release ? opt_release : 300;\r
 234                         \r
 235                         that._containerXNode.animate(\r
 236                                 {\r
 237                                         x : that.scrollX,\r
 238                                         y : that.scrollY\r
 239                                 },\r
 240                                 {\r
 241                                         x : x | 0,\r
 242                                         y : y | 0\r
 243                                 },\r
 244                                 opt_time, opt_easing, opt_release\r
 245                         );\r
 246                         \r
 247                         that.scrollX = x | 0;\r
 248                         that.scrollY = y | 0;\r
 249                         \r
 250                         if( that.indicators ){\r
 251                                 for( i = that.indicators.length; i--; ){\r
 252                                         that.indicators[ i ].updatePosition();\r
 253                                 };\r
 254                         };\r
 255                 };\r
 256 \r
 257 function X_UI_ScrollBox_onStart( e ){\r
 258         var ret = X_Callback_NONE;\r
 259 \r
 260         // React to left mouse button only\r
 261         if( e.pointerType === 'mouse' && e.button !== 0 ){\r
 262                 return ret;\r
 263         };\r
 264         \r
 265         if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){\r
 266                 return ret;\r
 267         };\r
 268 \r
 269         this.initiated       = e.pointerType;\r
 270         this.moved                   = false;\r
 271         this.distX                   = 0;\r
 272         this.distY                   = 0;\r
 273         this.directionX      = 0;\r
 274         this.directionY      = 0;\r
 275         this.directionLocked = '';\r
 276         this.startTime       = X_Timer_now();\r
 277 \r
 278         // スクロール中の停止\r
 279         if( this.isInTransition || this.isAnimating ){\r
 280                 this.isInTransition = this.isAnimating = false;\r
 281                 this[ 'dispatch' ]( X.UI.Event.SCROLL_END );\r
 282         };                      \r
 283 \r
 284         this.startX    = this.scrollX;\r
 285         this.startY    = this.scrollY;\r
 286         this.absStartX = this.scrollX;\r
 287         this.absStartY = this.scrollY;\r
 288         this.pointX    = e.pageX;\r
 289         this.pointY    = e.pageY;\r
 290         \r
 291         this[ 'listen' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
 292         this[ 'listen' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
 293 \r
 294         return ret | X_Callback_PREVENT_DEFAULT;\r
 295 };\r
 296 \r
 297 function X_UI_ScrollBox_onMove( e ){\r
 298         var ret = X_Callback_NONE,\r
 299                 deltaX, deltaY, timestamp,\r
 300                 newX, newY,\r
 301                 absDistX, absDistY;\r
 302         // 規定以上の move でスクロール開始\r
 303         \r
 304         if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
 305                 return ret;\r
 306         };\r
 307 \r
 308         // gpu の用意\r
 309         if( !this._containerXNode[ '_anime' ] ){\r
 310                 //console.log( 'gpuレイヤーの用意 ' + e.pageY );\r
 311                 //console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );\r
 312                 X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );\r
 313                 return ret;\r
 314         };\r
 315 \r
 316         deltaX          = e.pageX - this.pointX;\r
 317         deltaY          = e.pageY - this.pointY;\r
 318         timestamp       = X_Timer_now();\r
 319 \r
 320         this.pointX     = e.pageX;\r
 321         this.pointY     = e.pageY;\r
 322 \r
 323         this.distX      += deltaX;\r
 324         this.distY      += deltaY;\r
 325         absDistX        = Math.abs(this.distX);\r
 326         absDistY        = Math.abs(this.distY);\r
 327         \r
 328         // We need to move at least 10 pixels for the scrolling to initiate\r
 329         if( 300 < timestamp - this.endTime && ( absDistX < 10 && absDistY < 10 ) ){\r
 330                 return ret;\r
 331         };\r
 332 \r
 333         // If you are scrolling in one direction lock the other\r
 334         if( !this.directionLocked ){\r
 335                 if( absDistX > absDistY + this.directionLockThreshold ){\r
 336                         this.directionLocked = 'h';             // lock horizontally\r
 337                 } else\r
 338                 if( absDistY >= absDistX + this.directionLockThreshold ){\r
 339                         this.directionLocked = 'v';             // lock vertically\r
 340                 } else {\r
 341                         this.directionLocked = 'n';             // no lock\r
 342                 };\r
 343         };\r
 344 \r
 345         if( this.directionLocked === 'h' ){\r
 346                 deltaY = 0;\r
 347         } else\r
 348         if( this.directionLocked === 'v' ){\r
 349                 deltaX = 0;\r
 350         };\r
 351 \r
 352         deltaX = this.hasHScroll ? deltaX : 0;\r
 353         deltaY = this.hasVScroll ? deltaY : 0;\r
 354 \r
 355         if( !this.moved ){\r
 356                 this[ 'dispatch' ]( X.UI.Event.SCROLL_BEFORE_MOVE );\r
 357                 this.moved  = true;\r
 358                 this.minusX = deltaX;\r
 359                 this.minusY = deltaY;\r
 360         } else {\r
 361                 this[ 'dispatch' ]( X.UI.Event.SCROLL_MOVE );\r
 362         };\r
 363 \r
 364         newX = this.scrollX + deltaX;// - this.minusX;\r
 365         newY = this.scrollY + deltaY;// - this.minusY;\r
 366 \r
 367         // Slow down if outside of the boundaries\r
 368         if( 0 < newX || newX < this.maxScrollX ){\r
 369                 newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX;\r
 370         };\r
 371         \r
 372         if( 0 < newY || newY < this.maxScrollY ){\r
 373                 //console.log( 'slow... ' + newY + ' ' + this.maxScrollY );\r
 374                 newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY;\r
 375         };\r
 376 \r
 377         this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
 378         this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;\r
 379 \r
 380         //console.log( 'mov2 x:' + newX + ' y:' + newY );\r
 381         X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );\r
 382 \r
 383         if( 300 < timestamp - this.startTime ){\r
 384                 this.startTime = timestamp;\r
 385                 this.startX = this.scrollX;\r
 386                 this.startY = this.scrollY;\r
 387         };\r
 388         // イベントの拘束\r
 389         return ret | X_Callback_PREVENT_DEFAULT | X_Callback_MONOPOLY;\r
 390 };\r
 391 \r
 392 function X_UI_ScrollBox_onEnd( e ){\r
 393         var ret    = X_Callback_NONE,\r
 394                 time   = 0,\r
 395                 easing = '',\r
 396                 newX, newY,\r
 397                 momentumX, momentumY,\r
 398                 duration, distanceX, distanceY, font;\r
 399                                                 \r
 400         this[ 'unlisten' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
 401         this[ 'unlisten' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
 402         \r
 403         if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
 404                 return ret;\r
 405         };\r
 406 \r
 407         delete this.isInTransition;\r
 408         delete this.initiated;\r
 409         this.endTime = X_Timer_now();                   \r
 410 \r
 411         duration  = this.endTime - this.startTime;\r
 412         newX      = Math.round( this.scrollX );\r
 413         newY      = Math.round( this.scrollY );\r
 414         distanceX = Math.abs(newX - this.startX);\r
 415         distanceY = Math.abs(newY - this.startY);\r
 416 \r
 417         // reset if we are outside of the boundaries\r
 418         if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
 419                 return ret;\r
 420         };\r
 421 \r
 422         // we scrolled less than 10 pixels\r
 423         if( !this.moved ){\r
 424                 // this[ 'dispatch' ]( X_EVENT_CANCELED );\r
 425                 return ret;\r
 426         };\r
 427 \r
 428         // start momentum animation if needed\r
 429         if( this.momentumEnabled && duration < 300 ){\r
 430                 font = this.fontSize;\r
 431                 momentumX = this.hasHScroll ?\r
 432                                                 X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.maxScrollX, this.bounceEnabled ? this.boxWidth  * font : 0, this.deceleration ) :\r
 433                                                 { destination: newX, duration: 0 };\r
 434                 momentumY = this.hasVScroll   ?\r
 435                                                 X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.maxScrollY, this.bounceEnabled ? this.boxHeight * font : 0, this.deceleration ) :\r
 436                                                 { destination: newY, duration: 0 };\r
 437                 newX = momentumX.destination;\r
 438                 newY = momentumY.destination;\r
 439                 time = Math.max( momentumX.duration, momentumY.duration ) | 0;\r
 440                 this.isInTransition = true;\r
 441         } else {\r
 442                 //console.log( '慣性無し' );\r
 443         };\r
 444 \r
 445         if( newX != this.scrollX || newY != this.scrollY ){\r
 446                 // change easing function when scroller goes out of the boundaries\r
 447                 if( 0 < newX || newX < this.maxScrollX || 0 < newY || newY < this.maxScrollY ){\r
 448                         easing = 'quadratic';\r
 449                 };\r
 450 \r
 451                 //console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time );\r
 452                 this.scrollTo( newX, newY, time, easing, 1000 );\r
 453                 return ret;\r
 454         };\r
 455 \r
 456         //console.log( 'end1 x:' + newX + ' y:' + newY );\r
 457         this.scrollTo( newX, newY, 0, '', 1000 );       // ensures that the last position is rounded\r
 458 \r
 459         this[ 'dispatch' ]( X.UI.Event.SCROLL_END );\r
 460         \r
 461         return ret;\r
 462 };\r
 463 \r
 464 function X_UI_ScrollBox_resetPosition( that, time ){\r
 465         var x = that.scrollX,\r
 466                 y = that.scrollY;\r
 467 \r
 468         time = time || 0;\r
 469 \r
 470         if( !that.hasHScroll || 0 < that.scrollX ){\r
 471                 x = 0;\r
 472         } else\r
 473         if( that.scrollX < that.maxScrollX ){\r
 474                 x = that.maxScrollX;\r
 475         };\r
 476 \r
 477         if( !that.hasVScroll || 0 < that.scrollY ){\r
 478                 y = 0;\r
 479         } else\r
 480         if( that.scrollY < that.maxScrollY ){\r
 481                 y = that.maxScrollY;\r
 482         };\r
 483 \r
 484         if( x === that.scrollX && y === that.scrollY ){\r
 485                 //console.log( 'no バウンド y:' + y + ' max:' + that.maxScrollY );\r
 486                 return false;\r
 487         };\r
 488 \r
 489         //console.log( 'バウンド!' );\r
 490         //console.log( 'rese x:' + x + ' y:' + y );\r
 491         that.scrollTo( x, y, time, that.bounceEasing, 1000 );\r
 492 \r
 493         return true;\r
 494 };\r
 495 \r
 496 function X_UI_ScrollBox_onAnimeEnd( e ){\r
 497         if( e.target !== this._containerXNode || !this.isInTransition ){\r
 498                 return X_Callback_NONE;\r
 499         };\r
 500         //this.xnodeScroller.stop();\r
 501         if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
 502                 this.isInTransition = false;\r
 503                 this.dispatch( X.UI.Event.SCROLL_END );\r
 504         };\r
 505         return X_Callback_NONE;\r
 506 };\r
 507 \r
 508 X.UI.ScrollBox = X.UI.ChromeBox.inherits(\r
 509         'ScrollBox',\r
 510         X_Class.SUPER_ACCESS,\r
 511         X.UI._ScrollBox,\r
 512         {\r
 513                 Constructor : function(){\r
 514                         var args = [\r
 515                                                 0, // layout                    \r
 516                                                 {\r
 517                                                         name   : 'ScrollBox-Scroller',\r
 518                                                         role   : 'container',\r
 519                                                         width       : 'auto',\r
 520                                                         minWidth    : '100%',\r
 521                                                         height      : 'auto',\r
 522                                                         minHeight   : '100%'\r
 523                                                 }\r
 524                                         ],\r
 525                                 i    = arguments.length,\r
 526                                 arg, layout;\r
 527                         \r
 528                         for( ; i; ){\r
 529                                 arg = arguments[ --i ];\r
 530                                 if( arg[ 'instanceOf' ] && arg[ 'instanceOf' ]( X.UI.Layout.Base ) ){\r
 531                                         layout = arg;\r
 532                                 } else {\r
 533                                         args[ args.length ] = arg;\r
 534                                 };\r
 535                         };\r
 536                         \r
 537                         args[ 0 ] = X.UI.Layout.Vertical;\r
 538                         \r
 539                         X_Class_newPrivate(\r
 540                                 this,\r
 541                                 X.UI.Layout.Canvas,\r
 542                                 [\r
 543                                         {\r
 544                                                 width  : '100%',\r
 545                                                 height : '100%'\r
 546                                         },\r
 547                                         X.UI.VBox.apply( 0, args )\r
 548                                 ]\r
 549                         );\r
 550                 },\r
 551                 scrollX  : function(){\r
 552                         \r
 553                 },\r
 554                 scrollY  : function(){\r
 555                         \r
 556                 },\r
 557                 scrollWidth : function(){\r
 558                         \r
 559                 },\r
 560                 scrollHeight : function(){\r
 561                         \r
 562                 },\r
 563                 scrollTo : function( nodeOrX, y ){\r
 564                         \r
 565                 }\r
 566         }\r
 567 );