X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/83989a968f6af8436bbb37f7a67b82b35a26a2ed..bec14a088e45d21ac12f9c5e852dd0b7e559d680:/src/editor/modules/documentCanvas/canvas/documentElement.js?ds=inline diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 60e179d..27160e7 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -10,32 +10,21 @@ define([ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement, canvas) { - if(arguments.length === 0) { - return; - } +var DocumentElement = function(wlxmlNode, canvas) { + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); + + this.$element = this.createDOM(); + this.$element.data('canvas-element', this); }; $.extend(DocumentElement.prototype, { - _setupDOMHandler: function(htmlElement) { - this.$element = $(htmlElement); - }, bound: function() { return $.contains(document.documentElement, this.dom()[0]); }, dom: function() { return this.$element; }, - data: function() { - var dom = this.dom(), - args = Array.prototype.slice.call(arguments, 0); - if(args.length === 2 && args[1] === undefined) { - return dom.removeData(args[0]); - } - return dom.data.apply(dom, arguments); - }, parent: function() { var parents = this.$element.parents('[document-node-element]'); if(parents.length) { @@ -58,16 +47,9 @@ $.extend(DocumentElement.prototype, { return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; }, - markAsCurrent: function() { - this.canvas.markAsCurrent(this); - }, - getVerticallyFirstTextElement: function() { var toret; this.children().some(function(child) { - if(!child.isVisible()) { - return false; // continue - } if(child instanceof DocumentTextElement) { toret = child; return true; // break @@ -95,58 +77,20 @@ $.extend(DocumentElement.prototype, { return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0])); }, - isVisible: function() { - return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata'; - }, - - isInsideList: function() { - return this.parents().some(function(parent) { - return parent.is('list'); - }); - }, - exec: function(method) { - var manager = this.data('_wlxmlManager'); - if(manager[method]) { - return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1)); + if(this.manager && this.manager[method]) { + return this.manager[method].apply(this.manager, Array.prototype.slice.call(arguments, 1)); } } }); // 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, { - 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]); - - 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; @@ -160,10 +104,32 @@ var manipulate = function(e, params, action) { return element; }; -DocumentNodeElement.prototype = new DocumentElement(); +DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.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.setWlxmlTag(this.wlxmlNode.getTagName()); + this.setWlxmlClass(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]'); }, @@ -218,14 +184,7 @@ $.extend(DocumentNodeElement.prototype, { return this._container().attr('wlxml-tag'); }, setWlxmlTag: function(tag) { - if(tag === this.getWlxmlTag()) { - return; - } - this._container().attr('wlxml-tag', tag); - if(!this.__updatingWlxml) { - this._updateWlxmlManager(); - } }, getWlxmlClass: function() { var klass = this._container().attr('wlxml-class'); @@ -244,31 +203,8 @@ $.extend(DocumentNodeElement.prototype, { else { this._container().removeAttr('wlxml-class'); } - if(!this.__updatingWlxml) { - this._updateWlxmlManager(); - } - }, - setWlxml: function(params) { - this.__updatingWlxml = true; - if(params.tag !== undefined) { - this.setWlxmlTag(params.tag); - } - if(params.klass !== undefined) { - this.setWlxmlClass(params.klass); - } - this._updateWlxmlManager(); - this.__updatingWlxml = false; - }, - _updateWlxmlManager: function() { - var manager = wlxmlManagers.getFor(this); - this.data('_wlxmlManager', manager); - manager.setup(); - }, - is: function(what) { - if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) { - return true; - } - return false; + this.manager = wlxmlManagers.getFor(this); + this.manager.setup(); }, toggleLabel: function(toggle) { var displayCss = toggle ? 'inline-block' : 'none'; @@ -282,45 +218,31 @@ $.extend(DocumentNodeElement.prototype, { }, toggle: function(toggle) { - var mng = this.data('_wlxmlManager'); - if(mng) { - mng.toggle(toggle); + if(this.manager) { + this.manager.toggle(toggle); } } }); // 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 = 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]'); } }); -DocumentTextElement.prototype = new DocumentElement(); +DocumentTextElement.prototype = Object.create(DocumentElement.prototype); $.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();