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