src/widgets/tabbar/js/jquery.mobile.tizen.tabbar.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  * jQuery Mobile Framework : "tabbar" plugin
  24  * Copyright (c) jQuery Project
  25  * Dual licensed under the MIT or GPL Version 2 licenses.
  26  * http://jquery.org/license
  27  * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
  28 */
  29
  30 /**
  31  *  Tabbar can be created using data-role = "tabbar" inside footer
  32  *  Framework determine which tabbar will display with tabbar attribute
  33  *
  34  * Examples:
  35  *
  36  *     HTML markup for creating tabbar: ( 2 ~ 5 li item available )
  37  *     icon can be changed data-icon attribute (customized icon need)
  38  *         <div data-role="footer" data-position ="fixed">
  39  *              <div data-role="tabbar">
  40  *                     <ul>
  41  *                            <li><a href="#" class="ui-btn-active">Menu</a></li>
  42  *                            <li><a href="#">Save</a></li>
  43  *                            <li><a href="#">Share</a></li>
  44  *                     </ul>
  45  *             </div>
  46  *      </div>
  47 */
  48
  49 (function ( $, undefined ) {
  50
  51         $.widget( "tizen.tabbar", $.mobile.widget, {
  52                 options: {
  53                         iconpos: "top",
  54                         grid: null,
  55                         defaultList : 4,
  56                         initSelector: ":jqmData(role='tabbar')"
  57                 },
  58
  59                 _create: function () {
  60
  61                         var $tabbar = this.element,
  62                                 $tabbtns,
  63                                 textpos,
  64                                 iconpos,
  65                                 theme = $.mobile.listview.prototype.options.theme,      /* Get current theme */
  66                                 ww = window.innerWidth || $( window ).width(),
  67                                 wh = window.innerHeight || $( window ).height(),
  68                                 tabbarDividerLeft = "<div class='ui-tabbar-divider ui-tabbar-divider-left'></div>",
  69                                 tabbarDividerRight = "<div class='ui-tabbar-divider ui-tabbar-divider-right'></div>",
  70                                 isScrollingStart = false,
  71                                 isScrollingEnd = false,
  72                                 isLandscape;
  73
  74                         isLandscape = ww > wh && ( ww - wh );
  75
  76                         if ( isLandscape ) {
  77                                 $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
  78                         } else {
  79                                 $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
  80                         }
  81
  82                         if ( $tabbar.find( "a" ).length ) {
  83                                 $tabbtns = $tabbar.find( "a" );
  84                                 iconpos = $tabbtns.filter( ":jqmData(icon)" ).length ? this.options.iconpos : undefined;
  85                                 textpos = $tabbtns.html().length ? true : false;
  86                         }
  87
  88                         if ( $tabbar.parents( ".ui-header" ).length && $tabbar.parents( ".ui-scrollview-view" ).length ) {
  89                                 $tabbar.find( "li" ).addClass( "tabbar-scroll-li" );
  90                                 $tabbar.find( "ul" ).addClass( "tabbar-scroll-ul" );
  91
  92                                 /* add shadow divider */
  93                                 $( tabbarDividerLeft ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
  94                                 $( tabbarDividerRight ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
  95
  96                                 $( ".ui-tabbar-divider-left" ).hide();
  97                                 $( ".ui-tabbar-divider-right" ).hide();
  98
  99                                 /* add width calculation*/
 100                                 if ( $tabbar.parents( ".ui-scrollview-view" ).data("default-list") ) {
 101                                         this.options.defaultList = $tabbar.parents( ".ui-scrollview-view" ).data( "default-list" );
 102                                 }
 103                                 $tabbar.find( "li" ).css( "width", window.innerWidth / this.options.defaultList + "px" );
 104                         } else {
 105                                 $tabbar.addClass( "ui-navbar" )
 106                                         .find( "ul" )
 107                                         .grid( { grid: this.options.grid } );
 108                         }
 109
 110                         if ( $tabbar.parents( ".ui-footer" ).length  ) {
 111                                 $tabbar.find( "li" ).addClass( "ui-tab-btn-style" );
 112                         }
 113
 114                         /* title tabbar */
 115                         if ( $tabbar.siblings( ".ui-title" ).length ) {
 116                                 $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar" );
 117                         }
 118
 119                         if ( !iconpos ) {
 120                                 $tabbar.addClass( "ui-tabbar-noicons" );
 121                         }
 122                         if ( !textpos ) {
 123                                 $tabbar.addClass( "ui-tabbar-notext" );
 124                         }
 125                         if ( textpos && iconpos ) {
 126                                 $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar-multiline" );
 127                         }
 128
 129                         if ( $tabbar.find( "a" ).length ) {
 130                                 $tabbtns.buttonMarkup({
 131                                         corners:        false,
 132                                         shadow:         false,
 133                                         iconpos:        iconpos
 134                                 });
 135                         }
 136
 137                         if ( $tabbar.find( ".ui-state-persist" ).length ) {
 138                                 $tabbar.addClass( "ui-tabbar-persist" );
 139                         }
 140
 141                         $tabbar.delegate( "a", "vclick", function ( event ) {
 142                                 $tabbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
 143                                 $( this ).addClass( $.mobile.activeBtnClass );
 144                         });
 145
 146                         $tabbar.addClass( "ui-tabbar");
 147
 148                         $( document ).bind( "pagebeforeshow", function ( event, ui ) {
 149                                 var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
 150                                         tabbar_filter = footer_filter.find( ":jqmData(role='tabbar')" ),
 151                                         $elFooterMore = tabbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
 152                                         $elFooterBack = tabbar_filter.siblings( ".ui-btn-back" );
 153
 154                                         footer_filter
 155                                                 .css( "position", "fixed" )
 156                                                 .css( "bottom", 0 )
 157                                                 .css( "height", tabbar_filter.height() );
 158                                         if ( $elFooterMore.length )
 159                                                 tabbar_filter.addClass( "ui-tabbar-margin-more" );
 160                                         if ( $elFooterBack.length )
 161                                                 tabbar_filter.addClass( "ui-tabbar-margin-back" );
 162
 163                                 isScrollingStart = false;
 164                         });
 165
 166                         $( document ).bind( "pageshow", function ( e, ui ) {
 167                                 var tabbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='tabbar')" ),
 168                                         element_width = 0,
 169                                         element_count = tabbar_filter.find( 'li' ).length;
 170
 171                                 if ( tabbar_filter.length ) {
 172                                         element_width = tabbar_filter.find("li:first").width();
 173                                         tabbar_filter.find("li:last").width( tabbar_filter.width() - element_width * ( element_count - 1 ) );
 174                                 }
 175                         });
 176
 177                         $( window ).bind( "resize", function ( e ) {
 178                                 var tabbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='tabbar')" ),
 179                                         element_width = 0,
 180                                         element_count = tabbar_filter.find( 'li' ).length;
 181
 182                                 if ( tabbar_filter.length ) {
 183                                         element_width = tabbar_filter.find("li:first").width();
 184                                         tabbar_filter.find("li:last").width( tabbar_filter.width() - element_width * ( element_count - 1 ) );
 185                                 }
 186                         });
 187
 188                         $( window ).bind( "tabbar.scrollstart", function ( e ) {
 189                                 if ( $( e.target ).find( ".ui-tabbar" ).length ) {
 190                                         isScrollingStart = true;
 191                                         isScrollingEnd = false;
 192                                 }
 193                         });
 194
 195                         $( window ).bind( "tabbar.scrollstop", function ( e ) {
 196                                 var $tabbarScrollview = $( e.target ),
 197                                         $minElement = $tabbar.find( "li" ).eq( 0 ),
 198                                         minElementIndexVal = Math.abs( $tabbar.find( "li" ).eq( 0 ).offset().left ),
 199                                         minElementIndex = -1;
 200
 201                                 isScrollingEnd = true;
 202                                 if ( $( e.target ).find( ".ui-tabbar" ).length && isScrollingStart == true ) {
 203                                         $tabbar.find( "li" ).each( function ( i ) {
 204                                                 var offset      = $tabbar.find( "li" ).eq( i ).offset();
 205                                                 if ( Math.abs( offset.left ) < minElementIndexVal ) {
 206                                                         minElementIndexVal = Math.abs( offset.left );
 207                                                         minElementIndex = i;
 208                                                         $minElement = $tabbar.find( "li" ).eq( i );
 209                                                 }
 210                                         });
 211
 212                                         if ( $tabbarScrollview.length && isScrollingStart == isScrollingEnd && minElementIndex != -1) {
 213                                                 isScrollingStart = false;
 214                                                 isScrolling = false;
 215                                                 $tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $( e.target ).find( ".ui-tabbar" ).data( "defaultList" ) * minElementIndex ) , 0, 357);
 216                                         }
 217                                 }
 218
 219                                 $( ".ui-tabbar-divider-left" ).hide();
 220                                 $( ".ui-tabbar-divider-right" ).hide();
 221                         });
 222
 223                         $tabbar.bind( "touchstart vmousedown", function ( e ) {
 224                                 var $tabbarScroll = $( e.target ).parents( ".ui-scrollview-view" );
 225                                 if ( $tabbarScroll.offset() ) {
 226                                         $tabbarScroll.offset().left < 0 ?
 227                                                 $( ".ui-tabbar-divider-left" ).show() : $( ".ui-tabbar-divider-left" ).hide();
 228                                         ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) ==  Math.abs( $tabbarScroll.offset().left ) ?
 229                                                 $( ".ui-tabbar-divider-right" ).hide() : $( ".ui-tabbar-divider-right" ).show();
 230                                 }
 231                         });
 232
 233                         this._bindTabbarEvents();
 234                 },
 235
 236                 _bindTabbarEvents: function () {
 237                         var $tabbar = this.element;
 238
 239                         $( window ).bind( "orientationchange", function ( e, ui ) {
 240                                 var ww = window.innerWidth || $( window ).width(),
 241                                         wh = window.innerHeight || $( window ).height(),
 242                                         isLandscape = ww > wh && ( ww - wh );
 243
 244                                 if ( isLandscape ) {
 245                                         $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
 246                                 } else {
 247                                         $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
 248                                 }
 249                         });
 250                 },
 251
 252                 _setDisabled: function ( value, cnt ) {
 253                         this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
 254                         this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
 255                 },
 256
 257                 disable: function ( cnt ) {
 258                         this._setDisabled( true, cnt );
 259                         this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
 260                 },
 261
 262                 enable: function ( cnt ) {
 263                         this._setDisabled( false, cnt );
 264                         this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
 265                 }
 266         });
 267
 268         //auto self-init widgets
 269         $( document ).bind( "pagecreate create", function ( e ) {
 270                 $( $.tizen.tabbar.prototype.options.initSelector, e.target ).tabbar();
 271         });
 272 }( jQuery ) );