X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.6.x%2Fjs%2F20_ui%2F15_ScrollBox.js;h=4948a7ba8dd040c49b960eb507798433f6078b96;hb=35daae003b3b017a92d0c883f120bf3baf604fba;hp=2d160a183eeda2c02875a2f7120b61fc63dcb3b2;hpb=427c4cbb7f8b1ee674b845ade0796fcbfee0fcba;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 2d160a1..4948a7b 100644
--- a/0.6.x/js/20_ui/15_ScrollBox.js
+++ b/0.6.x/js/20_ui/15_ScrollBox.js
@@ -131,7 +131,7 @@ var XUI_ScrollBox = XUI_ChromeBox.inherits(
 		Constructor : function( user, layout, args ){
 			this[ 'Super' ]( user, layout, args );
 			this._containerNode = X_Pair_get( this.containerNode );
-			this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' ).listen( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );
+			this.xnodeSlider = this._containerNode.xnode[ 'className' ]( 'ScrollSlider' )[ 'listen' ]( X_EVENT_ANIME_END, this, X_UI_ScrollBox_onAnimeEnd );
 			this.xnode[ 'className' ]( 'ScrollBox' );
 		},
 		
@@ -224,7 +224,11 @@ function X_UI_ScrollBox_onLayoutComplete( e ){
 			X_UI_ScrollBox_translate( this, this.scrollXMax * this.scrollXRatio, this.scrollYMax * this.scrollYRatio, 100, '', 300 );
 		} else {
 			// scroller 作る
-			this[ 'listen' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );
+			// 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 );
 			X_UI_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 );
@@ -234,7 +238,9 @@ function X_UI_ScrollBox_onLayoutComplete( e ){
 	// scroll 不要
 	if( this.scrolling ){
 		// scroller 削除
-		this[ 'unlisten' ]( XUI_Event._POINTER_DOWN, this, X_UI_ScrollBox_onStart );
+		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 );
 		X_UI_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 );
@@ -247,7 +253,9 @@ function X_UI_ScrollBox_onLayoutComplete( e ){
 
 // TODO use scrollLeft, scrollTop
 function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release ){
-	var scrollBoxSize, indicatorSize;
+	var scrollBoxH = that.fontSize * that.boxHeight,
+		scrollBoxW = that.fontSize * that.boxWidth,
+		indicatorH, indicatorW;
 	
 	opt_time    = 0 <= opt_time ? opt_time : 0;
 	opt_easing  = opt_easing === '' ? '' : opt_easing || 'circular';
@@ -265,39 +273,43 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
 		opt_time, opt_easing, 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 ){
-		scrollBoxSize = that.fontSize * that.boxHeight;
-		indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollYMax + scrollBoxSize );
-		scrollBoxSize -= indicatorSize;
+		indicatorH = scrollBoxH * scrollBoxH / ( - that.scrollYMax + scrollBoxH );
+		scrollBoxH -= indicatorH;
+
 		XUI_ScrollBox_indicatorV
 			[ 'css' ]({
-				height : ( indicatorSize | 0 ) + 'px'
+				height : ( indicatorH | 0 ) + 'px'
 			})
 			[ 'animate' ](
 			{
-				y : scrollBoxSize * that.scrollY / that.scrollYMax
+				y : scrollBoxH * that.scrollY / that.scrollYMax
 			},
 			{
-				y : scrollBoxSize * y / that.scrollYMax,
+				y : scrollBoxH * y / that.scrollYMax,
 				opacity : 1
 			},
 			opt_time, opt_easing, opt_release
 		);
 	};
 	if( that.hasHScroll && XUI_ScrollBox_indicatorH ){
-		scrollBoxSize = that.fontSize * that.boxWidth;
-		indicatorSize = scrollBoxSize * scrollBoxSize / ( - that.scrollXMax + scrollBoxSize );
-		scrollBoxSize -= indicatorSize;
+		indicatorW = scrollBoxW * scrollBoxW / ( - that.scrollXMax + scrollBoxW );
+		scrollBoxW -= indicatorW;
 		XUI_ScrollBox_indicatorH
 			[ 'css' ]({
-				width : ( indicatorSize | 0 ) + 'px'
+				width : ( indicatorW | 0 ) + 'px'
 			})
 			[ 'animate' ](
 			{
-				x : scrollBoxSize * that.scrollX / that.scrollXMax
+				x : scrollBoxW * that.scrollX / that.scrollXMax
 			},
 			{
-				x : scrollBoxSize * x / that.scrollXMax,
+				x : scrollBoxW * x / that.scrollXMax,
 				opacity : 1
 			},
 			opt_time, opt_easing, opt_release
@@ -310,11 +322,6 @@ function X_UI_ScrollBox_translate( that, x, y, opt_time, opt_easing, opt_release
 
 function X_UI_ScrollBox_onStart( e ){
 	var ret = X_CALLBACK_NONE;
-
-	// React to left mouse button only
-	if( e.pointerType === 'mouse' && e.button !== 0 ){
-		return ret;
-	};
 	
 	if( !this.scrollEnabled || ( this.initiated && e.pointerType !== this.initiated ) ){
 		return ret;
@@ -332,7 +339,7 @@ function X_UI_ScrollBox_onStart( e ){
 	// スクロール中の停止
 	if( this.isInTransition ){
 		this.isInTransition = false;
-		console.log( '-1-' );
+		//console.log( '-1-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );
 		// TODO current位置
 		this.xnodeSlider[ 'stop' ]();
@@ -345,10 +352,7 @@ function X_UI_ScrollBox_onStart( e ){
 	this.pointX    = e.pageX;
 	this.pointY    = e.pageY;
 	
-	console.log( 'scrollstart ' + e.pageY );
-	
-	this[ 'listen' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );
-	this[ 'listen' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );
+	console.log( 'scrollstart ' + e.pageY + e.target.className() );
 
 	return ret | X_CALLBACK_PREVENT_DEFAULT;
 };
@@ -365,10 +369,6 @@ function X_UI_ScrollBox_onMove( e ){
 	if( !this.scrollEnabled || e.pointerType !== this.initiated ){
 		return ret;
 	};
-	
-	if( e.buttons !== 1 ){
-		return X_UI_ScrollBox_onEnd.call( this, e );
-	};
 
 	// gpu の用意
 	if( !this.xnodeSlider[ '_anime' ] ){
@@ -464,13 +464,10 @@ function X_UI_ScrollBox_onEnd( e ){
 		momentumX, momentumY,
 		duration, distanceX, distanceY;
 	
-	console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT  );
-					
-	this[ 'unlisten' ]( XUI_Event._POINTER_MOVE, this, X_UI_ScrollBox_onMove );
-	this[ 'unlisten' ]( [ XUI_Event._POINTER_UP, XUI_Event.POINTER_OUT, XUI_Event._POINTER_CANCEL ], this, X_UI_ScrollBox_onEnd );
+	//console.log( e.type + ' onend ' + XUI_Event.POINTER_OUT  );
 	
 	if( !this.scrollEnabled || e.pointerType !== this.initiated ){
-		console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated  );
+		//console.log( e.type + ' onend 1 ' + e.pointerType + ' ' + this.initiated  );
 		return ret;
 	};
 
@@ -486,15 +483,15 @@ function X_UI_ScrollBox_onEnd( e ){
 
 	// reset if we are outside of the boundaries
 	if( X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
-		console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT  );
-		return ret;
+		//console.log( e.type + ' onend 2 ' + XUI_Event.POINTER_OUT  );
+		return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;
 	};
 
 	// we scrolled less than 10 pixels
 	if( !this.moved ){
 		this[ 'dispatch' ]( X_EVENT_CANCELED );
-		console.log( 'we scrolled less than 10 pixels　' + e.pageY );
-		return ret;
+		//console.log( 'we scrolled less than 10 pixels　' + e.pageY );
+		return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;
 	};
 
 	// start momentum animation if needed
@@ -510,7 +507,7 @@ function X_UI_ScrollBox_onEnd( e ){
 		time = Math.max( momentumX.duration, momentumY.duration ) | 0;
 		this.isInTransition = true;
 	} else {
-		console.log( '慣性無し' );
+		//console.log( '慣性無し' );
 	};
 
 	if( newX != this.scrollX || newY != this.scrollY ){
@@ -519,15 +516,15 @@ function X_UI_ScrollBox_onEnd( e ){
 			easing = 'quadratic';
 		};
 
-		console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' t:' + time );
+		//console.log( 'end2 x:' + newX + ' y:' + newY + '<-y:' + this.scrollY + ' t:' + time );
 		this.scrollTo( newX, newY, time, easing, 1000 );
 	} else {
-		console.log( 'end1 x:' + newX + ' y:' + newY );
+		//console.log( 'end1 x:' + newX + ' y:' + newY );
 		this.scrollTo( newX, newY, 0, '', 1000 );	// ensures that the last position is rounded
-		console.log( '-3-' );
+		//console.log( '-3-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );		
 	};
-	return ret;
+	return ret | X_CALLBACK_PREVENT_DEFAULT | X_CALLBACK_RELEASE_POINTER;
 };
 
 function X_UI_ScrollBox_resetPosition( that, time ){
@@ -551,12 +548,12 @@ function X_UI_ScrollBox_resetPosition( that, time ){
 	};
 
 	if( x === that.scrollX && y === that.scrollY ){
-		console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );
+		//console.log( 'no バウンド y:' + y + ' max:' + that.scrollYMax );
 		return false;
 	};
 
-	console.log( ' ===> resetPosition - バウンド!' );
-	console.log( '      x:' + x + ' y:' + y );
+	//console.log( ' ===> resetPosition - バウンド!' );
+	//console.log( '      x:' + x + ' y:' + y );
 	that.scrollTo( x, y, time, that.bounceEasing, 1000 );
 
 	return true;
@@ -569,10 +566,10 @@ function X_UI_ScrollBox_onAnimeEnd( e ){
 	};
 	if( e.target === this.xnodeSlider && this.isInTransition && !X_UI_ScrollBox_resetPosition( this, this.bounceTime ) ){
 		this.isInTransition = false;
-		console.log( '-2-' );
+		//console.log( '-2-' );
 		this[ 'dispatch' ]( XUI_Event.SCROLL_END );
 	};
-	console.log(' -2.1- '+this.isInTransition );
+	//console.log(' -2.1- '+this.isInTransition );
 	return X_CALLBACK_NONE;
 };