From c031ffaa79a223a05a4a58de2854c9855e94cc18 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 13 Mar 2014 12:48:11 +0100 Subject: [PATCH] editor: canvas displays span node as block if it contains non span nodes --- .../modules/documentCanvas/canvas/canvas.js | 2 +- .../documentCanvas/canvas/canvas.test.js | 39 +++++++++ .../documentCanvas/canvas/documentElement.js | 80 ++++++++++++++++++- 3 files changed, 118 insertions(+), 3 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index d58ea7b..c6a7c82 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -77,7 +77,7 @@ $.extend(Canvas.prototype, Backbone.Events, { }, createElement: function(wlxmlNode) { - var Factory = wlxmlNode.nodeType === Node.TEXT_NODE ? documentElement.DocumentTextElement : documentElement.DocumentNodeElement; + var Factory = wlxmlNode.nodeType === Node.TEXT_NODE ? documentElement.DocumentTextElement : documentElement.factoryForTag(wlxmlNode.getTagName()); return new Factory(wlxmlNode, this); }, diff --git a/src/editor/modules/documentCanvas/canvas/canvas.test.js b/src/editor/modules/documentCanvas/canvas/canvas.test.js index 346a82b..642438a 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.test.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.test.js @@ -128,6 +128,45 @@ describe('Listening to document changes', function() { }); }); +describe('Displaying span nodes', function() { + it('inlines a span element with a text', function() { + var c = getCanvasFromXML('
Alice
'), + spanElement = c.doc().children()[0]; + expect(spanElement.isBlock()).to.equal(false); + }); + it('renders non-span element as a block', function() { + var c = getCanvasFromXML('
'), + element = c.doc().children()[0], + node = element.wlxmlNode; + + expect(element.isBlock()).to.equal(false, 'initially inline'); + node = node.setTag('div'); + expect(node.getData('canvasElement').isBlock()).to.equal(true, 'block'); + }); + + it('inlines a span element if its block content gets removed', function() { + var c = getCanvasFromXML('
Alice
has
a cat!
'), + spanElement = c.doc().children()[0], + divNode = spanElement.wlxmlNode.contents()[1]; + + expect(spanElement.isBlock()).to.equal(true, 'initially a block'); + divNode.detach(); + expect(spanElement.isBlock()).to.equal(false, 'inlined after removing inner block'); + + spanElement.wlxmlNode.append({tagName: 'div'}); + + expect(spanElement.isBlock()).to.equal(true, 'block again after bringing back inner block'); + }); + + it('keeps showing element as a block after changing its node tag to span if it contains elements of non-span nodes', function() { + var c = getCanvasFromXML('
'), + outerDivElement = c.doc().children()[0], + outerDivNode = outerDivElement.wlxmlNode; + outerDivNode = outerDivNode.setTag('span'); + expect(c.doc().children()[0].isBlock()).to.equal(true); + }); +}); + describe('Cursor', function() { /* globals Node */ var getSelection; diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 27160e7..2265f92 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -19,6 +19,15 @@ var DocumentElement = function(wlxmlNode, canvas) { }; $.extend(DocumentElement.prototype, { + refreshPath: function() { + this.parents().forEach(function(parent) { + parent.refresh(); + }); + this.refresh(); + }, + refresh: function() { + // noop + }, bound: function() { return $.contains(document.documentElement, this.dom()[0]); }, @@ -101,6 +110,7 @@ var manipulate = function(e, params, action) { } var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom(); target[action](element.dom()); + e.refreshPath(); return element; }; @@ -108,6 +118,9 @@ DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentNodeElement.prototype, { + init: function() { + // noo[] + }, createDOM: function() { var dom = $('
') .attr('document-node-element', ''), @@ -128,15 +141,22 @@ $.extend(DocumentNodeElement.prototype, { this.wlxmlNode.contents().forEach(function(node) { container.append(this.canvas.createElement(node).dom()); }.bind(this)); + + this.init(); + return dom; }, _container: function() { return this.dom().children('[document-element-content]'); }, detach: function() { + var parents = this.parents(); this.dom().detach(); this.canvas = null; - return this; + if(parents[0]) { + parents[0].refreshPath(); + } + return this; }, append: function(params) { return manipulate(this, params, 'append'); @@ -205,6 +225,8 @@ $.extend(DocumentNodeElement.prototype, { } this.manager = wlxmlManagers.getFor(this); this.manager.setup(); + + this.refreshPath(); }, toggleLabel: function(toggle) { var displayCss = toggle ? 'inline-block' : 'none'; @@ -221,6 +243,33 @@ $.extend(DocumentNodeElement.prototype, { if(this.manager) { this.manager.toggle(toggle); } + }, + + isBlock: function() { + return this.dom().css('display') === 'block'; + }, + + containsBlock: function() { + return this.children() + .filter(function(child) { + return child instanceof DocumentNodeElement; + }) + .some(function(child) { + if(child.isBlock()) { + return true; + } else { + return child.containsBlock(); + } + }); + }, + + displayAsBlock: function() { + this.dom().css('display', 'block'); + this._container().css('display', 'block'); + }, + displayInline: function() { + this.dom().css('display', 'inline'); + this._container().css('display', 'inline'); } }); @@ -277,6 +326,7 @@ $.extend(DocumentTextElement.prototype, { this.dom().wrap('
'); this.dom().parent().after(element.dom()); this.dom().unwrap(); + this.refreshPath(); return element; }, before: function(params) { @@ -292,18 +342,44 @@ $.extend(DocumentTextElement.prototype, { this.dom().wrap('
'); this.dom().parent().before(element.dom()); this.dom().unwrap(); + this.refreshPath(); return element; }, toggleHighlight: function() { // do nothing for now } + +}); + +var SpanElement = function() { + DocumentNodeElement.apply(this, Array.prototype.slice.call(arguments, 0)); +}; +SpanElement.prototype = $.extend(Object.create(DocumentNodeElement.prototype), { + init: function() { + if(this.containsBlock()) { + this.displayAsBlock(); + } else { + this.displayInline(); + } + }, + refresh: function() { + this.init(); + } }); +var elements = { + span: SpanElement +}; + + return { DocumentElement: DocumentElement, DocumentNodeElement: DocumentNodeElement, - DocumentTextElement: DocumentTextElement + DocumentTextElement: DocumentTextElement, //, + factoryForTag: function(tagName) { + return elements[tagName] || DocumentNodeElement; + } }; }); \ No newline at end of file -- 2.20.1