project/static/js/editor.js

   1 function Panel(panelWrap) {
   2     var self = this;
   3     self.wrap = panelWrap;
   4     self.contentDiv = $('.panel-content', panelWrap);
   5     self.instanceId = Math.ceil(Math.random() * 1000000000);
   6     $.log('new panel - wrap: ', self.wrap);
   7
   8     $(document).bind('panel:unload.' + self.instanceId,
   9         function(event, data) {
  10             self.unload(event, data);
  11         });
  12
  13     $(document).bind('panel:contentChanged', function(event, data) {
  14         $.log(self, ' got changed event from: ', data);
  15         if(self != data)
  16             self.otherPanelChanged(event.target);
  17         else
  18             self.markChanged();
  19
  20         return false;
  21     });
  22 }
  23
  24 Panel.prototype.callHook = function() {
  25     var args = $.makeArray(arguments)
  26     var hookName = args.splice(0,1)[0]
  27     var noHookAction = args.splice(0,1)[0]
  28     var result = false;
  29
  30     $.log('calling hook: ', hookName, 'with args: ', args);
  31     if(this.hooks && this.hooks[hookName])
  32         result = this.hooks[hookName].apply(this, args);
  33     else if (noHookAction instanceof Function)
  34         result = noHookAction(args);
  35     return result;
  36 }
  37
  38 Panel.prototype.load = function (url) {
  39     $.log('preparing xhr load: ', this.wrap);
  40     $(document).trigger('panel:unload', this);
  41     var self = this;
  42     self.current_url = url;
  43
  44     $.ajax({
  45         url: url,
  46         dataType: 'html',
  47         success: function(data, tstat) {
  48             panel_hooks = null;
  49             $(self.contentDiv).html(data);
  50             self.hooks = panel_hooks;
  51             panel_hooks = null;
  52             self.connectToolbar();
  53             self.callHook('load');
  54         },
  55         error: function(request, textStatus, errorThrown) {
  56             $.log('ajax', url, this.target, 'error:', textStatus, errorThrown);
  57             $(self.contentDiv).html("<p>Wystapił błąd podczas wczytywania panelu.");
  58         }
  59     });
  60 }
  61
  62 Panel.prototype.unload = function(event, data) {
  63     $.log('got unload signal', this, ' target: ', data);
  64
  65     if( data == this ) {
  66         $.log('unloading', this);
  67         $(this.contentDiv).html('');
  68         this.callHook('unload');
  69         this.hooks = null; // flush the hooks
  70         return false;
  71     };
  72 }
  73
  74 Panel.prototype.refresh = function(event, data) {
  75     var self = this;
  76     reload = function() {
  77         $.log('hard reload for panel ', self.current_url);
  78         self.load(self.current_url);
  79         return true;
  80     }
  81
  82     if( this.callHook('refresh', reload) )
  83         $('.change-notification', this.wrap).fadeOut();
  84 }
  85
  86 Panel.prototype.otherPanelChanged = function(other) {
  87     $.log('panel ', other, ' changed.');
  88     if(!this.callHook('dirty'))
  89         $('.change-notification', this.wrap).fadeIn();
  90 }
  91
  92 Panel.prototype.markChanged = function () {
  93     this.wrap.addClass('changed');
  94 }
  95
  96 Panel.prototype.changed = function () {
  97     return this.wrap.hasClass('changed');
  98 }
  99
 100 Panel.prototype.unmarkChanged = function () {
 101     this.wrap.removeClass('changed');
 102 }
 103
 104 Panel.prototype.saveInfo = function() {
 105     var saveInfo = {};
 106     this.callHook('saveInfo', null, saveInfo);
 107     return saveInfo;
 108 }
 109
 110 Panel.prototype.connectToolbar = function()
 111 {
 112     var self = this;
 113
 114     // check if there is a one
 115     var toolbar = $("div.toolbar", this.contentDiv);
 116     $.log('Connecting toolbar', toolbar);
 117     if(toolbar.length == 0) return;
 118
 119     // connect group-switch buttons
 120     var group_buttons = $('*.toolbar-tabs-container button', toolbar);
 121
 122     $.log('Found groups:', group_buttons);
 123
 124     group_buttons.each(function() {
 125         var group = $(this);
 126         var group_name = group.attr('ui:group');
 127         $.log('Connecting group: ' + group_name);
 128
 129         group.click(function() {
 130             // change the active group
 131             var active = $("*.toolbar-tabs-container button.active", toolbar);
 132             if (active != group) {
 133                 active.removeClass('active');
 134                 group.addClass('active');
 135                 $(".toolbar-button-groups-container p", toolbar).each(function() {
 136                     if ( $(this).attr('ui:group') != group_name)
 137                         $(this).hide();
 138                     else
 139                         $(this).show();
 140                 });
 141             }
 142         });
 143     });
 144
 145     // connect action buttons
 146     var action_buttons = $('*.toolbar-button-groups-container button', toolbar);
 147     action_buttons.each(function() {
 148         var button = $(this);
 149
 150         button.click(function() {
 151            editor.callScriptlet(button.attr('ui:action'),
 152                 self, eval(button.attr('ui:action-params')) );
 153         });
 154
 155         // connect hotkeys
 156
 157     });
 158 }
 159
 160 //
 161 Panel.prototype.fireEvent = function(name) {
 162     $(document).trigger('panel:'+name, this);
 163 }
 164
 165 function Editor()
 166 {
 167     this.rootDiv = $('#panels');
 168     this.popupQueue = [];
 169     this.autosaveTimer = null;
 170     this.scriplets = {};
 171 }
 172
 173 Editor.prototype.setupUI = function() {
 174     // set up the UI visually and attach callbacks
 175     var self = this;
 176
 177     self.rootDiv.makeHorizPanel({}); // TODO: this probably doesn't belong into jQuery
 178     // self.rootDiv.css('top', ($('#header').outerHeight() ) + 'px');
 179
 180     $('#panels > *.panel-wrap').each(function() {
 181         var panelWrap = $(this);
 182         $.log('wrap: ', panelWrap);
 183         var panel = new Panel(panelWrap);
 184         panelWrap.data('ctrl', panel); // attach controllers to wraps
 185         panel.load($('.panel-toolbar select', panelWrap).val());
 186
 187         $('.panel-toolbar select', panelWrap).change(function() {
 188             var url = $(this).val();
 189             panelWrap.data('ctrl').load(url);
 190             self.savePanelOptions();
 191         });
 192
 193         $('.panel-toolbar button.refresh-button', panelWrap).click(
 194             function() {
 195                 panel.refresh();
 196             } );
 197     });
 198
 199     $(document).bind('panel:contentChanged', function() {
 200         self.onContentChanged.apply(self, arguments)
 201     });
 202
 203     $('#toolbar-button-save').click( function (event, data) {
 204         self.saveToBranch();
 205     } );
 206     $('#toolbar-button-commit').click( function (event, data) {
 207         self.sendPullRequest();
 208     } );
 209     self.rootDiv.bind('stopResize', function() {
 210         self.savePanelOptions()
 211     });
 212 }
 213
 214 Editor.prototype.loadConfig = function() {
 215     // Load options from cookie
 216     var defaultOptions = {
 217         panels: [
 218         {
 219             name: 'htmleditor',
 220             ratio: 0.5
 221         },
 222
 223         {
 224             name: 'gallery',
 225             ratio: 0.5
 226         }
 227         ],
 228         lastUpdate: 0
 229     }
 230
 231     try {
 232         var cookie = $.cookie('options');
 233         this.options = $.secureEvalJSON(cookie);
 234         if (!this.options) {
 235             this.options = defaultOptions;
 236         }
 237     } catch (e) {
 238         this.options = defaultOptions;
 239     }
 240     $.log(this.options);
 241
 242     this.loadPanelOptions();
 243 }
 244
 245 Editor.prototype.loadPanelOptions = function() {
 246     var self = this;
 247     var totalWidth = 0;
 248
 249     $('.panel-wrap', self.rootDiv).each(function(index) {
 250         var panelWidth = self.options.panels[index].ratio * self.rootDiv.width();
 251         if ($(this).hasClass('last-panel')) {
 252             $(this).css({
 253                 left: totalWidth,
 254                 right: 0
 255             });
 256         } else {
 257             $(this).css({
 258                 left: totalWidth,
 259                 width: panelWidth
 260             });
 261             totalWidth += panelWidth;
 262         }
 263         $.log('panel:', this, $(this).css('left'));
 264         $('.panel-toolbar select', this).val(
 265             $('.panel-toolbar option[name=' + self.options.panels[index].name + ']', this).attr('value')
 266             )
 267     });
 268 }
 269
 270 Editor.prototype.savePanelOptions = function() {
 271     var self = this;
 272     var panels = [];
 273     $('.panel-wrap', self.rootDiv).not('.panel-content-overlay').each(function() {
 274         panels.push({
 275             name: $('.panel-toolbar option:selected', this).attr('name'),
 276             ratio: $(this).width() / self.rootDiv.width()
 277         })
 278     });
 279     self.options.panels = panels;
 280     self.options.lastUpdate = (new Date()).getTime() / 1000;
 281     $.log($.toJSON(self.options));
 282     $.cookie('options', $.toJSON(self.options), {
 283         expires: 7,
 284         path: '/'
 285     });
 286 }
 287
 288 Editor.prototype.saveToBranch = function(msg)
 289 {
 290     var changed_panel = $('.panel-wrap.changed');
 291     var self = this;
 292     $.log('Saving to local branch - panel:', changed_panel);
 293
 294     if(!msg) msg = "Zapis z edytora platformy.";
 295
 296     if( changed_panel.length == 0) {
 297         $.log('Nothing to save.');
 298         return true; /* no changes */
 299     }
 300
 301     if( changed_panel.length > 1) {
 302         alert('Błąd: więcej niż jeden panel został zmodyfikowany. Nie można zapisać.');
 303         return false;
 304     }
 305
 306     saveInfo = changed_panel.data('ctrl').saveInfo();
 307     var postData = ''
 308
 309     if(saveInfo.postData instanceof Object)
 310         postData = $.param(saveInfo.postData);
 311     else
 312         postData = saveInfo.postData;
 313
 314     postData += '&' + $.param({
 315         'commit_message': msg
 316     })
 317
 318     $.ajax({
 319         url: saveInfo.url,
 320         dataType: 'json',
 321         success: function(data, textStatus) {
 322             if (data.result != 'ok')
 323                 self.showPopup('save-error', data.errors[0]);
 324             else {
 325                 self.refreshPanels(changed_panel);
 326                 $('#toolbar-button-save').attr('disabled', 'disabled');
 327                 $('#toolbar-button-commit').removeAttr('disabled');
 328                 if(self.autosaveTimer)
 329                     clearTimeout(self.autosaveTimer);
 330
 331                 self.showPopup('save-successful');
 332             }
 333         },
 334         error: function(rq, tstat, err) {
 335             self.showPopup('save-error');
 336         },
 337         type: 'POST',
 338         data: postData
 339     });
 340
 341     return true;
 342 };
 343
 344 Editor.prototype.autoSave = function()
 345 {
 346     this.autosaveTimer = null;
 347     // first check if there is anything to save
 348     $.log('Autosave');
 349     this.saveToBranch("Automatyczny zapis z edytora platformy.");
 350 }
 351
 352 Editor.prototype.onContentChanged = function(event, data) {
 353     var self = this;
 354
 355     $('#toolbar-button-save').removeAttr('disabled');
 356     $('#toolbar-button-commit').attr('disabled', 'disabled');
 357
 358     if(this.autosaveTimer) return;
 359     this.autosaveTimer = setTimeout( function() {
 360         self.autoSave();
 361     }, 300000 );
 362 };
 363
 364 Editor.prototype.refreshPanels = function(goodPanel) {
 365     var self = this;
 366     var panels = $('#' + self.rootDiv.attr('id') +' > *.panel-wrap', self.rootDiv.parent());
 367
 368     panels.each(function() {
 369         var panel = $(this).data('ctrl');
 370         $.log('Refreshing: ', this, panel);
 371         if ( panel.changed() )
 372             panel.unmarkChanged();
 373         else
 374             panel.refresh();
 375     });
 376 };
 377
 378
 379 Editor.prototype.sendPullRequest = function () {
 380     if( $('.panel-wrap.changed').length != 0)
 381         alert("There are unsaved changes - can't make a pull request.");
 382
 383     this.showPopup('not-implemented');
 384 /*
 385         $.ajax({
 386                 url: '/pull-request',
 387                 dataType: 'json',
 388                 success: function(data, textStatus) {
 389             $.log('data: ' + data);
 390                 },
 391                 error: function(rq, tstat, err) {
 392                         $.log('commit error', rq, tstat, err);
 393                 },
 394                 type: 'POST',
 395                 data: {}
 396         }); */
 397 }
 398
 399 Editor.prototype.showPopup = function(name, text)
 400 {
 401     var self = this;
 402     self.popupQueue.push( [name, text] )
 403
 404     if( self.popupQueue.length > 1)
 405         return;
 406
 407     var box = $('#message-box > #' + name);
 408     $('*.data', box).html(text);
 409     box.fadeIn();
 410
 411     self._nextPopup = function() {
 412         var elem = self.popupQueue.pop()
 413         if(elem) {
 414             var box = $('#message-box > #' + elem[0]);
 415
 416             box.fadeOut(300, function() {
 417                 $('*.data', box).html();
 418
 419                 if( self.popupQueue.length > 0) {
 420                     box = $('#message-box > #' + self.popupQueue[0][0]);
 421                     $('*.data', box).html(self.popupQueue[0][1]);
 422                     box.fadeIn();
 423                     setTimeout(self._nextPopup, 5000);
 424                 }
 425             });
 426         }
 427     }
 428
 429     setTimeout(self._nextPopup, 5000);
 430 }
 431
 432 Editor.prototype.registerScriptlet = function(scriptlet_id, scriptlet_func)
 433 {
 434     // I briefly assume, that it's verified not to break the world on SS
 435     if (!this[scriptlet_id])
 436         this[scriptlet_id] = scriptlet_func;
 437 }
 438
 439 Editor.prototype.callScriptlet = function(scriptlet_id, panel, params) {
 440     var func = this[scriptlet_id]
 441     if(!func)
 442         throw 'No scriptlet named "' + scriptlet_id + '" found.';
 443
 444     return func(this, panel, params);
 445 }
 446
 447 $(function() {
 448     editor = new Editor();
 449
 450     // do the layout
 451     editor.loadConfig();
 452     editor.setupUI();
 453 });