src/widgets/controlbar/js/jquery.mobile.tizen.controlbar.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 : "controlbar" 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  *  Controlbar can be created using data-role = "controlbar" inside footer
  32  *  Framework determine which controlbar will display with controlbar attribute
  33  *
  34  * Attributes:
  35  *
  36  *     data-style : determine which controlbar will use ( tabbar / toolbar )
  37  *                    tabbar do not have back button, toolbar has back button
  38  *
  39  * Examples:
  40  *
  41  *     HTML markup for creating tabbar: ( 2 ~ 5 li item available )
  42  *     icon can be changed data-icon attribute
  43  *         <div data-role="footer"data-position ="fixed">
  44  *              <div data-role="controlbar" data-style="tabbar" >
  45  *                     <ul>
  46  *                            <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  47  *                            <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
  48  *                            <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
  49  *                     </ul>
  50  *             </div>
  51  *      </div>
  52  *
  53  *     HTML markup for creating toolbar: ( 2 ~ 5 li item available )
  54  *     icon can be changed data-icon attribute
  55  *         <div data-role="footer" data-position ="fixed">
  56  *              <div data-role="controlbar" data-style="toolbar" >
  57  *                     <ul>
  58  *                            <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  59  *                            <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
  60  *                            <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
  61  *                     </ul>
  62  *             </div>
  63  *      </div>
  64 */
  65
  66 (function ( $, undefined ) {
  67
  68         $.widget( "tizen.controlbar", $.mobile.widget, {
  69                 options: {
  70                         iconpos: "top",
  71                         grid: null,
  72                         initSelector: ":jqmData(role='controlbar')"
  73                 },
  74
  75                 _create: function () {
  76
  77                         var $controlbar = this.element,
  78                                 $navbtns = $controlbar.find( "a" ),
  79                                 iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
  80                                                                                 this.options.iconpos : undefined,
  81                                 theme = $.mobile.listview.prototype.options.theme,      /* Get current theme */
  82                                 style = $controlbar.attr( "data-style" ),
  83                                 ww = window.innerWidth || $( window ).width(),
  84                                 wh = window.innerHeight || $( window ).height(),
  85                                 isLandscape;
  86
  87                         isLandscape = ww > wh && ( ww - wh );
  88
  89                         if ( isLandscape ) {
  90                                 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
  91                         } else {
  92                                 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
  93                         }
  94
  95                         if ( style === "left" || style === "right" ) {
  96                                 $controlbar
  97                                         .parents( ".ui-content" )
  98                                         .css( 'padding', '0' );
  99                         } else {
 100                                 $controlbar
 101                                         .addClass( "ui-navbar" )
 102                                         .attr( "role", "navigation" )
 103                                         .find( "ul" )
 104                                                 .grid( { grid: this.options.grid } );
 105                         }
 106
 107                         if ( !iconpos ) {
 108                                 $controlbar.addClass( "ui-navbar-noicons" );
 109                         }
 110
 111                         $navbtns.buttonMarkup({
 112                                 corners:        false,
 113                                 shadow:         false,
 114                                 iconpos:        iconpos
 115                         });
 116
 117                         $controlbar.delegate( "a", "vclick", function ( event ) {
 118                                 $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
 119                                 $( this ).addClass( $.mobile.activeBtnClass );
 120                         });
 121
 122                         if ( style === "tabbar" || style === "toolbar" ) {
 123                                 $controlbar
 124                                         .addClass( "ui-controlbar-" + theme )
 125                                         .addClass( "ui-" + style + "-" + theme );
 126                         } else {
 127                                 $controlbar
 128                                         .addClass( "ui-controlbar-" + style )
 129                                         .end();
 130                         }
 131
 132                         $( document ).bind( "pagebeforeshow", function ( event, ui ) {
 133                                 var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
 134                                         controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" ),
 135                                         style = controlbar_filter.jqmData( "style" );
 136
 137                                 if ( style == "toolbar" || style == "tabbar" ) {
 138                                         /* Need to add text only style */
 139                                         if ( !(controlbar_filter.find(".ui-btn-inner").children().is(".ui-icon")) ) {
 140                                                 controlbar_filter.find( ".ui-btn-inner" ).addClass( "ui-navbar-textonly" );
 141                                         } else {
 142                                                 if ( controlbar_filter.find( ".ui-btn-text" ).text() == "" ) {
 143                                                         controlbar_filter.find( ".ui-btn" ).addClass( "ui-ctrlbar-icononly" );
 144                                                 }
 145                                         }
 146                                         footer_filter
 147                                                 .css( "position", "fixed" )
 148                                                 .css( "bottom", 0 )
 149                                                 .css( "height", controlbar_filter.height() );
 150                                         if ( style == "toolbar" ) {
 151                                                 controlbar_filter
 152                                                         .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() - parseInt(controlbar_filter.siblings(".ui-btn").css("right"), 10) * 2 );
 153                                         }
 154                                 }
 155                         });
 156
 157                         $( document ).bind( "pageshow", function ( e, ui ) {
 158                                 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
 159                                         element_width = 0,
 160                                         element_count = controlbar_filter.find( 'li' ).length;
 161
 162                                 if ( controlbar_filter.find(".ui-btn-active").length == 0 ) {
 163                                         controlbar_filter.find( "div" ).css( "left", "0px" );
 164                                 } else {
 165                                         controlbar_filter.find( "div" ).css( "left", controlbar_filter.find( ".ui-btn-active" ).parent( "li" ).index() * controlbar_filter.width() / element_count );
 166                                 }
 167
 168                                 /* Increase Content size with dummy <div> because of footer height */
 169                                 if ( controlbar_filter.length != 0 && $( ".ui-page-active" ).find( ".dummy-div" ).length == 0 && $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).find( ":jqmData(role='controlbar')" ).length != 0 ) {
 170                                         $( ".ui-page-active" ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
 171                                         $( ".ui-page-active" ).find( ".dummy-div" )
 172                                                 .css( "width", controlbar_filter.width() )
 173                                                 .css( "height", controlbar_filter.height() );
 174                                 }
 175
 176                                 if ( controlbar_filter.length ) {
 177                                         element_width = Math.floor( controlbar_filter.outerWidth() / element_count );
 178                                         controlbar_filter.find("li:last").width( controlbar_filter.outerWidth() - element_width * ( element_count - 1 ) );
 179                                 }
 180                         });
 181
 182                         $( window ).bind( "resize", function ( e ) {
 183                                 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
 184                                         element_width = 0,
 185                                         element_count = controlbar_filter.find( 'li' ).length;
 186
 187                                 if ( controlbar_filter.length ) {
 188                                         element_width = Math.floor( controlbar_filter.outerWidth() / element_count );
 189                                         controlbar_filter.find("li:last").width( controlbar_filter.outerWidth() - element_width * ( element_count - 1 ) );
 190                                 }
 191                         });
 192
 193                         this._bindControlbarEvents();
 194                 },
 195
 196                 _bindControlbarEvents: function () {
 197                         var $controlbar = this.element;
 198
 199                         $( window ).bind( "orientationchange", function ( e, ui ) {
 200                                 ww = window.innerWidth || $( window ).width();
 201                                 wh = window.innerHeight || $( window ).height();
 202
 203                                 isLandscape = ww > wh && ( ww - wh );
 204
 205                                 if ( isLandscape ) {
 206                                         $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
 207                                 } else {
 208                                         $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
 209                                 }
 210                         })
 211
 212                 },
 213
 214                 _setDisabled: function ( value, cnt ) {
 215                         this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
 216                         this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
 217                 },
 218
 219                 disable: function ( cnt ) {
 220                         this._setDisabled( true, cnt );
 221                         this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
 222                 },
 223
 224                 enable: function ( cnt ) {
 225                         this._setDisabled( false, cnt );
 226                         this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
 227                 }
 228         });
 229
 230         //auto self-init widgets
 231         $( document ).bind( "pagecreate create", function ( e ) {
 232                 $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();
 233         });
 234 }( jQuery ) );