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 (file)
--- 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 (file)
--- 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%);
 }