]> dev.renevier.net Git - syj.git/blob - public/js/utils.js
cleanup po files
[syj.git] / public / js / utils.js
1 /*  This file is part of Syj, Copyright (c) 2010 Arnaud Renevier,
2     and is published under the AGPL license. */
3
4 var CloseBtn = Class.create({
5     initialize: function(elt, options) {
6         var btn, imgsrc, style;
7
8         elt = $(elt);
9         if (!elt) {
10             return;
11         }
12
13         if (typeof options !== "object") {
14             options = {};
15         }
16
17         style = Object.extend({
18             'float': "right",
19             margin: "2px",
20             fontWeight: "bold",
21             padding: "0px"
22         }, options.style);
23
24         imgsrc = (options.closeBtnSrc) || "icons/close.png";
25         btn = new Element("input", { type: "image", src: imgsrc, alt: "X"}).setStyle(style);
26         elt.insert({top: btn});
27         btn.observe("click", function(evt) {
28             evt.stop();
29             if (evt.detail === 0) { // it's not a real click, possibly a submit event
30                 return;
31             }
32             if (typeof options.callback === "function") {
33                 options.callback.call(elt);
34             }
35             elt.hide();
36         });
37     }
38 });
39
40 var Toggler = Class.create({
41     options: {},
42
43     close: function() {
44         this.element.src = this.options.openIcn;
45         this.target.hide();
46         document.fire('toggler:close', this);
47     },
48
49     open: function() {
50         this.element.src = this.options.closeIcn;
51         this.target.show();
52         document.fire('toggler:open', this);
53     },
54
55     toggle: function(evt) {
56         if (evt && typeof evt.stop === "function") {
57             evt.stop();
58         }
59         if (this.target.visible()) {
60             this.close();
61         } else {
62             this.open();
63         }
64     },
65
66     initialize: function(target, options) {
67         this.options = Object.extend({
68                 openIcn: 'icons/bullet_arrow_right.png',
69                 closeIcn: 'icons/bullet_arrow_down.png'
70             }, options);
71
72         this.target = $(target).hide();
73         this.element = new Element("img").setStyle({ border: 'none',  // in firefox, in image inside an anchor has a border
74                                                     verticalAlign: "middle"});
75         this.element.observe('click', this.toggle.bindAsEventListener(this));
76
77         if (this.options.autoOpen) {
78             this.open();
79         } else {
80             this.close();
81         }
82     }
83 });
84
85 var Deck = Class.create({
86     initialize: function(elt, options) {
87         this.element = $(elt);
88         this.index = null;
89         this.setIndex(parseInt(this.element.readAttribute("selectedindex") || 0, 10));
90     },
91     setIndex: function(idx) {
92         if (idx === this.index) {
93             return;
94         }
95
96         var childs = this.element.childElements();
97         if (childs.length === 0) {
98             this.index = -1;
99             return;
100         }
101         idx = Math.max(0, idx);
102         idx = Math.min(childs.length - 1, idx);
103
104         childs.each(function(item, i) {
105             if (idx === i) {
106                 item.show();
107             } else {
108                 item.hide();
109             }
110         });
111         this.index = idx;
112     },
113     getIndex: function() {
114         return this.index;
115     }
116 });
117
118 Element.addMethods({
119     highlight: function(element, color, timeout) {
120         var current;
121         if (typeof timeout === "undefined") {
122             timeout = 0.3;
123         }
124         current = element.getStyle('backgroundColor');
125         Element.setStyle(element, {'backgroundColor': color});
126         Element.setStyle.delay(timeout, element, {'backgroundColor': current});
127         return element;
128     },
129     text: function(element, content) {
130         if (typeof content === "undefined") { // getter
131             if (element.nodeType === 8) {
132                 return "";
133             } else if (element.nodeType === 3 || element.nodeType === 4)  {
134                 return element.nodeValue;
135             } else {
136                 return $A(element.childNodes).inject("", function(acc, el) {
137                     return acc + Element.text(el);
138                  });
139             }
140         } else { // setter
141             var node = document.createTextNode(content);
142             element.update().appendChild(node);
143             return element;
144         }
145     }
146 });
147
148 Ajax.TimedRequest = Class.create(Ajax.Request, {
149     timeout: null,
150     delay: null,
151
152     abort: function() {
153         // see http://blog.pothoven.net/2007/12/aborting-ajax-requests-for-prototypejs.html
154         this.transport.onreadystatechange = Prototype.emptyFunction;
155         this.transport.abort();
156         Ajax.activeRequestCount--;
157     },
158
159     initialize: function($super, url, delay, options) {
160         this.delay = delay;
161         if (!options) {
162             options = {};
163         }
164
165         options.onSuccess = options.onSuccess &&
166             options.onSuccess.wrap(function(proceed, transport, json) {
167             if (this.timeout) {
168                 window.clearTimeout(this.timeout);
169                 this.timeout = null;
170             }
171             if (transport.getStatus() === 0) {
172                 this.options.onFailure(transport, json);
173             } else {
174                 proceed(transport, json);
175             }
176         }).bind(this);
177
178         options.onFailure = options.onFailure &&
179             options.onFailure.wrap(function(proceed, transport, json) {
180             if (this.timeout) {
181                 window.clearTimeout(this.timeout);
182                 this.timeout = null;
183             }
184             proceed(transport, json);
185         }).bind(this);
186
187         $super(url, options);
188     },
189
190     request: function($super, url) {
191         this.timeout = function() {
192             if (this.options.onFailure) {
193                 this.options.onFailure(null);
194             }
195             this.abort();
196         }.bind(this).delay(this.delay);
197         $super(url);
198     }
199 });
200
201 Ajax.Responders.register({
202     // needed for Ajax.TimedRequest.abort to work: see
203     // http://blog.pothoven.net/2007/12/aborting-ajax-requests-for-prototypejs.html
204     // again
205     onComplete: function() {
206         Ajax.activeRequestCount--;
207         if (Ajax.activeRequestCount < 0) {
208             Ajax.activeRequestCount = 0;
209         }
210     }
211 });
212
213 // wrapper around Form.request that sets up the submit listener, stops the
214 // submit event, calls presubmit function, calls Form.request and calls a
215 // postsubmit function. If form has some visible and activated file inputs,
216 // execute presubmit, but do not send the file with ajax.
217 Element.addMethods('form', {
218     ajaxize : function(form, options) {
219         var reqoptions;
220
221         options = Object.clone(options || {});
222
223         $(form).observe('submit', function(evt) {
224
225             reqoptions = Object.clone(options);
226             delete(reqoptions.presubmit);
227             delete(reqoptions.postsubmit);
228             delete(reqoptions.delay);
229
230             if (Object.isFunction(options.presubmit)) {
231                 if (options.presubmit(this) === false) {
232                     evt.stop(); // cancel form submission
233                     return;
234                 }
235             }
236
237             // get list of input file not disabled, and not hidden
238             if (this.getInputs('file').find(function(elt) {
239                 if (elt.disabled) {
240                     return false;
241                 }
242                 while (elt && $(elt).identify() !== this.identify()) {
243                     if (!elt.visible()) {
244                         return false;
245                     }
246                     elt = elt.parentNode;
247                 }
248                 return true;
249              }.bind(this))) {
250                 // form has some file inputs. Do not manage on our own.
251                 return;
252             }
253
254             evt.stop(); // cancel form submission
255
256             var params = reqoptions.parameters, action = this.readAttribute('action') || '';
257
258             if (action.blank()) {
259                 action = window.location.href;
260             }
261             reqoptions.parameters = this.serialize(true);
262
263             if (params) {
264                 if (Object.isString(params)) {
265                     params = params.toQueryParams();
266                 }
267                 Object.extend(reqoptions.parameters, params);
268             }
269
270             if (this.hasAttribute('method') && !reqoptions.method) {
271                 reqoptions.method = this.method;
272             }
273
274             if (reqoptions.onFailure) {
275                 reqoptions.onFailure = reqoptions.onFailure.wrap(function(proceed, transport, json) {
276                     form.enable();
277                     proceed(transport, json);
278                 });
279             } else {
280                 reqoptions.onFailure = function() {
281                     form.enable();
282                 };
283             }
284
285             if (reqoptions.onSuccess) {
286                 reqoptions.onSuccess = reqoptions.onSuccess.wrap(function(proceed, transport, json) {
287                     form.enable();
288                     proceed(transport, json);
289                 });
290             } else {
291                 reqoptions.onSuccess = function() {
292                     form.enable();
293                 };
294             }
295
296             new Ajax.TimedRequest(action, options.delay || 20, reqoptions);
297
298             if (Object.isFunction(options.postsubmit)) {
299                 options.postsubmit(this);
300             }
301             Form.getElements(form).each(function(elt) {
302                 elt.blur();
303                 elt.disable();
304             });
305         });
306     },
307
308     setfocus: function(form) {
309         var tofocus, error;
310
311         tofocus = null;
312         error = form.down('.error');
313         if (error) {
314             tofocus = error.previous('input,textarea');
315         } else {
316             tofocus = form.down('input:not([readonly],[disabled]),textarea:not([readonly][disabled])');
317         }
318         if (tofocus) {
319             if (error && (typeof tofocus.highlight === "function")) {
320                 tofocus.highlight('#F08080');
321             }
322             tofocus.activate();
323         }
324     },
325
326     checkEmptyElements: function(form, errorMessage) {
327         var results = [];
328         form.select('.required').each(function(elt) {
329             var id = elt.getAttribute('for'), control = $(id);
330             if (!control) {
331                 return;
332             }
333             if (!control.check(function() {
334                     return !this.value.strip().empty();
335                 }, errorMessage)) {
336                 results.push(control);
337             }
338         });
339         return results;
340     }
341 });
342
343 Element.addMethods(['input', 'textarea'], {
344     check: function(control, callback, errorMessage) {
345         if (callback.call(control)) {
346             return true;
347         }
348         control.insert({
349             after: new Element("div", {className: 'error'}).update(errorMessage)
350         });
351         return false;
352     },
353
354     observe : Element.Methods.observe.wrap(function(proceed, element, eventName, handler) {
355         if (eventName === "contentchange") {
356             proceed(element, 'keyup', function(evt) {
357                 if (evt.keyCode === 13) {
358                     return;
359                 }
360                 handler.apply(null, arguments);
361             });
362             proceed(element, 'paste', handler.defer.bind(handler));
363             return proceed(element, 'change', handler);
364         }
365         return proceed(element, eventName, handler);
366     }),
367
368     timedobserve: function(element, callback, delay) {
369         var timeout = null, initialvalue = element.value;
370
371         if (typeof delay !== "number") {
372             delay = 0.5;
373         }
374         delay = delay * 1000;
375
376         var canceltimer = function() {
377             if (timeout) {
378                 clearTimeout(timeout);
379                 timeout = null;
380             }
381         };
382         var resettimer = function() {
383             canceltimer();
384             timeout = setTimeout(triggercallback, delay);
385         };
386         var triggercallback = function() {
387             canceltimer();
388             if (initialvalue !== element.value) {
389                 initialvalue = element.value;
390                 callback.call(element);
391             }
392         };
393
394         element.observe('blur', triggercallback).
395              observe('keyup', resettimer).
396              observe('paste', resettimer);
397         return element;
398     }
399 });
400
401 Element.addMethods('div', {
402     setMessage: function(div, message, status) {
403         div.clearMessages();
404         if (status) {
405             div.setMessageStatus(status);
406         }
407         if (message) {
408             div.addMessage(message);
409         }
410         return div;
411     },
412
413     clearMessages: function(div) {
414         var node = div.firstChild, nextNode;
415
416         while (node) {
417             nextNode = node.nextSibling;
418             if (node.nodeType === 3 || node.tagName.toLowerCase() === 'br' || node.textContent || node.innerText) {
419                 div.removeChild(node);
420             }
421                 node = nextNode;
422         }
423
424         return div;
425     },
426
427     addMessage: function(div, message) {
428         var node = (div.ownerDocument || document).createTextNode(message);
429
430         if ($A(div.childNodes).filter(function(node) {
431                 return (node.nodeType === 3 || node.tagName.toLowerCase() === 'br' || node.textContent || node.innerText);
432              }).length) {
433             div.insert(new Element('br'));
434         }
435
436         div.appendChild(node);
437         return div.show();
438     },
439
440     setMessageStatus: function(div, status) {
441         return div.removeClassName('error').
442                 removeClassName('warn').
443                 removeClassName('info').
444                 removeClassName('success').
445                 addClassName(status);
446     }
447 });