From: Jinhyuk Jun <jinhyuk.jun@samsung.com>
Date: Wed, 20 Feb 2013 05:22:05 +0000 (+0900)
Subject: tabbar : tabbar slide animation change
X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~57
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=60162a1b00d382a0cfc23999b8d6a6a7849c51f8;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git

tabbar : tabbar slide animation change

divide animation routine / change bar color

Change-Id: I2447636a8c81cf95e067eebf943d932c4345f3d5
---

diff --git a/src/js/widgets/jquery.mobile.tizen.tabbar.js b/src/js/widgets/jquery.mobile.tizen.tabbar.js
index 9b426ad..1a2bbc3 100644
--- a/src/js/widgets/jquery.mobile.tizen.tabbar.js
+++ b/src/js/widgets/jquery.mobile.tizen.tabbar.js
@@ -75,8 +75,6 @@ define( [ '../jquery.mobile.tizen.core', 'jquery.mobile.tizen.pagelayout' ], fun
 				wh = window.innerHeight || $( window ).height(),
 				tabbarDividerLeft = "<div class='ui-tabbar-divider ui-tabbar-divider-left'></div>",
 				tabbarDividerRight = "<div class='ui-tabbar-divider ui-tabbar-divider-right'></div>",
-				isScrollingStart = false,
-				isScrollingEnd = false,
 				isLandscape;
 
 			isLandscape = ww > wh && ( ww - wh );
@@ -171,61 +169,68 @@ define( [ '../jquery.mobile.tizen.core', 'jquery.mobile.tizen.pagelayout' ], fun
 				if ( $elFooterBack.length ) {
 					tabbar_filter.addClass( "ui-tabbar-margin-back" );
 				}
+			});
 
-				isScrollingStart = false;
+			$tabbar.bind( "touchstart vmousedown", function ( e ) {
+				var $tabbarScroll = $( e.target ).parents( ".ui-scrollview-view" );
+				if ( $tabbarScroll.offset() ) {
+					if ( $tabbarScroll.offset().left < 0 ) {
+						$( ".ui-tabbar-divider-left" ).show();
+					} else {
+						$( ".ui-tabbar-divider-left" ).hide();
+					}
+					if ( ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) ==  Math.abs( $tabbarScroll.offset().left ) ) {
+						$( ".ui-tabbar-divider-right" ).hide();
+					} else {
+						$( ".ui-tabbar-divider-right" ).show();
+					}
+				}
 			});
 
-			$( window ).bind( "tabbar.scrollstart", function ( e ) {
+			this._bindTabbarEvents();
+			this._initTabbarAnimation();
+		},
+
+		_initTabbarAnimation: function () {
+			var isScrollingStart = false,
+				isScrollingEnd = false;
+			$( document ).bind( "scrollstart.tabbar", function ( e ) {
 				if ( $( e.target ).find( ".ui-tabbar" ).length ) {
 					isScrollingStart = true;
 					isScrollingEnd = false;
 				}
 			});
 
-			$( window ).bind( "tabbar.scrollstop", function ( e ) {
+			$( document ).bind( "scrollstop.tabbar", function ( e ) {
 				var $tabbarScrollview = $( e.target ),
-					$minElement = $tabbar.find( "li" ).eq( 0 ),
-					minElementIndexVal = Math.abs( $tabbar.find( "li" ).eq( 0 ).offset().left ),
+					$elTabbar = $( e.target ).find( ".ui-tabbar" ),
+					$elTabbarLI = $( e.target ).find( ".ui-tabbar li" ),
+					$minElement = $elTabbarLI.eq( 0 ),
+					minElementIndexVal,
 					minElementIndex = -1;
 
 				isScrollingEnd = true;
-				if ( $( e.target ).find( ".ui-tabbar" ).length && isScrollingStart == true ) {
-					$tabbar.find( "li" ).each( function ( i ) {
-						var offset	= $tabbar.find( "li" ).eq( i ).offset();
+				if ( $elTabbar.length && isScrollingStart == true ) {
+					minElementIndexVal = Math.abs( $elTabbarLI.eq( 0 ).offset().left );
+					$elTabbarLI.each( function ( i ) {
+						var offset	= $elTabbarLI.eq( i ).offset();
+
 						if ( Math.abs( offset.left ) < minElementIndexVal ) {
 							minElementIndexVal = Math.abs( offset.left );
 							minElementIndex = i;
-							$minElement = $tabbar.find( "li" ).eq( i );
+							$minElement = $elTabbarLI.eq( i );
 						}
 					});
 
 					if ( $tabbarScrollview.length && isScrollingStart == isScrollingEnd && minElementIndex != -1) {
 						isScrollingStart = false;
-						$tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $( e.target ).find( ".ui-tabbar" ).data( "defaultList" ) * minElementIndex ) , 0, 357);
+						$tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $elTabbar.data( "defaultList" ) * minElementIndex ) , 0, 357);
 					}
 				}
 
 				$( ".ui-tabbar-divider-left" ).hide();
 				$( ".ui-tabbar-divider-right" ).hide();
 			});
-
-			$tabbar.bind( "touchstart vmousedown", function ( e ) {
-				var $tabbarScroll = $( e.target ).parents( ".ui-scrollview-view" );
-				if ( $tabbarScroll.offset() ) {
-					if ( $tabbarScroll.offset().left < 0 ) {
-						$( ".ui-tabbar-divider-left" ).show();
-					} else {
-						$( ".ui-tabbar-divider-left" ).hide();
-					}
-					if ( ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) ==  Math.abs( $tabbarScroll.offset().left ) ) {
-						$( ".ui-tabbar-divider-right" ).hide();
-					} else {
-						$( ".ui-tabbar-divider-right" ).show();
-					}
-				}
-			});
-
-			this._bindTabbarEvents();
 		},
 
 		_bindTabbarEvents: function () {
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
index 8635dd8..cb4b9ad 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
@@ -247,12 +247,12 @@
 	left : 0px;
 	border-top-right-radius : 10 * @unit_base;
 	border-bottom-right-radius : 10 * @unit_base;
-	background : -webkit-linear-gradient(left,  rgba(246, 248, 239, 1) 0%,rgba(246,248,239,1) 100%);
+	background : -webkit-linear-gradient(left,  rgba(153, 153, 153, 1) 0%,rgba(246,248,239,1) 100%);
 }
 
 .ui-tabbar-divider-right {
 	right : 0px;
 	border-top-left-radius : 10 * @unit_base;
 	border-bottom-left-radius : 10 * @unit_base;
-	background : -webkit-linear-gradient(right,  rgba(246, 248, 239, 1) 0%,rgba(246,248,239,1) 100%);
+	background : -webkit-linear-gradient(right,  rgba(153, 153, 153, 1) 0%,rgba(246,248,239,1) 100%);
 }