OSDN Git Service

Verison 0.6.203, fix X.Node.Anime.
[pettanr/clientJs.git] / 0.6.x / js / 20_ui / 15_ScrollBox.js
index fd8946b..e82a647 100644 (file)
@@ -3,7 +3,8 @@
  * ScrollManager\r
  * indicatorX, Y は再利用\r
  */\r
-var XUI_ScrollBox_current,\r
+var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ],\r
+       XUI_ScrollBox_current,\r
        XUI_ScrollBox_indicatorV,\r
        XUI_ScrollBox_indicatorH;\r
 \r
@@ -24,11 +25,13 @@ function XUI_ScrollBox_start( scrollBox ){
                if( scrollBox.xnode !== XUI_ScrollBox_indicatorV.parent ){\r
                        console.log( '*** Scroll Indicator add ***' );\r
                        scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );\r
-                       XUI_ScrollBox_indicatorV[ 'animate' ](\r
-                                       { opacity : 0 },\r
-                                       { opacity : 0.5 },\r
-                                       900, 'circular', 300\r
-                               );\r
+                       XUI_ScrollBox_indicatorV[ 'animate' ]({\r
+                                       'from'        : { opacity : 0 },\r
+                                       'to'          : { opacity : 0.5 },\r
+                                       'duration'    : 900,\r
+                                       'easing'      : 'circular',\r
+                                       'lazyRelease' : 300\r
+                               });\r
                        scrollBox\r
                                [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );\r
                };\r
@@ -44,11 +47,13 @@ function XUI_ScrollBox_start( scrollBox ){
                };\r
                if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){                      \r
                        scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );\r
-                       XUI_ScrollBox_indicatorH[ 'animate' ](\r
-                                       { opacity : 0 },\r
-                                       { opacity : 0.5 },\r
-                                       900, 'circular', 300\r
-                               );\r
+                       XUI_ScrollBox_indicatorH[ 'animate' ]({\r
+                                       'from'        : { opacity : 0 },\r
+                                       'to'          : { opacity : 0.5 },\r
+                                       'duration'    : 900,\r
+                                       'easing'      : 'circular',\r
+                                       'lazyRelease' : 300\r
+                               });\r
                        scrollBox\r
                                [ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );                       \r
                };\r
@@ -61,15 +66,18 @@ function XUI_ScrollBox_start( scrollBox ){
 };\r
 \r
 function XUI_ScrollBox_indicatorHandleEvent( e ){\r
+       //if( !XUI_ScrollBox_useCSSP ) return;\r
        switch( e.type ){\r
                case X_EVENT_CANCELED :\r
                case XUI_Event.SCROLL_END :\r
                        console.log( '-fadeout-' );\r
-                       this[ 'animate' ](\r
-                               { opacity : 0.5 },\r
-                               { opacity : 0 },\r
-                               900, 'circular', 300\r
-                       );\r
+                       this[ 'animate' ]({\r
+                                       'from'        : { opacity : 0.5 },\r
+                                       'to'          : { opacity : 0 },\r
+                                       'duration'    : 900,\r
+                                       'easing'      : 'circular',\r
+                                       'lazyRelease' : 300\r
+                               });\r
                        break;\r
        };\r
 };\r
@@ -207,7 +215,7 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits(
                                XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );\r
                                this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );\r
                                \r
-                               this.xnodeSlider[ 'stop' ]();\r
+                               XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
                                \r
                                XUI_ScrollBox_current === this && XUI_ScrollBox_start( null );\r
                                \r
@@ -225,7 +233,7 @@ function X_UI_ScrollBox_onLayoutBefore( e ){
        };\r
        this.scrollXRatio = this.scrollX / this.scrollXMax;\r
        this.scrollYRatio = this.scrollY / this.scrollYMax;\r
-       this.xnodeSlider[ 'stop' ]();\r
+       XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
        this.isInTransition = false;\r
        return X_CALLBACK_NONE;\r
 };\r
@@ -295,17 +303,36 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
        opt_easing  = opt_easing === '' ? '' : opt_easing || 'circular';\r
        opt_release = 0 <= opt_release ? opt_release : 300;\r
        \r
