ba2f3ce321755498a1ddc843dac9d0a83f1afb87
[redakcja.git] / platforma / static / js / models.js
1 /*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/
2 Editor.Model = Editor.Object.extend({
3     synced: false,
4     data: null
5 });
6
7 Editor.ToolbarButtonsModel = Editor.Model.extend({
8     className: 'Editor.ToolbarButtonsModel',
9     buttons: {},
10   
11     init: function() {
12         this._super();
13     },
14   
15     load: function() {
16         if (!this.get('buttons').length) {
17             $.ajax({
18                 url: documentInfo.toolbarURL,
19                 dataType: 'json',
20                 success: this.loadSucceeded.bind(this)
21             });
22         }
23     },
24   
25     loadSucceeded: function(data)
26     {
27         // do some escaping
28         $.each(data, function() {
29             $.each(this.buttons, function() {
30                 //do some lame escapes
31                 this.tooltip = this.tooltip.replace(/"/g, """);
32             });
33         });
34         this.set('buttons', data);
35     }
36 });
37
38
39 // Stany modelu:
40 //
41 //                  -> error -> loading
42 //                 /
43 // empty -> loading -> synced -> unsynced -> loading
44 //                           \
45 //                            -> dirty -> updating -> updated -> synced
46 //
47 Editor.XMLModel = Editor.Model.extend({
48     _className: 'Editor.XMLModel',
49     serverURL: null,
50     data: '',
51     state: 'empty',
52   
53     init: function(document, serverURL) {
54         this._super();
55         this.set('state', 'empty');
56         this.set('revision', document.get('revision'));
57         this.document = document;
58         this.serverURL = serverURL;
59         this.toolbarButtonsModel = new Editor.ToolbarButtonsModel();
60         this.addObserver(this, 'data', this.dataChanged.bind(this));
61     },
62   
63     load: function(force) {
64         if (force || this.get('state') == 'empty') {
65             this.set('state', 'loading');
66             messageCenter.addMessage('info', 'xmlload', 'Wczytuję XML...');
67             $.ajax({
68                 url: this.serverURL,
69                 dataType: 'text',
70                 data: {
71                     revision: this.get('revision'),
72                     user: this.document.get('user')
73                     },
74                 success: this.loadingSucceeded.bind(this),
75                 error: this.loadingFailed.bind(this)
76             });
77             return true;
78         }
79         return false;
80     },
81   
82     loadingSucceeded: function(data) {
83         if (this.get('state') != 'loading') {
84             alert('erroneous state:', this.get('state'));
85         }
86         this.set('data', data);
87         this.set('state', 'synced');
88         messageCenter.addMessage('success', 'xmlload', 'Wczytałem XML :-)');
89     },
90   
91     loadingFailed: function(response)
92     {
93         if (this.get('state') != 'loading') {
94             alert('erroneous state:', this.get('state'));
95         }
96         
97         var message = parseXHRError(response);
98         
99         this.set('error', '<h2>Błąd przy ładowaniu XML</h2><p>'+message+'</p>');
100         this.set('state', 'error');
101         messageCenter.addMessage('error', 'xmlload', 'Nie udało mi się wczytać XML. Spróbuj ponownie :-(');
102     },
103   
104     save: function(message) {
105         if (this.get('state') == 'dirty') {
106             this.set('state', 'updating');
107             messageCenter.addMessage('info', 'xmlsave', 'Zapisuję XML...');
108       
109             var payload = {
110                 contents: this.get('data'),
111                 revision: this.get('revision'),
112                 user: this.document.get('user')
113             };
114             if (message) {
115                 payload.message = message;
116             }
117       
118             $.ajax({
119                 url: this.serverURL,
120                 type: 'post',
121                 dataType: 'json',
122                 data: payload,
123                 success: this.saveSucceeded.bind(this),
124                 error: this.saveFailed.bind(this)
125             });
126             return true;
127         }
128         return false;
129     },
130   
131     saveSucceeded: function(data) {
132         if (this.get('state') != 'updating') {
133             alert('erroneous state:', this.get('state'));
134         }
135         this.set('revision', data.revision);
136         this.set('state', 'updated');
137         messageCenter.addMessage('success', 'xmlsave', 'Zapisałem XML :-)');
138     },
139   
140     saveFailed: function() {
141         if (this.get('state') != 'updating') {
142             alert('erroneous state:', this.get('state'));
143         }
144         messageCenter.addMessage('error', 'xmlsave', 'Nie udało mi się zapisać XML. Spróbuj ponownie :-(');
145         this.set('state', 'dirty');
146     },
147   
148     // For debbuging
149     set: function(property, value) {
150         if (property == 'state') {
151             console.log(this.description(), ':', property, '=', value);
152         }
153         return this._super(property, value);
154     },
155   
156     dataChanged: function(property, value) {
157         if (this.get('state') == 'synced') {
158             this.set('state', 'dirty');
159         }
160     },
161   
162     dispose: function() {
163         this.removeObserver(this);
164         this._super();
165     }
166 });
167
168
169 Editor.HTMLModel = Editor.Model.extend({
170     _className: 'Editor.HTMLModel',
171     dataURL: null,
172     htmlURL: null,
173     renderURL: null,
174     displaData: '',
175     xmlParts: {},
176     state: 'empty',
177   
178     init: function(document, dataURL, htmlURL) {
179         this._super();
180         this.set('state', 'empty');
181         this.set('revision', document.get('revision'));        
182         
183         this.document = document;
184         this.htmlURL = htmlURL;
185         this.dataURL = dataURL;
186         this.renderURL = documentInfo.renderURL;
187         this.xmlParts = {};
188     },
189   
190     load: function(force) {
191         if (force || this.get('state') == 'empty') {
192             this.set('state', 'loading');
193
194             // load the transformed data
195             // messageCenter.addMessage('info', 'Wczytuję HTML...');
196
197             $.ajax({
198                 url: this.htmlURL,
199                 dataType: 'text',
200                 data: {
201                     revision: this.get('revision'),
202                     user: this.document.get('user')
203                     },
204                 success: this.loadingSucceeded.bind(this),
205                 error: this.loadingFailed.bind(this)
206             });
207         }
208     },    
209   
210     loadingSucceeded: function(data) {
211         if (this.get('state') != 'loading') {
212             alert('erroneous state:', this.get('state'));
213         }
214         this.set('data', data);
215         this.set('state', 'synced');
216     },
217   
218     loadingFailed: function(response) {
219         if (this.get('state') != 'loading') {
220             alert('erroneous state:', this.get('state'));
221         }
222         
223         var err = parseXHRError(response);
224         
225         this.set('error', '<p>Nie udało się wczytać widoku HTML: </p>' + err.error_message);
226         this.set('state', 'error');        
227     },
228
229     getXMLPart: function(elem, callback)
230     {
231         var path = elem.attr('x-pointer');
232         if(!this.xmlParts[path])
233             this.loadXMLPart(elem, callback);
234         else
235             callback(path, this.xmlParts[path]);
236     },
237
238     loadXMLPart: function(elem, callback)
239     {
240         var path = elem.attr('x-pointer');
241         var self = this;
242
243         $.ajax({
244             url: this.dataURL,
245             dataType: 'text',
246             data: {
247                 revision: this.get('revision'),
248                 user: this.document.get('user'),
249                 chunk: path
250                 // format: 'nl'
251             },
252             success: function(data) {
253                 self.xmlParts[path] = data;
254                 console.log(data);
255                 callback(path, data);
256             },
257             // TODO: error handling
258             error: function(data) {
259                 console.log('Failed to load fragment');
260                 callback(undefined, undefined);
261             }
262         });
263     },
264
265     putXMLPart: function(elem, data, callback) {
266         var self = this;
267       
268         var path = elem.attr('x-pointer');
269         this.xmlParts[path] = data;
270
271         this.set('state', 'dirty');
272
273         /* re-render the changed fragment */
274         $.ajax({
275             url: this.renderURL,
276             type: "POST",
277             dataType: 'text; charset=utf-8',
278             data: {
279                 fragment: data,
280                 chunk: path
281                 // format: 'nl'
282             },
283             success: function(htmldata) {
284                 callback(elem, htmldata);
285                 self.set('state', 'dirty');
286             }
287         });
288     },
289
290     save: function(message) {
291         if (this.get('state') == 'dirty') {
292             this.set('state', 'updating');
293
294             var payload = {
295                 chunks: $.toJSON(this.xmlParts),
296                 revision: this.get('revision'),
297                 user: this.document.get('user')
298             };
299
300             if (message) {
301                 payload.message = message;
302             }
303
304             console.log(payload)
305
306             $.ajax({
307                 url: this.dataURL,
308                 type: 'post',
309                 dataType: 'json',
310                 data: payload,
311                 success: this.saveSucceeded.bind(this),
312                 error: this.saveFailed.bind(this)
313             });
314             return true;
315         }
316         return false;
317       
318     },
319
320     saveSucceeded: function(data) {
321         if (this.get('state') != 'updating') {
322             alert('erroneous state:', this.get('state'));
323         }
324
325         // flush the cache
326         this.xmlParts = {};
327     
328         this.set('revision', data.revision);
329         this.set('state', 'updated');
330     },
331
332     saveFailed: function() {
333         if (this.get('state') != 'updating') {
334             alert('erroneous state:', this.get('state'));
335         }        
336         this.set('state', 'dirty');
337     },
338
339     // For debbuging
340     set: function(property, value) {
341         if (property == 'state') {
342             console.log(this.description(), ':', property, '=', value);
343         }
344         return this._super(property, value);
345     }
346 });
347
348
349 Editor.ImageGalleryModel = Editor.Model.extend({
350     _className: 'Editor.ImageGalleryModel',
351     serverURL: null,
352     data: [],
353     state: 'empty',
354
355     init: function(document, serverURL) {
356         this._super();
357         this.set('state', 'empty');
358         this.serverURL = serverURL;
359         // olewać data
360         this.pages = [];
361     },
362
363     load: function(force) {
364         if (force || this.get('state') == 'empty') {
365             console.log("setting state");
366             this.set('state', 'loading');
367             console.log("going ajax");
368             $.ajax({
369                 url: this.serverURL,
370                 dataType: 'json',
371                 success: this.loadingSucceeded.bind(this),
372                 error: this.loadingFailed.bind(this)
373             });
374         }
375     },
376
377     loadingSucceeded: function(data) 
378     {
379         console.log("success");        
380         
381         if (this.get('state') != 'loading') {
382             alert('erroneous state:', this.get('state'));
383         }
384
385         console.log('galleries:', data);
386
387         if (data.length === 0) {
388             this.set('data', []);
389         } else {            
390             this.set('data', data[0].pages);
391         }
392
393         this.set('state', 'synced');
394     },
395
396     loadingFailed: function(data) {
397         console.log("failed");
398
399         if (this.get('state') != 'loading') {
400             alert('erroneous state:', this.get('state'));
401         }       
402
403         this.set('state', 'error');
404     },
405
406     set: function(property, value) {
407         if (property == 'state') {
408             console.log(this.description(), ':', property, '=', value);
409         }
410         return this._super(property, value);
411     }
412 });
413
414
415 Editor.DocumentModel = Editor.Model.extend({
416     _className: 'Editor.DocumentModel',
417     data: null, // name, text_url, revision, latest_shared_rev, parts_url, dc_url, size, merge_url
418     contentModels: {},
419     state: 'empty',
420     errors: '',
421     revision: '',
422     user: '',
423   
424     init: function() {
425         this._super();
426         this.set('state', 'empty');        
427     },
428   
429     load: function() {
430         if (this.get('state') == 'empty') {
431             this.set('state', 'loading');
432             messageCenter.addMessage('info', 'docload', 'Ładuję dane dokumentu...');
433             $.ajax({
434                 cache: false,
435                 url: documentInfo.docURL,
436                 dataType: 'json',
437                 success: this.successfulLoad.bind(this),
438                 error: this.failedLoad.bind(this)
439             });
440         }
441     },
442   
443     successfulLoad: function(data) {
444         this.set('data', data);
445         this.set('state', 'synced');
446
447         this.set('revision', data.revision);
448         this.set('user', data.user);
449
450         this.contentModels = {
451             'xml': new Editor.XMLModel(this, data.text_url),
452             'html': new Editor.HTMLModel(this, data.text_url, data.html_url),
453             'gallery': new Editor.ImageGalleryModel(this, data.gallery_url)
454         };        
455
456         for (var key in this.contentModels) {
457             this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this));
458         }
459
460         this.error = '';
461
462         messageCenter.addMessage('success', 'docload', 'Dokument załadowany poprawnie :-)');
463     },
464
465     failedLoad: function(response) {
466         if (this.get('state') != 'loading') {
467             alert('erroneous state:', this.get('state'));
468         }
469         
470         var err = parseXHRError(response);
471         this.set('error', '<h2>Nie udało się wczytać dokumentu</h2><p>'+err.error_message+"</p>");
472         this.set('state', 'error');
473     },
474   
475     contentModelStateChanged: function(property, value, contentModel) {
476         if (value == 'dirty') {
477             this.set('state', 'dirty');
478             for (var key in this.contentModels) {
479                 if (this.contentModels[key].guid() != contentModel.guid()) {
480                     this.contentModels[key].set('state', 'unsynced');
481                 }
482             }
483         } else if (value == 'updated') {
484             this.set('state', 'synced');
485             for (key in this.contentModels) {
486                 if (this.contentModels[key].guid() == contentModel.guid()) {
487                     this.contentModels[key].set('state', 'synced');
488                     this.revision = this.contentModels[key].get('revision');
489
490                 }
491             }
492             for (key in this.contentModels) {
493                 if (this.contentModels[key].guid() != contentModel.guid()) {
494                     this.contentModels[key].set('revision', this.revision);
495                     this.contentModels[key].set('state', 'empty');
496                 }
497             }
498         }
499     },
500   
501     saveDirtyContentModel: function(message) {
502         for (var key in this.contentModels) {
503             if (this.contentModels[key].get('state') == 'dirty') {
504                 this.contentModels[key].save(message);
505                 break;
506             }
507         }
508     },
509   
510     update: function() {
511         this.set('state', 'loading');
512
513         messageCenter.addMessage('info', 'doc_update',
514             'Uaktualniam dokument...');
515             
516         $.ajax({
517             url: this.data.merge_url,
518             dataType: 'json',
519             type: 'post',
520             data: {
521                 type: 'update',
522                 revision: this.get('revision'),
523                 user: this.get('user')
524             },
525             complete: this.updateCompleted.bind(this),            
526         });
527     },
528   
529     updateCompleted: function(xhr, textStatus)
530     {
531         console.log(xhr.status, xhr.responseText);
532         var response = parseXHRResponse(xhr);
533         if(response.success)
534         {
535             if( (response.data.result == 'no-op')
536              || (response.data.timestamp == response.data.parent_timestamp))
537             {
538                 if( (response.data.revision) && (response.data.revision != this.get('revision')) )
539                 {
540                     // we're out of sync
541                     this.set('state', 'unsynced');
542                     return;
543                 }
544                 
545                 messageCenter.addMessage('info', 'doc_update',
546                     'Już posiadasz najbardziej aktualną wersję.');
547                     this.set('state', 'synced');
548                 return;
549             }
550
551             // result: success
552             this.set('revision', response.data.revision);
553             this.set('user', response.data.user);
554
555             messageCenter.addMessage('info', 'doc_update',
556                 'Uaktualnienie dokumentu do wersji ' + response.data.revision);
557
558             for (var key in this.contentModels) {
559                 this.contentModels[key].set('revision', this.get('revision') );
560                 this.contentModels[key].set('state', 'empty');
561             }
562
563             this.set('state', 'synced');
564             return;
565         }
566
567         // no success means trouble
568         messageCenter.addMessage(response.error_level, 'doc_update', 
569             response.error_message);       
570         
571         this.set('state', 'unsynced');
572     },
573   
574     merge: function(message) {
575         this.set('state', 'loading');
576         messageCenter.addMessage('info', 'doc_merge',
577             'Scalam dokument z głównym repozytorium...');
578             
579         $.ajax({
580             url: this.data.merge_url,
581             type: 'post',
582             dataType: 'json',
583             data: {
584                 type: 'share',
585                 revision: this.get('revision'),
586                 user: this.get('user'),
587                 message: message
588             },
589             complete: this.mergeCompleted.bind(this),
590             success: function(data) {
591                 this.set('mergeData', data);
592             }.bind(this)
593         });
594     },
595   
596     mergeCompleted: function(xhr, textStatus) {
597         console.log(xhr.status, xhr.responseText);
598         var response = parseXHRResponse(xhr);
599         
600         if(response.success) {
601         
602             if( (response.data.result == 'no-op') ||             
603              ( response.data.shared_parent_timestamp
604                && response.data.shared_timestamp
605                && (response.data.shared_timestamp == response.data.shared_parent_timestamp)) )
606             {
607                 if( (response.data.revision) && (response.data.revision != this.get('revision')) )
608                 {
609                     // we're out of sync
610                     this.set('state', 'unsynced');
611                     return;
612                 }
613
614                 messageCenter.addMessage('info', 'doc_merge',
615                     'Twoja aktualna wersja nie różni się od ostatnio zatwierdzonej.');
616                 this.set('state', 'synced');
617                 return;
618             }
619
620             if( response.data.result == 'accepted')
621             {
622                 messageCenter.addMessage('info', 'doc_merge',
623                     'Prośba o zatwierdzenie została przyjęta i oczekuję na przyjęcie.');
624                 this.set('state', 'synced');
625                 return;
626             }
627
628             // result: success
629             this.set('revision', response.data.revision);
630             this.set('user', response.data.user);
631
632             messageCenter.addMessage('info', 'doc_merge',
633                 'Twoja wersja dokumentu została zatwierdzona.');
634             
635             this.set('state', 'synced');
636             return;
637         }
638
639         // no success means trouble
640         messageCenter.addMessage(response.error_level, 'doc_merge',
641             response.error_message);
642
643         this.set('state', 'unsynced');
644     },
645   
646     // For debbuging
647     set: function(property, value) {
648         if (property == 'state') {
649             console.log(this.description(), ':', property, '=', value);
650         }
651         return this._super(property, value);
652     }
653 });
654
655
656 var leftPanelView, rightPanelContainer, doc;
657
658 $(function()
659 {
660     var flashView = new FlashView('#flashview', messageCenter);
661     
662     doc = new Editor.DocumentModel();
663
664     EditorView = new EditorView('#body-wrap', doc);
665     EditorView.freeze("<h1>Wczytuję dokument...</h1>");
666
667     leftPanelView = new PanelContainerView('#left-panel-container', doc);
668     rightPanelContainer = new PanelContainerView('#right-panel-container', doc);
669
670     
671 });