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  * Examples:
  35  *
  36  *     HTML markup for creating controlbar: ( 2 ~ 5 li item available )
  37  *     icon can be changed data-icon attribute
  38  *         <div data-role="footer" data-position ="fixed">
  39  *              <div data-role="controlbar">
  40  *                     <ul>
  41  *                            <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  42  *                            <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
  43  *                            <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
  44  *                     </ul>
  45  *             </div>
  46  *      </div>
  47 */
  48
  49 (function ( $, undefined ) {
  50
  51         $.widget( "tizen.controlbar", $.mobile.widget, {
  52                 options: {
  53                         iconpos: "top",
  54                         grid: null,
  55                         initSelector: ":jqmData(role='controlbar')"
  56                 },
  57
  58                 _create: function () {
  59
  60                         var $controlbar = this.element,
  61                                 $ctrlbtns = $controlbar.find( "a" ),
  62                                 iconpos = $ctrlbtns.filter( ":jqmData(icon)" ).length ?
  63                                                                                 this.options.iconpos : undefined,
  64                                 textpos = $ctrlbtns.html().length ? true : false,
  65                                 theme = $.mobile.listview.prototype.options.theme,      /* Get current theme */
  66                                 ww = window.innerWidth || $( window ).width(),
  67                                 wh = window.innerHeight || $( window ).height(),
  68                                 isLandscape;
  69
  70                         isLandscape = ww > wh && ( ww - wh );
  71
  72                         if ( isLandscape ) {
  73                                 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
  74                         } else {
  75                                 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
  76                         }
  77
  78
  79 /*
  80                                 $controlbar
  81                                         .addClass( "ui-navbar" )
  82                                         .attr( "role", "navigation" )
  83                                         .find( "ul" )
  84
  85                                                 .grid( { grid: this.options.grid } );
  86 */
  87                                 $controlbar.addClass( "ui-navbar" )
  88                                         .find( "ul" )
  89                                         .grid( { grid: this.options.grid } );
  90                         if ( $controlbar.parents( ".ui-footer" ).length  ) {
  91                                 $controlbar.find( "li" ).addClass( "ui-ctrl-btn-style" );
  92                         }
  93
  94
  95                         /* title controlbar */
  96                         if ( $controlbar.siblings( ".ui-title" ).length ) {
  97                                 $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar" );
  98                         }
  99
 100                         if ( !iconpos ) {
 101                                 $controlbar.addClass( "ui-controlbar-noicons" );
 102                         }
 103                         if ( !textpos ) {
 104                                 $controlbar.addClass( "ui-controlbar-notext" );
 105                         }
 106                         if ( textpos && iconpos ) {
 107                                 $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar-multiline" );
 108                         }
 109
 110                         $ctrlbtns.buttonMarkup({
 111                                 corners:        false,
 112                                 shadow:         false,
 113                                 iconpos:        iconpos
 114                         });
 115
 116                         if ( $controlbar.find( ".ui-state-persist" ).length ) {
 117                                 $controlbar.addClass( "ui-controlbar-persist" );
 118                         }
 119
 120                         $controlbar.delegate( "a", "vclick", function ( event ) {
 121                                 $ctrlbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
 122                                 $( this ).addClass( $.mobile.activeBtnClass );
 123                         });
 124
 125                                 $controlbar.addClass( "ui-controlbar");
 126
 127                         $( document ).bind( "pagebeforeshow", function ( event, ui ) {
 128                                 var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
 129                                         controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" ),
 130                                         $elFooterMore = controlbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
 131                                         $elFooterBack = controlbar_filter.siblings( ".ui-btn-back" );
 132
 133                                         footer_filter
 134                                                 .css( "position", "fixed" )
 135                                                 .css( "bottom", 0 )
 136                                                 .css( "height", controlbar_filter.height() );
 137                                         if ( $elFooterMore.length )
 138                                                 controlbar_filter.addClass( "ui-controlbar-margin-more" );
 139                                         if ( $elFooterBack.length )
 140                                                 controlbar_filter.addClass( "ui-controlbar-margin-back" );
 141                         });
 142
 143                         $( document ).bind( "pageshow", function ( e, ui ) {
 144                                 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
 145                                         element_width = 0,
 146                                         element_count = controlbar_filter.find( 'li' ).length;
 147
 148                                 if ( controlbar_filter.length ) {
 149                                         element_width = controlbar_filter.find("li:first").width();
 150                                         controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
 151                                 }
 152                         });
 153
 154                         $( window ).bind( "resize", function ( e ) {
 155                                 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
 156                                         element_width = 0,
 157                                         element_count = controlbar_filter.find( 'li' ).length;
 158
 159                                 if ( controlbar_filter.length ) {
 160                                         element_width = controlbar_filter.find("li:first").width();
 161                                         controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
 162                                 }
 163                         });
 164
 165                         this._bindControlbarEvents();
 166                 },
 167
 168                 _bindControlbarEvents: function () {
 169                         var $controlbar = this.element;
 170
 171                         $( window ).bind( "orientationchange", function ( e, ui ) {
 172                                 var ww = window.innerWidth || $( window ).width(),
 173                                         wh = window.innerHeight || $( window ).height(),
 174                                         isLandscape = ww > wh && ( ww - wh );
 175
 176                                 if ( isLandscape ) {
 177                                         $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
 178                                 } else {
 179                                         $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
 180                                 }
 181                         });
 182                 },
 183
 184                 _setDisabled: function ( value, cnt ) {
 185                         this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
 186                         this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
 187                 },
 188
 189                 disable: function ( cnt ) {
 190                         this._setDisabled( true, cnt );
 191                         this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
 192                 },
 193
 194                 enable: function ( cnt ) {
 195                         this._setDisabled( false, cnt );
 196                         this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
 197                 }
 198         });
 199
 200         //auto self-init widgets
 201         $( document ).bind( "pagecreate create", function ( e ) {
 202                 $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();
 203         });
 204 }( jQuery ) );