From: zuber Date: Mon, 28 Sep 2009 11:39:20 +0000 (+0200) Subject: Dodanie stanów do modeli X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/ad481d9335cb91f56adfffda3999284f37d37942?ds=sidebyside Dodanie stanów do modeli --- diff --git a/project/static/css/master.css b/project/static/css/master.css index dbf5c77f..8bccbcc7 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -381,6 +381,10 @@ text#commit-dialog-message { overflow: none; } +.panel-container select { + z-index: 1100; +} + .xmlview { height: 100%; } diff --git a/project/static/js/app.js b/project/static/js/app.js index 15ee0c0f..e8875c93 100644 --- a/project/static/js/app.js +++ b/project/static/js/app.js @@ -110,7 +110,6 @@ Editor.Object = Class.extend({ init: function() { this._observers = {}; - console.log('Created', this.guid()); }, description: function() { @@ -118,7 +117,7 @@ Editor.Object = Class.extend({ }, addObserver: function(observer, property, callback) { - console.log('Add observer', observer.description(), 'to', this.description(), '[', property, ']'); + // console.log('Add observer', observer.description(), 'to', this.description(), '[', property, ']'); if (!this._observers[property]) { this._observers[property] = {} } @@ -132,7 +131,7 @@ Editor.Object = Class.extend({ this.removeObserver(observer, property) } } else { - console.log('Remove observer', observer.description(), 'from', this.description(), '[', property, ']'); + // console.log('Remove observer', observer.description(), 'from', this.description(), '[', property, ']'); delete this._observers[property][observer.guid()]; } return this; @@ -141,8 +140,8 @@ Editor.Object = Class.extend({ notifyObservers: function(property) { var currentValue = this[property]; for (var guid in this._observers[property]) { - console.log(this._observers[property][guid]); - console.log('Notifying', guid, 'of', this.description(), '[', property, ']'); + // console.log(this._observers[property][guid]); + // console.log('Notifying', guid, 'of', this.description(), '[', property, ']'); this._observers[property][guid](property, currentValue, this); } return this; diff --git a/project/static/js/models.js b/project/static/js/models.js index b2c7440c..4b29e67a 100644 --- a/project/static/js/models.js +++ b/project/static/js/models.js @@ -1,4 +1,4 @@ -/*globals Editor fileId SplitView PanelContainerView*/ +/*globals Editor fileId SplitView PanelContainerView EditorView*/ var documentsUrl = '/api/documents/'; @@ -33,37 +33,61 @@ Editor.ToolbarButtonsModel = Editor.Model.extend({ }); +// Stany modelu: +// +// empty -> loading -> synced -> unsynced -> loading +// \ +// -> dirty -> updating -> synced +// Editor.XMLModel = Editor.Model.extend({ _className: 'Editor.XMLModel', serverURL: null, data: '', + state: 'empty', init: function(serverURL) { this._super(); + this.set('state', 'empty'); this.serverURL = serverURL; this.toolbarButtonsModel = new Editor.ToolbarButtonsModel(); - }, - - getData: function() { - if (!this.data) { - this.reload(); - } - return this.data; + this.addObserver(this, 'data', this.dataChanged.bind(this)); }, load: function() { - if (!this.get('synced')) { + if (this.get('state') == 'empty') { + this.set('state', 'loading'); $.ajax({ url: this.serverURL, dataType: 'text', - success: this.reloadSucceeded.bind(this) + success: this.loadingSucceeded.bind(this) }); } }, - reloadSucceeded: function(data) { + 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'); + } + }, + + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } this.set('data', data); - this.set('synced', true); + this.set('state', 'synced'); + }, + + dispose: function() { + this.removeObserver(this); + this._super(); } }); @@ -72,25 +96,38 @@ Editor.HTMLModel = Editor.Model.extend({ _className: 'Editor.HTMLModel', serverURL: null, data: '', + state: 'empty', init: function(serverURL) { this._super(); + this.set('state', 'empty'); this.serverURL = serverURL; }, load: function() { - if (!this.get('synced')) { + if (this.get('state') == 'empty') { + this.set('state', 'loading'); $.ajax({ url: this.serverURL, dataType: 'text', - success: this.reloadSucceeded.bind(this) + success: this.loadingSucceeded.bind(this) }); } }, - reloadSucceeded: function(data) { + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } this.set('data', data); - this.set('synced', true); + this.set('state', 'synced'); + }, + + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } }); @@ -99,40 +136,45 @@ Editor.DocumentModel = Editor.Model.extend({ _className: 'Editor.DocumentModel', data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size contentModels: {}, + state: 'empty', init: function() { this._super(); + this.set('state', 'empty'); this.load(); }, load: function() { - console.log('DocumentModel#load'); - $.ajax({ - cache: false, - url: documentsUrl + fileId, - dataType: 'json', - success: this.successfulLoad.bind(this) - }); + 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) { - console.log('DocumentModel#successfulLoad:', data); this.set('data', data); + this.set('state', 'synced'); this.contentModels = { 'xml': new Editor.XMLModel(data.text_url), 'html': new Editor.HTMLModel(data.html_url) }; for (var key in this.contentModels) { - this.contentModels[key].addObserver(this, 'data', this.contentModelDataChanged.bind(this)); + this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this)); } }, - contentModelDataChanged: function(property, value, contentModel) { - console.log('data of', contentModel.description(), 'changed!'); - for (var key in this.contentModels) { - if (this.contentModels[key].guid() != contentModel.guid()) { - console.log(this.contentModels[key].description(), 'frozen'); - this.contentModels[key].set('synced', false); + contentModelStateChanged: function(property, value, contentModel) { + if (value == 'dirty') { + for (var key in this.contentModels) { + if (this.contentModels[key].guid() != contentModel.guid()) { + // console.log(this.contentModels[key].description(), 'frozen'); + this.contentModels[key].set('state', 'unsynced'); + } } } } @@ -143,7 +185,7 @@ var leftPanelView, rightPanelContainer, doc; $(function() { doc = new Editor.DocumentModel(); - var editor = new EditorView('body', doc); + var editor = new EditorView('#body-wrap', doc); var splitView = new SplitView('#splitview', doc); leftPanelView = new PanelContainerView('#left-panel-container', doc); rightPanelContainer = new PanelContainerView('#right-panel-container', doc); diff --git a/project/static/js/views/editor.js b/project/static/js/views/editor.js index cd1c4865..891c8abc 100644 --- a/project/static/js/views/editor.js +++ b/project/static/js/views/editor.js @@ -12,6 +12,7 @@ var EditorView = View.extend({ $('#action-quick-save', this.element).bind('click.editorview', this.quickSave.bind(this)); $('#action-commit', this.element).bind('click.editorview', this.commit.bind(this)); $('#action-update', this.element).bind('click.editorview', this.update.bind(this)); + this.freeze('Ładowanie'); }, quickSave: function(event) { diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js index 41c34979..058b0192 100644 --- a/project/static/js/views/html.js +++ b/project/static/js/views/html.js @@ -11,24 +11,26 @@ var HTMLView = View.extend({ this.model .addObserver(this, 'data', this.modelDataChanged.bind(this)) - .addObserver(this, 'synced', this.modelSyncChanged.bind(this)); + .addObserver(this, 'state', this.modelStateChanged.bind(this)); $('.htmlview', this.element).html(this.model.get('data')); - if (!this.model.get('synced')) { - this.parent.freeze('Niezsynchronizowany...'); - this.model.load(); - } + this.modelStateChanged('state', this.model.get('state')); + this.model.load(); }, modelDataChanged: function(property, value) { $('.htmlview', this.element).html(value); }, - modelSyncChanged: function(property, value) { - if (value) { - this.parent.unfreeze(); - } else { - this.parent.freeze('Niezsynchronizowany...'); + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { + this.unfreeze(); + } else if (value == 'unsynced') { + this.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.freeze('Zapisywanie...'); } }, diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index 460317bc..a1b6ca63 100644 --- a/project/static/js/views/xml.js +++ b/project/static/js/views/xml.js @@ -32,7 +32,6 @@ var XMLView = View.extend({ resized: function(event) { var height = this.element.height() - $('.xmlview-toolbar', this.element).outerHeight(); - console.log('.xmlview height =', height); $('.xmlview', this.element).height(height); }, @@ -40,16 +39,14 @@ var XMLView = View.extend({ $(editor.frame).css({width: '100%', height: '100%'}); this.model .addObserver(this, 'data', this.modelDataChanged.bind(this)) - .addObserver(this, 'synced', this.modelSyncChanged.bind(this)); + .addObserver(this, 'state', this.modelStateChanged.bind(this)) + .load(); this.parent.unfreeze(); this.editor.setCode(this.model.get('data')); - if (!this.model.get('synced')) { - this.parent.freeze('Niezsynchronizowany...'); - this.model.load(); - } - + this.modelStateChanged('state', this.model.get('state')); + // editor.grabKeys( // $.fbind(self, self.hotkeyPressed), // $.fbind(self, self.isHotkey) @@ -61,16 +58,21 @@ var XMLView = View.extend({ }, modelDataChanged: function(property, value) { + console.log('modelDataChanged'); if (this.editor.getCode() != value) { this.editor.setCode(value); } }, - modelSyncChanged: function(property, value) { - if (value) { - this.parent.unfreeze(); - } else { - this.parent.freeze('Niezsynchronizowany...'); + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { + this.unfreeze(); + } else if (value == 'unsynced') { + this.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.freeze('Zapisywanie...'); } }, diff --git a/project/templates/base.html b/project/templates/base.html index 48ad036a..06fbc628 100644 --- a/project/templates/base.html +++ b/project/templates/base.html @@ -11,6 +11,7 @@ {% endblock %} +