X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/6362e543ec8e1a2661a58d440cb595b17ad4cca0..39d26aa0f2cb893f19282657b2fddd2a494f2263:/project/static/js/models.js diff --git a/project/static/js/models.js b/project/static/js/models.js index 9938eb07..6399c037 100644 --- a/project/static/js/models.js +++ b/project/static/js/models.js @@ -1,382 +1,604 @@ /*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/ -var documentsUrl = '/api/documents/'; - - Editor.Model = Editor.Object.extend({ - synced: false, - data: null + synced: false, + data: null }); - Editor.ToolbarButtonsModel = Editor.Model.extend({ - _className: 'Editor.ToolbarButtonsModel', - serverURL: '/api/toolbar/buttons', - buttons: {}, + className: 'Editor.ToolbarButtonsModel', + buttons: {}, - init: function() { - this._super(); - }, + init: function() { + this._super(); + }, - load: function() { - if (!this.get('buttons').length) { - $.ajax({ - url: this.serverURL, - dataType: 'json', - success: this.loadSucceeded.bind(this) - }); - } - }, + load: function() { + if (!this.get('buttons').length) { + $.ajax({ + url: documentInfo.toolbarURL, + dataType: 'json', + success: this.loadSucceeded.bind(this) + }); + } + }, - loadSucceeded: function(data) { - this.set('buttons', data); - } + loadSucceeded: function(data) + { + // do some escaping + $.each(data, function() { + $.each(this.buttons, function() { + //do some lame escapes + this.tooltip = this.tooltip.replace(/"/g, """); + }); + }); + this.set('buttons', data); + } }); // Stany modelu: // +// -> error -> loading +// / // empty -> loading -> synced -> unsynced -> loading // \ // -> dirty -> updating -> updated -> synced // Editor.XMLModel = Editor.Model.extend({ - _className: 'Editor.XMLModel', - serverURL: null, - data: '', - state: 'empty', + _className: 'Editor.XMLModel', + serverURL: null, + data: '', + state: 'empty', - init: function(serverURL, revision) { - this._super(); - this.set('state', 'empty'); - this.set('revision', revision); - this.serverURL = serverURL; - this.toolbarButtonsModel = new Editor.ToolbarButtonsModel(); - this.addObserver(this, 'data', this.dataChanged.bind(this)); - }, + init: function(document, serverURL) { + this._super(); + this.set('state', 'empty'); + this.set('revision', document.get('revision')); + this.document = document; + this.serverURL = serverURL; + this.toolbarButtonsModel = new Editor.ToolbarButtonsModel(); + this.addObserver(this, 'data', this.dataChanged.bind(this)); + }, - load: function() { - if (this.get('state') == 'empty') { - this.set('state', 'loading'); - $.ajax({ - url: this.serverURL, - dataType: 'text', - data: {revision: this.get('revision')}, - success: this.loadingSucceeded.bind(this) - }); - return true; - } - return false; - }, + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); + messageCenter.addMessage('info', 'xmlload', 'WczytujÄ XML...'); + $.ajax({ + url: this.serverURL, + dataType: 'text', + data: { + revision: this.get('revision'), + user: this.document.get('user') + }, + success: this.loadingSucceeded.bind(this), + error: this.loadingFailed.bind(this) + }); + return true; + } + return false; + }, - update: function(message) { - if (this.get('state') == 'dirty') { - this.set('state', 'updating'); + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + this.set('data', data); + this.set('state', 'synced'); + messageCenter.addMessage('success', 'xmlload', 'WczytaÅem XML :-)'); + }, + + loadingFailed: function() { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + var message = parseXHRError(response); + + this.set('error', '
'+message+'
'); + this.set('state', 'error'); + messageCenter.addMessage('error', 'xmlload', 'Nie udaÅo mi siÄ wczytaÄ XML. Spróbuj ponownie :-('); + }, + + save: function(message) { + if (this.get('state') == 'dirty') { + this.set('state', 'updating'); + messageCenter.addMessage('info', 'xmlsave', 'ZapisujÄ XML...'); - var payload = { - contents: this.get('data'), - revision: this.get('revision') - }; - if (message) { - payload.message = message; - } + var payload = { + contents: this.get('data'), + revision: this.get('revision'), + user: this.document.get('user') + }; + if (message) { + payload.message = message; + } - $.ajax({ - url: this.serverURL, - type: 'post', - dataType: 'json', - data: payload, - success: this.updatingSucceeded.bind(this), - error: this.updatingFailed.bind(this) - }); - return true; - } - return false; - }, + $.ajax({ + url: this.serverURL, + type: 'post', + dataType: 'json', + data: payload, + success: this.saveSucceeded.bind(this), + error: this.saveFailed.bind(this) + }); + return true; + } + return false; + }, - updatingSucceeded: function() { - if (this.get('state') != 'updating') { - alert('erroneous state:', this.get('state')); - } - this.set('state', 'updated'); - }, + saveSucceeded: function(data) { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + this.set('revision', data.revision); + this.set('state', 'updated'); + messageCenter.addMessage('success', 'xmlsave', 'ZapisaÅem XML :-)'); + }, - updatingFailed: function() { - if (this.get('state') != 'updating') { - alert('erroneous state:', this.get('state')); - } - this.set('state', 'dirty'); - }, + saveFailed: function() { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + messageCenter.addMessage('error', 'xmlsave', 'Nie udaÅo mi siÄ zapisaÄ XML. Spróbuj ponownie :-('); + this.set('state', 'dirty'); + }, - // For debbuging - set: function(property, value) { - if (property == 'state') { - console.log(this.description(), ':', property, '=', value); - } - return this._super(property, value); - }, + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); + }, - dataChanged: function(property, value) { - if (this.get('state') == 'synced') { - this.set('state', 'dirty'); - } - }, + dataChanged: function(property, value) { + if (this.get('state') == 'synced') { + this.set('state', 'dirty'); + } + }, - loadingSucceeded: function(data) { - if (this.get('state') != 'loading') { - alert('erroneous state:', this.get('state')); + dispose: function() { + this.removeObserver(this); + this._super(); } - this.set('data', data); - this.set('state', 'synced'); - }, - - dispose: function() { - this.removeObserver(this); - this._super(); - } }); Editor.HTMLModel = Editor.Model.extend({ - _className: 'Editor.HTMLModel', - serverURL: null, - data: '', - state: 'empty', + _className: 'Editor.HTMLModel', + dataURL: null, + htmlURL: null, + renderURL: null, + displaData: '', + xmlParts: {}, + state: 'empty', - init: function(serverURL, revision) { - this._super(); - this.set('state', 'empty'); - this.set('revision', revision); - this.serverURL = serverURL; - }, + init: function(document, dataURL, htmlURL) { + this._super(); + this.set('state', 'empty'); + this.set('revision', document.get('revision')); + + this.document = document; + this.htmlURL = htmlURL; + this.dataURL = dataURL; + this.renderURL = documentInfo.renderURL; + this.xmlParts = {}; + }, - load: function() { - if (this.get('state') == 'empty') { - this.set('state', 'loading'); - $.ajax({ - url: this.serverURL, - dataType: 'text', - data: {revision: this.get('revision')}, - success: this.loadingSucceeded.bind(this) - }); - } - }, + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); + + // load the transformed data + // messageCenter.addMessage('info', 'WczytujÄ HTML...'); + + $.ajax({ + url: this.htmlURL, + dataType: 'text', + data: { + revision: this.get('revision'), + user: this.document.get('user') + }, + success: this.loadingSucceeded.bind(this), + error: this.loadingFailed.bind(this) + }); + } + }, - loadingSucceeded: function(data) { - if (this.get('state') != 'loading') { - alert('erroneous state:', this.get('state')); - } - this.set('data', data); - this.set('state', 'synced'); - }, - - // For debbuging - set: function(property, value) { - if (property == 'state') { - console.log(this.description(), ':', property, '=', value); + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + this.set('data', data); + this.set('state', 'synced'); + }, + + loadingFailed: function(response) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + + var message = parseXHRError(response); + + this.set('error', 'Nie udaÅo siÄ wczytaÄ widoku HTML:
' + message); + this.set('state', 'error'); + }, + + getXMLPart: function(elem, callback) + { + var path = elem.attr('wl2o:path'); + if(!this.xmlParts[path]) + this.loadXMLPart(elem, callback); + else + callback(path, this.xmlParts[path]); + }, + + loadXMLPart: function(elem, callback) + { + var path = elem.attr('wl2o:path'); + var self = this; + + $.ajax({ + url: this.dataURL, + dataType: 'text', + data: { + revision: this.get('revision'), + user: this.document.get('user'), + part: path + }, + success: function(data) { + self.xmlParts[path] = data; + callback(path, data); + }, + // TODO: error handling + error: function(data) { + console.log('Failed to load fragment'); + callback(undefined, undefined); + } + }); + }, + + putXMLPart: function(elem, data) { + var self = this; + + var path = elem.attr('wl2o:path'); + this.xmlParts[path] = data; + + this.set('state', 'unsynced'); + + /* re-render the changed fragment */ + $.ajax({ + url: this.renderURL, + type: "POST", + dataType: 'text; charset=utf-8', + data: { + fragment: data, + part: path + }, + success: function(htmldata) { + elem.replaceWith(htmldata); + self.set('state', 'dirty'); + } + }); + }, + + save: function(message) { + if (this.get('state') == 'dirty') { + this.set('state', 'updating'); + + var payload = { + chunks: $.toJSON(this.xmlParts), + revision: this.get('revision'), + user: this.document.get('user') + }; + + if (message) { + payload.message = message; + } + + console.log(payload) + + $.ajax({ + url: this.dataURL, + type: 'post', + dataType: 'json', + data: payload, + success: this.saveSucceeded.bind(this), + error: this.saveFailed.bind(this) + }); + return true; + } + return false; + + }, + + saveSucceeded: function(data) { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + + // flush the cache + this.xmlParts = {}; + + this.set('revision', data.revision); + this.set('state', 'updated'); + }, + + saveFailed: function() { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + this.set('state', 'dirty'); + }, + + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } - return this._super(property, value); - } }); Editor.ImageGalleryModel = Editor.Model.extend({ - _className: 'Editor.ImageGalleryModel', - serverURL: null, - data: [], - state: 'empty', - - init: function(serverURL) { - this._super(); - this.set('state', 'empty'); - this.serverURL = serverURL; - // olewaÄ data - this.pages = []; - }, - - load: function() { - if (this.get('state') == 'empty') { - this.set('state', 'loading'); - $.ajax({ - url: this.serverURL, - dataType: 'json', - success: this.loadingSucceeded.bind(this) - }); - } - }, + _className: 'Editor.ImageGalleryModel', + serverURL: null, + data: [], + state: 'empty', - loadingSucceeded: function(data) { - if (this.get('state') != 'loading') { - alert('erroneous state:', this.get('state')); - } + init: function(serverURL) { + this._super(); + this.set('state', 'empty'); + this.serverURL = serverURL; + // olewaÄ data + this.pages = []; + }, + + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); + $.ajax({ + url: this.serverURL, + dataType: 'json', + success: this.loadingSucceeded.bind(this) + }); + } + }, + + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } - console.log('galleries:', data); + console.log('galleries:', data); - if (data.length === 0) { - this.set('data', []); - } else { - console.log('dupa'); - this.set('data', data[0].pages); - } + if (data.length === 0) { + this.set('data', []); + } else { + this.set('data', data[0].pages); + } - this.set('state', 'synced'); - }, + this.set('state', 'synced'); + }, - set: function(property, value) { - if (property == 'state') { - console.log(this.description(), ':', property, '=', value); + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } - return this._super(property, value); - } }); Editor.DocumentModel = Editor.Model.extend({ - _className: 'Editor.DocumentModel', - data: null, // name, text_url, user_revision, latest_shared_rev, parts_url, dc_url, size, merge_url - contentModels: {}, - state: 'empty', + _className: 'Editor.DocumentModel', + data: null, // name, text_url, user_revision, latest_shared_rev, parts_url, dc_url, size, merge_url + contentModels: {}, + state: 'empty', + errors: '', + revision: '', + user: '', - init: function() { - this._super(); - this.set('state', 'empty'); - this.load(); - }, + init: function() { + this._super(); + this.set('state', 'empty'); + }, - load: function() { - if (this.get('state') == 'empty') { - this.set('state', 'loading'); - $.ajax({ - cache: false, - url: documentsUrl + fileId, - dataType: 'json', - success: this.successfulLoad.bind(this) - }); - } - }, - - successfulLoad: function(data) { - this.set('data', data); - this.set('state', 'synced'); - this.contentModels = { - 'xml': new Editor.XMLModel(data.text_url, data.user_revision), - 'html': new Editor.HTMLModel(data.html_url, data.user_revision), - 'gallery': new Editor.ImageGalleryModel(data.gallery_url) - }; - for (var key in this.contentModels) { - this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this)); - } - }, + load: function() { + if (this.get('state') == 'empty') { + this.set('state', 'loading'); + messageCenter.addMessage('info', 'docload', 'ÅadujÄ dane dokumentu...'); + $.ajax({ + cache: false, + url: documentInfo.docURL, + dataType: 'json', + success: this.successfulLoad.bind(this), + error: this.failedLoad.bind(this) + }); + } + }, - contentModelStateChanged: function(property, value, contentModel) { - if (value == 'dirty') { - this.set('state', 'dirty'); - for (var key in this.contentModels) { - if (this.contentModels[key].guid() != contentModel.guid()) { - this.contentModels[key].set('state', 'unsynced'); + successfulLoad: function(data) { + this.set('data', data); + this.set('state', 'synced'); + + this.set('revision', data.user_revision); + this.set('user', data.user); + + this.contentModels = { + 'xml': new Editor.XMLModel(this, data.text_url), + 'html': new Editor.HTMLModel(this, data.text_url, data.html_url), + 'gallery': new Editor.ImageGalleryModel(this, data.gallery_url) + }; + + for (var key in this.contentModels) { + this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this)); } - } - } else if (value == 'updated') { - this.set('state', 'synced'); - for (key in this.contentModels) { - if (this.contentModels[key].guid() == contentModel.guid()) { - this.contentModels[key].set('state', 'synced'); - } else if (this.contentModels[key].get('state') == 'unsynced') { - this.contentModels[key].set('state', 'empty'); + + this.error = ''; + + messageCenter.addMessage('success', 'docload', 'Dokument zaÅadowany poprawnie :-)'); + }, + + failedLoad: function(response) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); } - } - } - }, + + var message = parseXHRError(response); + this.set('error', ''+message+"
"); + this.set('state', 'error'); + }, - saveDirtyContentModel: function(message) { - for (var key in this.contentModels) { - if (this.contentModels[key].get('state') == 'dirty') { - this.contentModels[key].update(message); - break; - } - } - }, + contentModelStateChanged: function(property, value, contentModel) { + if (value == 'dirty') { + this.set('state', 'dirty'); + for (var key in this.contentModels) { + if (this.contentModels[key].guid() != contentModel.guid()) { + this.contentModels[key].set('state', 'unsynced'); + } + } + } else if (value == 'updated') { + this.set('state', 'synced'); + for (key in this.contentModels) { + if (this.contentModels[key].guid() == contentModel.guid()) { + this.contentModels[key].set('state', 'synced'); + this.data.user_revision = this.contentModels[key].get('revision'); + } + } + for (key in this.contentModels) { + if (this.contentModels[key].guid() != contentModel.guid()) { + this.contentModels[key].set('revision', this.data.user_revision); + this.contentModels[key].set('state', 'empty'); + } + } + } + }, - update: function() { - this.set('state', 'loading'); - $.ajax({ - url: this.data.merge_url, - dataType: 'json', - type: 'post', - data: { - type: 'update', - target_revision: this.data.user_revision - }, - complete: this.updateCompleted.bind(this), - success: function(data) { this.set('updateData', data); }.bind(this) - }); - }, + saveDirtyContentModel: function(message) { + for (var key in this.contentModels) { + if (this.contentModels[key].get('state') == 'dirty') { + this.contentModels[key].save(message); + break; + } + } + }, - updateCompleted: function(xhr, textStatus) { - console.log(xhr.status, textStatus); - if (xhr.status == 200) { // Sukces - this.data.user_revision = this.get('updateData').revision; - for (var key in this.contentModels) { - this.contentModels[key].set('revision', this.data.user_revision); - this.contentModels[key].set('state', 'empty'); - } - } else if (xhr.status == 202) { // Wygenerowano PullRequest (tutaj?) - } else if (xhr.status == 204) { // Nic nie zmieniono - } else if (xhr.status == 409) { // Konflikt podczas operacji - } - this.set('state', 'synced'); - this.set('updateData', null); - }, + update: function() { + this.set('state', 'loading'); + messageCenter.addMessage('info', 'Uaktualniam dokument...'); + $.ajax({ + url: this.data.merge_url, + dataType: 'json', + type: 'post', + data: { + type: 'update', + revision: this.revision, + user: this.user + }, + complete: this.updateCompleted.bind(this), + success: function(data) { + this.set('updateData', data); + }.bind(this) + }); + }, - merge: function(message) { - this.set('state', 'loading'); - $.ajax({ - url: this.data.merge_url, - type: 'post', - dataType: 'json', - data: { - type: 'share', - target_revision: this.data.user_revision, - message: message - }, - complete: this.mergeCompleted.bind(this), - success: function(data) { this.set('mergeData', data); }.bind(this) - }); - }, + updateCompleted: function(xhr, textStatus) { + console.log(xhr.status, textStatus); + if (xhr.status == 200) { // Sukces + this.data = this.get('updateData'); + this.revision = this.data.user_revision; + this.user = this.data.user; + + messageCenter.addMessage('info', null, 'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision, + 'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision); + for (var key in this.contentModels) { + this.contentModels[key].set('revision', this.data.user_revision); + this.contentModels[key].set('state', 'empty'); + } + messageCenter.addMessage('success', null, 'UaktualniÅem dokument do najnowszej wersji :-)'); + } else if (xhr.status == 202) { // Wygenerowano PullRequest (tutaj?) + } else if (xhr.status == 204) { // Nic nie zmieniono + messageCenter.addMessage('info', null, 'Nic siÄ nie zmieniÅo od ostatniej aktualizacji. Po co mam uaktualniaÄ?'); + } else if (xhr.status == 409) { // Konflikt podczas operacji + messageCenter.addMessage('error', null, 'WystÄ piÅ konflikt podczas aktualizacji. PÄdź po programistów! :-('); + } else if (xhr.status == 500) { + messageCenter.addMessage('critical', null, 'BÅÄ d serwera. PÄdź po programistów! :-('); + } + this.set('state', 'synced'); + this.set('updateData', null); + }, - mergeCompleted: function(xhr, textStatus) { - console.log(xhr.status, textStatus); - if (xhr.status == 200) { // Sukces - this.data.user_revision = this.get('mergeData').revision; - for (var key in this.contentModels) { - this.contentModels[key].set('revision', this.data.user_revision); - this.contentModels[key].set('state', 'empty'); - } - } else if (xhr.status == 202) { // Wygenerowano PullRequest - } else if (xhr.status == 204) { // Nic nie zmieniono - } else if (xhr.status == 409) { // Konflikt podczas operacji - } - this.set('state', 'synced'); - this.set('mergeData', null); - }, + merge: function(message) { + this.set('state', 'loading'); + messageCenter.addMessage('info', null, 'Scalam dokument z gÅównym repozytorium...'); + $.ajax({ + url: this.data.merge_url, + type: 'post', + dataType: 'json', + data: { + type: 'share', + revision: this.revision, + user: this.user, + message: message + }, + complete: this.mergeCompleted.bind(this), + success: function(data) { + this.set('mergeData', data); + }.bind(this) + }); + }, + + mergeCompleted: function(xhr, textStatus) { + console.log(xhr.status, textStatus); + if (xhr.status == 200) { // Sukces + this.data = this.get('updateData'); + this.revision = this.data.user_revision; + this.user = this.data.user; + + for (var key in this.contentModels) { + this.contentModels[key].set('revision', this.revision); + this.contentModels[key].set('state', 'empty'); + } + + messageCenter.addMessage('success', null, 'ScaliÅem dokument z gÅównym repozytorium :-)'); + } else if (xhr.status == 202) { // Wygenerowano PullRequest + messageCenter.addMessage('success', null, 'WysÅaÅem proÅbÄ o scalenie dokumentu z gÅównym repozytorium.'); + } else if (xhr.status == 204) { // Nic nie zmieniono + messageCenter.addMessage('info', null, 'Nic siÄ nie zmieniÅo od ostatniego scalenia. Po co mam scalaÄ?'); + } else if (xhr.status == 409) { // Konflikt podczas operacji + messageCenter.addMessage('error', null, 'WystÄ piÅ konflikt podczas scalania. PÄdź po programistów! :-('); + } else if (xhr.status == 500) { + messageCenter.addMessage('critical', null, 'BÅÄ d serwera. PÄdź po programistów! :-('); + } + this.set('state', 'synced'); + this.set('mergeData', null); + }, - // For debbuging - set: function(property, value) { - if (property == 'state') { - console.log(this.description(), ':', property, '=', value); + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } - return this._super(property, value); - } }); var leftPanelView, rightPanelContainer, doc; -$(function() { - doc = new Editor.DocumentModel(); - var editor = new EditorView('#body-wrap', doc); - editor.freeze(); - var flashView = new FlashView('#flashview', messageCenter); - var splitView = new SplitView('#splitview', doc); - leftPanelView = new PanelContainerView('#left-panel-container', doc); - rightPanelContainer = new PanelContainerView('#right-panel-container', doc); +$(function() +{ + var flashView = new FlashView('#flashview', messageCenter); + + doc = new Editor.DocumentModel(); + + EditorView = new EditorView('#body-wrap', doc); + EditorView.freeze("