X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F20_ui%2F15_ScrollBox.js;h=e82a647c8036482834b8ca7d95c9cd54d1be6d35;hb=bafa8683f87b2f909d1301fca80684bf9ff221ed;hp=7574493e93dd1e273daeeefe81b15e2aa636e441;hpb=54eba266c29baf743f6ac67942a2788cd697b12d;p=pettanr%2FclientJs.git

diff --git a/0.6.x/js/20_ui/15_ScrollBox.js b/0.6.x/js/20_ui/15_ScrollBox.js
index 7574493..e82a647 100644
--- a/0.6.x/js/20_ui/15_ScrollBox.js
+++ b/0.6.x/js/20_ui/15_ScrollBox.js
@@ -3,51 +3,81 @@
  * ScrollManager
  * indicatorX, Y は再利用
  */
-var XUI_ScrollBox_current,
+var XUI_ScrollBox_useCSSP = !X_UA[ 'IE5' ],
+	XUI_ScrollBox_current,
 	XUI_ScrollBox_indicatorV,
 	XUI_ScrollBox_indicatorH;
 
 function XUI_ScrollBox_start( scrollBox ){
 	// 既存スクロールの停止
-	if( scrollBox.hasVScroll ){
+	if( XUI_ScrollBox_current && XUI_ScrollBox_current !== scrollBox ){
+		XUI_ScrollBox_indicatorV &&
+		XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );
+		
+		XUI_ScrollBox_indicatorH &&
+		XUI_ScrollBox_current[ 'unlisten' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );
+	};
+
+	if( scrollBox && scrollBox.hasVScroll ){
 		if( !XUI_ScrollBox_indicatorV ){
 			XUI_ScrollBox_indicatorV = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorV' );
-			
 		};
-		XUI_ScrollBox_indicatorV.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );
-		XUI_ScrollBox_indicatorV[ 'animate' ](
-				{ opacity : 0 },
-				{ opacity : 1 },
-				900, 'circular', 300
-			);
-		scrollBox
-			[ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );
+		if( scrollBox.xnode !== XUI_ScrollBox_indicatorV.parent ){
+			console.log( '*** Scroll Indicator add ***' );
+			scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorV );
+			XUI_ScrollBox_indicatorV[ 'animate' ]({
+					'from'        : { opacity : 0 },
+					'to'          : { opacity : 0.5 },
+					'duration'    : 900,
+					'easing'      : 'circular',
+					'lazyRelease' : 300
+				});
+			scrollBox
+				[ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorV, XUI_ScrollBox_indicatorHandleEvent );
+		};
+	} else
+	if( XUI_ScrollBox_indicatorV ){
+		console.log( '*** Scroll Indicator remove ***' );
+		XUI_ScrollBox_indicatorV[ 'remove' ]();
 	};
-	if( scrollBox.hasHScroll ){
+	
+	if( scrollBox && scrollBox.hasHScroll ){
 		if( !XUI_ScrollBox_indicatorH ){
 			XUI_ScrollBox_indicatorH = X_Doc_create( 'div' )[ 'className' ]( 'ScrollBox-IndicatorH' );
 		};
-		XUI_ScrollBox_indicatorH.parent !== scrollBox.xnode && scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );
-		XUI_ScrollBox_indicatorH[ 'animate' ](
-				{ opacity : 0 },
-				{ opacity : 1 },
-				900, 'circular', 300
-			);
-		scrollBox
-			[ 'listenOnce' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );
+		if( scrollBox.xnode !== XUI_ScrollBox_indicatorH.parent ){			
+			scrollBox.xnode[ 'append' ]( XUI_ScrollBox_indicatorH );
+			XUI_ScrollBox_indicatorH[ 'animate' ]({
+					'from'        : { opacity : 0 },
+					'to'          : { opacity : 0.5 },
+					'duration'    : 900,
+					'easing'      : 'circular',
+					'lazyRelease' : 300
+				});
+			scrollBox
+				[ 'listen' ]( [ X_EVENT_CANCELED, XUI_Event.SCROLL_END ], XUI_ScrollBox_indicatorH, XUI_ScrollBox_indicatorHandleEvent );			
+		};
+	} else
+	if( XUI_ScrollBox_indicatorH ){
+		XUI_ScrollBox_indicatorH[ 'remove' ]();
 	};
+	
+	XUI_ScrollBox_current = scrollBox;
 };
 
 function XUI_ScrollBox_indicatorHandleEvent( e ){
+	//if( !XUI_ScrollBox_useCSSP ) return;
 	switch( e.type ){
 		case X_EVENT_CANCELED :
 		case XUI_Event.SCROLL_END :
 			console.log( '-fadeout-' );
-			this[ 'animate' ](
-				{ opacity : 1 },
-				{ opacity : 0 },
-				900, 'circular', 300
-			);
+			this[ 'animate' ]({
+					'from'        : { opacity : 0.5 },
+					'to'          : { opacity : 0 },
+					'duration'    : 900,
+					'easing'      : 'circular',
+					'lazyRelease' : 300
+				});
 			break;
 	};
 };
