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