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