X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/b33289a3a89915e0418ffe66b34e540aa3ab75ba..b7c15f28d309a6281ab7a50765822b4a83baa5a5:/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 210c492..f4505b0 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -2,66 +2,37 @@ define([ 'libs/jquery', 'libs/underscore', 'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/widgets', 'modules/documentCanvas/canvas/wlxmlManagers' -], function($, _, utils, widgets, wlxmlManagers) { +], function($, _, utils, wlxmlManagers) { 'use strict'; +/* global Node:false, document:false */ // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement, canvas) { - if(arguments.length === 0) +var DocumentElement = function(wlxmlNode, canvas) { + if(arguments.length === 0) { return; + } + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); -} - - -var elementTypeFromWlxmlNode = function(wlxmlNode) { - return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement; -} -$.extend(DocumentElement, { - create: function(node, canvas) { - return elementTypeFromWlxmlNode(node).create(node, canvas); - }, - - createDOM: function(wlxmlNode) { - return elementTypeFromParams(wlxmlNode).createDOM(params); - }, - - 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); +}; $.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) - return DocumentElement.fromHTMLElement(parents[0], this.canvas); + if(parents.length) { + return this.canvas.getDocumentElement(parents[0]); + } return null; }, @@ -86,15 +57,17 @@ $.extend(DocumentElement.prototype, { getVerticallyFirstTextElement: function() { var toret; this.children().some(function(child) { - if(!child.isVisible()) + if(!child.isVisible()) { return false; // continue + } if(child instanceof DocumentTextElement) { toret = child; return true; // break } else { toret = child.getVerticallyFirstTextElement(); - if(toret) + if(toret) { return true; // break + } } }); return toret; @@ -125,62 +98,26 @@ $.extend(DocumentElement.prototype, { }, 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) { - return this.fromHTMLElement(this.createDOM(wlxmlNode, canvas)[0], canvas); - }, - - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, - - createDOM: 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(DocumentElement.create(node).dom()); - }).bind(this)); - - return dom; - } - -}); var manipulate = function(e, params, action) { var element; if(params instanceof DocumentElement) { element = params; } else { - element = DocumentElement.create(params); + element = e.canvas.createElement(params); } var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); target[action](element.dom()); @@ -191,6 +128,28 @@ 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.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]'); }, @@ -200,8 +159,6 @@ $.extend(DocumentNodeElement.prototype, { return this; }, append: function(params) { - if(params.tag !== 'span') - this.data('orig-end', undefined); return manipulate(this, params, 'append'); }, prepend: function(params) { @@ -216,21 +173,17 @@ $.extend(DocumentNodeElement.prototype, { }, children: function() { var toret = []; - if(this instanceof DocumentTextElement) + if(this instanceof DocumentTextElement) { return toret; + } var elementContent = this._container().contents(); var element = this; - elementContent.each(function(idx) { - var childElement = DocumentElement.fromHTMLElement(this, element.canvas); - if(childElement === undefined) - return true; - if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '') + elementContent.each(function() { + var childElement = element.canvas.getDocumentElement(this); + if(childElement === undefined) { return true; - if(idx > 0 && childElement instanceof DocumentTextElement) { - if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') - return true; } toret.push(childElement); }); @@ -251,46 +204,32 @@ $.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'); - if(klass) + if(klass) { return klass.replace(/-/g, '.'); + } return undefined; }, setWlxmlClass: function(klass) { - if(klass === this.getWlxmlClass()) + if(klass === this.getWlxmlClass()) { return; - if(klass) + } + if(klass) { this._container().attr('wlxml-class', klass.replace(/\./g, '-')); - else + } + 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(); + } + this.manager = wlxmlManagers.getFor(this); + this.manager.setup(); }, is: function(what) { - if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) + if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) { return true; + } return false; }, toggleLabel: function(toggle) { @@ -305,36 +244,19 @@ $.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, { - createDOM: function(wlxmlTextNode) { - var dom = $('
') - .attr('document-text-element', '') - .text(wlxmlTextNode.getText() || utils.unicode.ZWS), - element = this.fromHTMLElement(dom[0], this); - element.data('wlxmlNode', wlxmlTextNode); - return dom; - }, - - create: function(wlxmlTextNode, canvas) { - return this.fromHTMLElement(this.createDOM(wlxmlTextNode)[0]); - }, - - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, isContentContainer: function(htmlElement) { return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]'); } @@ -343,12 +265,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(); @@ -358,12 +278,6 @@ $.extend(DocumentTextElement.prototype, { setText: function(text) { this.dom().contents()[0].data = text; }, - appendText: function(text) { - this.dom().contents()[0].data += text; - }, - prependText: function(text) { - this.dom().contents()[0].data = text + this.dom().contents()[0].data; - }, getText: function(options) { options = _.extend({raw: false}, options || {}); var toret = this.dom().text(); @@ -377,13 +291,14 @@ $.extend(DocumentTextElement.prototype, { return this.dom().contents()[0].data === utils.unicode.ZWS; }, after: function(params) { - if(params instanceof DocumentTextElement || params.text) + if(params instanceof DocumentTextElement || params.text) { return false; + } var element; if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentElement.create(params, this.canvas); + element = this.canvas.createElement(params); } this.dom().wrap('
'); this.dom().parent().after(element.dom()); @@ -391,13 +306,14 @@ $.extend(DocumentTextElement.prototype, { return element; }, before: function(params) { - if(params instanceof DocumentTextElement || params.text) + if(params instanceof DocumentTextElement || params.text) { return false; + } var element; if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params, this.canvas); + element = this.canvas.createElement(params); } this.dom().wrap('
'); this.dom().parent().before(element.dom()); @@ -405,25 +321,6 @@ $.extend(DocumentTextElement.prototype, { return element; }, - divide: function(params) { - var myText = this.getText(); - - if(params.offset === myText.length) - return this.after(params); - if(params.offset === 0) - return this.before(params); - - var lhsText = myText.substr(0, params.offset), - rhsText = myText.substr(params.offset), - newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas), - rhsTextElement = DocumentTextElement.create({text: rhsText}); - - this.setText(lhsText); - this.after(newElement); - newElement.after(rhsTextElement); - return newElement; - }, - toggleHighlight: function() { // do nothing for now }