1 /** 2 * @author Gillis Haasnoot <gillis.haasnoot@gmail.com> 3 * @package Banana.Controls 4 * @summary Modal control 5 */ 6 7 goog.provide('Banana.Controls.Modal'); 8 9 goog.require('Banana.Controls.Panel'); 10 11 /** @namespace Banana.Controls.Modal */ 12 namespace('Banana.Controls').Modal = Banana.Controls.Panel.extend( 13 /** @lends Banana.Controls.Modal.prototype */ 14 { 15 /** 16 * Creates a modal. A modal is a control which shows itself on top of other visible controls. 17 * Inside of the modal you can add your own control collection. Additional action buttons 18 * can be configured which will be visible at the bottom of the modal 19 * 20 * @constructs 21 * @extends Banana.Controls.Panel 22 */ 23 init : function() 24 { 25 this.keepFixed = true; 26 this._super(); 27 this.antiPaddingBug = new Banana.Controls.Panel(); 28 this.antiPaddingBug.addCssClass('BModalAntiPadding') 29 this.contentContainer = new Banana.Controls.Panel(); 30 this.contentContainer.addCssClass('BModalContent') 31 this.contentContainer.setId('content'); 32 this.titleLabel = new Banana.Controls.Label().addCssClass("BModalTitle") 33 this.buttonContainer = new Banana.Controls.Panel().addCssClass('BModalButtonContainer') 34 }, 35 36 /** 37 * Let's the modal stay fixed in the screen. Scrolling down in your page will keep the 38 * modal at its position. Not handy when your modal is higher than the height size of your screen. 39 * 40 * @param boolean 41 * @return {this} 42 */ 43 setKeepFixed : function(bool) 44 { 45 this.keepFixed = bool; 46 return this; 47 }, 48 49 /** 50 * @override 51 */ 52 updateDisplay : function() 53 { 54 this.center(); 55 56 if (this.keepFixed) 57 { 58 this.container.setCss({'position':'fixed','top':this.getPage().getDimensions().offset.top + 20}); 59 } 60 }, 61 62 /** 63 *@param bool enabled or disables buttons 64 *@return {this} 65 */ 66 setButtonsEnabled : function(bool) 67 { 68 var buttons = this.buttonContainer.getControls(); 69 70 for (var i = 0;i < buttons.length; i++) 71 { 72 buttons[i].setEnabled(bool); 73 } 74 75 return this; 76 }, 77 78 /** 79 * Set the buttons which we show at the bottom of the modal 80 * @param {Array} of Banana.Controls.Buttons 81 */ 82 setButtons : function(buttons) 83 { 84 if (this.isRendered) 85 { 86 this.buttonContainer.clear(); 87 } 88 89 if (buttons.length)//we have an array 90 { 91 for (i = 0, len = buttons.length; i < len; i++) 92 { 93 if (buttons[i] instanceof Banana.Controls.Button) 94 { 95 this.buttonContainer.addControl(buttons[i]); 96 } 97 else 98 { 99 var b = new Banana.Controls.Button(); 100 b.addCssClass('BButtonGray'); 101 b.setStyle('margin-left:5px;float:left;'); 102 b.bind('click',buttons[i][1]); 103 b.setText(buttons[i][0]); 104 this.buttonContainer.addControl(b); 105 } 106 107 } 108 } 109 else 110 { 111 for (var buttonname in buttons) 112 { 113 if (buttons[i] instanceof Banana.Controls.Button) 114 { 115 this.buttonContainer.addControl(buttons[buttonname]); 116 } 117 else 118 { 119 var b = new Banana.Controls.Button(); 120 b.addCssClass('BButtonGray'); 121 b.setStyle('margin-left:5px;float:left;'); 122 b.bind('click',buttons[buttonname]); 123 b.setText(buttonname); 124 this.buttonContainer.addControl(b); 125 } 126 } 127 } 128 129 if (this.isRendered) 130 { 131 this.buttonContainer.invalidateDisplay(); //todo not nice now use controlbar instead of this 132 } 133 134 return this; 135 }, 136 137 /** 138 * @override 139 */ 140 createComponents : function() 141 { 142 this.cover = new Banana.Controls.Panel(); 143 144 this.cover.addCssClass('BModalCover'); 145 146 this.container = new Banana.Controls.Panel(); 147 this.container.addCssClass('BModal'); 148 this.container.setStyle(this.style); 149 150 var controlbar = new Banana.Controls.Panel().addCssClass("BModalControlBar"); 151 152 controlbar.addControl(this.titleLabel); 153 154 this.antiPaddingBug.addControl(this.contentContainer) 155 this.antiPaddingBug.addControl(this.buttonContainer) 156 157 this.container 158 .addControl(controlbar) 159 .addControl(this.antiPaddingBug) 160 161 this.addControl(this.cover,true) 162 this.addControl(this.container,true); 163 164 this.bind('renderComplete',this.getProxy(this.center)); 165 }, 166 167 /** 168 * Centers the modal 169 */ 170 center : function() 171 { 172 if (this.isRendered) 173 { 174 var pageDem = this.getPage().getDimensions(); 175 this.container.setCss({'margin-left':((pageDem.width/2)-this.container.getDimensions().width/2)+'px','margin-top':40+'px'}); 176 } 177 return this; 178 }, 179 180 /** 181 * Hides the modal 182 * @return {this} 183 */ 184 hide : function() 185 { 186 this.setVisible(false); 187 this.triggerEvent('close'); 188 return this; 189 }, 190 191 /** 192 * Shows the modal 193 * @return {this} 194 */ 195 show : function() 196 { 197 this.titleLabel.setVisible(this.titleLabel.getData()); 198 this.setVisible(true,50,'fadeIn'); 199 this.center(); 200 this.triggerEvent('onShow'); 201 return this; 202 }, 203 204 /** 205 * title of the modal 206 * @param {String} title 207 * @return {this} 208 */ 209 setTitle : function(title) 210 { 211 this.titleLabel.setData(title); 212 return this; 213 }, 214 215 /** 216 * We override this method to make sure added controls are added not in the normal collection 217 * But in another specially created control. 218 * 219 * @param {mixed} Banana.Control or plaintext 220 * @param {boolean} normal if we still want to add it to regular collection 221 * @return {this} 222 * @override 223 */ 224 addControl : function(c,normal) 225 { 226 if (normal) 227 { 228 this._super(c); 229 } 230 else 231 { 232 this.contentContainer.addControl(c); 233 } 234 return this; 235 } 236 });