project/static/js/models.js

   1 /*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/
   2 var documentsUrl = '/api/documents/';
   3
   4
   5 Editor.Model = Editor.Object.extend({
   6   synced: false,
   7   data: null
   8 });
   9
  10
  11 Editor.ToolbarButtonsModel = Editor.Model.extend({
  12   _className: 'Editor.ToolbarButtonsModel',
  13   serverURL: '/api/toolbar/buttons',
  14   buttons: {},
  15
  16   init: function() {
  17     this._super();
  18   },
  19
  20   load: function() {
  21     if (!this.get('buttons').length) {
  22       $.ajax({
  23         url: this.serverURL,
  24         dataType: 'json',
  25         success: this.loadSucceeded.bind(this)
  26       });
  27     }
  28   },
  29
  30   loadSucceeded: function(data) {
  31     this.set('buttons', data);
  32   }
  33 });
  34
  35
  36 // Stany modelu:
  37 //
  38 //                  -> error -> loading
  39 //                 /
  40 // empty -> loading -> synced -> unsynced -> loading
  41 //                           \
  42 //                            -> dirty -> updating -> updated -> synced
  43 //
  44 Editor.XMLModel = Editor.Model.extend({
  45   _className: 'Editor.XMLModel',
  46   serverURL: null,
  47   data: '',
  48   state: 'empty',
  49
  50   init: function(serverURL, revision) {
  51     this._super();
  52     this.set('state', 'empty');
  53     this.set('revision', revision);
  54     this.serverURL = serverURL;
  55     this.toolbarButtonsModel = new Editor.ToolbarButtonsModel();
  56     this.addObserver(this, 'data', this.dataChanged.bind(this));
  57   },
  58
  59   load: function(force) {
  60     if (force || this.get('state') == 'empty') {
  61       this.set('state', 'loading');
  62       $.ajax({
  63         url: this.serverURL,
  64         dataType: 'text',
  65         data: {revision: this.get('revision')},
  66         success: this.loadingSucceeded.bind(this),
  67         error: this.loadingFailed.bind(this)
  68       });
  69       return true;
  70     }
  71     return false;
  72   },
  73
  74   loadingSucceeded: function(data) {
  75     if (this.get('state') != 'loading') {
  76       alert('erroneous state:', this.get('state'));
  77     }
  78     this.set('data', data);
  79     this.set('state', 'synced');
  80   },
  81
  82   loadingFailed: function() {
  83     if (this.get('state') != 'loading') {
  84       alert('erroneous state:', this.get('state'));
  85     }
  86     this.set('error', 'Nie udało się załadować panelu');
  87     this.set('state', 'error');
  88   },
  89
  90   update: function(message) {
  91     if (this.get('state') == 'dirty') {
  92       this.set('state', 'updating');
  93
  94       var payload = {
  95         contents: this.get('data'),
  96         revision: this.get('revision')
  97       };
  98       if (message) {
  99         payload.message = message;
 100       }
 101
 102       $.ajax({
 103         url: this.serverURL,
 104         type: 'post',
 105         dataType: 'json',
 106         data: payload,
 107         success: this.updatingSucceeded.bind(this),
 108         error: this.updatingFailed.bind(this)
 109       });
 110       return true;
 111     }
 112     return false;
 113   },
 114
 115   updatingSucceeded: function(data) {
 116     if (this.get('state') != 'updating') {
 117       alert('erroneous state:', this.get('state'));
 118     }
 119     this.set('revision', data.revision);
 120     this.set('state', 'updated');
 121   },
 122
 123   updatingFailed: function() {
 124     if (this.get('state') != 'updating') {
 125       alert('erroneous state:', this.get('state'));
 126     }
 127     messageCenter.addMessage('error', 'Uaktualnienie nie powiodło się', 'Uaktualnienie nie powiodło się');
 128     this.set('state', 'dirty');
 129   },
 130
 131   // For debbuging
 132   set: function(property, value) {
 133     if (property == 'state') {
 134       console.log(this.description(), ':', property, '=', value);
 135     }
 136     return this._super(property, value);
 137   },
 138
 139   dataChanged: function(property, value) {
 140     if (this.get('state') == 'synced') {
 141       this.set('state', 'dirty');
 142     }
 143   },
 144
 145   dispose: function() {
 146     this.removeObserver(this);
 147     this._super();
 148   }
 149 });
 150
 151
 152 Editor.HTMLModel = Editor.Model.extend({
 153   _className: 'Editor.HTMLModel',
 154   serverURL: null,
 155   data: '',
 156   state: 'empty',
 157
 158   init: function(serverURL, revision) {
 159     this._super();
 160     this.set('state', 'empty');
 161     this.set('revision', revision);
 162     this.serverURL = serverURL;
 163   },
 164
 165   load: function(force) {
 166     if (force || this.get('state') == 'empty') {
 167       this.set('state', 'loading');
 168       $.ajax({
 169         url: this.serverURL,
 170         dataType: 'text',
 171         data: {revision: this.get('revision')},
 172         success: this.loadingSucceeded.bind(this),
 173         error: this.loadingFailed.bind(this)
 174       });
 175     }
 176   },
 177
 178   loadingSucceeded: function(data) {
 179     if (this.get('state') != 'loading') {
 180       alert('erroneous state:', this.get('state'));
 181     }
 182     this.set('data', data);
 183     this.set('state', 'synced');
 184   },
 185
 186   loadingFailed: function() {
 187     if (this.get('state') != 'loading') {
 188       alert('erroneous state:', this.get('state'));
 189     }
 190     this.set('error', 'Nie udało się załadować panelu');
 191     this.set('state', 'error');
 192   },
 193
 194   // For debbuging
 195   set: function(property, value) {
 196     if (property == 'state') {
 197       console.log(this.description(), ':', property, '=', value);
 198     }
 199     return this._super(property, value);
 200   }
 201 });
 202
 203
 204 Editor.ImageGalleryModel = Editor.Model.extend({
 205   _className: 'Editor.ImageGalleryModel',
 206   serverURL: null,
 207   data: [],
 208   state: 'empty',
 209
 210   init: function(serverURL) {
 211     this._super();
 212     this.set('state', 'empty');
 213     this.serverURL = serverURL;
 214     // olewać data
 215     this.pages = [];
 216   },
 217
 218   load: function(force) {
 219     if (force || this.get('state') == 'empty') {
 220       this.set('state', 'loading');
 221       $.ajax({
 222         url: this.serverURL,
 223         dataType: 'json',
 224         success: this.loadingSucceeded.bind(this)
 225       });
 226     }
 227   },
 228
 229   loadingSucceeded: function(data) {
 230     if (this.get('state') != 'loading') {
 231       alert('erroneous state:', this.get('state'));
 232     }
 233
 234     console.log('galleries:', data);
 235
 236     if (data.length === 0) {
 237         this.set('data', []);
 238     } else {
 239         console.log('dupa');
 240         this.set('data', data[0].pages);
 241     }
 242
 243     this.set('state', 'synced');
 244   },
 245
 246   set: function(property, value) {
 247     if (property == 'state') {
 248       console.log(this.description(), ':', property, '=', value);
 249     }
 250     return this._super(property, value);
 251   }
 252 });
 253
 254
 255 Editor.DocumentModel = Editor.Model.extend({
 256   _className: 'Editor.DocumentModel',
 257   data: null, // name, text_url, user_revision, latest_shared_rev, parts_url, dc_url, size, merge_url
 258   contentModels: {},
 259   state: 'empty',
 260
 261   init: function() {
 262     this._super();
 263     this.set('state', 'empty');
 264     this.load();
 265   },
 266
 267   load: function() {
 268     if (this.get('state') == 'empty') {
 269       this.set('state', 'loading');
 270       $.ajax({
 271         cache: false,
 272         url: documentsUrl + fileId,
 273         dataType: 'json',
 274         success: this.successfulLoad.bind(this)
 275       });
 276     }
 277   },
 278
 279   successfulLoad: function(data) {
 280     this.set('data', data);
 281     this.set('state', 'synced');
 282     this.contentModels = {
 283       'xml': new Editor.XMLModel(data.text_url, data.user_revision),
 284       'html': new Editor.HTMLModel(data.html_url, data.user_revision),
 285       'gallery': new Editor.ImageGalleryModel(data.gallery_url)
 286     };
 287     for (var key in this.contentModels) {
 288       this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this));
 289     }
 290   },
 291
 292   contentModelStateChanged: function(property, value, contentModel) {
 293     if (value == 'dirty') {
 294       this.set('state', 'dirty');
 295       for (var key in this.contentModels) {
 296         if (this.contentModels[key].guid() != contentModel.guid()) {
 297           this.contentModels[key].set('state', 'unsynced');
 298         }
 299       }
 300     } else if (value == 'updated') {
 301       this.set('state', 'synced');
 302       for (key in this.contentModels) {
 303         if (this.contentModels[key].guid() == contentModel.guid()) {
 304           this.contentModels[key].set('state', 'synced');
 305           this.data.user_revision = this.contentModels[key].get('revision');
 306           messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.data.user_revision,
 307             'Uaktualnienie dokumentu do wersji ' + this.data.user_revision);
 308         }
 309       }
 310       for (key in this.contentModels) {
 311         if (this.contentModels[key].guid() != contentModel.guid()) {
 312           this.contentModels[key].set('revision', this.data.user_revision);
 313           this.contentModels[key].set('state', 'empty');
 314         }
 315       }
 316     }
 317   },
 318
 319   saveDirtyContentModel: function(message) {
 320     for (var key in this.contentModels) {
 321       if (this.contentModels[key].get('state') == 'dirty') {
 322         this.contentModels[key].update(message);
 323         break;
 324       }
 325     }
 326   },
 327
 328   update: function() {
 329     this.set('state', 'loading');
 330     $.ajax({
 331       url: this.data.merge_url,
 332       dataType: 'json',
 333       type: 'post',
 334       data: {
 335         type: 'update',
 336         target_revision: this.data.user_revision
 337       },
 338       complete: this.updateCompleted.bind(this),
 339       success: function(data) { this.set('updateData', data); }.bind(this)
 340     });
 341   },
 342
 343   updateCompleted: function(xhr, textStatus) {
 344     console.log(xhr.status, textStatus);
 345     if (xhr.status == 200) { // Sukces
 346       this.data.user_revision = this.get('updateData').revision;
 347       messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision,
 348         'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision);
 349       for (var key in this.contentModels) {
 350         this.contentModels[key].set('revision', this.data.user_revision);
 351         this.contentModels[key].set('state', 'empty');
 352       }
 353     } else if (xhr.status == 202) { // Wygenerowano PullRequest (tutaj?)
 354     } else if (xhr.status == 204) { // Nic nie zmieniono
 355     } else if (xhr.status == 409) { // Konflikt podczas operacji
 356     }
 357     this.set('state', 'synced');
 358     this.set('updateData', null);
 359   },
 360
 361   merge: function(message) {
 362     this.set('state', 'loading');
 363     $.ajax({
 364       url: this.data.merge_url,
 365       type: 'post',
 366       dataType: 'json',
 367       data: {
 368         type: 'share',
 369         target_revision: this.data.user_revision,
 370         message: message
 371       },
 372       complete: this.mergeCompleted.bind(this),
 373       success: function(data) { this.set('mergeData', data); }.bind(this)
 374     });
 375   },
 376
 377   mergeCompleted: function(xhr, textStatus) {
 378     console.log(xhr.status, textStatus);
 379     if (xhr.status == 200) { // Sukces
 380       this.data.user_revision = this.get('mergeData').revision;
 381       for (var key in this.contentModels) {
 382         this.contentModels[key].set('revision', this.data.user_revision);
 383         this.contentModels[key].set('state', 'empty');
 384       }
 385       messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.get('mergeData').revision,
 386         'Uaktualnienie dokumentu do wersji ' + this.get('mergeData').revision);
 387     } else if (xhr.status == 202) { // Wygenerowano PullRequest
 388     } else if (xhr.status == 204) { // Nic nie zmieniono
 389     } else if (xhr.status == 409) { // Konflikt podczas operacji
 390     }
 391     this.set('state', 'synced');
 392     this.set('mergeData', null);
 393   },
 394
 395   // For debbuging
 396   set: function(property, value) {
 397     if (property == 'state') {
 398       console.log(this.description(), ':', property, '=', value);
 399     }
 400     return this._super(property, value);
 401   }
 402 });
 403
 404
 405 var leftPanelView, rightPanelContainer, doc;
 406
 407 $(function() {
 408   doc = new Editor.DocumentModel();
 409   var editor = new EditorView('#body-wrap', doc);
 410   editor.freeze();
 411   var flashView = new FlashView('#flashview', messageCenter);
 412   var splitView = new SplitView('#splitview', doc);
 413   leftPanelView = new PanelContainerView('#left-panel-container', doc);
 414   rightPanelContainer = new PanelContainerView('#right-panel-container', doc);
 415 });