1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Shows buttons divided automatically on the header
4 //>>group: Tizen:Widgets
6 define( [ '../jquery.mobile.tizen.core', 'jquery.mobile.tizen.pagelayout' ], function ( ) {
7 //>>excludeEnd("jqmBuildExclude");
9 /* ***************************************************************************
10 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
12 * Permission is hereby granted, free of charge, to any person obtaining a
13 * copy of this software and associated documentation files (the "Software"),
14 * to deal in the Software without restriction, including without limitation
15 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
16 * and/or sell copies of the Software, and to permit persons to whom the
17 * Software is furnished to do so, subject to the following conditions:
19 * The above copyright notice and this permission notice shall be included in
20 * all copies or substantial portions of the Software.
22 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
27 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
28 * DEALINGS IN THE SOFTWARE.
29 * ***************************************************************************
31 * jQuery Mobile Framework : "tabbar" plugin
32 * Copyright (c) jQuery Project
33 * Dual licensed under the MIT or GPL Version 2 licenses.
34 * http://jquery.org/license
35 * Authors: Jinhyuk Jun <jinhyuk.jun@samsung.com>
39 * Tabbar can be created using data-role = "tabbar" inside footer
40 * Framework determine which tabbar will display with tabbar attribute
44 * HTML markup for creating tabbar: ( 2 ~ 5 li item available )
45 * icon can be changed data-icon attribute (customized icon need)
46 * <div data-role="footer" data-position ="fixed">
47 * <div data-role="tabbar">
49 * <li><a href="#" class="ui-btn-active">Menu</a></li>
50 * <li><a href="#">Save</a></li>
51 * <li><a href="#">Share</a></li>
57 (function ( $, undefined ) {
59 $.widget( "tizen.tabbar", $.mobile.widget, {
64 initSelector: ":jqmData(role='tabbar')"
67 _create: function () {
69 var $tabbar = this.element,
73 theme = $.mobile.listview.prototype.options.theme, /* Get current theme */
74 ww = window.innerWidth || $( window ).width(),
75 wh = window.innerHeight || $( window ).height(),
76 tabbarDividerLeft = "<div class='ui-tabbar-divider ui-tabbar-divider-left'></div>",
77 tabbarDividerRight = "<div class='ui-tabbar-divider ui-tabbar-divider-right'></div>",
80 isLandscape = ww > wh && ( ww - wh );
83 $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
85 $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
88 if ( $tabbar.find( "a" ).length ) {
89 $tabbtns = $tabbar.find( "a" );
90 iconpos = $tabbtns.filter( ":jqmData(icon)" ).length ? this.options.iconpos : undefined;
91 textpos = $tabbtns.html().length ? true : false;
94 if ( $tabbar.parents( ".ui-header" ).length && $tabbar.parents( ".ui-scrollview-view" ).length ) {
95 $tabbar.find( "li" ).addClass( "tabbar-scroll-li" );
96 $tabbar.find( "ul" ).addClass( "tabbar-scroll-ul" );
98 /* add shadow divider */
99 $( tabbarDividerLeft ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
100 $( tabbarDividerRight ).appendTo( $tabbar.parents( ".ui-scrollview-clip" ) );
102 $( ".ui-tabbar-divider-left" ).hide();
103 $( ".ui-tabbar-divider-right" ).hide();
105 /* add width calculation*/
106 if ( $tabbar.parents( ".ui-scrollview-view" ).data("default-list") ) {
107 this.options.defaultList = $tabbar.parents( ".ui-scrollview-view" ).data( "default-list" );
109 $tabbar.find( "li" ).css( "width", window.innerWidth / this.options.defaultList + "px" );
111 if ( $tabbar.find( "ul" ).children().length ) {
112 $tabbar.addClass( "ui-navbar" )
114 .grid( { grid: this.options.grid } );
118 if ( $tabbar.parents( ".ui-footer" ).length ) {
119 $tabbar.find( "li" ).addClass( "ui-tab-btn-style" );
123 if ( $tabbar.siblings( ".ui-title" ).length ) {
124 $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar" );
128 $tabbar.addClass( "ui-tabbar-noicons" );
131 $tabbar.addClass( "ui-tabbar-notext" );
133 if ( textpos && iconpos ) {
134 $tabbar.parents( ".ui-header" ).addClass( "ui-title-tabbar-multiline" );
137 if ( $tabbar.find( "a" ).length ) {
138 $tabbtns.buttonMarkup({
145 if ( $tabbar.find( ".ui-state-persist" ).length ) {
146 $tabbar.addClass( "ui-tabbar-persist" );
149 $tabbar.delegate( "a", "vclick", function ( event ) {
150 $tabbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
151 $( this ).addClass( $.mobile.activeBtnClass );
154 $tabbar.addClass( "ui-tabbar");
156 $( document ).bind( "pagebeforeshow", function ( event, ui ) {
157 var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
158 tabbar_filter = footer_filter.find( ":jqmData(role='tabbar')" ),
159 $elFooterMore = tabbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
160 $elFooterBack = tabbar_filter.siblings( ".ui-btn-back" );
163 .css( "position", "fixed" )
165 .css( "height", tabbar_filter.height() );
166 if ( $elFooterMore.length ) {
167 tabbar_filter.addClass( "ui-tabbar-margin-more" );
169 if ( $elFooterBack.length ) {
170 tabbar_filter.addClass( "ui-tabbar-margin-back" );
174 $tabbar.bind( "touchstart vmousedown", function ( e ) {
175 var $tabbarScroll = $( e.target ).parents( ".ui-scrollview-view" );
176 if ( $tabbarScroll.offset() ) {
177 if ( $tabbarScroll.offset().left < 0 ) {
178 $( ".ui-tabbar-divider-left" ).show();
180 $( ".ui-tabbar-divider-left" ).hide();
182 if ( ( $tabbarScroll.width() - $tabbarScroll.parents( ".ui-scrollview-clip" ).width() ) == Math.abs( $tabbarScroll.offset().left ) ) {
183 $( ".ui-tabbar-divider-right" ).hide();
185 $( ".ui-tabbar-divider-right" ).show();
190 this._bindTabbarEvents();
191 this._initTabbarAnimation();
194 _initTabbarAnimation: function () {
195 var isScrollingStart = false,
196 isScrollingEnd = false;
197 $( document ).bind( "scrollstart.tabbar", function ( e ) {
198 if ( $( e.target ).find( ".ui-tabbar" ).length ) {
199 isScrollingStart = true;
200 isScrollingEnd = false;
204 $( document ).bind( "scrollstop.tabbar", function ( e ) {
205 var $tabbarScrollview = $( e.target ),
206 $elTabbar = $( e.target ).find( ".ui-tabbar" ),
207 $elTabbarLI = $( e.target ).find( ".ui-tabbar li" ),
208 $minElement = $elTabbarLI.eq( 0 ),
210 minElementIndex = -1;
212 isScrollingEnd = true;
213 if ( $elTabbar.length && isScrollingStart == true ) {
214 minElementIndexVal = Math.abs( $elTabbarLI.eq( 0 ).offset().left );
215 $elTabbarLI.each( function ( i ) {
216 var offset = $elTabbarLI.eq( i ).offset();
218 if ( Math.abs( offset.left ) < minElementIndexVal ) {
219 minElementIndexVal = Math.abs( offset.left );
221 $minElement = $elTabbarLI.eq( i );
225 if ( $tabbarScrollview.length && isScrollingStart == isScrollingEnd && minElementIndex != -1) {
226 isScrollingStart = false;
227 $tabbarScrollview.scrollview( "scrollTo", -( window.innerWidth / $elTabbar.data( "defaultList" ) * minElementIndex ) , 0, 357);
231 $( ".ui-tabbar-divider-left" ).hide();
232 $( ".ui-tabbar-divider-right" ).hide();
236 _bindTabbarEvents: function () {
237 var $tabbar = this.element;
239 $( window ).bind( "orientationchange", function ( e, ui ) {
240 var ww = window.innerWidth || $( window ).width(),
241 wh = window.innerHeight || $( window ).height(),
242 isLandscape = ww > wh && ( ww - wh );
245 $tabbar.removeClass( "ui-portrait-tabbar" ).addClass( "ui-landscape-tabbar" );
247 $tabbar.removeClass( "ui-landscape-tabbar" ).addClass( "ui-portrait-tabbar" );
252 _setDisabled: function ( value, cnt ) {
253 this.element.find( "li" ).eq( cnt ).attr( "disabled", value );
254 this.element.find( "li" ).eq( cnt ).attr( "aria-disabled", value );
257 disable: function ( cnt ) {
258 this._setDisabled( true, cnt );
259 this.element.find( "li" ).eq( cnt ).addClass( "ui-disabled" );
262 enable: function ( cnt ) {
263 this._setDisabled( false, cnt );
264 this.element.find( "li" ).eq( cnt ).removeClass( "ui-disabled" );
268 //auto self-init widgets
269 $( document ).bind( "pagecreate create", function ( e ) {
270 $( $.tizen.tabbar.prototype.options.initSelector, e.target ).tabbar();
274 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
276 //>>excludeEnd("jqmBuildExclude");