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.DocumentModel = Editor.Model.extend({
 178   _className: 'Editor.DocumentModel',
 179   data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size
 180   contentModels: {},
 181   state: 'empty',
 182
 183   init: function() {
 184     this._super();
 185     this.set('state', 'empty');
 186     this.load();
 187   },
 188
 189   load: function() {
 190     if (this.get('state') == 'empty') {
 191       this.set('state', 'loading');
 192       $.ajax({
 193         cache: false,
 194         url: documentsUrl + fileId,
 195         dataType: 'json',
 196         success: this.successfulLoad.bind(this)
 197       });
 198     }
 199   },
 200
 201   successfulLoad: function(data) {
 202     this.set('data', data);
 203     this.set('state', 'synced');
 204     this.contentModels = {
 205       'xml': new Editor.XMLModel(data.text_url),
 206       'html': new Editor.HTMLModel(data.html_url)
 207     };
 208     for (var key in this.contentModels) {
 209       this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this));
 210     }
 211   },
 212
 213   contentModelStateChanged: function(property, value, contentModel) {
 214     if (value == 'dirty') {
 215       this.set('state', 'dirty');
 216       for (var key in this.contentModels) {
 217         if (this.contentModels[key].guid() != contentModel.guid()) {
 218           this.contentModels[key].set('state', 'unsynced');
 219         }
 220       }
 221     } else if (value == 'updated') {
 222       this.set('state', 'synced');
 223       for (key in this.contentModels) {
 224         if (this.contentModels[key].guid() == contentModel.guid()) {
 225           this.contentModels[key].set('state', 'synced');
 226         } else if (this.contentModels[key].get('state') == 'unsynced') {
 227           this.contentModels[key].set('state', 'empty');
 228         }
 229       }
 230     }
 231   },
 232
 233   updateDirtyContentModel: function(message) {
 234     for (var key in this.contentModels) {
 235       if (this.contentModels[key].get('state') == 'dirty') {
 236         this.contentModels[key].update(message);
 237         break;
 238       }
 239     }
 240   },
 241
 242   // For debbuging
 243   set: function(property, value) {
 244     if (property == 'state') {
 245       console.log(this.description(), ':', property, '=', value);
 246     }
 247     return this._super(property, value);
 248   }
 249 });
 250
 251
 252 var leftPanelView, rightPanelContainer, doc;
 253
 254 $(function() {
 255   doc = new Editor.DocumentModel();
 256   var editor = new EditorView('#body-wrap', doc);
 257   editor.freeze();
 258   var splitView = new SplitView('#splitview', doc);
 259   leftPanelView = new PanelContainerView('#left-panel-container', doc);
 260   rightPanelContainer = new PanelContainerView('#right-panel-container', doc);
 261 });