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 });