1 /* ***************************************************************************
2 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
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:
11 * The above copyright notice and this permission notice shall be included in
12 * all copies or substantial portions of the Software.
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 * ***************************************************************************
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>
31 * Controlbar can be created using data-role = "controlbar" inside footer
32 * Framework determine which controlbar will display with controlbar attribute
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">
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>
49 (function ( $, undefined ) {
51 $.widget( "tizen.controlbar", $.mobile.widget, {
55 initSelector: ":jqmData(role='controlbar')"
58 _create: function () {
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(),
70 isLandscape = ww > wh && ( ww - wh );
73 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
75 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
81 .addClass( "ui-navbar" )
82 .attr( "role", "navigation" )
85 .grid( { grid: this.options.grid } );
87 $controlbar.addClass( "ui-navbar" )
89 .grid( { grid: this.options.grid } );
90 if ( $controlbar.parents( ".ui-footer" ).length ) {
91 $controlbar.find( "li" ).addClass( "ui-ctrl-btn-style" );
95 /* title controlbar */
96 if ( $controlbar.siblings( ".ui-title" ).length ) {
97 $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar" );
101 $controlbar.addClass( "ui-controlbar-noicons" );
104 $controlbar.addClass( "ui-controlbar-notext" );
106 if ( textpos && iconpos ) {
107 $controlbar.parents( ".ui-header" ).addClass( "ui-title-controlbar-multiline" );
110 $ctrlbtns.buttonMarkup({
116 if ( $controlbar.find( ".ui-state-persist" ).length ) {
117 $controlbar.addClass( "ui-controlbar-persist" );
120 $controlbar.delegate( "a", "vclick", function ( event ) {
121 $ctrlbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
122 $( this ).addClass( $.mobile.activeBtnClass );
125 $controlbar.addClass( "ui-controlbar");
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" );
134 .css( "position", "fixed" )
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" );
143 $( document ).bind( "pageshow", function ( e, ui ) {
144 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
146 element_count = controlbar_filter.find( 'li' ).length;
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 ) );
154 $( window ).bind( "resize", function ( e ) {
155 var controlbar_filter = $( ".ui-page-active" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
157 element_count = controlbar_filter.find( 'li' ).length;
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 ) );
165 this._bindControlbarEvents();
168 _bindControlbarEvents: function () {
169 var $controlbar = this.element;
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 );
177 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
179 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
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 );
189 disable: function ( cnt ) {
190 this._setDisabled( true, cnt );
191 this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
194 enable: function ( cnt ) {
195 this._setDisabled( false, cnt );
196 this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
200 //auto self-init widgets
201 $( document ).bind( "pagecreate create", function ( e ) {
202 $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();