refactoring: common things in constructor, dom construction in a separate function

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.test.js b/src/editor/modules/documentCanvas/canvas/canvas.test.js
index 67f59b6..902cb34 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.test.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.test.js
@@ -33,6 +33,7 @@ describe('new Canvas', function() {
 
         expect(c.doc().children()).to.have.length(3);
         expect(c.doc().children()[0].canvas).to.equal(c);
 
         expect(c.doc().children()).to.have.length(3);
         expect(c.doc().children()[0].canvas).to.equal(c);

+        expect(c.doc().children()[0].data('wlxmlNode').sameNode(doc.root));

     });
 });
 
     });
 });
 

diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js
index 02c6e19..2c146bb 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/documentElement.js
+++ b/src/editor/modules/documentCanvas/canvas/documentElement.js
@@ -16,13 +16,13 @@ var DocumentElement = function(wlxmlNode, canvas) {
     }
     this.wlxmlNode = wlxmlNode;
     this.canvas = canvas;
     }
     this.wlxmlNode = wlxmlNode;
     this.canvas = canvas;

+
+    this.$element = this.createDOM();
+    this.$element.data('canvas-element', this);
+    this.data('wlxmlNode', wlxmlNode);

 };
 
 $.extend(DocumentElement.prototype, {
 };
 
 $.extend(DocumentElement.prototype, {

-    _setupDOMHandler: function(htmlElement) {
-        this.$element = $(htmlElement);
-        this.$element.data('canvas-element', this);
-    },

     bound: function() {
         return $.contains(document.documentElement, this.dom()[0]);
     },
     bound: function() {
         return $.contains(document.documentElement, this.dom()[0]);
     },


@@ -118,29 +118,7 @@ $.extend(DocumentElement.prototype, {
 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
 var DocumentNodeElement = function(wlxmlNode, canvas) {
     DocumentElement.call(this, wlxmlNode, canvas);
 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
 var DocumentNodeElement = function(wlxmlNode, canvas) {
     DocumentElement.call(this, wlxmlNode, canvas);

-
-    var dom = $('<div>')
-            .attr('document-node-element', ''),
-        widgetsContainer = $('<div>')
-            .addClass('canvas-widgets')
-            .attr('contenteditable', false),
-        container = $('<div>')
-            .attr('document-element-content', '');
-    
-    dom.append(widgetsContainer, container);
-    // Make sure widgets aren't navigable with arrow keys
-    widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
-    this._setupDOMHandler(dom);
-    
-
-    this.data('wlxmlNode', wlxmlNode);

     wlxmlNode.setData('canvasElement', this);
     wlxmlNode.setData('canvasElement', this);

-
-    this.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()});
-
-    wlxmlNode.contents().forEach(function(node) {
-        container.append(canvas.createElement(node).dom());
-    }.bind(this));

 };
 
 
 };
 
 


@@ -160,6 +138,26 @@ DocumentNodeElement.prototype = new DocumentElement();
 
 
 $.extend(DocumentNodeElement.prototype, {
 
 
 $.extend(DocumentNodeElement.prototype, {

+    createDOM: function() {
+        var dom = $('<div>')
+                .attr('document-node-element', ''),
+            widgetsContainer = $('<div>')
+                .addClass('canvas-widgets')
+                .attr('contenteditable', false),
+            container = $('<div>')
+                .attr('document-element-content', '');
+        
+        dom.append(widgetsContainer, container);
+        // Make sure widgets aren't navigable with arrow keys
+        widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
+        this.$element = dom; //@!!!
+        this.setWlxml({tag: this.wlxmlNode.getTagName(), klass: this.wlxmlNode.getClass()});
+
+        this.wlxmlNode.contents().forEach(function(node) {
+            container.append(this.canvas.createElement(node).dom());
+        }.bind(this));
+        return dom;
+    },

     _container: function() {
         return this.dom().children('[document-element-content]');
     },
     _container: function() {
         return this.dom().children('[document-element-content]');
     },


@@ -289,11 +287,6 @@ $.extend(DocumentNodeElement.prototype, {
 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
 var DocumentTextElement = function(wlxmlTextNode, canvas) {
     DocumentElement.call(this, wlxmlTextNode, canvas);
 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
 var DocumentTextElement = function(wlxmlTextNode, canvas) {
     DocumentElement.call(this, wlxmlTextNode, canvas);

-    var dom = $('<div>')
-        .attr('document-text-element', '')
-        .text(wlxmlTextNode.getText() || utils.unicode.ZWS);
-    this._setupDOMHandler(dom);
-    this.data('wlxmlNode', wlxmlTextNode);

 };
 
 $.extend(DocumentTextElement, {
 };
 
 $.extend(DocumentTextElement, {


@@ -305,6 +298,11 @@ $.extend(DocumentTextElement, {
 DocumentTextElement.prototype = new DocumentElement();
 
 $.extend(DocumentTextElement.prototype, {
 DocumentTextElement.prototype = new DocumentElement();
 
 $.extend(DocumentTextElement.prototype, {

+    createDOM: function() {
+        return $('<div>')
+            .attr('document-text-element', '')
+            .text(this.wlxmlNode.getText() || utils.unicode.ZWS);
+    },

     detach: function() {
         this.dom().detach();
         this.canvas = null;
     detach: function() {
         this.dom().detach();
         this.canvas = null;

diff --git a/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js b/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js
index a35c079..66b2ea0 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js
+++ b/src/editor/modules/documentCanvas/canvas/wlxmlManagers.js
@@ -41,8 +41,7 @@ var DocumentElementWrapper = function(documentElement) {
         eventBus.trigger.apply(eventBus, arguments);
     };
 
         eventBus.trigger.apply(eventBus, arguments);
     };
 

-    this.node = documentElement.data('wlxmlNode');
-
+    this.node = documentElement.wlxmlNode;

 };
 
 var getDisplayStyle = function(tag, klass) {
 };
 
 var getDisplayStyle = function(tag, klass) {