1 // ========================================================================== 2 // Project: The M-Project - Mobile HTML5 Application Framework 3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved. 4 // Creator: Sebastian 5 // Date: 02.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 * A constant value for the anchor location: top. 13 * 14 * @type String 15 */ 16 M.TOP = 'header'; 17 18 /** 19 * A constant value for the anchor location: bottom. 20 * 21 * @type String 22 */ 23 M.BOTTOM = 'footer'; 24 25 /** 26 * A constant value for the anchor location: left. 27 * 28 * @type Number 29 */ 30 M.LEFT = 0; 31 32 /** 33 * A constant value for the anchor location: center. 34 * 35 * @type Number 36 */ 37 M.CENTER = 1; 38 39 /** 40 * A constant value for the anchor location: right. 41 * 42 * @type Number 43 */ 44 M.RIGHT = 2; 45 46 /** 47 * @class 48 * 49 * The root object for ToolbarViews. 50 * 51 * @extends M.View 52 */ 53 M.ToolbarView = M.View.extend( 54 /** @scope M.ToolbarView.prototype */ { 55 56 /** 57 * The type of this object. 58 * 59 * @type String 60 */ 61 type: 'M.ToolbarView', 62 63 /** 64 * Defines the position of the TabBar. Possible values are: 65 * 66 * - M.BOTTOM => is a footer bar 67 * - M.TOP => is a header bar 68 * 69 * @type String 70 */ 71 anchorLocation: M.TOP, 72 73 /** 74 * Determines whether to display an auto-generated back-button on the left side 75 * of the toolbar view or not. 76 * 77 * @type Boolean 78 */ 79 showBackButton: NO, 80 81 /** 82 * Renders a toolbar as a div tag with corresponding data-role attribute and inner 83 * h1 child tag (representing the title of the header) 84 * 85 * @private 86 * @returns {String} The toolbar view's html representation. 87 */ 88 render: function() { 89 this.html += '<div id="' + this.id + '" data-nobackbtn="' + !this.showBackButton + '" data-role="' + this.anchorLocation + '" data-position="fixed">'; 90 91 this.renderChildViews(); 92 93 this.html += '</div>'; 94 95 return this.html; 96 }, 97 98 /** 99 * Triggers render() on all children or simply display the value as a label, 100 * if it is set. 101 */ 102 renderChildViews: function() { 103 if(this.value) { 104 this.html += '<h1>' + this.value + '</h1>'; 105 } else if (this.childViews) { 106 var childViews = $.trim(this.childViews).split(' '); 107 108 /* A ToolbarView accepts only 3 childViews, one for each location: left, center, right */ 109 if(childViews.length > 3) { 110 M.Logger.log('To many childViews defined for toolbarView.', M.WARN); 111 return; 112 } 113 114 for(var i in childViews) { 115 var view = this[childViews[i]]; 116 switch (view.anchorLocation) { 117 case M.LEFT: 118 this.html += '<div class="ui-btn-left">'; 119 this.html += view.render(); 120 this.html += '</div>'; 121 break; 122 case M.CENTER: 123 this.html += '<h1>'; 124 this.html += view.render(); 125 this.html += '</h1>'; 126 break; 127 case M.RIGHT: 128 this.html += '<div class="ui-btn-right">'; 129 this.html += view.render(); 130 this.html += '</div>'; 131 break; 132 } 133 } 134 } 135 }, 136 137 /** 138 * Triggers the rendering engine, jQuery mobile, to style the button. 139 * 140 * @private 141 */ 142 theme: function() { 143 this.themeChildViews(); 144 } 145 146 });