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