Ajout classe .std-focusbox.
[Plinn.git] / skins / ajax_scripts / widget_form_manager.js
1 // © 2009 Benoît Pin
2 // http://plinn.org
3 // Licence GPL
4 //
5 //
6
7 var WidgetBasedFormManager;
8
9 (function(){
10 WidgetBasedFormManager = function(widgets, editingArea, dataArea, dataAreaSpecs, afterShow) {
11 /* widgets : {'add':element, 'edit':element} element targets nodes to clone.
12 * editingArea : surrounding element where form is
13 * dataArea : element where data are
14 * dataAreaSpecs : by default, param used to indicate the total number of columns
15 * afterShow : function called after a widget insertion
16 */
17 var thisWgtManager = this;
18 this.widgets = widgets;
19 this.openedWidget = null;
20 this.dataArea = dataArea;
21 this.dataAreaSpecs = dataAreaSpecs;
22 this.afterShow = afterShow;
23
24 var form = editingArea.getElementsByTagName('form')[0];
25 this.form = form;
26 var fm = new FormManager(form);
27 fm.onBeforeSubmit = function(fm, evt){return thisWgtManager.onBeforeSubmit(fm, evt);};
28 fm.onResponseLoad = function(req){thisWgtManager.loadResponse(req);};
29
30 addListener(this.form, 'click', function(evt){thisWgtManager.clickHandler(evt);});
31
32 };
33
34 WidgetBasedFormManager.prototype.showAddWidget = function(dest) {
35 if (this.openedWidget)
36 return;
37 var wdgtCopy = this.widgets['add'].cloneNode(true);
38 wdgtCopy.removeAttribute('id');
39 this.openedWidget = wdgtCopy;
40 dest.appendChild(wdgtCopy);
41 if (this.addButton)
42 this.addButton.style.visibility = 'hidden';
43 if (this.afterShow)
44 this.afterShow(this);
45 };
46
47 WidgetBasedFormManager.prototype.showPopulatedWidget = function(dest, url) {
48 var req = new XMLHttpRequest();
49 req.open("GET", url, false);
50 showProgressImage();
51 req.send(null);
52 hideProgressImage();
53
54 if (req.status != 200){
55 alert(req.status);
56 return;
57 }
58
59 var wdgtCopy = this.widgets['edit'].cloneNode(true);
60 wdgtCopy.removeAttribute('id');
61 var tmpForm = document.createElement('form');
62 tmpForm.appendChild(wdgtCopy);
63
64 var fields = req.responseXML.documentElement.childNodes;
65 var input, field, value;
66 for (var i = 0 ; i<fields.length; i++) {
67 field = fields[i];
68 if (!field.firstChild)
69 continue;
70
71 value = field.firstChild.nodeValue;
72 input = tmpForm.elements.namedItem(field.nodeName);
73
74 switch (input.tagName) {
75 case 'INPUT':
76 input.value = value;
77 break;
78 case 'TEXTAREA':
79 input.appendChild(document.createTextNode(value));
80 }
81 }
82 dest.appendChild(wdgtCopy);
83 if (this.afterShow)
84 this.afterShow(this);
85 };
86
87 WidgetBasedFormManager.prototype.cancelWidget = function() {
88 var parent = this.openedWidget.parentNode;
89 parent.removeChild(this.openedWidget);
90 this.openedWidget = null;
91 if (this.addButton)
92 this.addButton.style.visibility = 'visible';
93 if (this.previousRecState) {
94 this.previousRecState.style.display = '';
95 this.previousRecState = null;
96 }
97 };
98
99 WidgetBasedFormManager.prototype.updateEditedRecord = function(node) {
100 var parent = this.openedWidget.parentNode;
101 parent.removeChild(this.openedWidget);
102 this.openedWidget = null;
103 if (this.addButton)
104 this.addButton.style.visibility = 'visible';
105
106 parent = this.previousRecState.parentNode;
107 parent.replaceChild(node, this.previousRecState);
108 };
109
110 WidgetBasedFormManager.prototype.clickHandler = function(evt) {
111 var target = getTargetedObject(evt);
112 if (target.tagName == 'IMG') {
113 var parent = target.parentNode;
114 if (parent.tagName == 'A') {
115 switch (parent.name) {
116 case 'add' :
117 disableDefault(evt);
118 disablePropagation(evt);
119 parent.blur();
120 this.addButton = parent;
121 this.showAddWidget(this.form);
122 break;
123 case 'rm' :
124 disableDefault(evt);
125 disablePropagation(evt);
126 this.deleteRecord(parent);
127 break;
128 case 'edit' :
129 disableDefault(evt);
130 disablePropagation(evt);
131 if (!this.openedWidget) {
132 var rec = this._storePreviousState(parent);
133 var container = this._prepareEditingContainer(rec);
134 this.showPopulatedWidget(container, parent.href);
135 }
136 break;
137 }
138 }
139 }
140 };
141
142 WidgetBasedFormManager.prototype._storePreviousState = function(recChild) {
143 var rec = recChild;
144 while(!(this.isRootRecordElement(rec)))
145 rec = rec.parentNode;
146 rec.style.display = 'none';
147 this.previousRecState = rec;
148 return rec
149 };
150
151 WidgetBasedFormManager.prototype._prepareEditingContainer = function(rec) {
152 /* default behaviour. May be redefined by an instance */
153 var tbody = document.createElement('tbody');
154 var tr = document.createElement('tr');
155 var td = document.createElement('td')
156 td.colSpan = this.dataAreaSpecs;
157
158 tbody.appendChild(tr);
159 tr.appendChild(td)
160
161 if (rec.nextSibling)
162 rec.parentNode.insertBefore(tbody, rec.nextSibling);
163 else
164 rec.parentNode.appendChild(tbody);
165
166 this.openedWidget = tbody;
167 return td
168 };
169
170
171
172 WidgetBasedFormManager.prototype.deleteRecord = function(link) {
173 var req = new XMLHttpRequest();
174
175 var thisManager = this;
176 req.onreadystatechange = function() {
177 switch (req.readyState) {
178 case 1 :
179 showProgressImage();
180 break;
181 case 4 :
182 hideProgressImage();
183 if (req.status == 200)
184 thisManager._deleteHtmlRecord(req, link);
185 else
186 alert('Error: ' + req.status);
187 };
188 };
189 var url = link.href;
190 req.open("POST", url, true);
191 req.send(null);
192 };
193
194
195 WidgetBasedFormManager.prototype._deleteHtmlRecord = function(req, link) {
196 var doc = req.responseXML.documentElement;
197 switch (doc.nodeName) {
198 case 'done':
199 var rec = link.parentNode;
200 while(!(this.isRootRecordElement(rec)))
201 rec = rec.parentNode;
202 this.dataArea.removeChild(rec);
203 break;
204 case 'error':
205 alert(doc.firstChild.nodeValue);
206 break;
207 }
208 };
209
210 WidgetBasedFormManager.prototype.isRootRecordElement = function(e) {
211 /* default behaviour. May be redefined by an instance */
212 return (e.tagName == 'TBODY')
213 };
214
215 WidgetBasedFormManager.prototype.onBeforeSubmit = function(fm, evt) {
216 if (fm.submitButton.name == 'cancel'){
217 this.cancelWidget();
218 return 'cancelSubmit';
219 }
220 };
221
222
223 WidgetBasedFormManager.prototype.loadResponse = function(req) {
224 if (req.status == 200) {
225 var doc = req.responseXML.documentElement;
226 switch (doc.nodeName) {
227 case 'computedField':
228 switch(doc.getAttribute('type')) {
229 case 'added' :
230 this.cancelWidget();
231 this.dataArea.appendChild(getCopyOfNode(doc.firstChild));
232 break;
233
234 case 'edited' :
235 this.updateEditedRecord(getCopyOfNode(doc.firstChild));
236 }
237 break;
238
239 case 'error':
240 alert(doc.firstChild.nodeValue);
241 break;
242
243 case 'fragments' :
244 var fragments = req.responseXML.documentElement.childNodes;
245 var fragment, dest, scripts;
246 for (var i=0 ; i<fragments.length ; i++) {
247 fragment = fragments[i];
248 if (fragment.nodeName == 'fragment') {
249 dest = document.getElementById(fragment.getAttribute('id'));
250 dest.innerHTML = fragment.firstChild.nodeValue;
251
252 scripts = dest.getElementsByTagName('script');
253 for (var j=0 ; j < scripts.length ; j++)
254 globalScriptRegistry.loadScript(scripts[j]);
255 }
256 }
257 break;
258 }
259 }
260 else
261 alert(req.statut);
262 };
263
264 })();