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

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