@@ -174,8 +204,22 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits(
 		
 		_remove : function(){
 			XUI_AbstractUINode.prototype._remove.apply( this, arguments );
+			
 			if( this.scrolling ){
-				// remove scroll
+				// scroller 削除
+				this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )
+					[ 'unlisten' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )
+					[ 'unlisten' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );
+				XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );
+				
+				XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_COMPLETE, this, X_UI_ScrollBox_onLayoutComplete );
+				this[ 'unlisten' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );
+				
+				XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
+				
+				XUI_ScrollBox_current === this && XUI_ScrollBox_start( null );
+				
+				this.scrolling = false;
 			};
 		}
 		
@@ -183,13 +227,13 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits(
 );
 
 function X_UI_ScrollBox_onLayoutBefore( e ){
-	if( e[ 'cancelable' ] && this.isInTransition && X_Node_Anime_translateZ ){
+	if( e[ 'cancelable' ] && this.isInTransition && X_NodeAnime_translateZ ){
 		this[ 'listenOnce' ]( XUI_Event.SCROLL_END, XUI_rootData, XUI_rootData.calculate );
 		return X_CALLBACK_PREVENT_DEFAULT;
 	};
 	this.scrollXRatio = this.scrollX / this.scrollXMax;
 	this.scrollYRatio = this.scrollY / this.scrollYMax;
-	this.xnodeSlider[ 'stop' ]();
+	XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
 	this.isInTransition = false;
 	return X_CALLBACK_NONE;
 };
@@ -224,11 +268,9 @@ function X_UI_ScrollBox_onLayoutComplete( e ){
 			X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );
 		} else {
 			// scroller 作る
-			// shadow の　listen には this が必要!
-			// TODO AbstractUI の listen が悪い!
-			this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )
-				[ 'listen' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );
-	this[ 'listen' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );
+			this[ 'listen' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )
+				[ 'listen' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )
+				[ 'listen' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );
 			XUI_rootData[ 'listen' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );
 			
 			X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );
@@ -238,9 +280,9 @@ function X_UI_ScrollBox_onLayoutComplete( e ){
 	// scroll 不要
 	if( this.scrolling ){
 		// scroller 削除
-		this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart )
-			[ 'unlisten' ]( XUI_Event.DRAG, this, X_UI_ScrollBox_onMove );
-	this[ 'unlisten' ]( XUI_Event.DRAG_END, this, X_UI_ScrollBox_onEnd );
+		this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, X_UI_ScrollBox_onStart )
+			[ 'unlisten' ]( XUI_Event.DRAG, X_UI_ScrollBox_onMove )
+			[ 'unlisten' ]( XUI_Event.DRAG_END, X_UI_ScrollBox_onEnd );
 		XUI_rootData[ 'unlisten' ]( XUI_Event.LAYOUT_BEFORE, this, X_UI_ScrollBox_onLayoutBefore );
 		
 		( this.scrollX !== 0 || this.scrollY !== 0 ) && X_UI_ScrollBox_translate( this, 0, 0, 100, '', 300 );
@@ -261,24 +303,43 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
 	opt_easing  = opt_easing === '' ? '' : opt_easing || 'circular';
 	opt_release = 0 <= opt_release ? opt_release : 300;
 	
-	that.xnodeSlider[ 'animate' ](
-		{
-			x : that.scrollX,
-			y : that.scrollY
-		},
-		{
-			x : x,
-			y : y
-		},
-		opt_time, opt_easing, opt_release
-	);
+	console.log( 'scr ' + y );
+	
+	if( !XUI_ScrollBox_useCSSP ){
+		that.xnode[ 'animate' ]({
+						'from'        : {
+								scrollX : -that.scrollX,
+								scrollY : -that.scrollY
+							},
+						'to'          : {
+								scrollX : -x,
+								scrollY : -y
+							},
+						'duration'    : opt_time,
+						'easing'      : opt_easing
+					});	
+	} else {
+		that.xnodeSlider[ 'animate' ]({
+						'from'        : {
+								x : that.scrollX,
+								y : that.scrollY
+							},
+						'to'          : {
+								x : x,
+								y : y
+							},
+						'duration'    : opt_time,
+						'easing'      : opt_easing,
+						'lazyRelease' : opt_release
+					});		
+	};
 
 	if( X_UA[ 'IE' ] < 6 ){
 		XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV[ 'css' ]( 'left', ( scrollBoxW - that.fontSize * 0.6 | 0 ) + 'px' );
 		XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH[ 'css' ]( 'top' , ( scrollBoxH - that.fontSize * 0.6 | 0 ) + 'px' );
 	};
 
