X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/71b7ba4d1d17adc39165914016fa892671cc4316..4ab522037ab350b3f0257130bc6e4dbc6f183021:/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 ee340f1..27160e7 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -1,59 +1,24 @@ define([ 'libs/jquery', 'libs/underscore', -'modules/documentCanvas/classAttributes', 'modules/documentCanvas/canvas/utils', -'modules/documentCanvas/canvas/widgets', 'modules/documentCanvas/canvas/wlxmlManagers' -], function($, _, classAttributes, 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) - return; +var DocumentElement = function(wlxmlNode, canvas) { + this.wlxmlNode = wlxmlNode; this.canvas = canvas; - this._setupDOMHandler(htmlElement); -} - -var elementTypeFromParams = function(params) { - return params.text !== undefined ? DocumentTextElement : DocumentNodeElement; + this.$element = this.createDOM(); + this.$element.data('canvas-element', this); }; -var elementTypeFromNode = function(wlxmlNode) { - return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement; -} - -$.extend(DocumentElement, { - create: function(params, canvas) { - return elementTypeFromParams(params).create(params); - }, - - create2: function(node, canvas) { - return elementTypeFromNode(node).create2(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; - } -}); - $.extend(DocumentElement.prototype, { - _setupDOMHandler: function(htmlElement) { - this.$element = $(htmlElement); - }, bound: function() { return $.contains(document.documentElement, this.dom()[0]); }, @@ -62,8 +27,9 @@ $.extend(DocumentElement.prototype, { }, 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; }, @@ -81,29 +47,17 @@ $.extend(DocumentElement.prototype, { return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0]; }, - wrapWithNodeElement: function(wlxmlNode) { - var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass}, this); - this.dom().replaceWith(wrapper.dom()); - wrapper.append(this); - return wrapper; - }, - - 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 } else { toret = child.getVerticallyFirstTextElement(); - if(toret) + if(toret) { return true; // break + } } }); return toret; @@ -123,78 +77,38 @@ $.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, { - createDOM: function(params, 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.setWlxml({tag: params.tag, klass: params.klass}); - if(params.meta) { - _.keys(params.meta).forEach(function(key) { - element.setWlxmlMetaAttr(key, params.meta[key]); - }); - } - element.data('other-attrs', params.others); - - if(params.rawChildren && params.rawChildren.length) { - container.append(params.rawChildren); - } else if(params.prepopulateOnEmpty) { - element.append(DocumentTextElement.create({text: ''})); - } - return dom; - }, - - create: function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params, canvas)[0], canvas); - }, +var manipulate = function(e, params, action) { + var element; + if(params instanceof DocumentElement) { + element = params; + } else { + element = e.canvas.createElement(params); + } + var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); + target[action](element.dom()); + return element; +}; - fromHTMLElement: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - }, +DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); - createDOM2: function(wlxmlNode, canvas) { - - // tag: wlxmlNode.getTagName(), - // klass: wlxmlNode.getClass(), //currentTag.attr('class'), - // meta: wlxmlNode.getMetaAttributes(), //meta, - // others: wlxmlNode.getOtherAttributes(), // ~ //others, - // rawChildren: wlxmlNode.contents(), - // prepopulateOnEmpty: true +$.extend(DocumentNodeElement.prototype, { + createDOM: function() { var dom = $('
') .attr('document-node-element', ''), widgetsContainer = $('
') @@ -206,198 +120,25 @@ $.extend(DocumentNodeElement, { dom.append(widgetsContainer, container); // Make sure widgets aren't navigable with arrow keys widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); + this.$element = dom; //@!!! - var element = this.fromHTMLElement(dom[0], canvas); - - element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()}); - - _.keys(wlxmlNode.getMetaAttributes()).forEach(function(key) { - element.setWlxmlMetaAttr(key, params.meta[key]); - }); - - //element.data('other-attrs', params.others); - - // element.contents + this.setWlxmlTag(this.wlxmlNode.getTagName()); + this.setWlxmlClass(this.wlxmlNode.getClass()); - wlxmlNode.contents().forEach((function(node) { - container.append(DocumentElement.create2(node).dom()); - }).bind(this)); - - // if(params.rawChildren && params.rawChildren.length) { - // container.append(params.rawChildren); - // } else if(params.prepopulateOnEmpty) { - // element.append(DocumentTextElement.create({text: ''})); - // } + this.wlxmlNode.contents().forEach(function(node) { + container.append(this.canvas.createElement(node).dom()); + }.bind(this)); return dom; }, - - create2: function(params, canvas) { - return this.fromHTMLElement2(this.createDOM2(params, canvas)[0], canvas); - }, - - fromHTMLElement2: function(htmlElement, canvas) { - return new this(htmlElement, canvas); - } -}); - -var manipulate = function(e, params, action) { - var element; - if(params instanceof DocumentElement) { - element = params; - } else { - element = DocumentElement.create(params); - } - var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); - target[action](element.dom()); - return element; -}; - -DocumentNodeElement.prototype = new DocumentElement(); - - -$.extend(DocumentNodeElement.prototype, { _container: function() { return this.dom().children('[document-element-content]'); }, detach: function() { - var parent = this.parent(); - if(!parent) - return; - - var parentChildren = parent.children(), - myIdx = parent.childIndex(this); - - if(myIdx > 0 && myIdx < parentChildren.length) { - if((parentChildren[myIdx-1] instanceof DocumentTextElement) && (parentChildren[myIdx+1] instanceof DocumentTextElement)) { - parentChildren[myIdx-1].appendText(parentChildren[myIdx+1].getText()); - parentChildren[myIdx+1].detach(); - } - } this.dom().detach(); this.canvas = null; return this; }, - unwrapContents: function() { - var parent = this.parent(); - if(!parent) - return; - - var parentChildren = parent.children(), - myChildren = this.children(), - myIdx = parent.childIndex(this); - - if(myChildren.length === 0) - return this.detach(); - - var moveLeftRange, moveRightRange, leftMerged; - - if(myIdx > 0 && (parentChildren[myIdx-1] instanceof DocumentTextElement) && (myChildren[0] instanceof DocumentTextElement)) { - parentChildren[myIdx-1].appendText(myChildren[0].getText()); - myChildren[0].detach(); - moveLeftRange = true; - leftMerged = true; - } else { - leftMerged = false; - } - - if(!(leftMerged && myChildren.length === 1)) { - if(myIdx < parentChildren.length - 1 && (parentChildren[myIdx+1] instanceof DocumentTextElement) && (myChildren[myChildren.length-1] instanceof DocumentTextElement)) { - parentChildren[myIdx+1].prependText(myChildren[myChildren.length-1].getText()); - myChildren[myChildren.length-1].detach(); - moveRightRange = true; - } - } - - var childrenLength = this.children().length; - this.children().forEach(function(child) { - this.before(child); - }.bind(this)); - - this.detach(); - - return { - element1: parent.children()[myIdx + (moveLeftRange ? -1 : 0)], - element2: parent.children()[myIdx + childrenLength-1 + (moveRightRange ? 1 : 0)] - }; - }, - 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); - }, - toXML: function(level) { - var node = $('<' + this.getWlxmlTag() + '>'); - - if(this.getWlxmlClass()) - node.attr('class', this.getWlxmlClass()); - var meta = this.getWlxmlMetaAttrs(); - meta.forEach(function(attr) { - if(attr.value) - node.attr('meta-' + attr.name, attr.value); - }); - _.keys(this.data('other-attrs') || {}).forEach(function(key) { - node.attr(key, this.data('other-attrs')[key]); - }, this); - - var addFormatting = function() { - var toret = $('
'); - var formattings = {}; - - if(this.data('orig-before') !== undefined) { - if(this.data('orig-before')) { - toret.prepend(document.createTextNode(this.data('orig-before'))); - } - } else if(level && this.getWlxmlTag() !== 'span') { - toret.append('\n' + (new Array(level * 2 + 1)).join(' ')); - } - - toret.append(node); - - if(this.data('orig-after')) { - toret.append(document.createTextNode(this.data('orig-after'))); - } - - /* Inside node */ - if(this.data('orig-begin')) { - node.prepend(this.data('orig-begin')); - formattings.begin = true; - } - - if(this.data('orig-end') !== undefined) { - if(this.data('orig-end')) { - node.append(this.data('orig-end')); - } - } else if(this.getWlxmlTag() !== 'span' && children.length){ - node.append('\n' + (new Array(level * 2 + 1)).join(' ')); - } - - return {parts: toret.contents(), formattings: formattings}; - }.bind(this); - - - - var children = this.children(), - childParts; - - var formatting = addFormatting(node); - - for(var i = children.length - 1; i >= 0; i--) { - childParts = children[i].toXML(level + 1); - if(typeof childParts === 'string') - childParts = [document.createTextNode(childParts)]; - - if(formatting.formattings.begin) { - $(node.contents()[0]).after(childParts); - } else - node.prepend(childParts); - } - return formatting.parts; - }, append: function(params) { - if(params.tag !== 'span') - this.data('orig-end', undefined); return manipulate(this, params, 'append'); }, prepend: function(params) { @@ -412,21 +153,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); }); @@ -447,72 +184,28 @@ $.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; - - this.getWlxmlMetaAttrs().forEach(function(attr) { - if(!classAttributes.hasMetaAttr(klass, attr.name)) - this.dom().removeAttr('wlxml-meta-' + attr.name); - }, this); - - 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(); - }, - is: function(what) { - if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass())) - return true; - return false; - }, - - getWlxmlMetaAttr: function(attr) { - return this.dom().attr('wlxml-meta-'+attr); - }, - - getWlxmlMetaAttrs: function() { - var toret = []; - var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass()); - attrList.all.forEach(function(attr) { - toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''}); - }, this); - return toret; - }, - - setWlxmlMetaAttr: function(attr, value) { - this.dom().attr('wlxml-meta-'+attr, value); + } + this.manager = wlxmlManagers.getFor(this); + this.manager.setup(); }, - toggleLabel: function(toggle) { var displayCss = toggle ? 'inline-block' : 'none'; var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label'); @@ -525,60 +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, { - createDOM: function(params) { - return $('
') - .attr('document-text-element', '') - .text(params.text || utils.unicode.ZWS); - }, - - createDOM2: function(wlxmlTextNode) { - return $('
') - .attr('document-text-element', '') - .text(wlxmlTextNode.getText() || utils.unicode.ZWS); - }, - - create: function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params)[0]); - }, - - create2: function(wlxmlTextNode, canvas) { - return this.fromHTMLElement(this.createDOM2(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]'); } }); -DocumentTextElement.prototype = new DocumentElement(); +DocumentTextElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentTextElement.prototype, { - toXML: function(parent) { - return this.getText(); - }, - _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(); @@ -588,27 +252,27 @@ $.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() { - return this.dom().text().replace(utils.unicode.ZWS, ''); + getText: function(options) { + options = _.extend({raw: false}, options || {}); + var toret = this.dom().text(); + if(!options.raw) { + toret = toret.replace(utils.unicode.ZWS, ''); + } + return toret; }, isEmpty: function() { // Having at least Zero Width Space is guaranteed be Content Observer 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 = DocumentNodeElement.create(params, this.canvas); + element = this.canvas.createElement(params); } this.dom().wrap('
'); this.dom().parent().after(element.dom()); @@ -616,115 +280,20 @@ $.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()); this.dom().unwrap(); return element; }, - wrapWithNodeElement: function(wlxmlNode) { - if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') { - return this.canvas.wrapText({ - inside: this.parent(), - textNodeIdx: this.parent().childIndex(this), - offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end), - offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end), - _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass} - }); - } else { - return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode); - } - }, - unwrap: function() { - var parent = this.parent(), - toret; - if(parent.children().length === 1) { - toret = parent.parent(); - var grandParent = parent.parent(); - if(grandParent) { - var grandParentChildren = grandParent.children(), - idx = grandParent.childIndex(parent), - prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null, - next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null; - - prev = (prev instanceof DocumentTextElement) ? prev : null; - next = (next instanceof DocumentTextElement) ? next : null; - - if(prev && next) { - prev.setText(prev.getText() + this.getText() + next.getText()); - next.detach(); - } else if (prev || next) { - var target = prev ? prev : next, - newText = prev ? target.getText() + this.getText() : this.getText() + target.getText(); - target.setText(newText); - } else { - parent.after(this); - } - } else { - parent.after(this); - } - parent.detach(); - return toret; - } - }, - split: function(params) { - var parentElement = this.parent(), - myIdx = parentElement.childIndex(this), - myCanvas = this.canvas, - passed = false, - succeedingChildren = [], - thisElement = this, - prefix = this.getText().substr(0, params.offset), - suffix = this.getText().substr(params.offset); - - parentElement.children().forEach(function(child) { - if(passed) - succeedingChildren.push(child); - if(child.sameNode(thisElement)) - passed = true; - }); - - if(prefix.length > 0) - this.setText(prefix); - else - this.detach(); - - var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas); - parentElement.after(newElement); - - if(suffix.length > 0) - newElement.append({text: suffix}); - succeedingChildren.forEach(function(child) { - newElement.append(child); - }); - - return {first: parentElement, second: newElement}; - }, - 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