Tabbar : VI update

add tab left/right slide motion to tabbar

Change-Id: I35ecb81bf53711b510abe53e9d52430ea6dc34ba

diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
index a3712c4..b9d949b 100755 (executable)
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
@@ -13,20 +13,32 @@
 
 <div data-role="page" data-add-back-btn="true">
        <div data-role="header" data-position="fixed">
-               <div data-role="tabbar">
-                       <ul>
-                               <li><a href="#"class="ui-btn-active">Menu</a></li>
-                               <li><a href="#">Save</a></li>
-                               <li><a href="#">Share</a></li>
-                               <li><a href="#">Share2</a></li>
-                               <li><a href="#">Share3</a></li>
-                               <li><a href="#">Share4</a></li>
-                       </ul>
-               </div>
+               <h1>Tabbar Scroll</h1>
+
+               <div style="white-space:nowrap;" data-scroll="x">
+               <div class="ui-scrollview-view" style="display:inline-block">
+                       <div data-role="tabbar" data-default-list="4">
+                               <ul>
+                                       <li><a href="#tabbar_persist_c">Next0</a></li>
+                                       <li><a href="#tabbar_persist_a">Menu1</a></li>
+                                       <li><a href="#tabbar_persist_b">Save2</a></li>
+                                       <li><a href="#tabbar_persist_c">Next3</a></li>
+                                       <li><a href="#tabbar_persist_a">Menu4</a></li>
+                                       <li><a href="#tabbar_persist_b">Save5</a></li>
+                                       <li><a href="#tabbar_persist_c">Next6</a></li>
+                                       <li><a href="#tabbar_persist_a">Menu7</a></li>
+                                       <li><a href="#tabbar_persist_b">Save8</a></li>
+                                       <li><a href="#tabbar_persist_c">Next9</a></li>
+                                       <li><a href="#tabbar_persist_a">Menu10</a></li>
+                                       <li><a href="#tabbar_persist_b">Save11</a></li>
+                               </div>
+                       </div>
+               </ul>
+       </div><!-- /tabbar -->
        </div>
 
        <div data-role="content">
-
+               <p>Scroll header tabbar left/right </p>
        </div>
 
        <div data-role="footer">

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
index 4af67ae..bccdfa6 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
@@ -210,4 +210,49 @@
 
 .ui-tabbar-s.ui-navbar-noicons {
        font-size : 22 * @unit_base;
+}
+
+/* Scrollable tabbar */
+
+.ui-tabbar {
+       .tabbar-scroll-ul {
+               margin-top : 0px;
+               margin-bottom : 0px;
+               padding-left : 0px;
+
+               .tabbar-scroll-li {
+                       position : relative;
+                       display : inline-block;
+                       margin-left : -8 * @unit_base;
+                       a {
+                               width : 100%;
+                       }
+               }
+               li.tabbar-scroll-li:first-child {
+                       margin-left : 0px;
+               }
+       }
+}
+
+.ui-tabbar-divider {
+       position : absolute;
+
+       top : 0px;
+       width : 10 * @unit_base;
+       height : 55 * @unit_base;
+       background : -webkit-linear-gradient(left,  rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%);
+}
+
+.ui-tabbar-divider-left {
+       left : 0px;
+       border-top-right-radius : 10 * @unit_base;
+       border-bottom-right-radius : 10 * @unit_base;
+       background : -webkit-linear-gradient(left,  rgba(0, 0, 155, 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(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%);
 }
\ No newline at end of file

diff --git a/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js b/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js
index d5b57be..6ab0896 100755 (executable)
--- a/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js
+++ b/src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js
@@ -52,6 +52,7 @@
                options: {
                        iconpos: "top",
                        grid: null,
+                       defaultList : 4,
                        initSelector: ":jqmData(role='tabbar')"
                },
 
@@ -64,6 +65,10 @@
                                theme = $.mobile.listview.prototype.options.theme,      /* Get current theme */
                                ww = window.innerWidth || $( window ).width(),
                                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 );
@@ -80,9 +85,27 @@
                                textpos = $tabbtns.html().length ? true : false;
                        }
 
-                       $tabbar.addClass( "ui-navbar" )
-                               .find( "ul" )
-                               .grid( { grid: this.options.grid } );
+                       if ( $tabbar.parents( ".ui-header" ).length && $tabbar.parents( ".ui-scrollview-view" ).length ) {
+                               $tabbar.find( "li" ).addClass( "tabbar-scroll-li" );
+                               $tabbar.find( "ul" ).addClass( "tabbar-scroll-ul" );
+
+                               /* add shadow divider */
+                               $( tabbarDividerLeft ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
+                               $( tabbarDividerRight ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
+
+                               $( ".ui-tabbar-divider-left" ).hide();
+                               $( ".ui-tabbar-divider-right" ).hide();
+
+                               /* add width calculation*/
+                               if ( $tabbar.parents( ".ui-scrollview-view" ).data("default-list") ) {
+                                       this.options.defaultList = $tabbar.parents( ".ui-scrollview-view" ).data( "default-list" );
+                               }
+                               $tabbar.find( "li" ).css( "width", window.innerWidth / this.options.defaultList + "px" );
+                       } else {
+                               $tabbar.addClass( "ui-navbar" )
+                                       .find( "ul" )
+                                       .grid( { grid: this.options.grid } );
+                       }
 
                        if ( $tabbar.parents( ".ui-footer" ).length  ) {
                                $tabbar.find( "li" ).addClass( "ui-tab-btn-style" );
@@ -136,6 +159,8 @@
                                                tabbar_filter.addClass( "ui-tabbar-margin-more" );
                                        if ( $elFooterBack.length )
                                                tabbar_filter.addClass( "ui-tabbar-margin-back" );
+
+                               isScrollingStart = false;
                        });
 
                        $( document ).bind( "pageshow", function ( e, ui ) {
@@ -160,6 +185,49 @@
                                }
                        });
 
+                       $( window ).bind( "scrollstart", function ( e ) {
+                               if ( $( e.target ).find( ".ui-tabbar" ).length ) {
+                                       isScrollingStart = true;
+                                       isScrollingEnd = false;
+                               }
+                       });
+
+                       $( window ).bind( "scrollstop", function ( e ) {
+                               var $tabbarScrollview = $( e.target ),
+                                       $minElement = $tabbar.find( "li" ).eq( 0 ),
+                                       minElementIndexVal = Math.abs( $tabbar.find( "li" ).eq( 0 ).offset().left ),
+                                       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 ( Math.abs( offset.left ) < minElementIndexVal ) {
+                                                       minElementIndexVal = Math.abs( offset.left );
+                                                       minElementIndex = i;
+                                                       $minElement = $tabbar.find( "li" ).eq( i );
+                                               }
+                                       });
+
+                                       if ( $tabbarScrollview.length && isScrollingStart == isScrollingEnd && minElementIndex != -1) {
+                                               isScrollingStart = false;
+                                               isScrolling = false;
+                                               $tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $( e.target ).find( ".ui-tabbar" ).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" );
+                               $tabbarScroll.offset().left < 0 ? 
+                                       $( ".ui-tabbar-divider-left" ).show() : $( ".ui-tabbar-divider-left" ).hide();
+                               ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) ==  Math.abs( $tabbarScroll.offset().left ) ? 
+                                       $( ".ui-tabbar-divider-right" ).hide() : $( ".ui-tabbar-divider-right" ).show();
+                       });
+
                        this._bindTabbarEvents();
                },