From: zuber Date: Fri, 25 Sep 2009 14:08:20 +0000 (+0200) Subject: Dodanie zamrażania i odmrażania modeli i widoków. X-Git-Url: https://git.mdrn.pl/redakcja.git/commitdiff_plain/9490c431ea46a6c3d9f1d348a5b525c0bd3b6359?ds=sidebyside;hp=--cc Dodanie zamrażania i odmrażania modeli i widoków. --- 9490c431ea46a6c3d9f1d348a5b525c0bd3b6359 diff --git a/project/static/css/master.css b/project/static/css/master.css index 85e718ea..d554a5f8 100644 --- a/project/static/css/master.css +++ b/project/static/css/master.css @@ -384,3 +384,19 @@ text#commit-dialog-message { .xmlview { height: 100%; } + +.view-overlay { + z-index: 1000; + background: #FFF; + opacity: 0.8; + text-align: center; + text-valign: center; +} + +.view-overlay p { + display: block; + position: relative; + top: auto; + bottom: auto; + height: 40px; +} \ No newline at end of file diff --git a/project/static/js/app.js b/project/static/js/app.js index d2a75779..cfac5030 100644 --- a/project/static/js/app.js +++ b/project/static/js/app.js @@ -128,6 +128,7 @@ var DocumentModel = Class.extend({ }, getXML: function(callback) { + $(this).trigger('modelxmlfreeze'); if (!this.data) { this.getData(this.getXML); } else { @@ -147,6 +148,7 @@ var DocumentModel = Class.extend({ this.modelChanged(); $(this).trigger('modelxmlchanged'); } + $(this).trigger('modelxmlunfreeze'); }, modelChanged: function() { diff --git a/project/static/js/views/html.js b/project/static/js/views/html.js index 65c8af02..cd32cedd 100644 --- a/project/static/js/views/html.js +++ b/project/static/js/views/html.js @@ -1,5 +1,5 @@ -/*global Class render_template panels */ -var HTMLView = Class.extend({ +/*global View render_template panels */ +var HTMLView = View.extend({ element: null, model: null, template: 'html-view-template', @@ -12,7 +12,7 @@ var HTMLView = Class.extend({ }, dispose: function() { - + this._super(); } }); diff --git a/project/static/js/views/panel_container.js b/project/static/js/views/panel_container.js index 48233439..c8735744 100644 --- a/project/static/js/views/panel_container.js +++ b/project/static/js/views/panel_container.js @@ -1,6 +1,6 @@ -/*globals Class render_template panels*/ +/*globals View render_template panels*/ -var PanelContainerView = Class.extend({ +var PanelContainerView = View.extend({ element: null, model: null, template: 'panel-container-view-template', @@ -29,6 +29,7 @@ var PanelContainerView = Class.extend({ dispose: function() { $('select', this.element.get(0)).unbind('change.panel-container-view'); + this._super(); } }); diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js index 8e6fa20b..cc0d361f 100644 --- a/project/static/js/views/split.js +++ b/project/static/js/views/split.js @@ -1,7 +1,7 @@ -/*globals Class*/ +/*globals View*/ // Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/ -var SplitView = Class.extend({ +var SplitView = View.extend({ splitbarClass: 'splitview-splitbar', activeClass: 'splitview-active', overlayClass: 'splitview-overlay', @@ -100,6 +100,7 @@ var SplitView = Class.extend({ dispose: function() { this.splitter.unbind('mousedown.splitview'); + this._super(); } }); diff --git a/project/static/js/views/view.js b/project/static/js/views/view.js new file mode 100644 index 00000000..975eeb9d --- /dev/null +++ b/project/static/js/views/view.js @@ -0,0 +1,53 @@ +/*globals Class render_template*/ +var View = Class.extend({ + element: null, + model: null, + template: null, + overlayClass: 'view-overlay', + overlay: null, + + init: function(element, model, template) { + this.element = $(element); + this.model = model; + this.template = template || this.template; + + if (this.template) { + this.element.html(render_template(this.template, {})); + } + }, + + frozen: function() { + return !!this.overlay; + }, + + freeze: function(message) { + this.overlay = this.overlay + || $('
' + message + '
') + .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.parent()); + + this.overlay.children('div').css({ + position: 'relative', + top: this.overlay.height() / 2 - 20 + }); + }, + + unfreeze: function() { + if (this.frozen()) { + this.overlay.remove(); + this.overlay = null; + } + }, + + dispose: function() { + this.unfreeze(); + this.element.contents().remove(); + } +}); diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js index 78f83806..de3131c8 100644 --- a/project/static/js/views/xml.js +++ b/project/static/js/views/xml.js @@ -1,5 +1,5 @@ -/*global Class CodeMirror render_template panels */ -var XMLView = Class.extend({ +/*global View CodeMirror render_template panels */ +var XMLView = View.extend({ element: null, model: null, template: 'xml-view-template', @@ -12,12 +12,21 @@ var XMLView = Class.extend({ this.template = template || this.template; this.element.html(render_template(this.template, {})); - var self = this; + $(this.model) + .bind('modelxmlfreeze.xmlview', + function() { this.freeze('Ładowanie danych z serwera...'); }.bind(this)) + .bind('modelxmlunfreeze.xmlview', + this.unfreeze.bind(this)); + + this.freeze('Ładowanie edytora...'); this.editor = new CodeMirror($('.xmlview', this.element).get(0), { parserfile: 'parsexml.js', path: "/static/js/lib/codemirror/", stylesheet: "/static/css/xmlcolors.css", parserConfig: {useHTMLKludges: false}, + textWrapping: false, + tabMode: 'spaces', + indentUnit: 0, // onChange: function() { // self.fireEvent('contentChanged'); // }, @@ -31,6 +40,7 @@ var XMLView = Class.extend({ $(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(); // editor.grabKeys( // $.fbind(self, self.hotkeyPressed), @@ -41,11 +51,16 @@ var XMLView = Class.extend({ codeChanged: function() { console.log('setCode:', this.editor, this.model); this.editor.setCode(this.model.xml); + this.unfreeze(); }, dispose: function() { - $(this.model).unbind('modelxmlchanged.xmlview'); + $(this.model) + .unbind('modelxmlchanged.xmlview') + .unbind('modelxmlfreeze.xmlview') + .unbind('modelxmlunfreeze.xmlview'); $(this.editor.frame).remove(); + this._super(); } }); diff --git a/project/templates/explorer/editor.html b/project/templates/explorer/editor.html index d2c5ba83..c7433085 100644 --- a/project/templates/explorer/editor.html +++ b/project/templates/explorer/editor.html @@ -12,11 +12,15 @@ + + {# App and views #} + +