project/static/js/models.js

   1 /*globals Editor fileId SplitView PanelContainerView EditorView*/
   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 // empty -> loading -> synced -> unsynced -> loading
  39 //                           \
  40 //                            -> dirty -> updating -> updated -> synced
  41 //
  42 Editor.XMLModel = Editor.Model.extend({
  43   _className: 'Editor.XMLModel',
  44   serverURL: null,
  45   data: '',
  46   state: 'empty',
  47
  48   init: function(serverURL) {
  49     this._super();
  50     this.set('state', 'empty');
  51     this.serverURL = serverURL;
  52     this.toolbarButtonsModel = new Editor.ToolbarButtonsModel();
  53     this.addObserver(this, 'data', this.dataChanged.bind(this));
  54   },
  55
  56   load: function() {
  57     if (this.get('state') == 'empty') {
  58       this.set('state', 'loading');
  59       $.ajax({
  60         url: this.serverURL,
  61         dataType: 'text',
  62         success: this.loadingSucceeded.bind(this)
  63       });
  64       return true;
  65     }
  66     return false;
  67   },
  68
  69   update: function(message) {
  70     if (this.get('state') == 'dirty') {
  71       this.set('state', 'updating');
  72
  73       var payload = {
  74         contents: this.get('data')
  75       };
  76       if (message) {
  77         payload.message = message;
  78       }
  79
  80       $.ajax({
  81         url: this.serverURL,
  82         type: 'put',
  83         dataType: 'json',
  84         data: payload,
  85         success: this.updatingSucceeded.bind(this),
  86         error: this.updatingFailed.bind(this)
  87       });
  88       return true;
  89     }
  90     return false;
  91   },
  92
  93   updatingSucceeded: function() {
  94     if (this.get('state') != 'updating') {
  95       alert('erroneous state:', this.get('state'));
  96     }
  97     this.set('state', 'updated');
  98   },
  99
 100   updatingFailed: function() {
 101     if (this.get('state') != 'updating') {
 102       alert('erroneous state:', this.get('state'));
 103     }
 104     this.set('state', 'dirty');
 105   },
 106
 107   // For debbuging
 108   set: function(property, value) {
 109     if (property == 'state') {
 110       console.log(this.description(), ':', property, '=', value);
 111     }
 112     return this._super(property, value);
 113   },
 114
 115   dataChanged: function(property, value) {
 116     if (this.get('state') == 'synced') {
 117       this.set('state', 'dirty');
 118     }
 119   },
 120
 121   loadingSucceeded: function(data) {
 122     if (this.get('state') != 'loading') {
 123       alert('erroneous state:', this.get('state'));
 124     }
 125     this.set('data', data);
 126     this.set('state', 'synced');
 127   },
 128
 129   dispose: function() {
 130     this.removeObserver(this);
 131     this._super();
 132   }
 133 });
 134
 135
 136 Editor.HTMLModel = Editor.Model.extend({
 137   _className: 'Editor.HTMLModel',
 138   serverURL: null,
 139   data: '',
 140   state: 'empty',
 141
 142   init: function(serverURL) {
 143     this._super();
 144     this.set('state', 'empty');
 145     this.serverURL = serverURL;
 146   },
 147
 148   load: function() {
 149     if (this.get('state') == 'empty') {
 150       this.set('state', 'loading');
 151       $.ajax({
 152         url: this.serverURL,
 153         dataType: 'text',
 154         success: this.loadingSucceeded.bind(this)
 155       });
 156     }
 157   },
 158
 159   loadingSucceeded: function(data) {
 160     if (this.get('state') != 'loading') {
 161       alert('erroneous state:', this.get('state'));
 162     }
 163     this.set('data', data);
 164     this.set('state', 'synced');
 165   },
 166
 167   // For debbuging
 168   set: function(property, value) {
 169     if (property == 'state') {
 170       console.log(this.description(), ':', property, '=', value);
 171     }
 172     return this._super(property, value);
 173   }
 174 });
 175
 176
 177 Editor.ImageGalleryModel = Editor.Model.extend({
 178   _className: 'Editor.ImageGalleryModel',
 179   serverURL: null,
 180   state: 'empty',
 181
 182   init: function(serverURL) {
 183     this._super();
 184     this.set('state', 'empty');
 185     this.serverURL = serverURL;
 186     // olewać data
 187     this.pages = []
 188   },
 189
 190   load: function() {
 191     if (this.get('state') == 'empty') {
 192       this.set('state', 'loading');
 193       $.ajax({
 194         url: this.serverURL,
 195         dataType: 'json',
 196         success: this.loadingSucceeded.bind(this)
 197       });
 198     }
 199   },
 200
 201   loadingSucceeded: function(data) {
 202     if (this.get('state') != 'loading') {
 203       alert('erroneous state:', this.get('state'));
 204     }
 205
 206     this.set('pages', data.pages)
 207     this.set('state', 'synced');
 208   },
 209
 210   set: function(property, value) {
 211     if (property == 'state') {
 212       console.log(this.description(), ':', property, '=', value);
 213     }
 214     return this._super(property, value);
 215   }
 216 });
 217
 218
 219 Editor.DocumentModel = Editor.Model.extend({
 220   _className: 'Editor.DocumentModel',
 221   data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size
 222   contentModels: {},
 223   state: 'empty',
 224
 225   init: function() {
 226     this._super();
 227     this.set('state', 'empty');
 228     this.load();
 229   },
 230
 231   load: function() {
 232     if (this.get('state') == 'empty') {
 233       this.set('state', 'loading');
 234       $.ajax({
 235         cache: false,
 236         url: documentsUrl + fileId,
 237         dataType: 'json',
 238         success: this.successfulLoad.bind(this)
 239       });
 240     }
 241   },
 242
 243   successfulLoad: function(data) {
 244     this.set('data', data);
 245     this.set('state', 'synced');
 246     this.contentModels = {
 247       'xml': new Editor.XMLModel(data.text_url),
 248       'html': new Editor.HTMLModel(data.html_url),
 249       'gallery': new Editor.ImageGalleryModel(data.gallery_url)
 250     };
 251     for (var key in this.contentModels) {
 252       this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this));
 253     }
 254   },
 255
 256   contentModelStateChanged: function(property, value, contentModel) {
 257     if (value == 'dirty') {
 258       this.set('state', 'dirty');
 259       for (var key in this.contentModels) {
 260         if (this.contentModels[key].guid() != contentModel.guid()) {
 261           this.contentModels[key].set('state', 'unsynced');
 262         }
 263       }
 264     } else if (value == 'updated') {
 265       this.set('state', 'synced');
 266       for (key in this.contentModels) {
 267         if (this.contentModels[key].guid() == contentModel.guid()) {
 268           this.contentModels[key].set('state', 'synced');
 269         } else if (this.contentModels[key].get('state') == 'unsynced') {
 270           this.contentModels[key].set('state', 'empty');
 271         }
 272       }
 273     }
 274   },
 275
 276   saveDirtyContentModel: function(message) {
 277     for (var key in this.contentModels) {
 278       if (this.contentModels[key].get('state') == 'dirty') {
 279         this.contentModels[key].update(message);
 280         break;
 281       }
 282     }
 283   },
 284
 285   update: function() {
 286
 287   },
 288
 289   merge: function() {
 290
 291   },
 292
 293   // For debbuging
 294   set: function(property, value) {
 295     if (property == 'state') {
 296       console.log(this.description(), ':', property, '=', value);
 297     }
 298     return this._super(property, value);
 299   }
 300 });
 301
 302
 303 var leftPanelView, rightPanelContainer, doc;
 304
 305 $(function() {
 306   doc = new Editor.DocumentModel();
 307   var editor = new EditorView('#body-wrap', doc);
 308   editor.freeze();
 309   var splitView = new SplitView('#splitview', doc);
 310   leftPanelView = new PanelContainerView('#left-panel-container', doc);
 311   rightPanelContainer = new PanelContainerView('#right-panel-container', doc);
 312 });