X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/9490c431ea46a6c3d9f1d348a5b525c0bd3b6359..651925889ca81dadf344d6bc412373eb5f3801fc:/project/static/js/views/view.js

diff --git a/project/static/js/views/view.js b/project/static/js/views/view.js
index 975eeb9d..e9ff938e 100644
--- a/project/static/js/views/view.js
+++ b/project/static/js/views/view.js
@@ -1,53 +1,90 @@
-/*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;
+/*globals Editor render_template*/
+var View = Editor.Object.extend({
+    _className: 'View',
+    element: null,
+    model: null,
+    template: null,
+    overlayClass: 'view-overlay',
+    overlay: null,
+  
+    init: function(element, model, template)
+    {
+        console.log("init for view");
+        this.element = $(element);
+        this.model = model;
+        this.template = template || this.template;
     
-    if (this.template) {
-      this.element.html(render_template(this.template, {}));
-    }
-  },
+        if (this.template) this.render();
+    
+        this._resizeHandler = this.resized.bind(this);
+        $(window).bind('resize', this._resizeHandler);
+        $(this.element).bind('resize', this._resizeHandler);
+    },
 
-  frozen: function() {
-    return !!this.overlay;
-  },
+    render: function() {
+        console.log('rendering:', this._className);
+        this.element.html(render_template(this.template, this));
+    },
   
-  freeze: function(message) {
-    this.overlay = this.overlay 
-      || $('<div><div>' + message + '</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.parent());
+    frozen: function() {
+        return !!this.overlay;
+    },
+  
+    freeze: function(message) {
+        if (this.frozen()) {
+            this.unfreeze();
+        }
+        this.overlay = this.overlay
+        || $('<div><div>' + message + '</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,
+            '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({
-      position: 'relative',
-      top: this.overlay.height() / 2 - 20
-    });
-  },
+        this.overlay.children('div').css({
+            position: 'relative',
+            top: this.overlay.height() / 2 - 20
+        });
+    },
   
-  unfreeze: function() {
-    if (this.frozen()) {
-      this.overlay.remove();
-      this.overlay = null;      
-    }
-  },
+    unfreeze: function() {
+        if (this.frozen()) {
+            this.overlay.remove();
+            this.overlay = null;
+        }
+    },
 
-  dispose: function() {
-    this.unfreeze();
-    this.element.contents().remove();
-  }
+    resized: function(event) {
+        if (this.frozen()) {
+            this.overlay.css({
+                position: 'absolute',
+                width: this.element.width(),
+                height: this.element.height(),
+                top: this.element.position().top,
+                left: this.element.position().left
+            }).children('div').css({
+                position: 'relative',
+                top: this.overlay.height() / 2 - 20
+            });
+        }
+    },
+  
+    dispose: function() {
+        console.log('disposing:', this._className);
+        $(window).unbind('resize', this._resizeHandler);
+        $(this.element).unbind('resize', this._resizeHandler);
+        this.unfreeze();
+        this.element.html('');
+    }
 });