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  * This defines the prototype of any tab bar item view. An M.TabBarItemView can only be
 16  * used as a child view of a tab bar view.
 17  *
 18  * @extends M.View
 19  */
 20 M.TabBarItemView = M.View.extend(
 21 /** @scope M.TabBarItemView.prototype */ {
 22 
 23     /**
 24      * The type of this object.
 25      *
 26      * @type String
 27      */
 28     type: 'M.TabBarItemView',
 29 
 30     /**
 31      * Determines whether this TabBarItem is active or not.
 32      *
 33      * @type Boolean
 34      */
 35     isActive: NO,
 36 
 37     /**
 38      * This property specifies the recommended events for this type of view.
 39      *
 40      * @type Array
 41      */
 42     recommendedEvents: ['click', 'tap'],
 43 
 44     /**
 45      * Renders a tab bar item as a li-element inside of a parent tab bar view.
 46      *
 47      * @private
 48      * @returns {String} The button view's html representation.
 49      */
 50     render: function() {
 51         this.html = '';
 52         if(this.id.lastIndexOf('_') == 1) {
 53             this.id = this.id + '_' + this.parentView.usageCounter;
 54         } else {
 55             this.id = this.id.substring(0, this.id.lastIndexOf('_')) + '_' + this.parentView.usageCounter;
 56         }
 57         M.ViewManager.register(this);
 58 
 59         this.html += '<li><a id="' + this.id + '"' + this.style() + ' href="#">' + this.value + '</a></li>';
 60         
 61         return this.html;
 62     },
 63 
 64     /**
 65      * This method is responsible for registering events for view elements and its child views. It
 66      * basically passes the view's event-property to M.EventDispatcher to bind the appropriate
 67      * events.
 68      *
 69      * It extend M.View's registerEvents method with some special stuff for tab bar item views and
 70      * their internal events.
 71      */
 72     registerEvents: function() {
 73         this.internalEvents = {
 74             tap: {
 75                 target: this,
 76                 action: 'switchPage'
 77             }
 78         }
 79         this.bindToCaller(this, M.View.registerEvents)();
 80     },
 81 
 82     /**
 83      * This method is automatically called if a tab bar item is clicked. It delegates the
 84      * page switching job to M.Controller's switchToTab().
 85      */
 86     switchPage: function() {
 87         if(this.page) {
 88             M.Controller.switchToTab(this);
 89         } else {
 90             this.parentView.setActiveTab(this);
 91         }
 92     },
 93 
 94     /**
 95      * Applies some style-attributes to the tab bar item.
 96      *
 97      * @private
 98      * @returns {String} The tab bar item's styling as html representation.
 99      */
100     style: function() {
101         var html = '';
102         if(this.cssClass) {
103             html += ' class="' + this.cssClass + '"';
104         }
105         if(this.isActive) {
106             html += html != '' ? '' : ' class="';
107             html += 'ui-btn-active';
108             html += '"';
109         }
110         if(this.icon) {
111             html += ' data-icon="';
112             html += this.icon;
113             html += '" data-iconpos="top"';
114         }
115         return html;
116     }
117     
118 });