f94d33c4c8032c85eb7a2ce705d147b8f6e7c1ba
[redakcja.git] / project / static / js / editor.js
1 var editor;
2 var panel_hooks;
3
4 function Hotkey(code) {
5     this.code = code;
6     this.has_alt = ((code & 0x01 << 8) !== 0);
7     this.has_ctrl = ((code & 0x01 << 9) !== 0);
8     this.has_shift = ((code & 0x01 << 10) !== 0);
9     this.character = String.fromCharCode(code & 0xff);
10 }
11
12 Hotkey.prototype.toString = function() {
13     var mods = [];
14     if(this.has_alt) mods.push('Alt');
15     if(this.has_ctrl) mods.push('Ctrl');
16     if(this.has_shift) mods.push('Shift');
17     mods.push('"'+this.character+'"');
18     return mods.join('+');
19 };
20
21 function Panel(panelWrap) {
22     var self = this;
23     self.hotkeys = [];
24     self.wrap = panelWrap;
25     self.contentDiv = $('.panel-content', panelWrap);
26     self.instanceId = Math.ceil(Math.random() * 1000000000);
27     // $.log('new panel - wrap: ', self.wrap);
28         
29     $(document).bind('panel:unload.' + self.instanceId,
30         function(event, data) {
31             self.unload(event, data);
32         });
33
34     $(document).bind('panel:contentChanged', function(event, data) {
35         $.log(self, ' got changed event from: ', data);
36         if(self != data) {
37             self.otherPanelChanged(event.target);
38         } else {
39             self.markChanged();
40         }
41         return false;
42     });
43 }
44
45 Panel.prototype.callHook = function() {
46     var args = $.makeArray(arguments);
47     var hookName = args.splice(0,1)[0];
48     var noHookAction = args.splice(0,1)[0];
49     var result = false;
50
51     $.log('calling hook: ', hookName, 'with args: ', args);
52     if(this.hooks && this.hooks[hookName]) {
53         result = this.hooks[hookName].apply(this, args);
54     } else if (noHookAction instanceof Function) {
55         result = noHookAction(args);
56     }
57     return result;
58 };
59
60 Panel.prototype._endload = function () {
61     // this needs to be here, so we
62     this.connectToolbar();
63     this.callHook('toolbarResized');
64 };  
65
66 Panel.prototype.load = function (url) {
67     // $.log('preparing xhr load: ', this.wrap);
68     $(document).trigger('panel:unload', this);
69     var self = this;
70     self.current_url = url;
71
72     $.ajax({
73         url: url,
74         dataType: 'html',
75         success: function(data, tstat) {
76             panel_hooks = null;
77             $(self.contentDiv).html(data);
78             self.hooks = panel_hooks;
79             panel_hooks = null;            
80             self.callHook('load');           
81         },
82         error: function(request, textStatus, errorThrown) {
83             $.log('ajax', url, this.target, 'error:', textStatus, errorThrown);
84             $(self.contentDiv).html("<p>Wystapił błąd podczas wczytywania panelu.</p>");
85         }
86     });
87 };
88
89 Panel.prototype.unload = function(event, data) {
90     // $.log('got unload signal', this, ' target: ', data);
91     if( data == this ) {        
92         $(this.contentDiv).html('');
93
94         // disconnect the toolbar
95         $('div.panel-toolbar span.panel-toolbar-extra', this.wrap).empty();
96         
97         this.callHook('unload');
98         this.hooks = null; // flush the hooks
99         return false;
100     }
101 };
102
103 Panel.prototype.refresh = function(event, data) {
104     var self = this;
105     var reload = function() {
106         $.log('hard reload for panel ', self.current_url);
107         self.load(self.current_url);
108         return true;
109     };
110
111     if( this.callHook('refresh', reload) ) {
112         $('.change-notification', this.wrap).fadeOut();
113     }
114 }; 
115
116 Panel.prototype.otherPanelChanged = function(other) {
117     $.log('Panel ', this, ' is aware that ', other, ' changed.');
118     if(!this.callHook('dirty')) {
119         $('.change-notification', this.wrap).fadeIn();
120     }
121 };      
122
123 Panel.prototype.markChanged = function () {
124     this.wrap.addClass('changed');
125 };
126
127 Panel.prototype.changed = function () {
128     return this.wrap.hasClass('changed');
129 };
130
131 Panel.prototype.unmarkChanged = function () {
132     this.wrap.removeClass('changed');
133 };
134
135 Panel.prototype.saveInfo = function() {
136     var saveInfo = {};
137     this.callHook('saveInfo', null, saveInfo);
138     return saveInfo;
139 };
140
141 Panel.prototype.connectToolbar = function()
142 {
143     var self = this;
144     self.hotkeys = [];
145     
146     // check if there is a one
147     var toolbar = $("div.toolbar", this.contentDiv);
148     // $.log('Connecting toolbar', toolbar);
149     if(toolbar.length === 0) return;
150
151     // move the extra
152     var extra_buttons = $('span.panel-toolbar-extra', toolbar);
153     var placeholder = $('div.panel-toolbar span.panel-toolbar-extra', this.wrap);
154     placeholder.replaceWith(extra_buttons);
155     placeholder.hide();
156
157     var action_buttons = $('button', extra_buttons);
158
159     // connect group-switch buttons
160     var group_buttons = $('*.toolbar-tabs-container button', toolbar);
161
162     // $.log('Found groups:', group_buttons);
163
164     group_buttons.each(function() {
165         var group = $(this);
166         var group_name = group.attr('ui:group');
167         // $.log('Connecting group: ' + group_name);
168
169         group.click(function() {
170             // change the active group
171             var active = $("*.toolbar-tabs-container button.active", toolbar);
172             if (active != group) {
173                 active.removeClass('active');                
174                 group.addClass('active');
175                 $(".toolbar-button-groups-container p", toolbar).each(function() {
176                     if ( $(this).attr('ui:group') != group_name) {
177                         $(this).hide();
178                     } else {
179                         $(this).show();
180                     }
181                 });
182                 self.callHook('toolbarResized');
183             }
184         });        
185     });
186
187     // connect action buttons
188     var allbuttons = $.makeArray(action_buttons);
189     $.merge(allbuttons,
190         $.makeArray($('*.toolbar-button-groups-container button', toolbar)) );
191         
192     $(allbuttons).each(function() {
193         var button = $(this);
194         var hk = button.attr('ui:hotkey');
195         if(hk) hk = new Hotkey( parseInt(hk) );
196
197         try {
198             var params = $.evalJSON(button.attr('ui:action-params'));
199         } catch(object) {
200             $.log('JSON exception in ', button, ': ', object);
201             button.attr('disabled', 'disabled');
202             return;
203         }
204
205         var callback = function() {
206             editor.callScriptlet(button.attr('ui:action'), self, params);
207         };
208
209         // connect button
210         button.click(callback);
211        
212         // connect hotkey
213         if(hk) {
214             self.hotkeys[hk.code] = callback;
215         // $.log('hotkey', hk);
216         }
217         
218         // tooltip
219         if (button.attr('ui:tooltip') )
220         {
221             var tooltip = button.attr('ui:tooltip');
222             if(hk) tooltip += ' ['+hk+']';
223
224             button.wTooltip({
225                 delay: 1000,
226                 style: {
227                     border: "1px solid #7F7D67",
228                     opacity: 0.9,
229                     background: "#FBFBC6",
230                     padding: "1px",
231                     fontSize: "12px"
232                 },
233                 content: tooltip
234             });
235         }
236     });
237 };
238
239 Panel.prototype.hotkeyPressed = function(event)
240 {
241     var code = event.keyCode;
242     if(event.altKey) code = code | 0x100;
243     if(event.ctrlKey) code = code | 0x200;
244     if(event.shiftKey) code = code | 0x400;
245
246     var callback = this.hotkeys[code];
247     if(callback) callback();
248 };
249
250 Panel.prototype.isHotkey = function(event) {
251     var code = event.keyCode;
252     if(event.altKey) code = code | 0x100;
253     if(event.ctrlKey) code = code | 0x200;
254     if(event.shiftKey) code = code | 0x400;
255
256     $.log(event.character, this.hotkeys[code]);
257
258     if(this.hotkeys[code]) {
259         return true;
260     }
261     return false;
262 };
263
264 Panel.prototype.fireEvent = function(name) {
265     $(document).trigger('panel:'+name, this);
266 };
267
268 function Editor()
269 {
270     this.rootDiv = $('#panels');
271     this.popupQueue = [];
272     this.autosaveTimer = null;
273     this.scriplets = {};
274 }
275
276 Editor.prototype.loadConfig = function() {
277     // Load options from cookie
278     var defaultOptions = {
279         panels: [
280         {
281             name: 'htmleditor',
282             ratio: 0.5
283         },
284
285         {
286             name: 'gallery',
287             ratio: 0.5
288         }
289         ],
290         recentFiles: [],
291         lastUpdate: 0
292     };
293     
294     try {
295         var cookie = $.cookie('options');
296         this.options = $.secureEvalJSON(cookie);
297         if (!this.options) {
298             this.options = defaultOptions;
299         }
300     } catch (e) {    
301         this.options = defaultOptions;
302     }
303     
304     this.fileOptions = this.options;
305     var self = this;
306
307     if(!this.options.recentFiles)
308         this.options.recentFiles = [];
309
310     $.each(this.options.recentFiles, function(index) {
311         if (fileId == self.options.recentFiles[index].fileId) {
312             $.log('Found options for', fileId);
313             self.fileOptions = self.options.recentFiles[index];
314         }
315     });
316     
317     $.log(this.options);
318     $.log('fileOptions', this.fileOptions);
319     
320     this.loadPanelOptions();
321     this.savePanelOptions();
322 };
323
324 Editor.prototype.loadPanelOptions = function() {
325     var self = this;
326     var totalWidth = 0;
327     
328     $('.panel-wrap', self.rootDiv).each(function(index) {
329         var panelWidth = self.fileOptions.panels[index].ratio * self.rootDiv.width();
330         if ($(this).hasClass('last-panel')) {
331             $(this).css({
332                 left: totalWidth,
333                 right: 0
334             });
335         } else {
336             $(this).css({
337                 left: totalWidth,
338                 width: panelWidth
339             });
340             totalWidth += panelWidth;               
341         }
342         $.log('panel:', this, $(this).css('left'));
343         $('.panel-toolbar option', this).each(function() {
344             if ($(this).attr('p:panel-name') == self.fileOptions.panels[index].name) {
345                 $(this).parent('select').val($(this).attr('value'));
346             }
347         });
348     });   
349 };
350
351 Editor.prototype.savePanelOptions = function() {
352     var self = this;
353     var panels = [];
354     $('.panel-wrap', self.rootDiv).not('.panel-content-overlay').each(function() {
355         panels.push({
356             name: $('.panel-toolbar option:selected', this).attr('p:panel-name'),
357             ratio: $(this).width() / self.rootDiv.width()
358         });
359     });
360     self.options.panels = panels;
361
362     // Dodaj obecnie oglądany plik do listy recentFiles
363     var recentFiles = [{fileId: fileId, panels: panels}];
364     var count = 1;
365     $.each(self.options.recentFiles, function(index) {
366         if (count < 5 && fileId != self.options.recentFiles[index].fileId) {
367             recentFiles.push(self.options.recentFiles[index]);
368             count++;
369         }
370     });
371     self.options.recentFiles = recentFiles;
372     
373     self.options.lastUpdate = new Date().getTime() / 1000;
374     $.log($.toJSON(self.options));    
375     $.cookie('options', $.toJSON(self.options), {
376         expires: 7,
377         path: '/'
378     });
379 };
380
381 Editor.prototype.saveToBranch = function(msg) 
382 {
383     var changed_panel = $('.panel-wrap.changed');
384     var self = this;
385     $.log('Saving to local branch - panel:', changed_panel);
386
387     if(!msg) msg = "Szybki zapis z edytora platformy.";
388
389     if( changed_panel.length === 0) {
390         $.log('Nothing to save.');
391         return true; /* no changes */
392     }
393
394     if( changed_panel.length > 1) {
395         alert('Błąd: więcej niż jeden panel został zmodyfikowany. Nie można zapisać.');
396         return false;
397     }
398
399     var saveInfo = changed_panel.data('ctrl').saveInfo();
400     var postData = '';
401     
402     if (saveInfo.postData instanceof Object) {
403         postData = $.param(saveInfo.postData);
404     } else {
405         postData = saveInfo.postData;
406     }
407     
408     postData += '&' + $.param({
409         'commit_message': msg
410     });
411
412     self.showPopup('save-waiting', '', -1);
413
414     $.ajax({
415         url: saveInfo.url,
416         dataType: 'json',
417         success: function(data, textStatus) {
418             if (data.result != 'ok') {
419                 self.showPopup('save-error', (data.errors && data.errors[0]) || 'Nieznany błąd X_X.');
420             }
421             else {
422                 self.refreshPanels();
423
424
425                 if(self.autosaveTimer) {
426                     clearTimeout(self.autosaveTimer);
427                 }
428                 if (data.warnings === null || data.warning === undefined) {
429                     self.showPopup('save-successful');
430                 } else {
431                     self.showPopup('save-warn', data.warnings[0]);
432                 }
433             }
434             
435             self.advancePopupQueue();
436         },
437         error: function(rq, tstat, err) {
438             self.showPopup('save-error', '- bład wewnętrzny serwera.');
439             self.advancePopupQueue();
440         },
441         type: 'POST',
442         data: postData
443     });
444
445     return true;
446 };
447
448 Editor.prototype.autoSave = function() 
449 {
450     this.autosaveTimer = null;
451     // first check if there is anything to save
452     $.log('Autosave');
453     this.saveToBranch("Automatyczny zapis z edytora platformy.");
454 };
455
456 Editor.prototype.onContentChanged = function(event, data) {
457     var self = this;
458
459     $('button.provides-save').removeAttr('disabled');
460     $('button.requires-save').attr('disabled', 'disabled');
461     
462     if(this.autosaveTimer) return;
463     this.autosaveTimer = setTimeout( function() {
464         self.autoSave();
465     }, 300000 );
466 };
467
468 Editor.prototype.updateUserBranch = function() {
469     if($('.panel-wrap.changed').length !== 0) {
470         alert("There are unsaved changes - can't update.");
471     }
472
473     var self = this;
474     $.ajax({
475         url: $('#toolbar-button-update').attr('ui:ajax-action'),
476         dataType: 'json',
477         success: function(data, textStatus) {
478             switch(data.result) {
479                 case 'done':
480                     self.showPopup('generic-yes', 'Plik uaktualniony.');
481                     self.refreshPanels();
482                     break;
483                 case 'nothing-to-do':
484                     self.showPopup('generic-info', 'Brak zmian do uaktualnienia.');
485                     break;
486                 default:
487                     self.showPopup('generic-error', data.errors && data.errors[0]);
488             }
489         },
490         error: function(rq, tstat, err) {
491             self.showPopup('generic-error', 'Błąd serwera: ' + err);
492         },
493         type: 'POST',
494         data: {}
495     });
496 };
497
498 Editor.prototype.sendMergeRequest = function (message) {
499     if( $('.panel-wrap.changed').length !== 0) {
500         alert("There are unsaved changes - can't commit.");
501     }
502
503     var self =  this;    
504         
505     $.ajax({        
506         url: $('#commit-dialog form').attr('action'),
507         dataType: 'json',
508         success: function(data, textStatus) {
509             switch(data.result) {
510                 case 'done':
511                     self.showPopup('generic-yes', 'Łączenie zmian powiodło się.');
512
513                     if(data.localmodified) {
514                         self.refreshPanels();
515                     }
516                         
517                     break;
518                 case 'nothing-to-do':
519                     self.showPopup('generic-info', 'Brak zmian do połaczenia.');
520                     break;
521                 default:
522                     self.showPopup('generic-error', data.errors && data.errors[0]);
523             }
524         },
525         error: function(rq, tstat, err) {
526             self.showPopup('generic-error', 'Błąd serwera: ' + err);
527         },
528         type: 'POST',
529         data: {
530             'message': message
531         }
532     }); 
533 };
534
535 Editor.prototype.postSplitRequest = function(s, f)
536 {
537     $.ajax({
538         url: $('#split-dialog form').attr('action'),
539         dataType: 'html',
540         success: s,
541         error: f,
542         type: 'POST',
543         data: $('#split-dialog form').serialize()
544     });
545 };
546
547
548 Editor.prototype.allPanels = function() {
549     return $('#' + this.rootDiv.attr('id') +' > *.panel-wrap', this.rootDiv.parent());
550 };
551
552 Editor.prototype.registerScriptlet = function(scriptlet_id, scriptlet_func)
553 {
554     // I briefly assume, that it's verified not to break the world on SS
555     if (!this[scriptlet_id]) {
556         this[scriptlet_id] = scriptlet_func;
557     }
558 };
559
560 Editor.prototype.callScriptlet = function(scriptlet_id, panel, params) {
561     var func = this[scriptlet_id];
562     if(!func) {
563         throw 'No scriptlet named "' + scriptlet_id + '" found.';
564     }
565     return func(this, panel, params);
566 };
567
568 $(function() {
569     $.fbind = function (self, func) {
570         return function() { 
571             return func.apply(self, arguments);
572         };
573     };
574     
575     editor = new Editor();
576
577     // do the layout
578     editor.loadConfig();
579     editor.setupUI();
580 });