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