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