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

   1 /*
   2 * jQuery Mobile Framework : "controlbar" plugin
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT or GPL Version 2 licenses.
   5 * http://jquery.org/license
   6 * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
   7 */
   8
   9 /**
  10  *  Controlbar can be created using data-role = "controlbar" inside footer
  11  *  Framework determine which controlbar will display with controlbar attribute
  12  *
  13  * Attributes:
  14  *
  15  *     data-style : determine which controlbar will use ( tabbar / toolbar )
  16  *                    tabbar do not have back button, toolbar has back button
  17  *
  18  * Examples:
  19  *
  20  *     HTML markup for creating tabbar: ( 2 ~ 5 li item available )
  21  *     icon can be changed data-icon attribute
  22  *         <div data-role="footer"data-position ="fixed">
  23  *              <div data-role="controlbar" data-style="tabbar" >
  24  *                     <ul>
  25  *                            <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  26  *                            <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
  27  *                            <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
  28  *                     </ul>
  29  *             </div>
  30  *      </div>
  31  *
  32  *     HTML markup for creating toolbar: ( 2 ~ 5 li item available )
  33  *     icon can be changed data-icon attribute
  34  *         <div data-role="footer" data-position ="fixed">
  35  *              <div data-role="controlbar" data-style="toolbar" >
  36  *                     <ul>
  37  *                            <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
  38  *                            <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
  39  *                            <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
  40  *                     </ul>
  41  *             </div>
  42  *      </div>
  43 */
  44
  45 (function( $, undefined ) {
  46
  47 $.widget( "tizen.controlbar", $.mobile.widget, {
  48         options: {
  49                 iconpos: "top",
  50                 grid: null,
  51                 initSelector: ":jqmData(role='controlbar')"
  52         },
  53
  54         _create: function(){
  55
  56                 var $controlbar = this.element,
  57                         $navbtns = $controlbar.find( "a" ),
  58                         iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
  59                                                                         this.options.iconpos : undefined,
  60                         theme = $.mobile.listview.prototype.options.theme,      /* Get current theme */
  61                         style = $controlbar.attr( "data-style" );
  62
  63                 if( style === "left" || style === "right" ) {
  64                         $controlbar
  65                                 .parents( ".ui-content" )
  66                                 .css( 'padding', '0' );
  67                 } else {
  68                         $controlbar
  69                                 .addClass( "ui-navbar" )
  70                                 .attr( "role","navigation" )
  71                                 .find( "ul" )
  72                                         .grid( { grid: this.options.grid } );
  73                 }
  74
  75                 if ( !iconpos ) {
  76                         $controlbar.addClass( "ui-navbar-noicons" );
  77                 }
  78
  79                 $navbtns.buttonMarkup({
  80                         corners:        false,
  81                         shadow:         false,
  82                 iconpos:        iconpos
  83                 });
  84
  85                 $controlbar.delegate( "a", "vclick", function( event ) {
  86                         $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
  87                         $( this ).addClass( $.mobile.activeBtnClass );
  88                 });
  89
  90                 if( style === "tabbar" || style === "toolbar" ){
  91                         $controlbar
  92                                 .addClass( "ui-controlbar-" + theme )
  93                                 .addClass( "ui-"+style+"-" + theme );
  94                 } else {
  95                         $controlbar
  96                                 .addClass( "ui-controlbar-" + style )
  97                                 .end();
  98                 }
  99
 100                 $( document ).bind( "pagebeforeshow", function( event, ui ) {
 101                         var footer_filter = $( event.target ).find( ":jqmData(role='footer')" );
 102                         var controlbar_filter = footer_filter.find( ":jqmData(role='controlbar')" );
 103                         var style = controlbar_filter.jqmData( "style" );
 104
 105                         if( style == "toolbar" || style == "tabbar" ){
 106                                 /* Need to add text only style */
 107                                 if( !(controlbar_filter.find(".ui-btn-inner").children().is(".ui-icon")) ){
 108                                         controlbar_filter.find( ".ui-btn-inner" ).addClass( "ui-navbar-textonly" );
 109                                 } else {
 110                                         if( controlbar_filter.find(".ui-btn-text").text() == "" ){
 111                                                 controlbar_filter.find( ".ui-btn" ).css( "padding-top", "20px" );
 112                                         }
 113                                 }
 114                                 footer_filter
 115                                         .css( "position", "fixed" )
 116                                         .css( "height", controlbar_filter.height() )
 117                                         .css( "top", window.innerHeight - footer_filter.height() );
 118                                 if( style == "toolbar" ){
 119                                         controlbar_filter
 120                                                 .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() );
 121                                 }
 122                         }
 123                 });
 124
 125                 $( document ).bind( "pageshow", function( e, ui ){
 126                         var controlbar_filter = $( ".ui-page" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" );
 127                         var element_count = controlbar_filter.find( 'li' ).length;
 128
 129                         if( controlbar_filter.find(".ui-btn-active").length == 0 )
 130                                 controlbar_filter.find( "div" ).css( "left", "0px" );
 131                         else
 132                                 controlbar_filter.find( "div" ).css( "left", controlbar_filter.find( ".ui-btn-active" ).parent( "li" ).index() * controlbar_filter.width()/element_count );
 133
 134                         /* Increase Content size with dummy <div> because of footer height */
 135                         if( controlbar_filter.length != 0 && $( ".ui-page-active" ).find( ".dummy-div" ).length == 0
 136                         && $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).find( ":jqmData(role='controlbar')" ).length != 0 ){
 137                                 $( ".ui-page-active" ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
 138                                 $( ".ui-page-active" ).find( ".dummy-div" )
 139                                         .css( "width", controlbar_filter.width() )
 140                                         .css( "height", controlbar_filter.height() );
 141                         }
 142                 });
 143
 144         },
 145
 146         _setDisabled: function( value, cnt ) {
 147                 this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
 148                 this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
 149         },
 150
 151         disable: function( cnt ) {
 152                 this._setDisabled( true, cnt );
 153                 this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
 154         },
 155
 156         enable: function( cnt ) {
 157                 this._setDisabled( false, cnt );
 158                 this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
 159         }
 160 });
 161
 162 //auto self-init widgets
 163 $( document ).bind( "pagecreate create", function( e ){
 164         $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();
 165 });
 166 })( jQuery );