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

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