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     if(this.hotkeys[code] !== null) {
 257         return true;
 258     }
 259     return false;
 260 };
 261
 262 Panel.prototype.fireEvent = function(name) {
 263     $(document).trigger('panel:'+name, this);
 264 };
 265
 266 function Editor()
 267 {
 268     this.rootDiv = $('#panels');
 269     this.popupQueue = [];
 270     this.autosaveTimer = null;
 271     this.scriplets = {};
 272 }
 273
 274 Editor.prototype.loadConfig = function() {
 275     // Load options from cookie
 276     var defaultOptions = {
 277         panels: [
 278         {
 279             name: 'htmleditor',
 280             ratio: 0.5
 281         },
 282
 283         {
 284             name: 'gallery',
 285             ratio: 0.5
 286         }
 287         ],
 288         recentFiles: [],
 289         lastUpdate: 0
 290     };
 291
 292     try {
 293         var cookie = $.cookie('options');
 294         this.options = $.secureEvalJSON(cookie);
 295         if (!this.options) {
 296             this.options = defaultOptions;
 297         }
 298     } catch (e) {
 299         this.options = defaultOptions;
 300     }
 301
 302     this.fileOptions = this.options;
 303     var self = this;
 304     $.each(this.options.recentFiles, function(index) {
 305         if (fileId == self.options.recentFiles[index].fileId) {
 306             $.log('Found options for', fileId);
 307             self.fileOptions = self.options.recentFiles[index];
 308         }
 309     });
 310
 311     $.log(this.options);
 312     $.log('fileOptions', this.fileOptions);
 313
 314     this.loadPanelOptions();
 315     this.savePanelOptions();
 316 };
 317
 318 Editor.prototype.loadPanelOptions = function() {
 319     var self = this;
 320     var totalWidth = 0;
 321
 322     $('.panel-wrap', self.rootDiv).each(function(index) {
 323         var panelWidth = self.fileOptions.panels[index].ratio * self.rootDiv.width();
 324         if ($(this).hasClass('last-panel')) {
 325             $(this).css({
 326                 left: totalWidth,
 327                 right: 0
 328             });
 329         } else {
 330             $(this).css({
 331                 left: totalWidth,
 332                 width: panelWidth
 333             });
 334             totalWidth += panelWidth;
 335         }
 336         $.log('panel:', this, $(this).css('left'));
 337         $('.panel-toolbar option', this).each(function() {
 338             if ($(this).attr('p:panel-name') == self.fileOptions.panels[index].name) {
 339                 $(this).parent('select').val($(this).attr('value'));
 340             }
 341         });
 342     });
 343 };
 344
 345 Editor.prototype.savePanelOptions = function() {
 346     var self = this;
 347     var panels = [];
 348     $('.panel-wrap', self.rootDiv).not('.panel-content-overlay').each(function() {
 349         panels.push({
 350             name: $('.panel-toolbar option:selected', this).attr('p:panel-name'),
 351             ratio: $(this).width() / self.rootDiv.width()
 352         });
 353     });
 354     self.options.panels = panels;
 355
 356     // Dodaj obecnie oglądany plik do listy recentFiles
 357     var recentFiles = [{fileId: fileId, panels: panels}];
 358     var count = 1;
 359     $.each(self.options.recentFiles, function(index) {
 360         if (count < 5 && fileId != self.options.recentFiles[index].fileId) {
 361             recentFiles.push(self.options.recentFiles[index]);
 362             count++;
 363         }
 364     });
 365     self.options.recentFiles = recentFiles;
 366
 367     self.options.lastUpdate = new Date().getTime() / 1000;
 368     $.log($.toJSON(self.options));
 369     $.cookie('options', $.toJSON(self.options), {
 370         expires: 7,
 371         path: '/'
 372     });
 373 };
 374
 375 Editor.prototype.saveToBranch = function(msg)
 376 {
 377     var changed_panel = $('.panel-wrap.changed');
 378     var self = this;
 379     $.log('Saving to local branch - panel:', changed_panel);
 380
 381     if(!msg) msg = "Szybki zapis z edytora platformy.";
 382
 383     if( changed_panel.length === 0) {
 384         $.log('Nothing to save.');
 385         return true; /* no changes */
 386     }
 387
 388     if( changed_panel.length > 1) {
 389         alert('Błąd: więcej niż jeden panel został zmodyfikowany. Nie można zapisać.');
 390         return false;
 391     }
 392
 393     var saveInfo = changed_panel.data('ctrl').saveInfo();
 394     var postData = '';
 395
 396     if (saveInfo.postData instanceof Object) {
 397         postData = $.param(saveInfo.postData);
 398     } else {
 399         postData = saveInfo.postData;
 400     }
 401
 402     postData += '&' + $.param({
 403         'commit_message': msg
 404     });
 405
 406     self.showPopup('save-waiting', '', -1);
 407
 408     $.ajax({
 409         url: saveInfo.url,
 410         dataType: 'json',
 411         success: function(data, textStatus) {
 412             if (data.result != 'ok') {
 413                 self.showPopup('save-error', (data.errors && data.errors[0]) || 'Nieznany błąd X_X.');
 414             }
 415             else {
 416                 self.refreshPanels();
 417
 418
 419                 if(self.autosaveTimer) {
 420                     clearTimeout(self.autosaveTimer);
 421                 }
 422                 if (data.warnings === null) {
 423                     self.showPopup('save-successful');
 424                 } else {
 425                     self.showPopup('save-warn', data.warnings[0]);
 426                 }
 427             }
 428
 429             self.advancePopupQueue();
 430         },
 431         error: function(rq, tstat, err) {
 432             self.showPopup('save-error', '- bład wewnętrzny serwera.');
 433             self.advancePopupQueue();
 434         },
 435         type: 'POST',
 436         data: postData
 437     });
 438
 439     return true;
 440 };
 441
 442 Editor.prototype.autoSave = function()
 443 {
 444     this.autosaveTimer = null;
 445     // first check if there is anything to save
 446     $.log('Autosave');
 447     this.saveToBranch("Automatyczny zapis z edytora platformy.");
 448 };
 449
 450 Editor.prototype.onContentChanged = function(event, data) {
 451     var self = this;
 452
 453     $('button.provides-save').removeAttr('disabled');
 454     $('button.requires-save').attr('disabled', 'disabled');
 455
 456     if(this.autosaveTimer) return;
 457     this.autosaveTimer = setTimeout( function() {
 458         self.autoSave();
 459     }, 300000 );
 460 };
 461
 462 Editor.prototype.updateUserBranch = function() {
 463     if($('.panel-wrap.changed').length !== 0) {
 464         alert("There are unsaved changes - can't update.");
 465     }
 466
 467     var self = this;
 468     $.ajax({
 469         url: $('#toolbar-button-update').attr('ui:ajax-action'),
 470         dataType: 'json',
 471         success: function(data, textStatus) {
 472             switch(data.result) {
 473                 case 'done':
 474                     self.showPopup('generic-yes', 'Plik uaktualniony.');
 475                     self.refreshPanels();
 476                     break;
 477                 case 'nothing-to-do':
 478                     self.showPopup('generic-info', 'Brak zmian do uaktualnienia.');
 479                     break;
 480                 default:
 481                     self.showPopup('generic-error', data.errors && data.errors[0]);
 482             }
 483         },
 484         error: function(rq, tstat, err) {
 485             self.showPopup('generic-error', 'Błąd serwera: ' + err);
 486         },
 487         type: 'POST',
 488         data: {}
 489     });
 490 };
 491
 492 Editor.prototype.sendMergeRequest = function (message) {
 493     if( $('.panel-wrap.changed').length !== 0) {
 494         alert("There are unsaved changes - can't commit.");
 495     }
 496
 497     var self =  this;
 498
 499     $.ajax({
 500         url: $('#commit-dialog form').attr('action'),
 501         dataType: 'json',
 502         success: function(data, textStatus) {
 503             switch(data.result) {
 504                 case 'done':
 505                     self.showPopup('generic-yes', 'Łączenie zmian powiodło się.');
 506
 507                     if(data.localmodified) {
 508                         self.refreshPanels();
 509                     }
 510
 511                     break;
 512                 case 'nothing-to-do':
 513                     self.showPopup('generic-info', 'Brak zmian do połaczenia.');
 514                     break;
 515                 default:
 516                     self.showPopup('generic-error', data.errors && data.errors[0]);
 517             }
 518         },
 519         error: function(rq, tstat, err) {
 520             self.showPopup('generic-error', 'Błąd serwera: ' + err);
 521         },
 522         type: 'POST',
 523         data: {
 524             'message': message
 525         }
 526     });
 527 };
 528
 529 Editor.prototype.postSplitRequest = function(s, f)
 530 {
 531     $.ajax({
 532         url: $('#split-dialog form').attr('action'),
 533         dataType: 'html',
 534         success: s,
 535         error: f,
 536         type: 'POST',
 537         data: $('#split-dialog form').serialize()
 538     });
 539 };
 540
 541
 542 Editor.prototype.allPanels = function() {
 543     return $('#' + this.rootDiv.attr('id') +' > *.panel-wrap', this.rootDiv.parent());
 544 };
 545
 546 Editor.prototype.registerScriptlet = function(scriptlet_id, scriptlet_func)
 547 {
 548     // I briefly assume, that it's verified not to break the world on SS
 549     if (!this[scriptlet_id]) {
 550         this[scriptlet_id] = scriptlet_func;
 551     }
 552 };
 553
 554 Editor.prototype.callScriptlet = function(scriptlet_id, panel, params) {
 555     var func = this[scriptlet_id];
 556     if(!func) {
 557         throw 'No scriptlet named "' + scriptlet_id + '" found.';
 558     }
 559     return func(this, panel, params);
 560 };
 561
 562 $(function() {
 563     $.fbind = function (self, func) {
 564         return function() {
 565             return func.apply(self, arguments);
 566         };
 567     };
 568
 569     editor = new Editor();
 570
 571     // do the layout
 572     editor.loadConfig();
 573     editor.setupUI();
 574 });