From 9c680e17e94d8299a55ac811bca76e73339d02f0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Sun, 14 Jul 2013 15:10:10 +0200 Subject: [PATCH] Wrapping text node containing DocumentTextElement's text --- modules/documentCanvas/canvas/canvas.js | 11 +++++-- modules/documentCanvas/canvas/canvas.test3.js | 29 ++++++++++++++----- .../documentCanvas/canvas/documentElement.js | 24 +++++++++++---- modules/documentCanvas/nodes.less | 6 +++- 4 files changed, 54 insertions(+), 16 deletions(-) diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 9506049..cf46d5e 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -22,7 +22,8 @@ $.extend(Canvas.prototype, { var currentTag = $(this); if(currentTag.attr('wlxml-tag')) return; - var toret = $('
').attr('wlxml-tag', currentTag.prop('tagName').toLowerCase()); + var toret = $('
') + .attr('wlxml-tag', currentTag.prop('tagName').toLowerCase()); //toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);})); for(var i = 0; i < this.attributes.length; i++) { var attr = this.attributes.item(i); @@ -57,9 +58,15 @@ $.extend(Canvas.prototype, { this.data = $.trim(this.data); if(this.data.length === 0 && oldLength > 0 && el.parent().contents().length === 1) this.data = ' '; - if(this.data.length === 0) + if(this.data.length === 0) { $(this).remove(); + return true; // continue + } } + + var wrapper = documentElement.DocumentTextElement.create({text: this.data}); + $(this).before(wrapper.dom()); + $(this).remove(); }); this.d = wrapper.children(0); diff --git a/modules/documentCanvas/canvas/canvas.test3.js b/modules/documentCanvas/canvas/canvas.test3.js index 08e6e0f..3778698 100644 --- a/modules/documentCanvas/canvas/canvas.test3.js +++ b/modules/documentCanvas/canvas/canvas.test3.js @@ -27,10 +27,18 @@ describe('Canvas', function() { \ '); var expected = '
' - + 'This is some text without its own wrapping tag.' - + '
This is a paragraph.
' - + '
This is text in a div
with some inline text
.
' - + 'This is some text without its own wrapping tag.' + + '
This is some text without its own wrapping tag.
' + + '
' + + '
This is a paragraph.
' + + '
' + + '
' + + '
This is text in a div
' + + '
' + + '
with some inline text
' + + '
' + + '
.
' + + '
' + + '
This is some text without its own wrapping tag.
' + '
'; expect(c.doc().dom()[0].isEqualNode($(expected)[0])).to.be.true; }); @@ -54,9 +62,13 @@ describe('Canvas', function() { }); describe('Internal HTML representation of a DocumentTextElement', function() { - it('is just a TextNode', function() { + it('is text node wrapped in a div with wlxml-text attribute set', function() { var dom = canvas.fromXML('
Alice
').doc().children()[0].dom(); - expect(dom[0].nodeType === Node.TEXT_NODE); + expect(dom.prop('tagName')).to.equal('DIV'); + expect(dom.attr('wlxml-text')).to.equal(''); + expect(dom.contents().length).to.equal(1); + expect(dom.contents()[0].nodeType).to.equal(Node.TEXT_NODE); + expect($(dom.contents()[0]).text()).to.equal('Alice'); }); }); @@ -127,7 +139,7 @@ describe('Canvas', function() { it('returns DocumentTextElement instance from Text Node', function() { var c = canvas.fromXML('
Alice
'), aliceElement = c.doc().children()[0], - textNode = aliceElement.dom()[0], + textNode = aliceElement.dom().contents()[0], element = c.getDocumentElement(textNode); expect(textNode.nodeType).to.equal(Node.TEXT_NODE, 'text node selected'); @@ -921,8 +933,9 @@ describe('Canvas', function() { it('returns position when browser selection collapsed', function() { var c = canvas.fromXML('
Alice has a cat
'), dom = c.doc().dom(), - text = dom.contents()[0]; + text = $(dom.contents()[0]).contents()[0]; + expect(text.nodeType).to.equal(Node.TEXT_NODE, 'correct node selected'); expect($(text).text()).to.equal('Alice has a cat'); getSelection.returns({ diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 6d76bf4..d2d3a64 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -11,7 +11,7 @@ var DocumentElement = function(htmlElement, canvas) { if(arguments.length === 0) return; this.canvas = canvas; - this.$element = $(htmlElement); + this._setupDOMHandler(htmlElement); } var elementTypeFromParams = function(params) { @@ -29,14 +29,19 @@ $.extend(DocumentElement, { }, fromHTMLElement: function(htmlElement, canvas) { - if(htmlElement.nodeType === Node.ELEMENT_NODE) + var $element = $(htmlElement); + if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag')) return DocumentNodeElement.fromHTMLElement(htmlElement, canvas); - if(htmlElement.nodeType === Node.TEXT_NODE) + if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined)) return DocumentTextElement.fromHTMLElement(htmlElement, canvas); + return undefined; } }); $.extend(DocumentElement.prototype, { + _setupDOMHandler: function(htmlElement) { + this.$element = $(htmlElement); + }, dom: function() { return this.$element; }, @@ -175,7 +180,9 @@ var DocumentTextElement = function(htmlElement, canvas) { $.extend(DocumentTextElement, { createDOM: function(params) { - return $(document.createTextNode(params.text)); + return $('
') + .attr('wlxml-text', '') + .text(params.text); }, create: function(params, canvas) { @@ -190,8 +197,15 @@ $.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; + }, setText: function(text) { - this.dom()[0].data = text; + this.dom().contents()[0].data = text; }, getText: function() { return this.dom().text(); diff --git a/modules/documentCanvas/nodes.less b/modules/documentCanvas/nodes.less index 0313b0b..3b7f053 100644 --- a/modules/documentCanvas/nodes.less +++ b/modules/documentCanvas/nodes.less @@ -1,3 +1,7 @@ +[wlxml-text] { + display: inline; +} + [wlxml-tag] { float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */ border-color: white; @@ -9,7 +13,7 @@ } [wlxml-tag=span] { - display:inline-block; + display:inline; min-width: 10px; } -- 2.20.1