From: Łukasz Rekucki Date: Mon, 28 Sep 2009 16:44:31 +0000 (+0200) Subject: Merge branch 'zuber-view-refactor' X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/9e0a0c89939a75eccb7b6ae925707d404b287b78?hp=9bec1deeed00ac693e6031c69f0778d3bb0dfbd9 Merge branch 'zuber-view-refactor' --- diff --git a/project/static/css/master.css b/project/static/css/master.css index 7caa732f..a3857e6e 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -382,6 +382,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..9542eac5 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,101 @@ Editor.ToolbarButtonsModel = Editor.Model.extend({ }); +// Stany modelu: +// +// empty -> loading -> synced -> unsynced -> loading +// \ +// -> dirty -> updating -> updated -> 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(); + this.addObserver(this, 'data', this.dataChanged.bind(this)); }, - getData: function() { - if (!this.data) { - this.reload(); + load: function() { + if (this.get('state') == 'empty') { + this.set('state', 'loading'); + $.ajax({ + url: this.serverURL, + dataType: 'text', + success: this.loadingSucceeded.bind(this) + }); + return true; } - return this.data; + return false; }, - load: function() { - if (!this.get('synced')) { + update: function(message) { + if (this.get('state') == 'dirty') { + this.set('state', 'updating'); + + var payload = { + contents: this.get('data') + }; + if (message) { + payload.message = message; + } + $.ajax({ url: this.serverURL, - dataType: 'text', - success: this.reloadSucceeded.bind(this) + type: 'put', + dataType: 'json', + data: payload, + success: this.updatingSucceeded.bind(this), + error: this.updatingFailed.bind(this) }); + return true; } + return false; }, - reloadSucceeded: function(data) { + updatingSucceeded: function() { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + this.set('state', 'updated'); + }, + + updatingFailed: function() { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + this.set('state', 'dirty'); + }, + + 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 +136,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 +176,54 @@ 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)); + } + }, + + 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'); + } + } } }, - contentModelDataChanged: function(property, value, contentModel) { - console.log('data of', contentModel.description(), 'changed!'); + quickSave: function(message) { 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); + if (this.contentModels[key].get('state') == 'dirty') { + this.contentModels[key].update(message); + break; } } } @@ -143,7 +234,8 @@ var leftPanelView, rightPanelContainer, doc; $(function() { doc = new Editor.DocumentModel(); - var editor = new EditorView('body', doc); + var editor = new EditorView('#body-wrap', doc); + editor.freeze(); 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 b3c9563b..27b17cbf 100644 --- a/project/static/js/views/editor.js +++ b/project/static/js/views/editor.js @@ -8,5 +8,30 @@ var EditorView = View.extend({ init: function(element, model, template) { this._super(element, model, template); this.model.load(); + + $('#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) { + console.log('quickSave'); + this.model.quickSave(); + }, + + commit: function(event) { + console.log('commit'); + }, + + update: function(event) { + console.log('update'); + }, + + dispose: function() { + $('#action-quick-save', this.element).unbind('click.editorview'); + $('#action-commit', this.element).unbind('click.editorview'); + $('#action-update', this.element).unbind('click.editorview'); + this._super(); } }); diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js index 41c34979..3d803fc7 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) { + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { this.parent.unfreeze(); - } else { + } else if (value == 'unsynced') { this.parent.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.parent.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.parent.freeze('Zapisywanie...'); } }, diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index 460317bc..6b7571a3 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) { + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { this.parent.unfreeze(); - } else { + } else if (value == 'unsynced') { this.parent.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.parent.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.parent.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 %} +
diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index a6bcc41a..d0756788 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -1,6 +1,7 @@ {% extends "base.html" %} {% block extrahead %} + @@ -84,7 +85,7 @@ {% endblock %} {% block header-toolbar %} - + {% endblock %} {% block maincontent %}