X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/9490c431ea46a6c3d9f1d348a5b525c0bd3b6359..07539e8aca073150d034525fb67183a57a388286:/project/static/js/views/xml.js diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index de3131c8..460317bc 100644 --- a/project/static/js/views/xml.js +++ b/project/static/js/views/xml.js @@ -1,24 +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) { - this.element = $(element); - this.model = $(model).get(0); - console.log('XMLView#init model:', model); - this.template = template || this.template; - this.element.html(render_template(this.template, {})); - - $(this.model) - .bind('modelxmlfreeze.xmlview', - function() { this.freeze('Ładowanie danych z serwera...'); }.bind(this)) - .bind('modelxmlunfreeze.xmlview', - this.unfreeze.bind(this)); + 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/", @@ -27,42 +25,61 @@ var XMLView = View.extend({ textWrapping: false, tabMode: 'spaces', indentUnit: 0, - // onChange: function() { - // self.fireEvent('contentChanged'); - // }, + onChange: this.editorDataChanged.bind(this), initCallback: this.editorDidLoad.bind(this) }); }, + resized: function(event) { + var height = this.element.height() - $('.xmlview-toolbar', this.element).outerHeight(); + console.log('.xmlview height =', height); + $('.xmlview', this.element).height(height); + }, + editorDidLoad: function(editor) { - console.log('init', this.model); - editor.setCode('Ładowanie...'); $(editor.frame).css({width: '100%', height: '100%'}); - this.editor.setCode(this.model.xml); - $(this.model).bind('modelxmlchanged.xmlview', this.codeChanged.bind(this)); - this.unfreeze(); - this.model.getXML(); + this.model + .addObserver(this, 'data', this.modelDataChanged.bind(this)) + .addObserver(this, 'synced', this.modelSyncChanged.bind(this)); + + this.parent.unfreeze(); + + this.editor.setCode(this.model.get('data')); + if (!this.model.get('synced')) { + this.parent.freeze('Niezsynchronizowany...'); + this.model.load(); + } + // editor.grabKeys( // $.fbind(self, self.hotkeyPressed), // $.fbind(self, self.isHotkey) // ); }, - codeChanged: function() { - console.log('setCode:', this.editor, this.model); - this.editor.setCode(this.model.xml); - this.unfreeze(); + editorDataChanged: function() { + this.model.set('data', this.editor.getCode()); + }, + + modelDataChanged: function(property, value) { + if (this.editor.getCode() != value) { + this.editor.setCode(value); + } }, + modelSyncChanged: function(property, value) { + if (value) { + this.parent.unfreeze(); + } else { + this.parent.freeze('Niezsynchronizowany...'); + } + }, + dispose: function() { - $(this.model) - .unbind('modelxmlchanged.xmlview') - .unbind('modelxmlfreeze.xmlview') - .unbind('modelxmlunfreeze.xmlview'); + this.model.removeObserver(this); $(this.editor.frame).remove(); this._super(); } }); // Register view -panels.push({name: 'xml', klass: XMLView}); +panels['xml'] = XMLView;