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 = 0;
 32 
 33 /**
 34  * A constant value for the anchor location: center.
 35  *
 36  * @type Number
 37  */
 38 M.CENTER = 1;
 39 
 40 /**
 41  * A constant value for the anchor location: right.
 42  *
 43  * @type Number
 44  */
 45 M.RIGHT = 2;
 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 
150             /* A ToolbarView accepts only 3 childViews, one for each location: left, center, right */
151             if(childViews.length > 3) {
152                 M.Logger.log('To many childViews defined for toolb  arView.', M.WARN);
153                 return;
154             }
155 
156             for(var i in childViews) {
157                 var view = this[childViews[i]];
158                 view._name = childViews[i];
159                 switch (view.anchorLocation) {
160                     case M.LEFT:
161                         this.html += '<div class="ui-btn-left">';
162                         this.html += view.render();
163                         this.html += '</div>';
164                         break;
165                     case M.CENTER:
166                         this.html += '<h1>';
167                         this.html += view.render();
168                         this.html += '</h1>';
169                         break;
170                     case M.RIGHT:
171                         this.html += '<div class="ui-btn-right">';
172                         this.html += view.render();
173                         this.html += '</div>';
174                         break;
175                 }
176             }
177         }
178     },
179 
180     /**
181      * This method is responsible for registering events for view elements and its child views. It
182      * basically passes the view's event-property to M.EventDispatcher to bind the appropriate
183      * events.
184      *
185      * It extend M.View's registerEvents method with some special stuff for list views and their
186      * internal events.
187      */
188     registerEvents: function() {
189         if(this.backButton) {
190             this.backButton.registerEvents();
191         }
192         this.bindToCaller(this, M.View.registerEvents)();
193     },
194 
195     /**
196      * Applies some style-attributes to the toolbar.
197      *
198      * @private
199      * @returns {String} The toolbar's styling as html representation.
200      */
201     style: function() {
202         var html = '';
203         if(this.cssClass) {
204             html += ' class="' + this.cssClass + '"';
205         }
206         return html;
207     }
208     
209 });