1 include(bbq.gui.GUIWidget); 2 include(bbq.web.FocusWatcher); 3 4 /** 5 * Holds bbq.gui.button.GUIButtons 6 * 7 * @class bbq.gui.button.ButtonHolder 8 * @extends bbq.gui.GUIWidget 9 */ 10 bbq.gui.button.ButtonHolder = Class.create(bbq.gui.GUIWidget, { 11 _disabled: false, 12 _selectedIndex: -1, 13 _buttons: null, 14 _buttonNames: null, 15 16 /** 17 * Supports the following options: 18 * 19 * options: { 20 * vertical: boolean // Pass true if these buttons are orientated vertically, otherwise will be horiztonal 21 * ignoreKeyPresses: boolean // Pass true to ignore key presses 22 * } 23 */ 24 initialize: function($super, options) { 25 $super(options); 26 27 this.setRootNode("ul"); 28 this.addClass("ButtonHolder"); 29 30 this._buttonNames = new Hash(); 31 this._buttons = []; 32 }, 33 34 render: function($super) { 35 $super(); 36 37 this.empty(); 38 39 this._buttons.each(function(button, index) { 40 this.appendChild(DOMUtil.createElement("li", button)); 41 42 if(index == this._selectedIndex) { 43 button.setDown(true); 44 } 45 }.bind(this)); 46 }, 47 48 /** 49 * @param {bbq.gui.button.GUIButton} button 50 */ 51 addButton: function(button, buttonName) { 52 if(buttonName) { 53 this._buttonNames.set(buttonName, button); 54 } 55 56 this._buttons.push(button); 57 58 button.registerListener("onMouseDown", this._buttonMouseDown.bind(this, button)); 59 button.registerListener("onClick", this._buttonClicked.bind(this, button)); 60 61 return button; 62 }, 63 64 /** 65 * Removes the down state on all child buttons 66 */ 67 clearDown: function() { 68 this._buttons.invoke("clearDown"); 69 }, 70 71 /** 72 * Disables every child button 73 */ 74 setDisabled: function(disabled) { 75 this._disabled = disabled; 76 this._buttons.invoke("setDisabled", disabled); 77 this._buttonNames.each(function(button) { 78 button[1].setDisabled(disabled); 79 }) 80 81 if(this._disabled) { 82 this.clearDown(); 83 this.loseFocus(); 84 } 85 }, 86 87 /** 88 * Returns a button. Either pass in a button name as a string 89 * or a position index as an integer. 90 * 91 * @param {integer} index 92 */ 93 getButton: function(index) { 94 if(Object.isString(index)) { 95 return this._buttonNames.get(index); 96 } 97 98 return this._buttons[index]; 99 }, 100 101 /** 102 * @return Returns the index of the currently selected button 103 * @type {integer} 104 */ 105 getSelectedIndex: function() { 106 return this._selectedIndex; 107 }, 108 109 /** 110 * Sets the currently selected button index 111 * @param {integer} index 112 */ 113 setSelectedIndex: function(index) { 114 this._selectedIndex = index; 115 }, 116 117 /** 118 * @private 119 */ 120 _buttonClicked: function(button) { 121 this._buttons.each(function(b) { 122 if(b != button) { 123 b.clearDown(); 124 } 125 }); 126 127 this.setSelectedIndex(this._buttons.indexOf(button)); 128 129 FocusWatcher.setKeypressCallbackObject(this); 130 }, 131 132 /** 133 * @private 134 */ 135 _buttonMouseDown: function(button) { 136 137 }, 138 139 /** 140 * Accepts focus if not disabled 141 */ 142 acceptFocus: function() { 143 if(!this._disabled) { 144 this.addClass("hasFocus"); 145 } 146 }, 147 148 /** 149 * Loose focus 150 */ 151 loseFocus: function() { 152 this.removeClass("hasFocus"); 153 }, 154 155 /** 156 * Processes key presses on the button holder 157 * @param {Event} event 158 */ 159 processKeypress: function(event) { 160 if(!this.options.ignoreKeyPresses && !this._disabled) { 161 var nextEntity = false; 162 var index = this.getSelectedIndex(); 163 164 if(index != -1) { 165 // process keypress 166 if(this.options.vertical) { 167 if(event.keyCode == Event.KEY_UP) { // previous button 168 nextEntity = this.getButton(index - 1); 169 } else if(event.keyCode == Event.KEY_DOWN) { // next button 170 nextEntity = this.getButton(index + 1); 171 } 172 } else { 173 if(event.keyCode == Event.KEY_LEFT) { // previous button 174 nextEntity = this.getButton(index - 1); 175 } else if(event.keyCode == Event.KEY_RIGHT) { // next button 176 nextEntity = this.getButton(index + 1); 177 } 178 } 179 } 180 181 if(nextEntity) { 182 nextEntity.buttonClicked(); 183 } 184 185 return true; 186 } 187 } 188 }); 189