root/afridex/plugins/Flutter/js/canvas-management.js @ 21

Revision 21, 14.2 kB (checked in by admin, 18 years ago)
RevLine 
[21]1Event.observe(window, 'load', function() { CanvasManage.watchManagementFields() }, false);
2Event.observe(window, 'load', function() { CanvasManage.watchTitles() }, false);
3Event.observe(window, 'load', function() { CanvasManage.initializeButtons() }, false);
4Event.observe(window, 'unload', Event.unloadCache, false);
5
6var CanvasManage = {
7       
8        dbmanage: function(element) {
9                if(window.confirm('Are you sure you want to '+element+' Canvas?')) {
10                var pars = 'action='+element;
11                var target = 'message'
12                var url = JS_CANVASURI + 'ajax/canvas-rescan.php';
13                var myAjax = new Ajax.Updater({success: target}, url,
14                        {method: 'get',
15                        parameters: pars,
16                        onComplete: function() { CanvasManage.updateAfterDBChange() }
17                        });
18                }
19        },
20       
21        deleteBlock: function(element) {
22                if(window.confirm('Are you sure you want to delete this block?')) {
23                var item = 'block_'+element;
24                var pars = 'delete='+element;
25                var url = JS_CANVASURI + 'ajax/canvas-management_ajax.php';
26                var myAjax = new Ajax.Request(url,
27                        {method: 'get',
28                        parameters: pars,
29                        onComplete: function() { CanvasManage.removeBlock(item) }
30                        });
31                }
32        },
33       
34        duplicateBlock: function(element) {
35                var target = 'block_'+element;
36                var pars = 'duplicate='+element;
37                var url = JS_CANVASURI + 'ajax/canvas-management_ajax.php';
38                var myAjax = new Ajax.Updater({success: target}, url,
39                        {method: 'get',
40                        insertion: Insertion.After,
41                        parameters: pars,
42                        onComplete: function() { CanvasManage.updateButtons() }
43                        });
44        },
45       
46        editTitle: function(item) {
47                new CanvasAjax.CanvasInPlaceEditor(item, JS_CANVASURI + 'ajax/canvas-management_ajax.php', {
48                                        callback: function(form, value){ return 'rename=true&id='+item.id+'&value='+escape(value); },
49                                        savingClassName: 'manageSaving'
50                                        });
51        },
52       
53        initializeButtons: function() {
54                document.getElementsByClassName('block_info').each(function(item){
55                        Event.observe(item, 'click', function(){ CanvasManage.toggleBlockInfo(item.id); }, false);
56                        if($('block_'+item.id).style.display == 'none') new Effect.Appear('block_'+item.id);
57                });
58                document.getElementsByClassName('delete_block').each(function(item){
59                        Event.observe(item, 'click', function(){ CanvasManage.deleteBlock(item.id); }, false);
60                });
61                document.getElementsByClassName('duplicate_block').each(function(item){
62                        Event.observe(item, 'click', function(){ CanvasManage.duplicateBlock(item.id); }, false);
63                });
64        },
65       
66        removeBlock: function(element) {
67                new Effect.Fade(element,{ duration: 0.6, afterFinish: function(){ Element.remove(element); CanvasManage.updateCount('-1') } });
68        },
69       
70        resetCount: function() {
71                var count = $$('ul.manage li').length;
72                count = parseInt(count);
73                $('count').firstChild.nodeValue = count;
74        },
75
76        sortGroups: function(group) {
77                if(group == 'all') {
78                        $$('ul.manage li').each(function(item){
79                                $(item).style.display = 'block';
80                        });
81                } else {
82                        $$('ul.manage li').each(function(item){
83                                $(item).style.display = 'none';
84                        });
85                        $$('ul.manage li.'+group).each(function(item){
86                                $(item).style.display = 'block';
87                        });
88                }
89        },
90
91        toggleBlockInfo: function(element) {
92                item = 'info_'+element;
93                if($(item).style.display == 'none') {
94                        new Effect.BlindDown(item,{ duration: 0.4 });
95                } else {
96                        new Effect.BlindUp(item,{ duration: 0.4 });
97                }
98        },
99       
100        updateAfterDBChange: function() {
101                var target = 'manage';
102                var pars = 'update=all';
103                var url = JS_CANVASURI + 'ajax/canvas-management_ajax.php';
104                var myAjax = new Ajax.Updater({success: target}, url,
105                        {method: 'get',
106                        parameters: pars,
107                        onComplete: function() { CanvasManage.initializeButtons(); CanvasManage.resetCount(); }
108                        });
109        },
110
111        updateButtons: function() {
112                document.getElementsByClassName('delete_block').each(function(item){
113                        if($('block_'+item.id).style.display == 'none') {
114                                Event.observe(item, 'click', function(){ CanvasManage.deleteBlock(item.id); }, false);
115                        }
116                });
117                document.getElementsByClassName('duplicate_block').each(function(item){
118                        if($('block_'+item.id).style.display == 'none') {
119                                Event.observe(item, 'click', function(){ CanvasManage.duplicateBlock(item.id); }, false);
120                        }
121                });
122                document.getElementsByClassName('block_info').each(function(item){
123                        if($('block_'+item.id).style.display == 'none') {
124                                Event.observe(item, 'click', function(){ CanvasManage.toggleBlockInfo(item.id); }, false);
125                                new Effect.Appear('block_'+item.id);
126                        }
127                });
128                document.getElementsByClassName('title').each(function(item){
129                        if(item.parentNode.parentNode.style.display == 'none') {
130                                CanvasManage.editTitle(item);
131                        }
132                });
133                updateCount('+1');
134        },
135       
136        updateCount: function(operation) {
137                var count = parseInt($('count').firstChild.nodeValue);
138                count = eval(count+operation);
139                $('count').firstChild.nodeValue = count;
140        },
141       
142        watchManagementFields: function() {
143                document.getElementsByClassName('dbmanage').each(function(item){
144                        Event.observe(item, 'click', function(){ CanvasManage.dbmanage(item.id); }, false);
145                });
146        },
147       
148        watchTitles: function() {
149                document.getElementsByClassName('title').each(function(item){
150                        CanvasManage.editTitle(item);
151                });
152        }
153};
154
155// Because Script.aculo.us does some dumb things with backgroundColor
156// in the Ajax.InPlaceEditor, we've hacked our own...
157
158CanvasAjax.CanvasInPlaceEditor = Class.create();
159CanvasAjax.CanvasInPlaceEditor.prototype = {
160  initialize: function(element, url, options) {
161    this.url = url;
162    this.element = $(element);
163
164    this.options = Object.extend({
165      okButton: true,
166      okText: "ok",
167      cancelLink: true,
168      cancelText: "cancel",
169      savingText: "Saving...",
170      clickToEditText: "Click to edit",
171      okText: "ok",
172      rows: 1,
173      onFailure: function(transport) {
174        alert("Error communicating with the server: " + transport.responseText.stripTags());
175      },
176      callback: function(form) {
177        return Form.serialize(form);
178      },
179      handleLineBreaks: true,
180      loadingText: 'Loading...',
181      savingClassName: 'inplaceeditor-saving',
182      loadingClassName: 'inplaceeditor-loading',
183      formClassName: 'inplaceeditor-form',
184      externalControl: null,
185      submitOnBlur: false,
186      ajaxOptions: {},
187      evalScripts: false
188    }, options || {});
189
190    if(!this.options.formId && this.element.id) {
191      this.options.formId = this.element.id + "-inplaceeditor";
192      if ($(this.options.formId)) {
193        // there's already a form with that name, don't specify an id
194        this.options.formId = null;
195      }
196    }
197   
198    if (this.options.externalControl) {
199      this.options.externalControl = $(this.options.externalControl);
200    }
201   
202    this.element.title = this.options.clickToEditText;
203   
204    this.onclickListener = this.enterEditMode.bindAsEventListener(this);
205    this.mouseoverListener = this.enterHover.bindAsEventListener(this);
206    this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
207    Event.observe(this.element, 'click', this.onclickListener);
208    Event.observe(this.element, 'mouseover', this.mouseoverListener);
209    Event.observe(this.element, 'mouseout', this.mouseoutListener);
210    if (this.options.externalControl) {
211      Event.observe(this.options.externalControl, 'click', this.onclickListener);
212      Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
213      Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
214    }
215  },
216  enterEditMode: function(evt) {
217    if (this.saving) return;
218    if (this.editing) return;
219    this.editing = true;
220    this.onEnterEditMode();
221    if (this.options.externalControl) {
222      Element.hide(this.options.externalControl);
223    }
224    Element.hide(this.element);
225    this.createForm();
226    this.element.parentNode.insertBefore(this.form, this.element);
227    Field.scrollFreeActivate(this.editField);
228    // stop the event to avoid a page refresh in Safari
229    if (evt) {
230      Event.stop(evt);
231    }
232    return false;
233  },
234  createForm: function() {
235    this.form = document.createElement("form");
236    this.form.id = this.options.formId;
237    Element.addClassName(this.form, this.options.formClassName)
238    this.form.onsubmit = this.onSubmit.bind(this);
239
240    this.createEditField();
241
242    if (this.options.textarea) {
243      var br = document.createElement("br");
244      this.form.appendChild(br);
245    }
246
247    if (this.options.okButton) {
248      okButton = document.createElement("input");
249      okButton.type = "submit";
250      okButton.value = this.options.okText;
251      okButton.className = 'editor_ok_button';
252      this.form.appendChild(okButton);
253    }
254
255    if (this.options.cancelLink) {
256      cancelLink = document.createElement("a");
257      cancelLink.href = "#";
258      cancelLink.appendChild(document.createTextNode(this.options.cancelText));
259      cancelLink.onclick = this.onclickCancel.bind(this);
260      cancelLink.className = 'editor_cancel';     
261      this.form.appendChild(cancelLink);
262    }
263  },
264  hasHTMLLineBreaks: function(string) {
265    if (!this.options.handleLineBreaks) return false;
266    return string.match(/<br/i) || string.match(/<p>/i);
267  },
268  convertHTMLLineBreaks: function(string) {
269    return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");
270  },
271  createEditField: function() {
272    var text;
273    if(this.options.loadTextURL) {
274      text = this.options.loadingText;
275    } else {
276      text = this.getText();
277    }
278
279    var obj = this;
280   
281    if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
282      this.options.textarea = false;
283      var textField = document.createElement("input");
284      textField.obj = this;
285      textField.type = "text";
286      textField.name = "value";
287      textField.value = text;
288      textField.className = 'editor_field';
289      var size = this.options.size || this.options.cols || 0;
290      if (size != 0) textField.size = size;
291      if (this.options.submitOnBlur)
292        textField.onblur = this.onSubmit.bind(this);
293      this.editField = textField;
294    } else {
295      this.options.textarea = true;
296      var textArea = document.createElement("textarea");
297      textArea.obj = this;
298      textArea.name = "value";
299      textArea.value = this.convertHTMLLineBreaks(text);
300      textArea.rows = this.options.rows;
301      textArea.cols = this.options.cols || 40;
302      textArea.className = 'editor_field';     
303      if (this.options.submitOnBlur)
304        textArea.onblur = this.onSubmit.bind(this);
305      this.editField = textArea;
306    }
307   
308    if(this.options.loadTextURL) {
309      this.loadExternalText();
310    }
311    this.form.appendChild(this.editField);
312  },
313  getText: function() {
314    return this.element.innerHTML;
315  },
316  loadExternalText: function() {
317    Element.addClassName(this.form, this.options.loadingClassName);
318    this.editField.disabled = true;
319    new Ajax.Request(
320      this.options.loadTextURL,
321      Object.extend({
322        asynchronous: true,
323        onComplete: this.onLoadedExternalText.bind(this)
324      }, this.options.ajaxOptions)
325    );
326  },
327  onLoadedExternalText: function(transport) {
328    Element.removeClassName(this.form, this.options.loadingClassName);
329    this.editField.disabled = false;
330    this.editField.value = transport.responseText.stripTags();
331  },
332  onclickCancel: function() {
333    this.onComplete();
334    this.leaveEditMode();
335    return false;
336  },
337  onFailure: function(transport) {
338    this.options.onFailure(transport);
339    if (this.oldInnerHTML) {
340      this.element.innerHTML = this.oldInnerHTML;
341      this.oldInnerHTML = null;
342    }
343    return false;
344  },
345  onSubmit: function() {
346
347    var form = this.form;
348    var value = this.editField.value;
349   
350    this.onLoading();
351   
352    if (this.options.evalScripts) {
353      new Ajax.Request(
354        this.url, Object.extend({
355          parameters: this.options.callback(form, value),
356          onComplete: this.onComplete.bind(this),
357          onFailure: this.onFailure.bind(this),
358          asynchronous:true, 
359          evalScripts:true
360        }, this.options.ajaxOptions));
361    } else  {
362      new Ajax.Updater(
363        { success: this.element,
364          failure: null }, 
365        this.url, Object.extend({
366          parameters: this.options.callback(form, value),
367          onComplete: this.onComplete.bind(this),
368          onFailure: this.onFailure.bind(this)
369        }, this.options.ajaxOptions));
370    }
371
372    if (arguments.length > 1) {
373      Event.stop(arguments[0]);
374    }
375    return false;
376  },
377  onLoading: function() {
378    this.saving = true;
379    this.removeForm();
380    this.leaveHover();
381    this.showSaving();
382  },
383  showSaving: function() {
384    this.oldInnerHTML = this.element.innerHTML;
385    this.element.innerHTML = this.options.savingText;
386    Element.addClassName(this.element, this.options.savingClassName);
387    Element.show(this.element);
388  },
389  removeForm: function() {
390    if(this.form) {
391      if (this.form.parentNode) Element.remove(this.form);
392      this.form = null;
393    }
394  },
395  enterHover: function() {
396    if (this.saving) return;
397    if (this.effect) {
398      this.effect.cancel();
399    }
400    Element.addClassName(this.element, this.options.hoverClassName)
401  },
402  leaveHover: function() {
403    Element.removeClassName(this.element, this.options.hoverClassName)
404    if (this.saving) return;
405  },
406  leaveEditMode: function() {
407    Element.removeClassName(this.element, this.options.savingClassName);
408    this.removeForm();
409    this.leaveHover();
410    Element.show(this.element);
411    if (this.options.externalControl) {
412      Element.show(this.options.externalControl);
413    }
414    this.editing = false;
415    this.saving = false;
416    this.oldInnerHTML = null;
417    this.onLeaveEditMode();
418  },
419  onComplete: function(transport) {
420    this.leaveEditMode();
421    if(this.options.onComplete)
422            this.options.onComplete.bind(this)(transport, this.element);
423  },
424  onEnterEditMode: function() {},
425  onLeaveEditMode: function() {},
426  dispose: function() {
427    if (this.oldInnerHTML) {
428      this.element.innerHTML = this.oldInnerHTML;
429    }
430    this.leaveEditMode();
431    Event.stopObserving(this.element, 'click', this.onclickListener);
432    Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);
433    Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);
434    if (this.options.externalControl) {
435      Event.stopObserving(this.options.externalControl, 'click', this.onclickListener);
436      Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener);
437      Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener);
438    }
439  }
440};
Note: See TracBrowser for help on using the browser.