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: Sebastian 6 // Date: 02.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 * A constant value for the anchor location: top. 14 * 15 * @type String 16 */ 17 M.TOP = 'header'; 18 19 /** 20 * A constant value for the anchor location: bottom. 21 * 22 * @type String 23 */ 24 M.BOTTOM = 'footer'; 25 26 /** 27 * A constant value for the anchor location: left. 28 * 29 * @type Number 30 */ 31 M.LEFT = 'LEFT'; 32 33 /** 34 * A constant value for the anchor location: center. 35 * 36 * @type Number 37 */ 38 M.CENTER = 'CENTER'; 39 40 /** 41 * A constant value for the anchor location: right. 42 * 43 * @type Number 44 */ 45 M.RIGHT = 'RIGHT'; 46 47 /** 48 * @class 49 * 50 * The root object for ToolbarViews. 51 * 52 * @extends M.View 53 */ 54 M.ToolbarView = M.View.extend( 55 /** @scope M.ToolbarView.prototype */ { 56 57 /** 58 * The type of this object. 59 * 60 * @type String 61 */ 62 type: 'M.ToolbarView', 63 64 /** 65 * Defines the position of the TabBar. Possible values are: 66 * 67 * - M.BOTTOM => is a footer bar 68 * - M.TOP => is a header bar 69 * 70 * @type String 71 */ 72 anchorLocation: M.TOP, 73 74 /** 75 * Determines whether to display an auto-generated back-button on the left side 76 * of the toolbar view or not. 77 * 78 * @type Boolean 79 */ 80 showBackButton: NO, 81 82 /** 83 * If the showBackButton property is set to yes, this property will be used to 84 * save a reference to the M.ButtonView. 85 */ 86 backButton: null, 87 88 /** 89 * This property determines whether to fix the toolbar to the top / bottom of a 90 * page. By default this is set to YES. 91 * 92 * @type Boolean 93 */ 94 isFixed: YES, 95 96 /** 97 * Renders a toolbar as a div tag with corresponding data-role attribute and inner 98 * h1 child tag (representing the title of the header) 99 * 100 * @private 101 * @returns {String} The toolbar view's html representation. 102 */ 103 render: function() { 104 this.html += '<div id="' + this.id + '" data-role="' + this.anchorLocation + '"' + this.style(); 105 106 if(this.isFixed) { 107 this.html += ' data-position="fixed"'; 108 } 109 110 this.html += '>'; 111 112 this.renderChildViews(); 113 114 this.html += '</div>'; 115 116 return this.html; 117 }, 118 119 /** 120 * Triggers render() on all children or simply display the value as a label, 121 * if it is set. 122 */ 123 renderChildViews: function() { 124 if(this.value && this.showBackButton) { 125 /* create the toolbar's back button */ 126 this.backButton = M.ButtonView.design({ 127 value: 'Back', 128 icon: 'arrow-l', 129 internalEvents: { 130 tap: { 131 action: function() { 132 history.back(-1); 133 } 134 } 135 } 136 }); 137 138 /* render the back button and add it to the toolbar's html*/ 139 this.html += '<div class="ui-btn-left">'; 140 this.html += this.backButton.render(); 141 this.html += '</div>'; 142 143 /* render the centered value */ 144 this.html += '<h1>' + this.value + '</h1>'; 145 } else if(this.value) { 146 this.html += '<h1>' + this.value + '</h1>'; 147 } else if (this.childViews) { 148 var childViews = this.getChildViewsAsArray(); 149 var viewPositions = {}; 150 for(var i in childViews) { 151 var view = this[childViews[i]]; 152 view._name = childViews[i]; 153 if( viewPositions[view.anchorLocation] ) { 154 M.Logger.log('ToolbarView has two items positioned at M.' + 155 view.anchorLocation + 156 '. Only one item permitted in each location', M.WARN); 157 return; 158 } 159 viewPositions[view.anchorLocation] = YES; 160 switch (view.anchorLocation) { 161 case M.LEFT: 162 this.html += '<div class="ui-btn-left">'; 163 this.html += view.render(); 164 this.html += '</div>'; 165 break; 166 case M.CENTER: 167 this.html += '<h1>'; 168 this.html += view.render(); 169 this.html += '</h1>'; 170 break; 171 case M.RIGHT: 172 this.html += '<div class="ui-btn-right">'; 173 this.html += view.render(); 174 this.html += '</div>'; 175 break; 176 default: 177 M.Logger.log('ToolbarView children must have an anchorLocation of M.LEFT, M.CENTER, or M.RIGHT', M.WARN); 178 return; 179 } 180 } 181 } 182 }, 183 184 /** 185 * This method is responsible for registering events for view elements and its child views. It 186 * basically passes the view's event-property to M.EventDispatcher to bind the appropriate 187 * events. 188 * 189 * It extend M.View's registerEvents method with some special stuff for list views and their 190 * internal events. 191 */ 192 registerEvents: function() { 193 if(this.backButton) { 194 this.backButton.registerEvents(); 195 } 196 this.bindToCaller(this, M.View.registerEvents)(); 197 }, 198 199 /** 200 * Applies some style-attributes to the toolbar. 201 * 202 * @private 203 * @returns {String} The toolbar's styling as html representation. 204 */ 205 style: function() { 206 var html = ''; 207 if(this.cssClass) { 208 html += ' class="' + this.cssClass + '"'; 209 } 210 return html; 211 } 212 213 });