From 88fd67cfb21bf9b51d2d070de059dc4bbbab63dd Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 6 Mar 2014 14:38:11 +0100 Subject: [PATCH 1/1] refactoring: moving create(wlxmlNode) to constructor, caching element instance --- .../modules/documentCanvas/canvas/canvas.js | 16 ++-- .../documentCanvas/canvas/documentElement.js | 83 ++++++++----------- 2 files changed, 44 insertions(+), 55 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index 94ad763..f29f99f 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -73,7 +73,7 @@ $.extend(Canvas.prototype, { createElement: function(wlxmlNode) { var Factory = wlxmlNode.nodeType === Node.TEXT_NODE ? documentElement.DocumentTextElement : documentElement.DocumentNodeElement; - return Factory.create(wlxmlNode, this); + return new Factory(wlxmlNode, this); }, getDocumentElement: function(htmlElement) { @@ -83,11 +83,16 @@ $.extend(Canvas.prototype, { } var $element = $(htmlElement); if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) { - return new documentElement.DocumentNodeElement(htmlElement, this); + return $element.data('canvas-element'); } + + if(htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined) { + $element = $element.parent(); + } + if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined)) { //return DocumentTextElement.fromHTMLElement(htmlElement, canvas); - return new documentElement.DocumentTextElement(htmlElement, this); + return $element.data('canvas-element'); } }, @@ -101,8 +106,9 @@ $.extend(Canvas.prototype, { }, generateCanvasDOM: function(wlxmlNode) { - var element = documentElement.DocumentNodeElement.create(wlxmlNode, this); - return element.dom(); + //var element = new documentElement.DocumentNodeElement(wlxmlNode, this); + //return element.dom(); + return this.createElement(wlxmlNode).dom(); }, setupEventHandling: function() { diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 60e179d..02c6e19 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -10,17 +10,18 @@ define([ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement, canvas) { +var DocumentElement = function(wlxmlNode, canvas) { if(arguments.length === 0) { return; } + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); }; $.extend(DocumentElement.prototype, { _setupDOMHandler: function(htmlElement) { this.$element = $(htmlElement); + this.$element.data('canvas-element', this); }, bound: function() { return $.contains(document.documentElement, this.dom()[0]); @@ -115,38 +116,33 @@ $.extend(DocumentElement.prototype, { // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas -var DocumentNodeElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); -}; - -$.extend(DocumentNodeElement, { - create: function(wlxmlNode, canvas) { - var dom = $('
') - .attr('document-node-element', ''), - widgetsContainer = $('
') - .addClass('canvas-widgets') - .attr('contenteditable', false), - container = $('
') - .attr('document-element-content', ''); - - dom.append(widgetsContainer, container); - // Make sure widgets aren't navigable with arrow keys - widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); - - var element = canvas.getDocumentElement(dom[0]); +var DocumentNodeElement = function(wlxmlNode, canvas) { + DocumentElement.call(this, wlxmlNode, canvas); + + var dom = $('
') + .attr('document-node-element', ''), + widgetsContainer = $('
') + .addClass('canvas-widgets') + .attr('contenteditable', false), + container = $('
') + .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); + - element.data('wlxmlNode', wlxmlNode); - wlxmlNode.setData('canvasElement', element); + this.data('wlxmlNode', wlxmlNode); + wlxmlNode.setData('canvasElement', this); - element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); + this.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); - wlxmlNode.contents().forEach(function(node) { - container.append(canvas.createElement(node).dom()); - }.bind(this)); + wlxmlNode.contents().forEach(function(node) { + container.append(canvas.createElement(node).dom()); + }.bind(this)); +}; - return element; - } -}); var manipulate = function(e, params, action) { var element; @@ -291,20 +287,16 @@ $.extend(DocumentNodeElement.prototype, { // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas -var DocumentTextElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); +var DocumentTextElement = function(wlxmlTextNode, canvas) { + DocumentElement.call(this, wlxmlTextNode, canvas); + var dom = $('
') + .attr('document-text-element', '') + .text(wlxmlTextNode.getText() || utils.unicode.ZWS); + this._setupDOMHandler(dom); + this.data('wlxmlNode', wlxmlTextNode); }; $.extend(DocumentTextElement, { - create: function(wlxmlTextNode, canvas) { - var dom = $('
') - .attr('document-text-element', '') - .text(wlxmlTextNode.getText() || utils.unicode.ZWS), - element = canvas.getDocumentElement(dom[0]); - element.data('wlxmlNode', wlxmlTextNode); - return element; - }, - isContentContainer: function(htmlElement) { return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } @@ -313,15 +305,6 @@ $.extend(DocumentTextElement, { DocumentTextElement.prototype = new DocumentElement(); $.extend(DocumentTextElement.prototype, { - _setupDOMHandler: function(htmlElement) { - var $element = $(htmlElement); - if(htmlElement.nodeType === Node.TEXT_NODE) { - this.$element = $element.parent(); - } - else { - this.$element = $element; - } - }, detach: function() { this.dom().detach(); this.canvas = null; -- 2.20.1