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 * data-style : determine which controlbar will use ( tabbar / toolbar )
37 * tabbar do not have back button, toolbar has back button
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" >
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>
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" >
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>
66 (function ( $, undefined ) {
68 $.widget( "tizen.controlbar", $.mobile.widget, {
72 initSelector: ":jqmData(role='controlbar')"
75 _create: function () {
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(),
87 isLandscape = ww > wh && ( ww - wh );
90 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
92 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
95 if ( style === "left" || style === "right" ) {
97 .parents( ".ui-content" )
98 .css( 'padding', '0' );
101 .addClass( "ui-navbar" )
102 .attr( "role", "navigation" )
104 .grid( { grid: this.options.grid } );
108 $controlbar.addClass( "ui-navbar-noicons" );
111 $navbtns.buttonMarkup({
117 $controlbar.delegate( "a", "vclick", function ( event ) {
118 $navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
119 $( this ).addClass( $.mobile.activeBtnClass );
122 if ( style === "tabbar" || style === "toolbar" ) {
124 .addClass( "ui-controlbar-" + theme )
125 .addClass( "ui-" + style + "-" + theme );
128 .addClass( "ui-controlbar-" + style )
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" );
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" );
142 if ( controlbar_filter.find( ".ui-btn-text" ).text() == "" ) {
143 controlbar_filter.find( ".ui-btn" ).addClass( "ui-ctrlbar-icononly" );
147 .css( "position", "fixed" )
149 .css( "height", controlbar_filter.height() );
150 if ( style == "toolbar" ) {
152 .css( "width", window.innerWidth - controlbar_filter.siblings(".ui-btn").width() - parseInt(controlbar_filter.siblings(".ui-btn").css("right"), 10) * 2 );
157 $( document ).bind( "pageshow", function ( e, ui ) {
158 var controlbar_filter = $( ".ui-page" ).find( ":jqmData(role='footer')" ).eq( 0 ).find( ":jqmData(role='controlbar')" ),
159 element_count = controlbar_filter.find( 'li' ).length;
161 if ( controlbar_filter.find(".ui-btn-active").length == 0 ) {
162 controlbar_filter.find( "div" ).css( "left", "0px" );
164 controlbar_filter.find( "div" ).css( "left", controlbar_filter.find( ".ui-btn-active" ).parent( "li" ).index() * controlbar_filter.width() / element_count );
167 /* Increase Content size with dummy <div> because of footer height */
168 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 ) {
169 $( ".ui-page-active" ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
170 $( ".ui-page-active" ).find( ".dummy-div" )
171 .css( "width", controlbar_filter.width() )
172 .css( "height", controlbar_filter.height() );
176 this._bindControlbarEvents();
179 _bindControlbarEvents: function () {
180 var $controlbar = this.element;
182 $( window ).bind( "orientationchange", function ( e, ui ) {
183 ww = window.innerWidth || $( window ).width();
184 wh = window.innerHeight || $( window ).height();
186 isLandscape = ww > wh && ( ww - wh );
189 $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
191 $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
197 _setDisabled: function ( value, cnt ) {
198 this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
199 this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
202 disable: function ( cnt ) {
203 this._setDisabled( true, cnt );
204 this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
207 enable: function ( cnt ) {
208 this._setDisabled( false, cnt );
209 this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
213 //auto self-init widgets
214 $( document ).bind( "pagecreate create", function ( e ) {
215 $( $.tizen.controlbar.prototype.options.initSelector, e.target ).controlbar();