X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/dba809feb44cd1c4d155f3e3254a1cca5323f95f..9921992e940cf9c1cc53715098233e23665d8f94:/project/static/js/views/xml.js?ds=inline diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index 54abf164..6b7571a3 100644 --- a/project/static/js/views/xml.js +++ b/project/static/js/views/xml.js @@ -1,14 +1,22 @@ -/*global View CodeMirror render_template panels */ +/*global View CodeMirror ButtonToolbarView render_template panels */ var XMLView = View.extend({ + _className: 'XMLView', element: null, model: null, template: 'xml-view-template', editor: null, + buttonToolbar: null, - init: function(element, model, template) { + init: function(element, model, parent, template) { this._super(element, model, template); + this.parent = parent; + this.buttonToolbar = new ButtonToolbarView( + $('.xmlview-toolbar', this.element), + this.model.toolbarButtonsModel, parent); + + $('.xmlview-toolbar', this.element).bind('resize.xmlview', this.resized.bind(this)); - this.freeze('Ładowanie edytora...'); + this.parent.freeze('Ładowanie edytora...'); this.editor = new CodeMirror($('.xmlview', this.element).get(0), { parserfile: 'parsexml.js', path: "/static/js/lib/codemirror/", @@ -17,40 +25,57 @@ var XMLView = View.extend({ textWrapping: false, tabMode: 'spaces', indentUnit: 0, - onChange: this.changed.bind(this), + onChange: this.editorDataChanged.bind(this), initCallback: this.editorDidLoad.bind(this) }); }, - changed: function() { - this.model.setData(this.editor.getCode()); + resized: function(event) { + var height = this.element.height() - $('.xmlview-toolbar', this.element).outerHeight(); + $('.xmlview', this.element).height(height); }, editorDidLoad: function(editor) { - editor.setCode('Ładowanie edytora...'); $(editor.frame).css({width: '100%', height: '100%'}); - this.editor.setCode(this.model.getData()); - this.unfreeze(); this.model - .addObserver(this, 'reloaded', function() { - this.editor.setCode(this.model.getData()); this.unfreeze(); }.bind(this)) - .addObserver(this, 'needsReload', function() { - this.freeze('Niezsynchronizowany'); }.bind(this)) - .addObserver(this, 'dataChanged', this.textDidChange.bind(this)); - + .addObserver(this, 'data', this.modelDataChanged.bind(this)) + .addObserver(this, 'state', this.modelStateChanged.bind(this)) + .load(); + + this.parent.unfreeze(); + + this.editor.setCode(this.model.get('data')); + this.modelStateChanged('state', this.model.get('state')); + // editor.grabKeys( // $.fbind(self, self.hotkeyPressed), // $.fbind(self, self.isHotkey) // ); }, - textDidChange: function(event) { - console.log('textDidChange!'); - if (this.editor.getCode() != this.model.getData()) { - this.editor.setCode(this.model.getData()); + editorDataChanged: function() { + this.model.set('data', this.editor.getCode()); + }, + + modelDataChanged: function(property, value) { + console.log('modelDataChanged'); + if (this.editor.getCode() != value) { + this.editor.setCode(value); } }, + modelStateChanged: function(property, value) { + if (value == 'synced' || value == 'dirty') { + this.parent.unfreeze(); + } else if (value == 'unsynced') { + this.parent.freeze('Niezsynchronizowany...'); + } else if (value == 'loading') { + this.parent.freeze('Ładowanie...'); + } else if (value == 'saving') { + this.parent.freeze('Zapisywanie...'); + } + }, + dispose: function() { this.model.removeObserver(this); $(this.editor.frame).remove();