From: zuber Date: Fri, 25 Sep 2009 11:29:55 +0000 (+0200) Subject: Dodanie DocumentModel i wczytywanie danych w XMLView. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/ff3ac103aa103b9b5cb56e71a6782c9ca98acf94 Dodanie DocumentModel i wczytywanie danych w XMLView. --- diff --git a/project/static/css/master.css b/project/static/css/master.css index 1a110b51..85e718ea 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -358,10 +358,27 @@ text#commit-dialog-message { border-right: 1px solid #999; height: 100%; background-color: #CCC; + z-index: 100; +} + +.splitview-overlay { + z-index: 90; + background: #FFF; + opacity: 0.5; } .panel-container { height: 100%; + position: relative; +} + +.content-view { + position: absolute; + top: 20px; + right: 0; + bottom: 0; + left: 0; + overflow: none; } .xmlview { diff --git a/project/static/js/app.js b/project/static/js/app.js index 73ce1076..d2a75779 100644 --- a/project/static/js/app.js +++ b/project/static/js/app.js @@ -100,8 +100,65 @@ var panel_hooks; var panels = []; +var documentsUrl = '/api/documents/'; + +var DocumentModel = Class.extend({ + data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size + xml: '', + html: '', + + init: function() {}, + + getData: function(callback) { + console.log('get:', documentsUrl + fileId); + $.ajax({ + cache: false, + url: documentsUrl + fileId, + dataType: 'json', + success: this.successfulGetData.bind(this, callback) + }); + }, + + successfulGetData: function(callback, data) { + this.data = data; + this.modelChanged(); + if (callback) { + (callback.bind(this))(data); + } + }, + + getXML: function(callback) { + if (!this.data) { + this.getData(this.getXML); + } else { + console.log('getXML:', this.data.text_url); + $.ajax({ + cache: false, + url: this.data.text_url, + dataType: 'text', + success: this.successfulGetXML.bind(this, callback) + }); + }; + }, + + successfulGetXML: function(callback, data) { + if (data != this.xml) { + this.xml = data; + this.modelChanged(); + $(this).trigger('modelxmlchanged'); + } + }, + + modelChanged: function() { + $(this).trigger('modelchanged'); + } +}); + +var leftPanelView, rightPanelContainer, doc; + $(function() { - var splitView = new SplitView('#splitview'); - var leftPanelView = new PanelContainerView('#left-panel-container'); - var rightPanelContainer = new PanelContainerView('#right-panel-container'); + doc = new DocumentModel(); + 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/html.js b/project/static/js/views/html.js index 054b60ee..65c8af02 100644 --- a/project/static/js/views/html.js +++ b/project/static/js/views/html.js @@ -1,10 +1,12 @@ /*global Class render_template panels */ var HTMLView = Class.extend({ element: null, + model: null, template: 'html-view-template', - init: function(element, template) { + init: function(element, model, template) { this.element = $(element); + this.model = model; this.template = template || this.template; this.element.html(render_template(this.template, {})); }, diff --git a/project/static/js/views/panel_container.js b/project/static/js/views/panel_container.js index 66683dd2..48233439 100644 --- a/project/static/js/views/panel_container.js +++ b/project/static/js/views/panel_container.js @@ -2,11 +2,13 @@ var PanelContainerView = Class.extend({ element: null, + model: null, template: 'panel-container-view-template', contentView: null, - init: function(element, template) { + init: function(element, model, template) { this.element = $(element); + this.model = model; this.template = template || this.template; this.element.html(render_template(this.template, {panels: panels})); @@ -17,7 +19,11 @@ var PanelContainerView = Class.extend({ var view = panels[$('select', this.element.get(0)).val()]; var klass = view.klass; console.log(view, klass); - this.contentView = new klass($('.content-view', this.element.get(0))); + if (this.contentView) { + this.contentView.dispose(); + this.contentView = null; + } + this.contentView = new klass($('.content-view', this.element.get(0)), this.model); console.log(this.contentView); }, diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js index 9d6dabd2..8e6fa20b 100644 --- a/project/static/js/views/split.js +++ b/project/static/js/views/split.js @@ -4,15 +4,18 @@ var SplitView = Class.extend({ splitbarClass: 'splitview-splitbar', activeClass: 'splitview-active', + overlayClass: 'splitview-overlay', element: null, + model: null, zombie: null, leftViewOffset: 0, // Cache _splitbarWidth: 0, - init: function(element) { + init: function(element, model) { this.element = $(element).css('position', 'relative'); + this.model = model; this.views = $(">*", this.element[0]).css({ position: 'absolute', // positioned inside splitter container 'z-index': 1, // splitbar is positioned above @@ -44,6 +47,13 @@ var SplitView = Class.extend({ beginResize: function(event) { this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView); + this.overlay = this.overlay || $('
').addClass(this.overlayClass).css({ + position: 'absolute', + width: this.element.width(), + height: this.element.height(), + top: this.element.position().top, + left: this.element.position().left + }).appendTo(this.element); this.views.css("-webkit-user-select", "none"); // Safari selects A/B text on a move this.splitbar.addClass(this.activeClass); this.leftViewOffset = this.leftView[0].offsetWidth - event.pageX; @@ -63,6 +73,8 @@ var SplitView = Class.extend({ var newPosition = event.pageX + this.leftViewOffset; this.zombie.remove(); this.zombie = null; + this.overlay.remove(); + this.overlay = null; this.resplit(newPosition); $(document) diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index 4ed9fc0a..78f83806 100644 --- a/project/static/js/views/xml.js +++ b/project/static/js/views/xml.js @@ -1,16 +1,19 @@ /*global Class CodeMirror render_template panels */ var XMLView = Class.extend({ element: null, + model: null, template: 'xml-view-template', editor: null, - init: function(element, template) { + 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, {})); var self = this; - this.editor = CodeMirror.fromTextArea($('textarea', this.element)[0], { + this.editor = new CodeMirror($('.xmlview', this.element).get(0), { parserfile: 'parsexml.js', path: "/static/js/lib/codemirror/", stylesheet: "/static/css/xmlcolors.css", @@ -18,21 +21,31 @@ var XMLView = Class.extend({ // onChange: function() { // self.fireEvent('contentChanged'); // }, - initCallback: function(editor) { - console.log('whatever'); - // editor.grabKeys( - // $.fbind(self, self.hotkeyPressed), - // $.fbind(self, self.isHotkey) - // ); - editor.setCode('Ala ma kota a kot ma Alę!'); - } + initCallback: this.editorDidLoad.bind(this) }); - console.log(this.editor); - $(this.editor.frame).css({width: '100%', height: '100%'}); + }, + + 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.model.getXML(); + // 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); }, dispose: function() { - + $(this.model).unbind('modelxmlchanged.xmlview'); + $(this.editor.frame).remove(); } }); diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index e752286d..d2c5ba83 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -31,8 +31,7 @@