Dużo poprawek :-)
authorzuber <marek@stepniowski.com>
Sat, 26 Sep 2009 23:51:41 +0000 (01:51 +0200)
committerzuber <marek@stepniowski.com>
Sat, 26 Sep 2009 23:51:41 +0000 (01:51 +0200)
project/static/js/app.js
project/static/js/models.js
project/static/js/views/html.js
project/static/js/views/panel_container.js
project/static/js/views/split.js
project/static/js/views/view.js
project/static/js/views/xml.js

index 7bf026b..15ee0c0 100644 (file)
@@ -104,13 +104,25 @@ var Editor = Editor || {};
 
 // Obiekt implementujący wzorzec KVC/KVO
 Editor.Object = Class.extend({
+  _className: 'Editor.Object',
   _observers: {},
+  _guid: null,
+  
+  init: function() {
+    this._observers = {};
+    console.log('Created', this.guid());
+  },
+  
+  description: function() {
+    return this._className + '(guid = ' + this.guid() + ')';
+  },
   
   addObserver: function(observer, property, callback) {
+    console.log('Add observer', observer.description(), 'to', this.description(), '[', property, ']');
     if (!this._observers[property]) {
       this._observers[property] = {}
     }
-    this._observers[property][this.guid()] = callback;
+    this._observers[property][observer.guid()] = callback;
     return this;
   },
   
@@ -120,6 +132,7 @@ Editor.Object = Class.extend({
         this.removeObserver(observer, property)
       }
     } else {
+      console.log('Remove observer', observer.description(), 'from', this.description(), '[', property, ']');
       delete this._observers[property][observer.guid()];
     }
     return this;
@@ -128,7 +141,9 @@ Editor.Object = Class.extend({
   notifyObservers: function(property) {
     var currentValue = this[property];
     for (var guid in this._observers[property]) {
-      this._observers[property][guid](property, currentValue);
+      console.log(this._observers[property][guid]);
+      console.log('Notifying', guid, 'of', this.description(), '[', property, ']');
+      this._observers[property][guid](property, currentValue, this);
     }
     return this;
   },
index 9ccefca..97682d0 100644 (file)
@@ -9,9 +9,11 @@ Editor.Model = Editor.Object.extend({
 
 
 Editor.XMLModel = Editor.Model.extend({
+  _className: 'Editor.XMLModel',
   serverURL: null,
   
   init: function(serverURL) {
+    this._super();
     this.serverURL = serverURL;
   },
   
@@ -22,11 +24,6 @@ Editor.XMLModel = Editor.Model.extend({
     return this.data;
   },
   
-  setData: function(data) {
-    this.data = data;
-    this.dataChanged();
-  },
-  
   load: function() {
     if (!this.get('synced')) {
       $.ajax({
@@ -45,9 +42,12 @@ Editor.XMLModel = Editor.Model.extend({
 
 
 Editor.HTMLModel = Editor.Model.extend({
+  _className: 'Editor.HTMLModel',
   serverURL: null,
+  data: '',
   
   init: function(serverURL) {
+    this._super();
     this.serverURL = serverURL;
   },
   
@@ -69,10 +69,12 @@ Editor.HTMLModel = Editor.Model.extend({
 
 
 Editor.DocumentModel = Editor.Model.extend({
+  _className: 'Editor.DocumentModel',
   data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size
   contentModels: {},
   
   init: function() {
+    this._super();
     this.load();
   },
   
@@ -93,6 +95,19 @@ Editor.DocumentModel = Editor.Model.extend({
       'xml': new Editor.XMLModel(data.text_url),
       'html': new Editor.HTMLModel(data.html_url)
     };
+    for (var key in this.contentModels) {
+      this.contentModels[key].addObserver(this, 'data', this.contentModelDataChanged.bind(this));
+    }
+  },
+  
+  contentModelDataChanged: function(property, value, contentModel) {
+    console.log('data of', contentModel.description(), 'changed!');
+    for (var key in this.contentModels) {
+      if (this.contentModels[key].guid() != contentModel.guid()) {
+        console.log(this.contentModels[key].description(), 'frozen');
+        this.contentModels[key].set('synced', false);
+      }
+    }
   }
 });
 
index 59579af..41c3497 100644 (file)
@@ -1,21 +1,22 @@
 /*global View render_template panels */
 var HTMLView = View.extend({
+  _className: 'HTMLView',
   element: null,
   model: null,
   template: 'html-view-template',
   
-  init: function(element, model, template) {
+  init: function(element, model, parent, template) {
     this._super(element, model, template);
+    this.parent = parent;
     
     this.model
       .addObserver(this, 'data', this.modelDataChanged.bind(this))
       .addObserver(this, 'synced', this.modelSyncChanged.bind(this));
       
+    $('.htmlview', this.element).html(this.model.get('data'));
     if (!this.model.get('synced')) {
-      this.freeze('Niezsynchronizowany...');
+      this.parent.freeze('Niezsynchronizowany...');
       this.model.load();
-    } else {
-      $('.htmlview', this.element).html(this.model.get('data'));
     }
   },
   
@@ -25,9 +26,9 @@ var HTMLView = View.extend({
   
   modelSyncChanged: function(property, value) {
     if (value) {
-      this.unfreeze();
+      this.parent.unfreeze();
     } else {
-      this.freeze('Niezsynchronizowany...');
+      this.parent.freeze('Niezsynchronizowany...');
     }
   },
   
index e4950ba..332e83a 100644 (file)
@@ -1,17 +1,15 @@
 /*globals View render_template panels*/
 
 var PanelContainerView = View.extend({
+  _className: 'PanelContainerView',
   element: null,
   model: null,
   template: 'panel-container-view-template',
   contentView: null,
   
   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}));
+    this._super(element, model, template);
+
     $('select', this.element.get(0)).bind('change.panel-container-view', this.selectChanged.bind(this));
   },
   
@@ -23,7 +21,7 @@ var PanelContainerView = View.extend({
       this.contentView = null;
     }
     this.contentView = new klass($('.content-view', 
-      this.element.get(0)), this.model.contentModels[value]);
+      this.element.get(0)), this.model.contentModels[value], this);
   },
   
   dispose: function() {
index cc0d361..48f0de7 100644 (file)
@@ -2,6 +2,7 @@
 
 // Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/
 var SplitView = View.extend({
+  _className: 'SplitView',
   splitbarClass: 'splitview-splitbar',
   activeClass: 'splitview-active',
   overlayClass: 'splitview-overlay',
@@ -14,8 +15,10 @@ var SplitView = View.extend({
   _splitbarWidth: 0,
   
   init: function(element, model) {
-    this.element = $(element).css('position', 'relative');
-    this.model = model;
+    this._super(element, model, null);
+    this.element.css('position', 'relative');
+    this._resizingSubviews = false;
+    
     this.views = $(">*", this.element[0]).css({
        position: 'absolute',                     // positioned inside splitter container
        'z-index': 1,                                           // splitbar is positioned above
@@ -82,6 +85,12 @@ var SplitView = View.extend({
       .unbind('mouseup.splitview');
   },
 
+  resized: function(event) {
+    if (!this._resizingSubviews) {
+      this.resplit(Math.min(this.leftView.width(), this.element.width() - this._splitbarWidth));
+    }
+  },
+  
   resplit: function(newPosition) {
     newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
     this.splitbar.css('left', newPosition);
@@ -94,7 +103,9 @@ var SplitView = View.extend({
       width: this.element.width() - newPosition - this._splitbarWidth
     });
     if (!$.browser.msie) {
-                 this.views.trigger("resize");
+      this._resizingSubviews = true;
+                 $(window).trigger('resize');
+                 this._resizingSubviews = false;
                }
   },
   
index 59b339f..a21ba1e 100644 (file)
@@ -1,11 +1,11 @@
 /*globals Editor render_template*/
 var View = Editor.Object.extend({
+  _className: 'View',
   element: null,
   model: null,
   template: null,
   overlayClass: 'view-overlay',
   overlay: null,
-  id: null,
   
   init: function(element, model, template) {
     this.element = $(element);
@@ -16,13 +16,9 @@ var View = Editor.Object.extend({
       this.element.html(render_template(this.template, this));
     }
     
-    View.lastId = View.lastId + 1;
-    this.id = 'view-' + View.lastId;
-  },
-  
-  // Identyczność
-  hash: function() {
-    
+    this._resizeHandler = this.resized.bind(this);
+    $(window).bind('resize', this._resizeHandler);
+    $(this.element).bind('resize', this._resizeHandler);
   },
   
   frozen: function() {
@@ -38,8 +34,14 @@ var View = Editor.Object.extend({
               width: this.element.width(),
               height: this.element.height(),
               top: this.element.position().top,
-              left: this.element.position().left
+              left: this.element.position().left,
+              'user-select': 'none',
+              '-webkit-user-select': 'none',
+              '-khtml-user-select': 'none',
+              '-moz-user-select': 'none',
+              overflow: 'hidden'
             })
+            .attr('unselectable', 'on')
             .appendTo(this.element.parent());
             
     this.overlay.children('div').css({
@@ -55,11 +57,24 @@ var View = Editor.Object.extend({
     }
   },
 
+  resized: function(event) {
+    console.log('resized', this.description(), this.element);
+    if (this.frozen()) {
+      console.log('css!');
+      this.overlay.css({
+        position: 'absolute',
+        width: this.element.width(),
+        height: this.element.height(),
+        top: this.element.position().top,
+        left: this.element.position().left
+      });
+    }
+  },
+  
   dispose: function() {
+    $(window).unbind('resize', this._resizeHandler);
+    $(this.element).unbind('resize', this._resizeHandler);
     this.unfreeze();
     this.element.contents().remove();
   }
 });
-
-
-View.lastId = 0;
index 9df8954..9de8d2a 100644 (file)
@@ -1,15 +1,17 @@
 /*global View CodeMirror 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.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/",
@@ -30,13 +32,14 @@ var XMLView = View.extend({
       .addObserver(this, 'data', this.modelDataChanged.bind(this))
       .addObserver(this, 'synced', this.modelSyncChanged.bind(this));
     
+    this.parent.unfreeze();
+        
     if (!this.model.get('synced')) {
-      this.freeze('Niezsynchronizowany...');
+      this.parent.freeze('Niezsynchronizowany...');
       this.model.load();
     } else {
       this.editor.setCode(this.model.get('data'));
     }
-    this.unfreeze();
   
     // editor.grabKeys(
     //   $.fbind(self, self.hotkeyPressed),
@@ -56,9 +59,9 @@ var XMLView = View.extend({
   
   modelSyncChanged: function(property, value) {
     if (value) {
-      this.unfreeze();
+      this.parent.unfreeze();
     } else {
-      this.freeze('Niezsynchronizowany...');
+      this.parent.freeze('Niezsynchronizowany...');
     }
   },