OSDN Git Service

Version 0.6.138, working X.UI.ScrollBox!, fix Node.prev & Node.next.
[pettanr/clientJs.git] / 0.6.x / js / 20_ui / 15_ScrollBox.js
index 03de673..0191bb0 100644 (file)
@@ -30,14 +30,16 @@ function X_UI_ScrollBox_momentum( current, start, time, lowerMargin, wrapperSize
 \r
 var X_UI_ScrollBox_SUPPORT_ATTRS = {\r
                // スクロール開始するために必要な移動距離、縦か横、どちらか制限する場合、より重要\r
-               directionLockThreshold : [   10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ],\r
-               scrollX                : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
-               scrollY                : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
-               enabled                : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
-               bounce                 : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
-               bounceTime             : [  600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ],\r
-               useWheel               : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
-               useKey                 : [ true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               directionLockThreshold : [     10, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.LENGTH ],\r
+               scrollXEnabled         : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               scrollYEnabled         : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               scrollEnabled          : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               bounceEnabled          : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               bounceTime             : [    600, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.TIME ],\r
+               useWheel               : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               useKey                 : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               hasScrollShadow        : [   true, X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.BOOLEAN ],\r
+               scrollShadowColor      : [ '#000', X.UI.Dirty.CLEAN, X.UI.Attr.USER.UINODE, X.UI.Attr.Type.COLOR ]\r
        };\r
 \r
 \r
@@ -49,28 +51,30 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits(
                //elmScroller   : null,\r
                //elmScrollbar  : null,\r
                \r
-               supportAttrs   : X.UI.Attr.createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ),\r
+               directionLockThreshold : 10,\r
+               scrollXEnabled         : true,\r
+               scrollYEnabled         : true,\r
+               scrollEnabled          : true,\r
+               bounceEnabled          : true,\r
+               momentumEnabled        : true,\r
+               bounceTime             : 600,\r
+               useWheel               : true,\r
+               useKey                 : true,\r
+               hasScrollShadow        : true,\r
+               scrollShadowColor      : '#000',\r
                \r
-               scrolling      : false,\r
+               supportAttrs    : XUI_Attr_createAttrDef( X.UI.Attr.Support, X_UI_ScrollBox_SUPPORT_ATTRS ),\r
+               \r
+               scrolling       : false,\r
                \r
                initiated       : '',\r
                moved               : false,\r
-               distX               : 0,\r
-               distY               : 0,\r
-               directionX      : 0,\r
-               directionY      : 0,\r
                directionLocked : '',\r
                startTime       : 0,\r
                endTime         : 0,\r
                isAnimating     : false,\r
-               startX          : 0,\r
-               startY          : 0,\r
-               absStartX       : 0,\r
-               absStartY       : 0,\r
-               pointX          : 0,\r
-               pointY          : 0,\r
-               maxScrollX      : 0,\r
-               maxScrollY      : 0,\r
+               isInTransition  : false,\r
+\r
                hasHScroll      : false,\r
                hasVScroll      : false,\r
 \r
@@ -78,9 +82,23 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits(
                wheelTimeout    : 0,\r
                requestFrameID  : 0,\r
                \r
-               _scrollX        : 0,\r
-               _scrollY        : 0,\r
-               scrollXPercent  : 0,\r
+               fontSize        : 0,\r
+               \r
+               scrollX         : 0, // px\r
+               scrollY         : 0, // px\r
+               maxScrollX      : 0, // px\r
+               maxScrollY      : 0, // px\r
+               startX          : 0, // px\r
+               startY          : 0, // px\r
+               absStartX       : 0, // px\r
+               absStartY       : 0, // px\r
+               pointX          : 0, // px\r
+               pointY          : 0, // px\r
+               distX               : 0, // px\r
+               distY               : 0, // px\r
+               directionX      : 0, // px\r
+               directionY      : 0, // px      \r
+               scrollXPercent  : 0, // この値は scroll 不要になっても保持される。 scroll 必要時に参照される\r
                scrollYPercent  : 0,\r
                \r
                lastScrollWidth  : 0,\r
@@ -94,97 +112,49 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits(
                Constructor : function( layout, args ){\r
                        this[ 'Super' ]( layout, args );\r
                        this._containerNode = X_Class_getPrivate( this.containerNode );\r
+                       this._containerXNode = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );\r
+                       this.xnode[ 'className' ]( 'ScrollBox' );\r
                },\r
                \r
                creationComplete : function(){\r
                        X.UI._Box.prototype.creationComplete.apply( this, arguments );\r
                        this.scrollManager;\r
-                       this._check();\r
                },\r
                \r
                calculate : function(){\r
-                       this.lastScrollWidth  = this.scrollWidth;\r
-                       this.lastScrollHeight = this.scrollHeight;\r
+                       this.lastScrollWidth  = this._containerNode.boxWidth;\r
+                       this.lastScrollHeight = this._containerNode.boxHeight;\r
                        this.lastBoxWidth     = this.boxWidth;\r
                        this.lastBoxHeight    = this.boxHeight;\r
                        \r
                        X.UI._Box.prototype.calculate.apply( this, arguments );\r
                        \r
+                       // TODO root の layout_complete 後に。\r
+                       // TODO calculate 前に scroll の解放。\r
+                       \r
                        if(\r
-                                       this.lastScrollWidth !== this.scrollWidth || this.lastScrollHeight !== this.scrollHeight ||\r
+                                       this.lastScrollWidth  !== this._containerNode.boxWidth ||\r
+                                       this.lastScrollHeight !== this._containerNode.boxHeight ||\r
                                        this.lastBoxWidth    !== this.boxWidth    || this.lastBoxHeight    !== this.boxHeight\r
                                ){\r
-                                       // scroll の停止、GPU の解除\r
-                                       this._check();\r
+                                       X_UI_rootData[ 'listenOnce' ]( X.UI.Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
                                };\r
-               \r
                },\r
                \r
                scrollBy : function( x, y, opt_time, opt_easing ){\r
-                       this.scrollTo( this.x + x, this.y + y, opt_time, opt_easing );\r
+                       this.scrollTo( this.scrollX + x, this.scrollY + y, opt_time, opt_easing );\r
                },\r
        \r
-               scrollTo : function( x, y, opt_time, opt_easing ){\r
-                       opt_time   = 0 <= opt_time ? opt_time : 0;\r
-                       opt_easing = opt_easing || 'circular';\r
-       \r
-                       this.isInTransition = !!opt_time;\r
-       \r
-                       this.containerNode.animate(\r
-                               {\r
-                                       x : this.x,\r
-                                       y : this.y\r
-                               },\r
-                               {\r
-                                       x : x,\r
-                                       y : y\r
-                               },\r
-                               opt_time, opt_easing, 1000\r
-                       );\r
+               scrollTo : function( x, y, opt_time, opt_easing, opt_release ){\r
+                       //if( this.scrollX === x && this.scrollY === y ) return;\r
+                       \r
+                       opt_time    = 0 <= opt_time ? opt_time : 0;\r
+                       opt_easing  = opt_easing || 'circular';\r
+                       opt_release = 0 <= opt_release ? opt_release : 300;\r
        \r
-                       this.x = x;\r
-                       this.y = y;\r
+                       this.isInTransition = 0 < opt_time;\r
        \r
-                       if( this.indicators ){\r
-                               for( i = this.indicators.length; i--; ){\r
-                                       this.indicators[ i ].updatePosition( opt_time, opt_easing );\r
-                               };\r
-                       };\r
-               },\r
-               \r
-               _check : function(){\r
-                       var needVScroll, needHScroll;\r
-                       if( this.boxWidth < this._containerNode.scrollWidth || this.boxHeight < this._containerNode.scrollHeight ){\r
-                               // scroll\r
-                               if( this.scrolling ){\r
-                                       // fix scroll position from scrollXPercent, scrollYPercent\r
-                                       //\r
-                                       \r
-                               } else {\r
-                                       // create scroller\r
-                                       \r
-                                       \r
-                                       this[ 'listen' ]( X.UI.Event.POINTER_START, X_UI_ScrollBox_onStart );\r
-                                       \r
-                                       \r
-                                       this._move( 0, 0 );\r
-                                       \r
-                                       this.scrolling = true;\r
-                               };\r
-                       } else\r
-                       // no scroll\r
-                       if( this.scrolling ){\r
-                               // remove scroller\r
-                               this[ 'unlisten' ]( X.UI.Event.POINTER_START );\r
-                               \r
-                               ( this._scrollX !== 0 || this._scrollY !== 0 ) && this._move( 0, 0 );\r
-                               \r
-                               delete this.scrolling;\r
-                       };\r
-               },\r
-               \r
-               _move : function( x, y ){\r
-                       \r
+                       X_UI_ScrollBox_translate( this, x, y, opt_time, opt_easing, opt_release );\r
                },\r
                \r
                _remove : function(){\r
@@ -197,16 +167,102 @@ X.UI._ScrollBox = X.UI._ChromeBox.inherits(
        }\r
 );\r
 \r
+function X_UI_ScrollBox_onLayoutBefore( e ){\r
+       //this._containerXNode.stop();\r
+};\r
+\r
+function X_UI_ScrollBox_onLayoutComplete( e ){\r
+       // scroll の停止、GPU の解除\r
+       var font = this.fontSize = this._containerXNode.call( 'fontSize' );\r
+       \r
+       this.maxScrollX = ( this.boxWidth  - this._containerNode.boxWidth ) * font;\r
+       this.maxScrollY = ( this.boxHeight - this._containerNode.boxHeight ) * font;\r
+\r
+       this.hasHScroll = this.scrollXEnabled && this.maxScrollX < 0;\r
+       this.hasVScroll = this.scrollYEnabled && this.maxScrollY < 0;\r
+\r
+       if( !this.hasHScroll ){\r
+               this.maxScrollX  = 0;\r
+               //this.scrollWidth = this.boxWidth;\r
+       };\r
+\r
+       if( !this.hasVScroll ){\r
+               this.maxScrollY   = 0;\r
+               //this.scrollHeight = this.boxHeight;\r
+       };\r
+\r
+       delete this.endTime;\r
+       delete this.directionX;\r
+       delete this.directionY;\r
+\r
+       //this.wrapperOffset = this.xnodeWrapper[ 'offset' ]();\r
+\r
+       //this[ 'dispatch' ]('refresh');\r
+\r
+       X_UI_ScrollBox_resetPosition( this, 0 );\r
+\r
+       if( this.hasHScroll || this.hasVScroll ){\r
+               // scroll が必要。\r
+               if( this.scrolling ){\r
+                       this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent, 100 );\r
+               } else {\r
+                       // scroller 作る\r
+                       this[ 'listen' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
+                       X_UI_rootData[ 'listen' ]( X.UI.Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );\r
+                       \r
+                       this.scrollTo( this.maxScrollX * this.scrollXPercent, this.maxScrollY * this.scrollYPercent );\r
+                       this.scrolling = true;\r
+               };\r
+       } else\r
+       // scroll 不要\r
+       if( this.scrolling ){\r
+               // scroller 削除\r
+               this[ 'unlisten' ]( X.UI.Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );\r
+               X_UI_rootData[ 'unlisten' ]( X.UI.Event.LAYOUT_BEFORE,   this, X_UI_ScrollBox_onLayoutBefore );\r
+               \r
+               ( this.scrollX !== 0 || this.scrollY !== 0 ) && this.scrollTo( 0, 0 );\r
+               \r
+               delete this.scrolling;\r
+       };\r
+};\r
+\r
+               function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){\r
+                       \r
+                       opt_time    = 0 <= opt_time ? opt_time : 0;\r
+                       opt_easing  = opt_easing === '' ? '' : opt_easing || 'circular';\r
+                       opt_release = 0 <= opt_release ? opt_release : 300;\r
+                       \r
+                       that._containerXNode.animate(\r
+                               {\r
+                                       x : that.scrollX,\r
+                                       y : that.scrollY\r
+                               },\r
+                               {\r
+                                       x : x | 0,\r
+                                       y : y | 0\r
+                               },\r
+                               opt_time, opt_easing, opt_release\r
+                       );\r
+                       \r
+                       that.scrollX = x | 0;\r
+                       that.scrollY = y | 0;\r
+                       \r
+                       if( that.indicators ){\r
+                               for( i = that.indicators.length; i--; ){\r
+                                       that.indicators[ i ].updatePosition();\r
+                               };\r
+                       };\r
+               };\r
 \r
 function X_UI_ScrollBox_onStart( e ){\r
        var ret = X_Callback_NONE;\r
-                                               \r
+\r
        // React to left mouse button only\r
        if( e.pointerType === 'mouse' && e.button !== 0 ){\r
                return ret;\r
        };\r
-\r
-       if( !this.enabled || ( this.initiated && e.pointerType !== this.initiated ) ){\r
+       \r
+       if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){\r
                return ret;\r
        };\r
 \r
@@ -220,22 +276,21 @@ function X_UI_ScrollBox_onStart( e ){
        this.startTime       = X_Timer_now();\r
 \r
        // スクロール中の停止\r
-       if( this.isAnimating ){\r
-               delete this.isAnimating;\r
+       if( this.isInTransition || this.isAnimating ){\r
+               this.isInTransition = this.isAnimating = false;\r
                this[ 'dispatch' ]( X.UI.Event.SCROLL_END );\r
        };                      \r
 \r
-       this.startX    = this.x;\r
-       this.startY    = this.y;\r
-       this.absStartX = this.x;\r
-       this.absStartY = this.y;\r
+       this.startX    = this.scrollX;\r
+       this.startY    = this.scrollY;\r
+       this.absStartX = this.scrollX;\r
+       this.absStartY = this.scrollY;\r
        this.pointX    = e.pageX;\r
        this.pointY    = e.pageY;\r
        \r
-       this[ 'listen' ]( X.UI.Event.POINTER_MOVE, X_UI_ScrollBox_onMove );\r
-       this[ 'listen' ]( X.UI.Event.POINTER_END , X_UI_ScrollBox_onEnd );\r
+       this[ 'listen' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
+       this[ 'listen' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
 \r
-       //console.log( 'start : 3' );\r
        return ret | X_Callback_PREVENT_DEFAULT;\r
 };\r
 \r
@@ -246,14 +301,15 @@ function X_UI_ScrollBox_onMove( e ){
                absDistX, absDistY;\r
        // 規定以上の move でスクロール開始\r
        \r
-       if( !this.enabled || e.pointerType !== this.initiated ){\r
+       if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
                return ret;\r
        };\r
 \r
        // gpu の用意\r
-       if( !this.containerNode[ '_anime' ] ){\r
-               console.log( 'gpuレイヤーの用意' );\r
-               this._translate( this.x, this.y );\r
+       if( !this._containerXNode[ '_anime' ] ){\r
+               //console.log( 'gpuレイヤーの用意 ' + e.pageY );\r
+               //console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );\r
+               X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );\r
                return ret;\r
        };\r
 \r
@@ -305,26 +361,29 @@ function X_UI_ScrollBox_onMove( e ){
                this[ 'dispatch' ]( X.UI.Event.SCROLL_MOVE );\r
        };\r
 \r
-       newX = this.x + deltaX;// - this.minusX;\r
-       newY = this.y + deltaY;// - this.minusY;\r
+       newX = this.scrollX + deltaX;// - this.minusX;\r
+       newY = this.scrollY + deltaY;// - this.minusY;\r
 \r
        // Slow down if outside of the boundaries\r
        if( 0 < newX || newX < this.maxScrollX ){\r
-               newX = this.bounce ? this.x + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX;\r
+               newX = this.bounceEnabled ? this.scrollX + ( deltaX ) / 3 : 0 < newX ? 0 : this.maxScrollX;\r
        };\r
+       \r
        if( 0 < newY || newY < this.maxScrollY ){\r
-               newY = this.bounce ? this.y + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY;\r
+               //console.log( 'slow... ' + newY + ' ' + this.maxScrollY );\r
+               newY = this.bounceEnabled ? this.scrollY + ( deltaY ) / 3 : 0 < newY ? 0 : this.maxScrollY;\r
        };\r
 \r
        this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
        this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;\r
 \r
-       this._translate( newX, newY );\r
+       //console.log( 'mov2 x:' + newX + ' y:' + newY );\r
+       X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );\r
 \r
        if( 300 < timestamp - this.startTime ){\r
                this.startTime = timestamp;\r
-               this.startX = this.x;\r
-               this.startY = this.y;\r
+               this.startX = this.scrollX;\r
+               this.startY = this.scrollY;\r
        };\r
        // イベントの拘束\r
        return ret | X_Callback_PREVENT_DEFAULT | X_Callback_MONOPOLY;\r
@@ -336,12 +395,12 @@ function X_UI_ScrollBox_onEnd( e ){
                easing = '',\r
                newX, newY,\r
                momentumX, momentumY,\r
-               duration, distanceX, distanceY;\r
+               duration, distanceX, distanceY, font;\r
                                                \r
-       this[ 'unlisten' ]( X.UI.Event.POINTER_MOVE, X_UI_ScrollBox_onMove );\r
-       this[ 'unlisten' ]( X.UI.Event.POINTER_END,  X_UI_ScrollBox_onEnd );\r
+       this[ 'unlisten' ]( X.UI.Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );\r
+       this[ 'unlisten' ]( [ X.UI.Event._POINTER_UP, X.UI.Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );\r
        \r
-       if( !this.enabled || e.pointerType !== this.initiated ){\r
+       if( !this.scrollEnabled || e.pointerType !== this.initiated ){\r
                return ret;\r
        };\r
 \r
@@ -350,13 +409,13 @@ function X_UI_ScrollBox_onEnd( e ){
        this.endTime = X_Timer_now();                   \r
 \r
        duration  = this.endTime - this.startTime;\r
-       newX      = Math.round( this.x );\r
-       newY      = Math.round( this.y );\r
+       newX      = Math.round( this.scrollX );\r
+       newY      = Math.round( this.scrollY );\r
        distanceX = Math.abs(newX - this.startX);\r
        distanceY = Math.abs(newY - this.startY);\r
 \r
        // reset if we are outside of the boundaries\r
-       if( X_UI_ScrollBox_resetPosition( this, this.options.bounceTime ) ){\r
+       if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
                return ret;\r
        };\r
 \r
@@ -365,116 +424,85 @@ function X_UI_ScrollBox_onEnd( e ){
                // this[ 'dispatch' ]( X_EVENT_CANCELED );\r
                return ret;\r
        };\r
-       \r
-       this.scrollTo( newX, newY, 0 ); // ensures that the last position is rounded\r
 \r
        // start momentum animation if needed\r
-       if( this.options.momentum && duration < 300 ){\r
+       if( this.momentumEnabled && duration < 300 ){\r
+               font = this.fontSize;\r
                momentumX = this.hasHScroll ?\r
-                                               X_UI_ScrollBox_momentum( this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth  : 0, this.options.deceleration ) :{ destination: newX, duration: 0 };\r
+                                               X_UI_ScrollBox_momentum( this.scrollX, this.startX, duration, this.maxScrollX, this.bounceEnabled ? this.boxWidth  * font : 0, this.deceleration ) :\r
+                                               { destination: newX, duration: 0 };\r
                momentumY = this.hasVScroll   ?\r
-                                               X_UI_ScrollBox_momentum( this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration ) : { destination: newY, duration: 0 };\r
+                                               X_UI_ScrollBox_momentum( this.scrollY, this.startY, duration, this.maxScrollY, this.bounceEnabled ? this.boxHeight * font : 0, this.deceleration ) :\r
+                                               { destination: newY, duration: 0 };\r
                newX = momentumX.destination;\r
                newY = momentumY.destination;\r
-               time = Math.max( momentumX.duration, momentumY.duration );\r
-               this.isInTransition = 1;\r
+               time = Math.max( momentumX.duration, momentumY.duration ) | 0;\r
+               this.isInTransition = true;\r
+       } else {\r
+               //console.log( '慣性無し' );\r
        };\r
 \r
-       if( newX != this.x || newY != this.y ){\r
+       if( newX != this.scrollX || newY != this.scrollY ){\r
                // change easing function when scroller goes out of the boundaries\r
                if( 0 < newX || newX < this.maxScrollX || 0 < newY || newY < this.maxScrollY ){\r
                        easing = 'quadratic';\r
                };\r
 \r
-               this.scrollTo( newX, newY, time, easing );\r
+               //console.log( 'end2 x:' + newX + ' y:' + newY + ' t:' + time );\r
+               this.scrollTo( newX, newY, time, easing, 1000 );\r
                return ret;\r
        };\r
 \r
+       //console.log( 'end1 x:' + newX + ' y:' + newY );\r
+       this.scrollTo( newX, newY, 0, '', 1000 );       // ensures that the last position is rounded\r
+\r
        this[ 'dispatch' ]( X.UI.Event.SCROLL_END );\r
        \r
        return ret;\r
 };\r
 \r
 function X_UI_ScrollBox_resetPosition( that, time ){\r
-       var x = this.x,\r
-               y = this.y;\r
+       var x = that.scrollX,\r
+               y = that.scrollY;\r
 \r
        time = time || 0;\r
 \r
-       if( !this.hasHScroll || 0 < this.x ){\r
+       if( !that.hasHScroll || 0 < that.scrollX ){\r
                x = 0;\r
        } else\r
-       if( this.x < this.maxScrollX ){\r
-               x = this.maxScrollX;\r
+       if( that.scrollX < that.maxScrollX ){\r
+               x = that.maxScrollX;\r
        };\r
 \r
-       if( !this.hasVScroll || 0 < this.y ){\r
+       if( !that.hasVScroll || 0 < that.scrollY ){\r
                y = 0;\r
        } else\r
-       if( this.y < this.maxScrollY ){\r
-               y = this.maxScrollY;\r
+       if( that.scrollY < that.maxScrollY ){\r
+               y = that.maxScrollY;\r
        };\r
 \r
-       if( x === this.x && y === this.y ){\r
-               console.log( 'no バウンド' );\r
+       if( x === that.scrollX && y === that.scrollY ){\r
+               //console.log( 'no バウンド y:' + y + ' max:' + that.maxScrollY );\r
                return false;\r
        };\r
 \r
-       console.log( 'バウンド!' );\r
-       this.scrollTo( x, y, time, this.options.bounceEasing );\r
+       //console.log( 'バウンド!' );\r
+       //console.log( 'rese x:' + x + ' y:' + y );\r
+       that.scrollTo( x, y, time, that.bounceEasing, 1000 );\r
 \r
        return true;\r
 };\r
 \r
-function X_UI_ScrollBox_translate( x, y ){\r
-       this.containerNode.animate(\r
-               {\r
-                       x : this.x,\r
-                       y : this.y\r
-               },\r
-               {\r
-                       x : x,\r
-                       y : y\r
-               },\r
-               0, '', 300\r
-       );\r
-       \r
-       this.x = x;\r
-       this.y = y;\r
-       \r
-       if( this.indicators ){\r
-               for( i = this.indicators.length; i--; ){\r
-                       this.indicators[ i ].updatePosition();\r
-               };\r
-       };\r
-};\r
-\r
-function X_UI_ScrollBox_refresh( remove ){\r
-       this.maxScrollX = this.boxWidth  - this.containerNode.boxWidth;\r
-       this.maxScrollY = this.boxHeight - this.containerNode.boxHeight;\r
-\r
-       this.hasHScroll = this.User[ 'attr' ]( 'scrollX' ) && this.maxScrollX < 0;\r
-       this.hasVScroll = this.User[ 'attr' ]( 'scrollY' ) && this.maxScrollY < 0;\r
-\r
-       if( !this.hasHScroll ){\r
-               this.maxScrollX    = 0;\r
-               this.scrollerWidth = this.wrapperWidth;\r
+function X_UI_ScrollBox_onAnimeEnd( e ){\r
+       if( e.target !== this._containerXNode || !this.isInTransition ){\r
+               return X_Callback_NONE;\r
        };\r
-\r
-       if( !this.hasVScroll ){\r
-               this.maxScrollY     = 0;\r
-               this.scrollerHeight = this.wrapperHeight;\r
+       //this.xnodeScroller.stop();\r
+       if( !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){\r
+               this.isInTransition = false;\r
+               this.dispatch( X.UI.Event.SCROLL_END );\r
        };\r
-\r
-       delete this.endTime;\r
-       delete this.directionX;\r
-       delete this.directionY;\r
-\r
-       this.wrapperOffset = this.xnodeWrapper[ 'offset' ]();\r
-\r
-       //this[ 'dispatch' ]('refresh');\r
-\r
-       X_UI_ScrollBox_resetPosition( this, 0 );\r
+       return X_Callback_NONE;\r
 };\r
 \r
 X.UI.ScrollBox = X.UI.ChromeBox.inherits(\r
@@ -483,7 +511,17 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits(
        X.UI._ScrollBox,\r
        {\r
                Constructor : function(){\r
-                       var args = [],\r
+                       var args = [\r
+                                               0, // layout                    \r
+                                               {\r
+                                                       name   : 'ScrollBox-Scroller',\r
+                                                       role   : 'container',\r
+                                                       width       : 'auto',\r
+                                                       minWidth    : '100%',\r
+                                                       height      : 'auto',\r
+                                                       minHeight   : '100%'\r
+                                               }\r
+                                       ],\r
                                i    = arguments.length,\r
                                arg, layout;\r
                        \r
@@ -495,24 +533,20 @@ X.UI.ScrollBox = X.UI.ChromeBox.inherits(
                                        args[ args.length ] = arg;\r
                                };\r
                        };\r
-                       /*\r
-                       this.style = DisplayNodeStyle( this,\r
-                               X_Class_newPrivate(\r
-                                       this,\r
-                                       X.UI.Layout.Canvas,\r
-                                       [\r
-                                               Box(\r
-                                                       layout || VerticalLayoutManager,\r
-                                                       {\r
-                                                               name : 'ScrollBox-Scroller',\r
-                                                               role : 'container'\r
-                                                       },\r
-                                                       args\r
-                                               )\r
-                                       ]\r
-                               )\r
+                       \r
+                       args[ 0 ] = X.UI.Layout.Vertical;\r
+                       \r
+                       X_Class_newPrivate(\r
+                               this,\r
+                               X.UI.Layout.Canvas,\r
+                               [\r
+                                       {\r
+                                               width  : '100%',\r
+                                               height : '100%'\r
+                                       },\r
+                                       X.UI.VBox.apply( 0, args )\r
+                               ]\r
                        );\r
-                       this.style.addName( 'ScrollBox' ); */\r
                },\r
                scrollX  : function(){\r
                        \r