X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/8358d608397b9531d9d0b72c7b21ab78d078f066..abd8692003a505de041558bd43f0ce1e884e8bbd:/src/editor/modules/documentCanvas/canvas/documentElement.js diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 0f49863..2c146bb 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -10,32 +10,19 @@ 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, { - fromHTMLElement: function(htmlElement, canvas) { - var $element = $(htmlElement); - if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined) { - return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - } - 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 undefined; - } -}); + this.$element = this.createDOM(); + this.$element.data('canvas-element', this); + this.data('wlxmlNode', wlxmlNode); +}; $.extend(DocumentElement.prototype, { - _setupDOMHandler: function(htmlElement) { - this.$element = $(htmlElement); - }, bound: function() { return $.contains(document.documentElement, this.dom()[0]); }, @@ -53,7 +40,7 @@ $.extend(DocumentElement.prototype, { parent: function() { var parents = this.$element.parents('[document-node-element]'); if(parents.length) { - return DocumentElement.fromHTMLElement(parents[0], this.canvas); + return this.canvas.getDocumentElement(parents[0]); } return null; }, @@ -129,42 +116,11 @@ $.extend(DocumentElement.prototype, { // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas -var DocumentNodeElement = function(htmlElement, canvas) { - DocumentElement.call(this, htmlElement, canvas); +var DocumentNodeElement = function(wlxmlNode, canvas) { + DocumentElement.call(this, wlxmlNode, canvas); + wlxmlNode.setData('canvasElement', this); }; -$.extend(DocumentNodeElement, { - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, - - 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 = this.fromHTMLElement(dom[0], canvas); - - element.data('wlxmlNode', wlxmlNode); - wlxmlNode.setData('canvasElement', element); - - element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); - - wlxmlNode.contents().forEach(function(node) { - container.append(canvas.createElement(node).dom()); - }.bind(this)); - - return element; - } -}); var manipulate = function(e, params, action) { var element; @@ -182,6 +138,26 @@ DocumentNodeElement.prototype = new DocumentElement(); $.extend(DocumentNodeElement.prototype, { + createDOM: function() { + 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.$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]'); }, @@ -213,7 +189,7 @@ $.extend(DocumentNodeElement.prototype, { var elementContent = this._container().contents(); var element = this; elementContent.each(function() { - var childElement = DocumentElement.fromHTMLElement(this, element.canvas); + var childElement = element.canvas.getDocumentElement(this); if(childElement === undefined) { return true; } @@ -309,24 +285,11 @@ $.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); }; $.extend(DocumentTextElement, { - create: function(wlxmlTextNode, canvas) { - var dom = $('
') - .attr('document-text-element', '') - .text(wlxmlTextNode.getText() || utils.unicode.ZWS), - element = this.fromHTMLElement(dom[0], canvas); - element.data('wlxmlNode', wlxmlTextNode); - return element; - }, - - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, - isContentContainer: function(htmlElement) { return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } @@ -335,14 +298,10 @@ $.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; - } + createDOM: function() { + return $('
') + .attr('document-text-element', '') + .text(this.wlxmlNode.getText() || utils.unicode.ZWS); }, detach: function() { this.dom().detach(); @@ -387,7 +346,7 @@ $.extend(DocumentTextElement.prototype, { if(params instanceof DocumentNodeElement) { element = params; } else { - element = this.canvas.createElement(params, this.canvas); + element = this.canvas.createElement(params); } this.dom().wrap('
'); this.dom().parent().before(element.dom());