From: Aleksander Łukasz Date: Mon, 8 Jul 2013 13:00:41 +0000 (+0200) Subject: Wrapping text inside DocumentTextElement with DocumentNodeElement X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/11461f05a370b4112d73258f56b3ab280fd1b6e5?hp=e002a72cd05229f4747aec88ca535c683e1da288 Wrapping text inside DocumentTextElement with DocumentNodeElement --- diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 7d99f36..65cacca 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -1,7 +1,8 @@ define([ 'libs/jquery-1.9.1.min', +'libs/underscore-min', 'modules/documentCanvas/canvas/documentElement' -], function($, documentElement) { +], function($, _, documentElement) { 'use strict'; @@ -15,7 +16,46 @@ $.extend(Canvas.prototype, { doc: function() { if(this.d === null) return null; - return documentElement.wrap(this.d.get(0)); //{wlxmlTag: this.d.prop('tagName')}; + return documentElement.wrap(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; + }, + + wrapText: function(params) { + params = _.extend({textNodeIdx: 0}, params); + if(typeof params.textNodeIdx === 'number') + params.textNodeIdx = [params.textNodeIdx]; + + //var container = params.inside.dom(), + var childrenInside = params.inside.children(), + idx1 = Math.min.apply(Math, params.textNodeIdx), + idx2 = Math.max.apply(Math, params.textNodeIdx), + textNode1 = childrenInside[idx1], + textNode2 = childrenInside[idx2], + sameNode = textNode1.sameNode(textNode2), + prefixOutside = textNode1.getText().substr(0, params.offsetStart), + prefixInside = textNode1.getText().substr(params.offsetStart), + suffixInside = textNode2.getText().substr(0, params.offsetEnd), + suffixOutside = textNode2.getText().substr(params.offsetEnd) + ; + + var wrapperElement = documentElement.DocumentNodeElement.create({tag: params._with.tag, klass: params._with.klass}); + textNode1.after(wrapperElement); + textNode1.detach(); + + wrapperElement.before({text:prefixOutside}); + if(sameNode) { + var core = textNode1.getText().substr(params.offsetStart, params.offsetEnd - params.offsetStart); + wrapperElement.append({text: core}); + } else { + textNode2.detach(); + wrapperElement.append({text: prefixInside}); + for(var i = idx1 + 1; i < idx2; i++) { + wrapperElement.append(childrenInside[i]); + } + + wrapperElement.append({text: suffixInside}); + } + wrapperElement.after({text: suffixOutside}); + return wrapperElement; } }); diff --git a/modules/documentCanvas/canvas/canvas.test3.js b/modules/documentCanvas/canvas/canvas.test3.js index 3a3ea44..23fd35e 100644 --- a/modules/documentCanvas/canvas/canvas.test3.js +++ b/modules/documentCanvas/canvas/canvas.test3.js @@ -212,6 +212,26 @@ describe('Canvas', function() { expect(returned.sameNode(parent)).to.be.true; expect(returned.sameNode(parent2)).to.be.true; }); + + it('wraps part of DocumentTextElement', function() { + var c = canvas.fromXML('
Alice has a cat
'), + text = c.doc().children()[0]; + + var returned = text.wrapWithNodeElement({tag: 'header', klass: 'some.class', start: 5, end: 12}), + children = c.doc().children(); + + expect(children.length).to.equal(3); + + expect(children[0]).to.be.instanceOf(documentElement.DocumentTextElement); + expect(children[0].getText()).to.equal('Alice'); + + expect(children[1].sameNode(returned)).to.be.true; + expect(children[1].children().length).to.equal(1); + expect(children[1].children()[0].getText()).to.equal(' has a '); + + expect(children[2]).to.be.instanceOf(documentElement.DocumentTextElement); + expect(children[2].getText()).to.equal('cat'); + }); }); }); diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index 6fea275..d90fe63 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -4,15 +4,20 @@ define([ 'use strict'; + // DocumentElement represents a node from WLXML document rendered inside Canvas -var DocumentElement = function(htmlElement) { +var DocumentElement = function(htmlElement, canvas) { if(arguments.length === 0) return; + this.canvas = canvas; this.$element = $(htmlElement); this.wlxmlTag = this.$element.prop('tagName'); }; $.extend(DocumentElement.prototype, { + dom: function() { + return this.$element; + }, children: function() { var toret = []; if(this instanceof DocumentTextElement) @@ -20,20 +25,21 @@ $.extend(DocumentElement.prototype, { var elementContent = this.$element.contents(); + var element = this; elementContent.each(function(idx) { - var element = documentElementFromHTMLElement(this); - if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (element instanceof DocumentTextElement) && $.trim($(this).text()) === '') + var childElement = documentElementFromHTMLElement(this, element.canvas); + if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '') return true; - if(idx > 0 && element instanceof DocumentTextElement) { + if(idx > 0 && childElement instanceof DocumentTextElement) { if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '') return true; } - toret.push(element); + toret.push(childElement); }); return toret; }, parent: function() { - return documentElementFromHTMLElement(this.$element.parent()[0]); + return documentElementFromHTMLElement(this.$element.parent()[0], this.canvas); }, sameNode: function(other) { @@ -42,7 +48,7 @@ $.extend(DocumentElement.prototype, { wrapWithNodeElement: function(wlxmlNode) { this.$element.wrap($('<' + wlxmlNode.tag + ' class="' + wlxmlNode.klass + '"">')[0]); - return documentElementFromHTMLElement(this.$element.parent().get(0)); + return documentElementFromHTMLElement(this.$element.parent().get(0), this.canvas); }, childIndex: function(child) { @@ -55,15 +61,21 @@ $.extend(DocumentElement.prototype, { } }); return toret; + }, + + detach: function() { + this.$element.detach(); + this.canvas = null; } }); -var DocumentNodeElement = function(htmlElement) { - DocumentElement.call(this, htmlElement); + +var DocumentNodeElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); }; -var DocumentTextElement = function(htmlElement) { - DocumentElement.call(this, htmlElement); +var DocumentTextElement = function(htmlElement, canvas) { + DocumentElement.call(this, htmlElement, canvas); }; DocumentNodeElement.prototype = new DocumentElement(); @@ -105,6 +117,12 @@ DocumentNodeElement.createDOM = function(params) { return dom; }; + +DocumentNodeElement.create = function(params) { + return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]); +}; + + $.extend(DocumentTextElement.prototype, { setText: function(text) { this.$element[0].data = text; @@ -113,7 +131,7 @@ $.extend(DocumentTextElement.prototype, { return this.$element.text(); }, after: function(params) { - if(params.text || params instanceof DocumentTextElement) + if(params instanceof DocumentTextElement || params.text) return false; var dom; if(params instanceof DocumentNodeElement) { @@ -125,19 +143,34 @@ $.extend(DocumentTextElement.prototype, { this.$element.parent().after(dom[0]); this.$element.unwrap(); return documentElementFromHTMLElement(dom[0]); + }, + wrapWithNodeElement: function(wlxmlNode) { + if(wlxmlNode.start && wlxmlNode.end) { + return this.canvas.wrapText({ + inside: this.parent(), + textNodeIdx: this.parent().childIndex(this), + offsetStart: wlxmlNode.start, + offsetEnd: wlxmlNode.end, + _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass} + }); + } else { + return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode); + } } }); -var documentElementFromHTMLElement = function(htmlElement) { +var documentElementFromHTMLElement = function(htmlElement, canvas) { + // if(!canvas) + // throw 'no canvas specified'; if(htmlElement.nodeType === Node.ELEMENT_NODE) - return new DocumentNodeElement(htmlElement); + return new DocumentNodeElement(htmlElement, canvas); if(htmlElement.nodeType === Node.TEXT_NODE) - return new DocumentTextElement(htmlElement); + return new DocumentTextElement(htmlElement, canvas); }; return { - wrap: function(htmlElement) { - return documentElementFromHTMLElement(htmlElement); + wrap: function(htmlElement, canvas) { + return documentElementFromHTMLElement(htmlElement, canvas); }, DocumentElement: DocumentElement, DocumentNodeElement: DocumentNodeElement,