-       that.xnodeSlider[ 'animate' ](\r
-               {\r
-                       x : that.scrollX,\r
-                       y : that.scrollY\r
-               },\r
-               {\r
-                       x : x,\r
-                       y : y\r
-               },\r
-               opt_time, opt_easing, opt_release\r
-       );\r
+       console.log( 'scr ' + y );\r
+       \r
+       if( !XUI_ScrollBox_useCSSP ){\r
+               that.xnode[ 'animate' ]({\r
+                                               'from'        : {\r
+                                                               scrollX : -that.scrollX,\r
+                                                               scrollY : -that.scrollY\r
+                                                       },\r
+                                               'to'          : {\r
+                                                               scrollX : -x,\r
+                                                               scrollY : -y\r
+                                                       },\r
+                                               'duration'    : opt_time,\r
+                                               'easing'      : opt_easing\r
+                                       });     \r
+       } else {\r
+               that.xnodeSlider[ 'animate' ]({\r
+                                               'from'        : {\r
+                                                               x : that.scrollX,\r
+                                                               y : that.scrollY\r
+                                                       },\r
+                                               'to'          : {\r
+                                                               x : x,\r
+                                                               y : y\r
+                                                       },\r
+                                               'duration'    : opt_time,\r
+                                               'easing'      : opt_easing,\r
+                                               'lazyRelease' : opt_release\r
+                                       });             \r
+       };\r
 \r
        if( X_UA[ 'IE' ] < 6 ){\r
                XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' );\r
@@ -320,16 +347,17 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
                        [ 'css' ]({\r
                                height : ( indicatorH | 0 ) + 'px'\r
                        })\r
-                       [ 'animate' ](\r
-                       {\r
-                               y : scrollBoxH * that.scrollY / that.scrollYMax\r
-                       },\r
-                       {\r
-                               y : scrollBoxH * y / that.scrollYMax,\r
-                               opacity : 0.5\r
-                       },\r
-                       opt_time, opt_easing, opt_release\r
-               );\r
+                       [ 'animate' ]({\r
+                                       'from'        : {\r
+                                                       y       : scrollBoxH * that.scrollY / that.scrollYMax },\r
+                                       'to'          : {\r
+                                                       y       : scrollBoxH * y / that.scrollYMax,\r
+                                                       opacity : 0.5\r
+                                               },\r
+                                       'duration'    : opt_time,\r
+                                       'easing'      : opt_easing,\r
+                                       'lazyRelease' : opt_release\r
+                               });\r
        };\r
        if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){\r
                indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );\r
@@ -338,16 +366,17 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
                        [ 'css' ]({\r
                                width : ( indicatorW | 0 ) + 'px'\r
                        })\r
-                       [ 'animate' ](\r
-                       {\r
-                               x : scrollBoxW * that.scrollX / that.scrollXMax\r
-                       },\r
-                       {\r
-                               x : scrollBoxW * x / that.scrollXMax,\r
-                               opacity : 0.5\r
-                       },\r
-                       opt_time, opt_easing, opt_release\r
-               );\r
+                       [ 'animate' ]({\r
+                                       'from'        : {\r
+                                                       x       : scrollBoxW * that.scrollX / that.scrollXMax },\r
+                                       'to'          : {\r
+                                                       x       : scrollBoxW * x / that.scrollXMax,\r
+                                                       opacity : 0.5\r
+                                               },\r
+                                       'duration'    : opt_time,\r
+                                       'easing'      : opt_easing,\r
+                                       'lazyRelease' : opt_release\r
+                               });\r
        };\r
        \r
        that.scrollX   = x;\r
@@ -378,8 +407,8 @@ function X_UI_ScrollBox_onStart( e ){
                //console.log( '-1-' );\r
                this[ 'dispatch' ]( XUI_Event.SCROLL_END );\r
                // TODO current位置\r
-               this.xnodeSlider[ 'stop' ]();\r
-       };                      \r
+               XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();\r
+       };\r
 \r
        this.startX    = this.scrollX;\r
        this.startY    = this.scrollY;\r
@@ -407,7 +436,7 @@ function X_UI_ScrollBox_onMove( e ){
        };\r
 \r
        // gpu の用意\r
-       if( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ){\r
+       if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ) ){\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
@@ -480,7 +509,7 @@ function X_UI_ScrollBox_onMove( e ){
        this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;\r
        this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;\r
 \r
-       //console.log( 'mov2 x:' + newX + ' y:' + 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