1 /*
  2  * This file is part of Appcelerator.
  3  *
  4  * Copyright (C) 2006-2008 by Appcelerator, Inc. All Rights Reserved.
  5  * For more information, please visit http://www.appcelerator.org
  6  *
  7  * Appcelerator is free software: you can redistribute it and/or modify
  8  * it under the terms of the GNU General Public License as published by
  9  * the Free Software Foundation, either version 3 of the License, or
 10  * (at your option) any later version.
 11  *
 12  * This program is distributed in the hope that it will be useful,
 13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU General Public License for more details.
 16  * 
 17  * You should have received a copy of the GNU General Public License
 18  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 19  *
 20  */
 21 
 22 
 23 Appcelerator.Widget.Button =
 24 {
 25 	getName: function()
 26 	{
 27 		return 'appcelerator button';
 28 	},
 29 	getDescription: function()
 30 	{
 31 		return 'button widget';
 32 	},
 33 	getVersion: function()
 34 	{
 35 		return 1.0;
 36 	},
 37 	getSpecVersion: function()
 38 	{
 39 		return 1.0;
 40 	},
 41 	getAuthor: function()
 42 	{
 43 		return 'Hamed Hashemi';
 44 	},
 45 	getModuleURL: function ()
 46 	{
 47 		return 'http://www.appcelerator.org';
 48 	},
 49 	isWidget: function ()
 50 	{
 51 		return true;
 52 	},
 53 	getWidgetName: function()
 54 	{
 55 		return 'app:button';
 56 	},
 57 	getActions: function()
 58 	{
 59 		return ['enable', 'disable'];
 60 	},	
 61 	getAttributes: function()
 62 	{
 63 		var T = Appcelerator.Types;
 64 		return [{name: 'on', optional: true, type: T.onExpr},
 65 				{name: 'width', optional: true, defaultValue: 200, type: T.cssDimension},
 66 				{name: 'disabled', optional: true, defaultValue: 'false', type: T.bool},
 67 				{name: 'corner', optional: true, defaultValue: 'round', type: T.enumeration('round','square')},
 68 				{name: 'color', optional: true, defaultValue: 'dark', type: T.enumeration('dark','light')},
 69 				{name: 'icon', optional: true, defaultValue: '', type: T.enumeration('add','delete','edit','save','')},
 70 				{name: 'fieldset', optional: true, type: T.fieldset},
 71 				{name: 'activators', optional: true}];
 72 	},
 73 	dontParseOnAttributes: function()
 74 	{
 75 		return true;
 76 	},
 77 	//Helper function to check if the button is disabled.  Firefox, Safari and IE do different
 78 	//things
 79 	isEnabled: function(params)
 80 	{
 81 		return !(params['disabled'] == "true" || params['disabled'] == true);
 82 	},
 83 	compileWidget: function(parameters)
 84 	{
 85 		var id = parameters['id'];
 86 		var button = $(id);
 87 		var left = $(id+'_left');
 88 		var middle = $(id+'_middle');
 89 		var right = $(id+'_right');
 90 		var corner = parameters['corner'];
 91 		var color = parameters['color'];
 92 		var disabled = '';
 93 		if (parameters['disabled'] == 'true')
 94 		{
 95 			$(id).disabled = true;
 96 			disabled = '_disabled';
 97 		}
 98 		
 99 		button.onmouseover = function()
100 		{
101 			if(Appcelerator.Widget.Button.isEnabled(parameters))
102 			{
103 				left.className = 'button_'+color+'_'+corner+'_left_over';
104 				middle.className = 'button_'+color+'_'+corner+'_middle_over button_'+color+'_text';
105 				right.className = 'button_'+color+'_'+corner+'_right_over';
106 				if (Appcelerator.Browser.isIE6)
107 				{
108 					Appcelerator.Browser.fixBackgroundPNG(left);
109 					Appcelerator.Browser.fixBackgroundPNG(middle);
110 					Appcelerator.Browser.fixBackgroundPNG(right);
111 				}
112 			}
113 		};
114 		
115 		button.onmouseout = function()
116 		{
117 			if (Appcelerator.Widget.Button.isEnabled(parameters))
118 			{
119 				left.className = 'button_'+color+'_'+corner+'_left';
120 				middle.className = 'button_'+color+'_'+corner+'_middle button_'+color+'_text';
121 				right.className = 'button_'+color+'_'+corner+'_right';
122 				if (Appcelerator.Browser.isIE6)
123 				{
124 					Appcelerator.Browser.fixBackgroundPNG(left);
125 					Appcelerator.Browser.fixBackgroundPNG(middle);
126 					Appcelerator.Browser.fixBackgroundPNG(right);
127 				}
128 			}
129 		};
130 		
131 		button.onmousedown = function()
132 		{
133 			if (Appcelerator.Widget.Button.isEnabled(parameters))
134 			{
135 				left.className = 'button_'+color+'_'+corner+'_left_press';
136 				middle.className = 'button_'+color+'_'+corner+'_middle_press button_'+color+'_text';
137 				right.className = 'button_'+color+'_'+corner+'_right_press';
138 				if (Appcelerator.Browser.isIE6)
139 				{
140 					Appcelerator.Browser.fixBackgroundPNG(left);
141 					Appcelerator.Browser.fixBackgroundPNG(middle);
142 					Appcelerator.Browser.fixBackgroundPNG(right);
143 				}
144 			}
145 		};		
146 
147 		button.onmouseup = function()
148 		{
149 			if (Appcelerator.Widget.Button.isEnabled(parameters))
150 			{
151 				left.className = 'button_'+color+'_'+corner+'_left_over';
152 				middle.className = 'button_'+color+'_'+corner+'_middle_over button_'+color+'_text';
153 				right.className = 'button_'+color+'_'+corner+'_right_over';
154 				if (Appcelerator.Browser.isIE6)
155 				{
156 					Appcelerator.Browser.fixBackgroundPNG(left);
157 					Appcelerator.Browser.fixBackgroundPNG(middle);
158 					Appcelerator.Browser.fixBackgroundPNG(right);
159 				}
160 			}
161 		};		
162 
163 		if (parameters['activators'])
164 		{
165 			button.onActivatorsDisable = function()
166 			{
167 				Appcelerator.Widget.Button.disable(id, parameters);
168 			};
169 			button.onActivatorsEnable = function()
170 			{
171 				Appcelerator.Widget.Button.enable(id, parameters);
172 			};
173 		}
174 	},
175 	enable: function(id,parameters,data,scope,version)
176 	{
177 		var id = parameters['id'];
178 		var button = $(id);
179 		var color = parameters['color'];
180 		var corner = parameters['corner'];
181 		var left = $(id+'_left');
182 		var middle = $(id+'_middle');
183 		var right = $(id+'_right');
184 
185 		button.disabled = false;
186 		left.className = 'button_'+color+'_'+corner+'_left';
187 		middle.className = 'button_'+color+'_'+corner+'_middle button_'+color+'_text';
188 		right.className = 'button_'+color+'_'+corner+'_right';
189 		button.className = 'button_widget';
190 		if (Appcelerator.Browser.isIE6)
191 		{
192 			Appcelerator.Browser.fixBackgroundPNG(left);
193 			Appcelerator.Browser.fixBackgroundPNG(middle);
194 			Appcelerator.Browser.fixBackgroundPNG(right);
195 		}
196 		$(id).parentNode.disabled = false;	
197        	
198 	},
199 	disable: function(id,parameters,data,scope,version)
200 	{
201 		var id = parameters['id'];
202 		var button = $(id);
203 		var corner = parameters['corner'];
204 		var color = parameters['color'];
205 		var left = $(id+'_left');
206 		var middle = $(id+'_middle');
207 		var right = $(id+'_right');
208 
209 		button.disabled = true;
210 		left.className = 'button_'+color+'_'+corner+'_left_disabled';
211 		middle.className = 'button_'+color+'_'+corner+'_middle_disabled button_'+color+'_text_disabled';
212 		right.className = 'button_'+color+'_'+corner+'_right_disabled';
213 		button.className = 'button_widget_disabled';
214 		if (Appcelerator.Browser.isIE6)
215 		{
216 			Appcelerator.Browser.fixBackgroundPNG(left);
217 			Appcelerator.Browser.fixBackgroundPNG(middle);
218 			Appcelerator.Browser.fixBackgroundPNG(right);
219 		}
220 		$(id).parentNode.disabled = true;
221 	},
222 	buildWidget: function(element,parameters)
223 	{
224 		var elementText = Appcelerator.Compiler.getHtml(element);
225 		var corner = parameters['corner'];
226 		var color = parameters['color'];
227 		var icon = parameters['icon'];
228 		if (parameters['icon'] != '')
229 		{
230 			icon = 'button_icon_' + parameters['icon'];
231 		}
232 		
233 		var disabled = '';
234 		if (!Appcelerator.Widget.Button.isEnabled(parameters))
235 		{
236 			disabled = '_disabled';
237 		}
238 		
239 		var html = '<button class="button_widget'+disabled+'" id="'+element.id+'" style="width:'+parameters['width']+'px"';
240         if(typeof parameters['on'] != 'undefined') 
241         {
242             html += ' on="'+parameters['on']+'"';
243         } 
244        	if (parameters['fieldset'])
245 		{
246 			html += ' fieldset="'+parameters['fieldset']+'"';
247 		}
248 		if (parameters['activators'])
249 		{
250 			html += ' activators="'+parameters['activators']+'"';
251 		}
252 		if('' != disabled)
253 		{
254 			html += ' disabled="true"';
255 		}
256         html += '>';
257         
258 		html += '<table class="button_table" border="0" cellpadding="0" cellspacing="0" width="100%">';
259 		html += '<tr>';
260 		html += '<td class="button_'+color+'_'+corner+'_left'+disabled+'" id="'+element.id+'_left">';
261 		html += '</td>';
262 		html += '<td class="button_'+color+'_'+corner+'_middle'+disabled+' button_'+color+'_text'+disabled+'" id="'+element.id+'_middle" align="middle">';
263 		html += '<div align="center"><table cellpadding="0" cellspacing="0" border="0"><tr><td><div'; 
264         if(icon != '')
265         {
266             html += ' style="margin-right: 10px"';
267         }
268         html += '>'+elementText+'</div></td>';
269 		html += '<td class="'+icon+'"></td></tr></table></div></td>';
270 		html += '<td class="button_'+color+'_'+corner+'_right'+disabled+'" id="'+element.id+'_right">';
271 		html += '</td>';
272 		html += '</tr>';
273 		html += '</table>';
274 		html += '</button>';
275 
276 		return {
277 			'presentation' : html,
278 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
279 			'compile' : true,
280 			'wire' : true
281 		};
282 	}
283 };
284 
285 Appcelerator.Core.loadModuleCSS('app:button','button.css');
286 Appcelerator.Widget.register('app:button',Appcelerator.Widget.Button);
287