1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
  4 // Creator:   Dominik
  5 // Date:      16.11.2010
  6 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  7 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
  9 // ==========================================================================
 10 
 11 /**
 12  * @class
 13  *
 14  * The is the prototype of any tab bar view. A tab bar view is a special variant of a toolbar
 15  * at the top or bottom of a page, that consists of up to five horizontally aligned tabs. An
 16  * M.TabBarView can be used the top navigation level for an application since it is always
 17  * visible an indicates the currently selected tab.
 18  *
 19  */
 20 M.TabBarView = M.View.extend(
 21 /** @scope M.TabBarView.prototype */ {
 22 
 23     /**
 24      * The type of this object.
 25      *
 26      * @type String
 27      */
 28     type: 'M.TabBarView',
 29     
 30      /**
 31      * Defines the position of the TabBar. Possible values are:
 32      *
 33      * - M.BOTTOM => is a footer tab bar
 34      * - M.TOP => is a header tab bar
 35      *
 36      * @type String
 37      */
 38     anchorLocation: M.BOTTOM,
 39 
 40     /**
 41      * Renders a tab bar as an unordered list.
 42      *
 43      * @private
 44      * @returns {String} The tab bar view's html representation.
 45      */
 46     render: function() {
 47         if(!this.html) {
 48             this.html = '';
 49 
 50             this.html += '<div id="' + this.id + '" data-id="' + this.name + '" data-role="' + this.anchorLocation + '" data-position="fixed"><div data-role="navbar"><ul>';
 51 
 52             this.renderChildViews();
 53 
 54             this.html += '</ul></div></div>';
 55         }
 56         return this.html;
 57     },
 58 
 59     /**
 60      * Triggers render() on all children of type M.TabBarItemView.
 61      *
 62      * @private
 63      */
 64     renderChildViews: function() {
 65         if(this.childViews) {
 66             var childViews = $.trim(this.childViews).split(' ');
 67             for(var i in childViews) {
 68                 var view = this[childViews[i]];
 69                 if(view.type === 'M.TabBarItemView') {
 70                     view.parentView = this;
 71                     this.html += view.render();
 72                 } else {
 73                     M.Logger.log('Invalid child views specified for TabBarView. Only TabBarItemViews accepted.', M.WARN);
 74                 }
 75             }
 76         } else {
 77             M.Logger.log('No TabBarItemViews specified.', M.WARN);
 78             return;
 79         }
 80     },
 81 
 82     /**
 83      * This method activates a tab bar item based on a given page.
 84      *
 85      * @param {String, M.PageView} page The page to the corresponding tab that is to be set active.
 86      */
 87     setActiveTab: function(page) {
 88         if(this.childViews) {
 89             var childViews = $.trim(this.childViews).split(' ');
 90             var previousPage = M.Application.viewManager.getCurrentPage();
 91             var nextPage = page.type === 'M.PageView' ? page : M.ViewManager.getPage(page);
 92             for(var i in childViews) {
 93                 var view = this[childViews[i]];
 94                 if(view.page === page) {
 95                     view.isActive = YES;
 96                     $('[data-id="' + this.name + '"]').each(function() {
 97                         $(this).find('#' + view.id).addClass('ui-btn-active');
 98                     });
 99                 } else {
100                     view.isActive = NO;
101                     $('[data-id="' + this.name + '"]').each(function() {
102                         $(this).find('#' + view.id).removeClass('ui-btn-active');
103                     });
104                 }
105             }
106         }
107     }
108 
109 });