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 });