-	if( that.hasVScroll && XUI_ScrollBox_indicatorV ){
+	if( that.hasVScroll && XUI_ScrollBox_indicatorV && XUI_ScrollBox_indicatorV.parent === that.xnode ){
 		indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH );
 		scrollBoxH -= indicatorH;
 
@@ -286,34 +347,36 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
 			[ 'css' ]({
 				height : ( indicatorH | 0 ) + 'px'
 			})
-			[ 'animate' ](
-			{
-				y : scrollBoxH * that.scrollY / that.scrollYMax
-			},
-			{
-				y : scrollBoxH * y / that.scrollYMax,
-				opacity : 1
-			},
-			opt_time, opt_easing, opt_release
-		);
-	};
-	if( that.hasHScroll && XUI_ScrollBox_indicatorH ){
+			[ 'animate' ]({
+					'from'        : {
+							y       : scrollBoxH * that.scrollY / that.scrollYMax },
+					'to'          : {
+							y       : scrollBoxH * y / that.scrollYMax,
+							opacity : 0.5
+						},
+					'duration'    : opt_time,
+					'easing'      : opt_easing,
+					'lazyRelease' : opt_release
+				});
+	};
+	if( that.hasHScroll && XUI_ScrollBox_indicatorH && XUI_ScrollBox_indicatorH.parent === that.xnode ){
 		indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );
 		scrollBoxW -= indicatorW;
 		XUI_ScrollBox_indicatorH
 			[ 'css' ]({
 				width : ( indicatorW | 0 ) + 'px'
 			})
-			[ 'animate' ](
-			{
-				x : scrollBoxW * that.scrollX / that.scrollXMax
-			},
-			{
-				x : scrollBoxW * x / that.scrollXMax,
-				opacity : 1
-			},
-			opt_time, opt_easing, opt_release
-		);
+			[ 'animate' ]({
+					'from'        : {
+							x       : scrollBoxW * that.scrollX / that.scrollXMax },
+					'to'          : {
+							x       : scrollBoxW * x / that.scrollXMax,
+							opacity : 0.5
+						},
+					'duration'    : opt_time,
+					'easing'      : opt_easing,
+					'lazyRelease' : opt_release
+				});
 	};
 	
 	that.scrollX   = x;
@@ -344,8 +407,8 @@ function X_UI_ScrollBox_onStart( e ){
 		//console.log( '-1-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );
 		// TODO current位置
-		this.xnodeSlider[ 'stop' ]();
-	};			
+		XUI_ScrollBox_useCSSP ? this.xnodeSlider[ 'stop' ]() : this.xnode[ 'stop' ]();
+	};
 
 	this.startX    = this.scrollX;
 	this.startY    = this.scrollY;
@@ -373,7 +436,7 @@ function X_UI_ScrollBox_onMove( e ){
 	};
 
 	// gpu の用意
-	if( !this.xnodeSlider[ '_anime' ] ){
+	if( !XUI_ScrollBox_useCSSP ? ( !this.xnode[ '_anime' ] || !this.xnode[ '_anime' ].phase ) : ( !this.xnodeSlider[ '_anime' ] || !this.xnodeSlider[ '_anime' ].phase ) ){
 		//console.log( 'gpuレイヤーの用意 ' + e.pageY );
 		//console.log( 'mov1 x:' + this.scrollX + ' y:' + this.scrollY );
 		X_UI_ScrollBox_translate( this, this.scrollX, this.scrollY, 0, '', 300 );
@@ -446,7 +509,7 @@ function X_UI_ScrollBox_onMove( e ){
 	this.directionX = 0 < deltaX ? -1 : deltaX < 0 ? 1 : 0;
 	this.directionY = 0 < deltaY ? -1 : deltaY < 0 ? 1 : 0;
 
-	//console.log( 'mov2 x:' + newX + ' y:' + newY );
+	console.log( 'mov2 x:' + newX + ' y:' + newY );
 	X_UI_ScrollBox_translate( this, newX, newY, 0, '', 300 );
 
 	if( 300 < timestamp - this.startTime ){
@@ -526,6 +589,7 @@ function X_UI_ScrollBox_onEnd( e ){
 		//console.log( '-3-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );		
 	};
+
 	return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;
 };
 
@@ -562,11 +626,7 @@ function X_UI_ScrollBox_resetPosition( that, time ){
 };
 
 function X_UI_ScrollBox_onAnimeEnd( e ){
-	if( e.target !== this.xnodeSlider ){
-		console.log( '- not much -' );
-		console.dir(e);
-	};
-	if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
+	if( this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
 		this.isInTransition = false;
 		//console.log( '-2-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );