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  * This defines the prototype of any tab bar item view. An M.TabBarItemView can only be
 15  * used as a child view of a tab bar view.
 16  *
 17  * @extends M.View
 18  */
 19 M.TabBarItemView = M.View.extend(
 20 /** @scope M.TabBarItemView.prototype */ {
 21 
 22     /**
 23      * The type of this object.
 24      *
 25      * @type String
 26      */
 27     type: 'M.TabBarItemView',
 28 
 29     /**
 30      * Determines whether this TabBarItem is active or not.
 31      *
 32      * @type Boolean
 33      */
 34     isActive: NO,
 35 
 36     /**
 37      * This property is used to specify an internal target for an automatically called action. This
 38      * is used to trigger the switchPage() by clicking on a tab bar item.
 39      *
 40      * @type Object
 41      */
 42     internalTarget: null,
 43 
 44     /**
 45      * This property is used to specify an internal action for an automatically called action. This
 46      * is used to trigger the switchPage() by clicking on a tab bar item.
 47      *
 48      * @type Object
 49      */
 50     internalAction: 'switchPage',
 51 
 52     /**
 53      * Renders a tab bar item as a li-element inside of a parent tab bar view.
 54      *
 55      * @private
 56      * @returns {String} The button view's html representation.
 57      */
 58     render: function() {
 59         this.html += '<li><a id="' + this.id + '"' + this.style() + ' href="#">' + this.value + '</a></li>';
 60 
 61         this.internalTarget = this;
 62         
 63         return this.html;
 64     },
 65 
 66     /**
 67      * This method is automatically called if a tab bar item is clicked. It delegates the
 68      * page switching job to M.Controller.
 69      */
 70     switchPage: function() {
 71         M.Controller.switchToPage(M.ViewManager.getPage(this.page));
 72     },
 73 
 74     /**
 75      * Applies some style-attributes to the tab bar item.
 76      *
 77      * @private
 78      * @returns {String} The tab bar item's styling as html representation.
 79      */
 80     style: function() {
 81         var html = '';
 82         if(this.isActive) {
 83             html += ' class="';
 84             html += 'ui-btn-active';
 85             html += '"';
 86         }
 87         if(this.icon) {
 88             html += ' data-icon="';
 89             html += this.icon;
 90             html += '" data-iconpos="top"';
 91         }
 92         return html;
 93     }
 94     
 95 });