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.EditinPlace =
 24 {
 25 	getName: function()
 26 	{
 27 		return 'appcelerator editinplace';
 28 	},
 29 	getDescription: function()
 30 	{
 31 		return 'tabpanel editinplace';
 32 	},
 33 	setPath: function(path)
 34 	{
 35 		this.modulePath = path;
 36 	},
 37 	getVersion: function()
 38 	{
 39 		return '1.0.1';
 40 	},
 41 	getSpecVersion: function()
 42 	{
 43 		return 1.0;
 44 	},
 45 	getAuthor: function()
 46 	{
 47 		return 'Jeff Haynie';
 48 	},
 49 	getModuleURL: function ()
 50 	{
 51 		return 'http://www.appcelerator.org';
 52 	},
 53 	isWidget: function ()
 54 	{
 55 		return true;
 56 	},
 57 	getWidgetName: function()
 58 	{
 59 		return 'app:editinplace';
 60 	},
 61     getAttributes: function()
 62     {
 63         var T = Appcelerator.Types;
 64         return [{name: 'type', optional: true, defaultValue: 'text', type: T.enumeration('text', 'textarea')},
 65                 {name: 'defaultClassName', optional: true, defaultValue: '', type: T.cssClass},
 66                 {name: 'editClassName', optional: true, defaultValue: '', type: T.cssClass},
 67                 {name: 'buttonClassName', optional: true, defaultValue: '', type: T.cssClass},
 68                 {name: 'saveOn', optional: true, type: T.onExpr},
 69                 {name: 'cancelOn', optional: true, type: T.onExpr},
 70                 {name: 'validator', optional: true, defaultValue: 'required'},
 71                 {name: 'position', optional: true, defaultValue: 'right',
 72                  type: T.enumeration('top','right','bottom','left')},
 73                 {name: 'errorPosition', optional: true, defaultValue: 'top',
 74                  type: T.enumeration('top','bottom')},
 75                 {name: 'defaultValue', optional: true, defaultValue: ''},
 76                 {name: 'errorMessage', optional: true, defaultValue: 'Required'},
 77                 {name: 'message', optional: true, type: T.messageReceive},
 78                 {name: 'property', optional: true, type: T.identifier}];
 79     },
 80 	execute: function(id,parameterMap,data,scope)
 81 	{
 82 
 83 	},
 84 	compileWidget: function(params)
 85 	{
 86 		var id = params['id'];
 87 		var element = $(id);
 88 		
 89 		var editinplace_input = $(id+'_editinplace_input');
 90 		var editinplace_text = $(id+'_editinplace_text');
 91 		var editinplace_buttons = $(id+'_editinplace_buttons');
 92 		var editinplace_savebutton = $(id+'_editinplace_savebutton');
 93 		var editinplace_cancelbutton = $(id+'_editinplace_cancelbutton');
 94 		var error_div = $(id + '_error');
 95 		
 96 		element.value = editinplace_text.innerHTML;
 97 		element.field = editinplace_input;
 98 		
 99 		var enterListener = function(e)
100 		{
101 			e = Event.getEvent(e);
102 			var stop = false;
103 			if (Event.isEnterKey(e))
104 			{
105 				editinplace_savebutton.click();
106 			}
107 			else if (Event.isEscapeKey(e))
108 			{
109 				editinplace_cancelbutton.click();
110 			}
111 			if (stop) Event.stop(e);
112 			return !stop;
113 		};
114 
115 		var textClickListener = function(e)
116 		{
117 			editinplace_text.style.display = 'none';
118 			editinplace_input.style.display = '';
119 			editinplace_buttons.style.display = '';
120 			editinplace_input.focus();
121 			editinplace_input.select();
122 			Appcelerator.Compiler.executeFunction(editinplace_input,'revalidate');
123 		};
124 
125 		var saveClickListener = function(e)
126 		{
127 			editinplace_text.style.display = '';
128 			editinplace_input.style.display = 'none';
129 			editinplace_text.innerHTML = editinplace_input.value;
130 			element.value = editinplace_input.value;
131 			editinplace_buttons.style.display = 'none';
132 		}
133 		
134 		var cancelClickListener = function(e)
135 		{
136 			editinplace_text.style.display = '';
137 			editinplace_input.style.display = 'none';
138 			editinplace_buttons.style.display = 'none';
139 			editinplace_input.value = editinplace_text.innerHTML;
140 			if (error_div.style.visibility != 'hidden')
141 			{
142 				error_div.style.visibility = 'hidden';
143 			}
144 			if (error_div.style.display != 'none')
145 			{
146 				error_div.style.display = 'none';
147 			}
148 		};
149 		
150 		Event.observe(editinplace_input, 'keypress', enterListener,false);
151 		Event.observe(editinplace_text, 'click', textClickListener, false);
152 		Event.observe(editinplace_savebutton, 'click', saveClickListener, false);
153 		Event.observe(editinplace_cancelbutton, 'click', cancelClickListener, false);
154 
155 		Appcelerator.Compiler.addTrash(element,function()
156 		{
157 			Event.stopObserving(editinplace_input, 'keypress', enterListener);
158 			Event.stopObserving(editinplace_text, 'click', textClickListener);
159 			Event.stopObserving(editinplace_savebutton, 'click', saveClickListener);
160 			Event.stopObserving(editinplace_cancelbutton, 'click', cancelClickListener);
161 		});
162 
163 		var message = params['message'];
164 		if (message)
165 		{
166 			message = Appcelerator.Compiler.convertMessageType(message);
167 			var property = params['property'];
168 			$MQL(message,
169 			function (type, data, datatype, direction)
170 			{
171 				
172 				$D('received message = '+direction+':'+type+',data='+Object.toJSON(data));
173 				var value = property ? Object.getNestedProperty(data,property) : data;
174 				switch (params['type'])
175 				{
176 					case 'text':
177 					{
178 						editinplace_text.innerHTML = value;
179 						editinplace_input.value = value;
180 						break;
181 					}
182 				}
183 				if (editinplace_input.revalidate) editinplace_input.revalidate();
184 			},
185 			element.scope, element);
186 		}		
187 	},
188 	buildWidget: function(element, parameters)
189 	{
190 		var type = parameters['type'];	
191 		var defaultClassName = parameters['defaultClassName'];
192 		var editClassName = parameters['editClassName'];
193 		var buttonClassName = parameters['buttonClassName'];
194 		var saveOn = parameters['saveOn'];
195 		var cancelOn = parameters['cancelOn'];
196 		var validator = parameters['validator'];
197 		var position = parameters['position'];
198 		var errorPosition = parameters['errorPosition'];
199 		var defaultValue = parameters['defaultValue'];
200 		var errorIcon = Appcelerator.Widget.EditinPlace.modulePath + 'images/bullet_error.png';	
201 		var errorMsg = parameters['errorMessage'];
202 		var error = '<img src="' + errorIcon + '"/>' +  errorMsg;
203 		var errorClass = 'error_color small_text';
204 		var id = element.id;
205 		var html = '';
206 
207 		for (var c=0,len=element.childNodes.length;c<len;c++)
208 		{
209 			var node = element.childNodes[c];
210 			if (node.nodeType == 1)
211 			{
212 				var langid = node.getAttribute('langid');
213 				switch (node.nodeName)
214 				{
215 					case 'ERROR':
216 					{
217 						errorClass = node.getAttribute('class') || errorClass;
218 						error = (langid) ? Appcelerator.Localization.get(langid,error) : Appcelerator.Compiler.getHtml(node);
219 						break;
220 					}
221 				}
222 			}
223 		}		
224 		
225 		var errorId = id + '_error';
226 		if (errorPosition=='top')
227 		{
228 			html += '<div class="'+errorClass+'" id="'+errorId+'" style="display:none">'+error+'</div>';
229 		}
230 		html += '<div>';
231 		switch (type)
232 		{
233 			case 'text':
234 			{
235 				editinplace_html = '<input class="'+editClassName+'" style="display:none" id="' + id + '_editinplace_input" '+(validator?'validator="'+validator+'"':'')+' decorator="custom" decoratorId="'+errorId+'" type="text" value="'+defaultValue+'"/>';
236 				editinplace_html += '<div style="cursor:pointer" class="'+defaultClassName+'" id="' + id + '_editinplace_text">' + defaultValue + '</div>';
237 				break;
238 			}
239             case 'textarea':
240             {
241                 editinplace_html = '<textarea class="'+editClassName+'" style="display:none" id="' + id + '_editinplace_input" '+(validator?'validator="'+validator+'"':'')+' decorator="custom" decoratorId="'+errorId+'">'+defaultValue+'</textarea>';
242                 editinplace_html += '<div style="cursor:pointer" class="'+defaultClassName+'" id="' + id + '_editinplace_text">' + defaultValue + '</div>';
243                 break;
244             }
245 			default:
246 			{
247 				throw "unsupported field type: '" + type +"'";
248 			}
249 		}
250 		
251 		button_html = '<div id="' + id + '_editinplace_buttons" style="display:none;">';
252 		button_html += '<input activators="'+id+'_editinplace_input" class="'+buttonClassName+'" id="' + id + '_editinplace_savebutton" on="' + saveOn + '" type="button" value="Save" />';
253 		button_html += '<input class="'+buttonClassName+'" id="' + id + '_editinplace_cancelbutton" on="' + cancelOn + '" type="button" value="Cancel" />';
254 		button_html += '</div>';
255 		
256 		switch (position)
257 		{
258 			case 'right':
259 			{
260 				html += "<table><tr><td>" + editinplace_html + "</td><td>" + button_html + "</td></tr></table>";
261 				break;
262 			}
263 			case 'left':
264 			{
265 				html += "<table><tr><td>" + button_html + "</td><td>" + editinplace_html + "</td></tr></table>";
266 				break;
267 			}			
268 		    case 'bottom':
269 			{
270 				html += "<table><tr><td>" + editinplace_html + "</td></tr><tr><td>" + button_html + "</td></tr></table>";
271 				break;
272 			}
273 		    case 'top':
274 			{
275 				html += "<table><tr><td>" + button_html + "</td></tr><tr><td>" + editinplace_html + "</td></tr></table>";
276 				break;
277 			}
278 		}
279 		
280 		html += '</div>';
281 		if (errorPosition=='bottom')
282 		{
283 			html += '<div class="'+errorClass+'" id="'+errorId+'" style="display:none">'+error+'</div>';
284 		}
285 		
286 		parameters['id'] = element.id;
287 		
288 		return {
289 			'presentation' : html,
290 			'position' : Appcelerator.Compiler.POSITION_REPLACE,
291 			'compile' : true,
292 			'wire' : true
293 		};
294 	}
295 };
296 
297 
298 Appcelerator.Core.loadModuleCSS('app:editinplace','editinplace.css');
299 Appcelerator.Widget.register('app:editinplace',Appcelerator.Widget.EditinPlace);
300