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