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