Dodanie DocumentModel i wczytywanie danych w XMLView.

diff --git a/project/static/css/master.css b/project/static/css/master.css
index 1a110b5..85e718e 100644 (file)
--- 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;
     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%;
 }
 
 .panel-container {
     height: 100%;

+    position: relative;
+}
+
+.content-view {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: none;

 }
 
 .xmlview {
 }
 
 .xmlview {

diff --git a/project/static/js/app.js b/project/static/js/app.js
index 73ce107..d2a7577 100644 (file)
--- a/project/static/js/app.js
+++ b/project/static/js/app.js
@@ -100,8 +100,65 @@ var panel_hooks;
  
 var panels = [];
 
  
 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() {
 $(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 054b60e..65c8af0 100644 (file)
--- 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,
 /*global Class render_template panels */
 var HTMLView = Class.extend({
   element: null,

+  model: null,

   template: 'html-view-template',
   
   template: 'html-view-template',
   

-  init: function(element, template) {
+  init: function(element, model, template) {

     this.element = $(element);
     this.element = $(element);

+    this.model = model;

     this.template = template || this.template;
     this.element.html(render_template(this.template, {}));
   },
     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 66683dd..4823343 100644 (file)
--- 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,
 
 var PanelContainerView = Class.extend({
   element: null,

+  model: null,

   template: 'panel-container-view-template',
   contentView: null,
   
   template: 'panel-container-view-template',
   contentView: null,
   

-  init: function(element, template) {
+  init: function(element, model, template) {

     this.element = $(element);
     this.element = $(element);

+    this.model = model;

     this.template = template || this.template;
     
     this.element.html(render_template(this.template, {panels: panels}));
     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);
     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);
   },
   
     console.log(this.contentView);
   },
   

diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js
index 9d6dabd..8e6fa20 100644 (file)
--- 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',
 var SplitView = Class.extend({
   splitbarClass: 'splitview-splitbar',
   activeClass: 'splitview-active',

+  overlayClass: 'splitview-overlay',

   element: null,
   element: null,

+  model: null,

   zombie: null,
   leftViewOffset: 0,
   
   // Cache
   _splitbarWidth: 0,
   
   zombie: null,
   leftViewOffset: 0,
   
   // Cache
   _splitbarWidth: 0,
   

-  init: function(element) {
+  init: function(element, model) {

     this.element = $(element).css('position', 'relative');
     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
     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);
     
   beginResize: function(event) {
     this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView);

+    this.overlay = this.overlay || $('<div></div>').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;
     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;
     var newPosition = event.pageX + this.leftViewOffset;
     this.zombie.remove();
     this.zombie = null;

+    this.overlay.remove();
+    this.overlay = null;

     this.resplit(newPosition);
 
     $(document)
     this.resplit(newPosition);
 
     $(document)

diff --git a/project/static/js/views/xml.js b/project/static/js/views/xml.js
index 4ed9fc0..78f8380 100644 (file)
--- 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,
 /*global Class CodeMirror render_template panels */
 var XMLView = Class.extend({
   element: null,

+  model: null,

   template: 'xml-view-template',
   editor: null,
   
   template: 'xml-view-template',
   editor: null,
   

-  init: function(element, template) {
+  init: function(element, model, template) {

     this.element = $(element);
     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.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",
       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');
       // },
       // 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() {
   },
   
   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 e752286..d2c5ba8 100644 (file)
--- a/project/templates/explorer/editor.html
+++ b/project/templates/explorer/editor.html
@@ -31,8 +31,7 @@
        </script>
        
        <script type="text/html" charset="utf-8" id="xml-view-template">
        </script>
        
        <script type="text/html" charset="utf-8" id="xml-view-template">

-               <div class="xmlview" style="position: absolute; top: 40px; left:0px; right:0px; bottom: 0px;">
-                       <textarea name="text">Ala ma kota</textarea>
+               <div class="xmlview">

                </div>
        </script>
        
                </div>
        </script>