1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
  4 //            (c) 2011 panacoda GmbH. All rights reserved.
  5 // Creator:   Dominik
  6 // Date:      16.11.2010
  7 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  9 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
 10 // ==========================================================================
 11 
 12 /**
 13  * @class
 14  *
 15  * The is the prototype of any tab bar view. A tab bar view is a special variant of a toolbar
 16  * at the top or bottom of a page, that consists of up to five horizontally aligned tabs. An
 17  * M.TabBarView can be used the top navigation level for an application since it is always
 18  * visible an indicates the currently selected tab.
 19  *
 20  */
 21 M.TabBarView = M.View.extend(
 22 /** @scope M.TabBarView.prototype */ {
 23 
 24     /**
 25      * The type of this object.
 26      *
 27      * @type String
 28      */
 29     type: 'M.TabBarView',
 30     
 31      /**
 32      * Defines the position of the TabBar. Possible values are:
 33      *
 34      * - M.BOTTOM => is a footer tab bar
 35      * - M.TOP => is a header tab bar
 36      * - null / not set ==> a tab bar outside header / footer
 37      *
 38      * @type String
 39      */
 40     anchorLocation: null,
 41 
 42     /**
 43      * This property defines the tab bar's name. This is used internally to identify
 44      * the tab bar inside the DOM.
 45      *
 46      * @type String
 47      */
 48     name: 'tab_bar',
 49 
 50     /**
 51      * This property holds a reference to the currently active tab.
 52      *
 53      * @type M.TabBarItemView
 54      */
 55     activeTab: null,
 56 
 57     /**
 58      * This property is used internally to count the number of usages of a tab bar.
 59      */
 60     usageCounter: 0,
 61 
 62     /**
 63      * Renders a tab bar as an unordered list.
 64      *
 65      * @private
 66      * @returns {String} The tab bar view's html representation.
 67      */
 68     render: function() {
 69         this.html = '';
 70         this.usageCounter += 1;
 71 
 72         if(this.anchorLocation) {
 73             this.html += '<div id="' + this.id + '" data-id="' + this.name + '" data-role="' + this.anchorLocation + '" data-position="fixed"><div data-role="navbar"><ul>';
 74         } else {
 75             this.html += '<div data-role="navbar" id="' + this.id + '" data-id="' + this.name + '"><ul>';
 76         }
 77 
 78         this.renderChildViews();
 79 
 80         this.html += '</ul></div>';
 81 
 82         if(this.anchorLocation) {
 83             this.html += '</div>';
 84         }
 85 
 86         return this.html;
 87     },
 88 
 89     /**
 90      * Triggers render() on all children of type M.TabBarItemView.
 91      *
 92      * @private
 93      */
 94     renderChildViews: function() {
 95         if(this.childViews) {
 96             var childViews = this.getChildViewsAsArray();
 97 
 98             /* pre-process the child views to define which tab is selected */
 99             var hasActiveTab = NO;
100             for(var i in childViews) {
101                 var view = this[childViews[i]];
102                 if(view.type === 'M.TabBarItemView' && view.isActive) {
103                     if(!hasActiveTab) {
104                         hasActiveTab = YES;
105                         this.activeTab = view;
106                     } else {
107                         view.isActive = NO;
108                     }
109                 }
110             }
111 
112             var numTabBarViews = 0;
113             for(var i in childViews) {
114                 var view = this[childViews[i]];
115                 if(view.type === 'M.TabBarItemView') {
116                     numTabBarViews = numTabBarViews + 1;
117 
118                     /* set first tab to active tab if nothing else specified */
119                     if(numTabBarViews === 1 && !hasActiveTab) {
120                         view.isActive = YES;
121                         this.activeTab = view;
122                     }
123 
124                     view.parentView = this;
125                     view._name = childViews[i];
126                     this.html += view.render();
127                 } else {
128                     M.Logger.log('Invalid child views specified for TabBarView. Only TabBarItemViews accepted.', M.WARN);
129                 }
130             }
131         } else {
132             M.Logger.log('No TabBarItemViews specified.', M.WARN);
133             return;
134         }
135     },
136 
137     /**
138      * This method visually activates a tab bar item based on a given page.
139      *
140      * @param {M.TabBarItemView} tab The tab to set active.
141      */
142     setActiveTab: function(tab) {
143         /* deactivate current active tav */
144         this.activeTab.isActive = NO;
145         var activeTabMainID = this.activeTab.id.substring(0, this.activeTab.id.lastIndexOf('_'));
146         $('[id^=' + activeTabMainID + '_]').each(function() {
147             $(this).removeClass('ui-btn-active');
148         });
149 
150         /* activate new tab */
151         tab.isActive = YES;
152         this.activeTab = tab;
153         var tabMainID = tab.id.substring(0, tab.id.lastIndexOf('_'));
154         $('[id^=' + tabMainID + '_]').each(function() {
155             $(this).addClass('ui-btn-active');
156         });
157 
158     }
159 
160 });