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