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