      1 // ==========================================================================
      2 // Project:   The M-Project - Mobile HTML5 Application Framework
      3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
      4 // Creator:   Dominik
      5 // Date:      02.12.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 horizontal alignment.
     13  *
     14  * @type String
     15  */
     16 M.HORIZONTAL = 'horizontal';
     17
     18 /**
     19  * A constant value for vertical alignment.
     20  *
     21  * @type String
     22  */
     23 M.VERTICAL = 'vertical';
     24
     25
     26 /**
     27  * @class
     28  *
     29  * A button group is a vertically or horizontally aligned group of buttons.
     30  *
     31  * @extends M.View
     32  */
     33 M.ButtonGroupView = M.View.extend(
     34 /** @scope M.ButtonGroupView.prototype */ {
     35
     36     /**
     37      * The type of this object.
     38      *
     39      * @type String
     40      */
     41     type: 'M.ButtonGroupView',
     42
     43     /**
     44      * This property determines whether to render the button group horizontally
     45      * or vertically. Default: horizontal.
     46      *
     47      * Possible values are:
     48      * - M.HORIZONTAL: horizontal
     49      * - M.VERTICAL: vertical
     50      *
     51      * @type String
     52      */
     53     direction: M.HORIZONTAL,
     54
     55     /**
     56      * This property contains a reference to the currently selected button.
     57      *
     58      * @private
     59      * @type Object
     60      */
     61     activeButton: null,
     62
     63     /**
     64      * Renders a button group as a div container and calls the renderChildViews
     65      * method to render the included buttons.
     66      *
     67      * @private
     68      * @returns {String} The button group view's html representation.
     69      */
     70     render: function() {
     71         this.html += '<div data-role="controlgroup" href="#" id="' + this.id + '" data-type="' + this.direction + '">';
     72
     73         this.renderChildViews();
     74
     75         this.html += '</div>';
     76
     77         return this.html;
     78     },
     79
     80     /**
     81      * Triggers render() on all children of type M.ButtonGroupView.
     82      *
     83      * @private
     84      */
     85     renderChildViews: function() {
     86         if(this.childViews) {
     87             var childViews = $.trim(this.childViews).split(' ');
     88             for(var i in childViews) {
     89                 if(this[childViews[i]] && this[childViews[i]].type === 'M.ButtonView') {
     90                     var button = this[childViews[i]];
     91
     92                     button.parentView = this;
     93                     button.internalTarget = this;
     94                     button.internalAction = 'setActiveButton';
     95
     96                     /* check if button has own target / action, otherwise use target / action from button group */
     97                     if(!button.target) {
     98                         if(this.target && this.action) {
     99                             button.target = this.target;
    100                             button.action = this.action;
    101                         }
    102                     }
    103
    104                     /* give the button a relative width, based on the number of buttons in this group */
    105                     if(this.direction === M.HORIZONTAL) {
    106                         button.cssStyle = 'width:' + 100 / childViews.length + '%';
    107                     }
    108
    109                     this.html += this[childViews[i]].render();
    110                 } else {
    111                     M.Logger.log('childview of button group is no button.', M.WARN);
    112                 }
    113             }
    114         }
    115     },
    116
    117     /**
    118      * This method themes the button group and activates one of the included buttons
    119      * if its isActive property is set.
    120      *
    121      * @private
    122      */
    123     theme: function() {
    124         $('#' + this.id).controlgroup();
    125
    126         if(this.childViews) {
    127             var childViews = $.trim(this.childViews).split(' ');
    128             for(var i in childViews) {
    129                 if(this[childViews[i]] && this[childViews[i]].type === 'M.ButtonView') {
    130                     var button = this[childViews[i]];
    131                     if(button.isActive) {
    132                         this.setActiveButton(button.id);
    133                         break;
    134                     }
    135                 }
    136             }
    137         }
    138     },
    139
    140     /**
    141      * This method returns the currently selected button of this button group. If no
    142      * button is selected, null is returned.
    143      *
    144      * @returns {M.ButtonView} The currently active button of this button group.
    145      */
    146     getActiveButton: function() {
    147         return this.activeButton;
    148     },
    149
    150     /**
    151      * This method activates one button within the button group.
    152      *
    153      * @param {M.ButtonView, String} id The button to be set active or its id.
    154      */
    155     setActiveButton: function(id) {
    156         this.activeButton = null;
    157         $('#' + this.id).find('a').each(function() {
    158             var button = M.ViewManager.getViewById($(this).attr('id'));
    159             button.removeCssClass('ui-btn-active');
    160             button.isActive = NO;
    161         });
    162
    163         var button = M.ViewManager.getViewById(id);
    164         if(!button) {
    165             if(id && typeof(id) === 'object' && id.type === 'M.ButtonView') {
    166                 button = id;
    167             }
    168         }
    169         if(button) {
    170             button.addCssClass('ui-btn-active');
    171             button.isActive = YES;
    172             this.activeButton = button;
    173         }
    174     }
    175
    176 });