From 30ab52867dd38bdf8bda76e60be833b2603fb6ab Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Fri, 21 Jun 2013 14:19:16 +0200 Subject: [PATCH 01/16] canvas api wip: remove node --- modules/documentCanvas/canvas.js | 6 ++++++ modules/documentCanvas/tests/canvas.test.js | 11 +++++++++++ 2 files changed, 17 insertions(+) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 20c286a..92c02c6 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -106,6 +106,12 @@ Canvas.prototype.splitNode = function(options) { return newNode; } +Canvas.prototype.removeNode = function(options) { + var toRemove = $(this.content.find('#' + options.node.id).get(0)); + toRemove.remove(); + +} + Canvas.prototype.createList = function(options) { var element1 = $(this.content.find('#' + options.start.id).get(0)); var element2 = $(this.content.find('#' + options.end.id).get(0)); diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index a948787..6ba3f42 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -93,6 +93,17 @@ define([ ); }); + test('remove node', function() { + var c = new canvas.Canvas('
Fancy and nice header 1
'); + var span = c.getNode({tag: 'span'})[0]; + var siblings = c.removeNode({node:span}); + assert.xmlEqual(c.toXML(), '\ +
\ +
Fancy and nice 1
\ +
' + ); + }); + test('list', function() { var c = new canvas.Canvas('
Alice
has
a cat
'); var div1 = c.getNode({tag:'div'})[0]; -- 2.20.1 From 7234259fa025569d6a7682aa6c74fdcfb3ca7e17 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Fri, 21 Jun 2013 14:24:55 +0200 Subject: [PATCH 02/16] canvas api wip: getting previous node --- modules/documentCanvas/canvas.js | 15 +++++++++++++-- modules/documentCanvas/tests/canvas.test.js | 16 +++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 92c02c6..eb0fd0b 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -36,6 +36,14 @@ Canvas.prototype.getNode = function(desc) { return toret; } +Canvas.prototype.getPreviousNode = function(options) { + var element = $(this.content.find('#' + options.node.id).get(0)); + var prev = element.prev() + if(prev.length === 0) + prev = element.parent(); + return new wlxmlNode.Node(prev); +} + Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) { var toBlock = ['div', 'document', 'section', 'header']; var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span'; @@ -49,8 +57,11 @@ Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) { Canvas.prototype.insertNode = function(options) { var element = $(this.content.find('#' + options.context.id).get(0)); - if(options.place == 'after') - element[options.place](this._createNode(options.tag, options.klass)); + if(options.place == 'after') { + var node = this._createNode(options.tag, options.klass); + element[options.place](node); + return node; + } else if(options.place == 'wrapText') { var elementContents = element.contents(); if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3) diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 6ba3f42..57ad625 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -54,6 +54,20 @@ define([ assert.equal(header.tag, 'header'); assert.equal(header.klass, 'some-class'); }); + + test('getting previous node', function() { + var c = new canvas.Canvas('
Div 1
Div 2
'); + var secondDiv = c.getNode({tag: 'div'})[1]; + var firstDiv = c.getPreviousNode({node: secondDiv}); + assert.equal(firstDiv.klass, 'some-class'); + }) + + test('pervious node of node without "previous siblings" is its parent', function() { + var c = new canvas.Canvas('
Div 1
'); + var div = c.getNode({tag: 'div'})[0]; + var section = c.getPreviousNode({node: div}); + assert.equal(section.tag, 'section'); + }) test('inserting after', function() { var c = new canvas.Canvas('
Header 1
'); @@ -119,7 +133,7 @@ define([
a cat
\ \ '); - + }); }); -- 2.20.1 From b554451bd332b417a9304fd60fafe116220a9ca4 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Fri, 21 Jun 2013 14:43:45 +0200 Subject: [PATCH 03/16] canvas manager wip: experiments --- modules/documentCanvas/canvasManager.js | 78 ++++++++++++++++--------- 1 file changed, 52 insertions(+), 26 deletions(-) diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index 886ce07..6a0fc5c 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -5,6 +5,19 @@ define([ 'use strict'; +var getCursorPosition = function() { + var selection = window.getSelection(); + var anchorNode = $(selection.anchorNode); + var parent = anchorNode.parent(); + return { + textNode: anchorNode, + textNodeOffset: selection.anchorOffset, + textNodeIndex: parent.contents().index(anchorNode), + parentNode: parent, + isAtEnd: selection.anchorOffset === anchorNode.text().length + } +}; + var Manager = function(canvas, sandbox) { this.canvas = canvas; this.sandbox = sandbox; @@ -34,6 +47,7 @@ var Manager = function(canvas, sandbox) { canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { var anchor = $(window.getSelection().anchorNode); + if(anchor[0].nodeType === Node.TEXT_NODE) anchor = anchor.parent(); if(!anchor.is('[wlxml-tag]')) @@ -43,17 +57,10 @@ var Manager = function(canvas, sandbox) { canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { if(e.which === 13) { - e.preventDefault(); - manager.insertNewNode(null, null); + manager.onEnterKey(e); } if(e.which === 8) { - var anchor = window.getSelection().anchorNode; - var len = anchor.length; - console.log(len); - if(len === 1) { - e.preventDefault(); - $(anchor).parent().text(''); - } + manager.onBackspaceKey(e); } }); @@ -81,7 +88,7 @@ Manager.prototype.selectNode = function(wlxmlNode, options) { nodeElement.addClass('rng-module-documentCanvas-currentNode'); if(options.movecaret) { - this.movecaretToNode(nodeElement); + this.movecaretToNode(nodeElement, options.movecaret); } this.currentNode = wlxmlNode; @@ -125,10 +132,14 @@ Manager.prototype.selectFirstNode = function() { this.selectNode(new wlxmlNode.Node(node), {movecaret: true}); }; -Manager.prototype.movecaretToNode = function(nodeElement) { +Manager.prototype.movecaretToNode = function(nodeElement, where) { var range = document.createRange(); range.selectNodeContents(nodeElement[0]); - range.collapse(true); + + var collapseArg = true; + if(where === 'end') + collapseArg = false; + range.collapse(collapseArg); var selection = document.getSelection(); selection.removeAllRanges() selection.addRange(range); @@ -139,24 +150,39 @@ Manager.prototype.toggleGrid = function(toggle) { this.gridToggled = toggle; }; -Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { - //TODO: Insert inline - var anchor = $(window.getSelection().anchorNode); - var anchorOffset = window.getSelection().anchorOffset; - - var parent = anchor.parent(); - var idx = parent.contents().index(anchor); - - if(anchorOffset < anchor.text().length) { - var newNode = this.canvas.splitNode({node: {id: parent.attr('id')}, textNodeIdx: idx, offset: anchorOffset}); - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true}); +Manager.prototype.onEnterKey = function(e) { + e.preventDefault(); + var pos = getCursorPosition(); + var insertedNode; + if(pos.isAtEnd) { + insertedNode = this.canvas.insertNode({place: 'after', context: {id: pos.parentNode.attr('id')}, tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')}); + } else { + insertedNode = this.canvas.splitNode({node: {id: pos.parentNode.attr('id')}, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset}); } - - - + if(insertedNode.length) + this.selectNode(new wlxmlNode.Node(insertedNode), {movecaret: true}); this.sandbox.publish('contentChanged'); }; +Manager.prototype.onBackspaceKey = function(e) { + var pos = getCursorPosition(); + var len = pos.textNode.text().length; + if(len === 1) { + // Prevent deleting node by browser after last character removed; + e.preventDefault(); + pos.parentNode.text(''); + } + if(len === 0) { + e.preventDefault(); + var toRemove = new wlxmlNode.Node(pos.textNode); + var prevNode = this.canvas.getPreviousNode({node:toRemove}); + this.canvas.removeNode({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem + this.selectNode(prevNode, {movecaret: 'end'}); + } +} + + + return Manager; }); \ No newline at end of file -- 2.20.1 From 9eb5d6423cea01acb7589519480465394882ab7c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Fri, 21 Jun 2013 14:55:03 +0200 Subject: [PATCH 04/16] Cleanup: removing unused code --- modules/documentCanvas/documentCanvas.js | 89 ------------------------ 1 file changed, 89 deletions(-) diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index 6030703..fb67c0d 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -13,96 +13,7 @@ define([ return function(sandbox) { var canvas = new Canvas.Canvas(); - var manager = new CanvasManager(canvas, sandbox); - - - var view = { - - insertNewNode: function(wlxmlTag, wlxmlClass) { - //TODO: Insert inline - var anchor = $(window.getSelection().anchorNode); - var anchorOffset = window.getSelection().anchorOffset; - var textLen; - if(anchor[0].nodeType === Node.TEXT_NODE) { - textLen = anchor.text().length; - anchor = anchor.parent(); - } - if(anchor.text() === '') { - var todel = anchor; - anchor = anchor.parent(); - todel.remove(); - } - if(anchorOffset > 0 && anchorOffset < textLen) { - if(wlxmlTag === null && wlxmlClass === null) { - return this.splitWithNewNode(anchor); - } - return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); - } - var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class')); - if(anchorOffset === 0) - anchor.before(newNode) - else - anchor.after(newNode); - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true}); - //isDirty = true; - sandbox.publish('contentChanged'); - }, - wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) { - var selection = window.getSelection(); - if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) { - var startOffset = selection.anchorOffset; - var endOffset = selection.focusOffset; - if(startOffset > endOffset) { - var tmp = startOffset; - startOffset = endOffset; - endOffset = tmp; - } - var node = selection.anchorNode; - var prefix = node.data.substr(0, startOffset); - var suffix = node.data.substr(endOffset); - var core = node.data.substr(startOffset, endOffset - startOffset); - var newNode = this._createNode(wlxmlTag, wlxmlClass); - newNode.text(core || 'test'); - $(node).replaceWith(newNode); - newNode.before(prefix); - newNode.after(suffix); - - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true}); - //isDirty = true; - sandbox.publish('contentChanged'); - } - }, - splitWithNewNode: function(node) { - var selection = window.getSelection(); - if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) { - var startOffset = selection.anchorOffset; - var endOffset = selection.focusOffset; - if(startOffset > endOffset) { - var tmp = startOffset; - startOffset = endOffset; - endOffset = tmp; - } - var anchor = selection.anchorNode; - var prefix = anchor.data.substr(0, startOffset); - var suffix = anchor.data.substr(endOffset); - var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); - var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); - var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); - prefixNode.text(prefix); - suffixNode.text(suffix); - node.replaceWith(newNode); - newNode.before(prefixNode); - newNode.after(suffixNode); - - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true}); - //isDirty = true; - sandbox.publish('contentChanged'); - } - } - - }; - /* public api */ return { -- 2.20.1 From b381ca66b7a9766aa4f408f6d0add75d486ef3d5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 12:39:14 +0200 Subject: [PATCH 05/16] canvas api: fixing list adding --- modules/documentCanvas/canvas.js | 4 ++-- modules/documentCanvas/tests/canvas.test.js | 13 +++++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index eb0fd0b..848dc48 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -147,14 +147,14 @@ Canvas.prototype.createList = function(options) { else { $node = $(node); } - $node.attr('wlxml-class', 'list.item'); + $node.attr('wlxml-class', 'item'); nodesToWrap.push($node); } if(node.isSameNode(element2.get(0))) return; }); - var list = this._createNode('div', 'list'); + var list = this._createNode('div', 'list-items'); element1.before(list); nodesToWrap.forEach(function(node) { diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 57ad625..7515309 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -118,8 +118,8 @@ define([ ); }); - test('list', function() { - var c = new canvas.Canvas('
Alice
has
a cat
'); + test('create list from existing nodes', function() { + var c = new canvas.Canvas('
Alice
has
a cat
some text
'); var div1 = c.getNode({tag:'div'})[0]; var div2 = c.getNode({tag:'div'})[1]; @@ -127,11 +127,12 @@ define([ assert.xmlEqual(c.toXML(), '\
\ -
\ -
Alice
\ -
has
\ -
a cat
\ +
\ +
Alice
\ +
has
\ +
a cat
\
\ +
some text
\
'); }); -- 2.20.1 From 52f3927cfc1af1e9eaa469b73a33c9575ef710d8 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 12:39:55 +0200 Subject: [PATCH 06/16] fix: breaking from loop properly --- modules/documentCanvas/canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 848dc48..5de60f4 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -151,7 +151,7 @@ Canvas.prototype.createList = function(options) { nodesToWrap.push($node); } if(node.isSameNode(element2.get(0))) - return; + return false; }); var list = this._createNode('div', 'list-items'); -- 2.20.1 From 3501d4ca6ca516663162da0cd2bd1e12b8491450 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 12:40:16 +0200 Subject: [PATCH 07/16] canvas api: removing list --- modules/documentCanvas/canvas.js | 15 +++++++++++--- modules/documentCanvas/tests/canvas.test.js | 22 +++++++++++++++++++++ modules/documentCanvas/transformations.js | 3 ++- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 5de60f4..5db5e78 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -15,8 +15,8 @@ var Canvas = function(xml) { } Canvas.prototype.setXML = function(xml) { - this.xml = xml; - this.content.html(transformations.fromXML.getHTMLTree(xml)); + this.xml = $.trim(xml); + this.content.html(transformations.fromXML.getHTMLTree(this.xml)); } Canvas.prototype.toXML = function() { @@ -161,8 +161,17 @@ Canvas.prototype.createList = function(options) { node.remove(); list.append(node); }); +} + +Canvas.prototype.removeList = function(options) { + var pointerElement = $(this.content.find('#' + options.pointer.id)); + var listElement = options.pointer.klass === 'list-items' ? pointerElement : + pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]'); - + listElement.find('[wlxml-class=item]').each(function() { + $(this).attr('wlxml-class', ''); + });; + listElement.children().unwrap(); } diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 7515309..35f0d85 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -136,6 +136,28 @@ define([ '); }); + + test('remove list', function() { + var xml = '\ +
\ +
\ +
Alice
\ +
has
\ +
a cat
\ +
\ +
some text
\ +
'; + var c = new canvas.Canvas(xml); + var item = c.getNode({klass: 'item'})[1]; + c.removeList({pointer: item}); + assert.xmlEqual(c.toXML(), '\ +
\ +
Alice
\ +
has
\ +
a cat
\ +
some text
\ +
'); + }); }); }); \ No newline at end of file diff --git a/modules/documentCanvas/transformations.js b/modules/documentCanvas/transformations.js index 44ab78a..d245818 100644 --- a/modules/documentCanvas/transformations.js +++ b/modules/documentCanvas/transformations.js @@ -76,7 +76,8 @@ define(['libs/jquery-1.9.1.min'], function($) { var wlxmlName = split.splice(1).join('-'); var value = wlxmlName === 'class' ? attr.value.replace(/-/g, '.') : attr.value; console.log(name + ': ' + value); - toret.attr(wlxmlName, value); + if(value.length && value.length > 0) + toret.attr(wlxmlName, value); } toret.append(div.contents()); -- 2.20.1 From e64e37a2fbe6d64b2513133d34370f0d1a63f7b9 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 12:42:00 +0200 Subject: [PATCH 08/16] Adding/removing lists - first approach --- modules/documentCanvas/canvas.js | 10 ++++++++++ modules/documentCanvas/canvasManager.js | 21 +++++++++++++++++++++ modules/documentCanvas/documentCanvas.js | 3 +++ modules/documentCanvas/transformations.js | 14 ++++++++++++++ modules/documentToolbar/documentToolbar.js | 3 ++- modules/documentToolbar/template.html | 3 +++ modules/rng/rng.js | 3 +++ 7 files changed, 56 insertions(+), 1 deletion(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 5db5e78..80d3915 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -175,6 +175,16 @@ Canvas.prototype.removeList = function(options) { } +Canvas.prototype.insideList = function(options) { + if(options.pointer) { + if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item') + return true; + var pointerElement = $(this.content.find('#' + options.pointer.id)); + return pointerElement.parents('list-items').length > 0; + } + return false; +} + return {Canvas: Canvas, Node: Node}; diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index 6a0fc5c..3ced49a 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -14,6 +14,7 @@ var getCursorPosition = function() { textNodeOffset: selection.anchorOffset, textNodeIndex: parent.contents().index(anchorNode), parentNode: parent, + focusNode: $(selection.focusNode).parent(), isAtEnd: selection.anchorOffset === anchorNode.text().length } }; @@ -181,6 +182,26 @@ Manager.prototype.onBackspaceKey = function(e) { } } +Manager.prototype.command = function(command, meta) { + var pos = getCursorPosition(); + + if(command === 'createList') { + var node = new wlxmlNode.Node(pos.parentNode); + if(window.getSelection().getRangeAt().collapsed && this.canvas.insideList({pointer: node})) { + this.canvas.removeList({pointer: node}); + this.selectNode(node, {movecaret: 'end'}); + this.sandbox.publish('contentChanged'); + } + else { + if(!this.canvas.insideList({pointer: node})) { + this.canvas.createList({start: new wlxmlNode.Node(pos.parentNode), end: new wlxmlNode.Node(pos.focusNode)}); + this.selectNode(new wlxmlNode.Node(pos.parentNode), {movecaret: 'end'}); + this.sandbox.publish('contentChanged'); + } + } + } + +} return Manager; diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index fb67c0d..cc4964b 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -52,6 +52,9 @@ return function(sandbox) { }, wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) { manager.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); + }, + command: function(command, meta) { + manager.command(command, meta); } } diff --git a/modules/documentCanvas/transformations.js b/modules/documentCanvas/transformations.js index d245818..4824849 100644 --- a/modules/documentCanvas/transformations.js +++ b/modules/documentCanvas/transformations.js @@ -37,6 +37,20 @@ define(['libs/jquery-1.9.1.min'], function($) { transform(toBlock, 'div'); transform(toInline, 'span'); + toret.find(":not(iframe)").addBack().contents().filter(function() { + return this.nodeType == 3} ).each(function() { + var n = $(this); + var hasText = /\S/g.test(n.text()); + if(!hasText) { + n.remove(); + return; + } + var startSpace = /\s/g.test(n.text().substr(0,1)); + var endSpace = /\s/g.test(n.text().substr(-1)) && n.text().length > 1; + var trimmed = $.trim(n.text()); + n.get(0).data = (startSpace ? ' ' : '') + trimmed + (endSpace ? ' ' : ''); + }); + return toret.children(); }, getMetaData: function(xml) { diff --git a/modules/documentToolbar/documentToolbar.js b/modules/documentToolbar/documentToolbar.js index a2a1567..c459428 100644 --- a/modules/documentToolbar/documentToolbar.js +++ b/modules/documentToolbar/documentToolbar.js @@ -40,8 +40,9 @@ return function(sandbox) { //this.wrapWithNodeRequest(wlxmlTag, wlxmlClass); } sandbox.publish('newNodeRequested', wlxmlTag, wlxmlClass); + } else { + sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta')); } - //sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta')); } }); }, diff --git a/modules/documentToolbar/template.html b/modules/documentToolbar/template.html index 104f00a..112d93b 100644 --- a/modules/documentToolbar/template.html +++ b/modules/documentToolbar/template.html @@ -22,5 +22,8 @@ +
+ +
\ No newline at end of file diff --git a/modules/rng/rng.js b/modules/rng/rng.js index 643b683..7c39d0f 100644 --- a/modules/rng/rng.js +++ b/modules/rng/rng.js @@ -259,6 +259,9 @@ return function(sandbox) { } else { sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); } + }, + command: function(cmd, meta) { + sandbox.getModule('documentCanvas').command(cmd, meta); } }; -- 2.20.1 From 7b4405539ac7c11a11b5259b4f968e1289f0b2a7 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 16:09:48 +0200 Subject: [PATCH 09/16] cleanup --- modules/documentToolbar/documentToolbar.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/modules/documentToolbar/documentToolbar.js b/modules/documentToolbar/documentToolbar.js index c459428..e364e99 100644 --- a/modules/documentToolbar/documentToolbar.js +++ b/modules/documentToolbar/documentToolbar.js @@ -33,12 +33,6 @@ return function(sandbox) { wlxmlTag = split[0]; wlxmlClass = split[1]; } - if(window.getSelection().isCollapsed) { - //view.insertNewNode(wlxmlTag, wlxmlClass); - } - else { - //this.wrapWithNodeRequest(wlxmlTag, wlxmlClass); - } sandbox.publish('newNodeRequested', wlxmlTag, wlxmlClass); } else { sandbox.publish('command', btn.attr('data-btn'), btn.attr('data-meta')); -- 2.20.1 From f21a91b10cced1d0fd3be6b183bc64303e7f4f94 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 24 Jun 2013 17:03:39 +0200 Subject: [PATCH 10/16] bringing back wrapping text with nodes --- modules/documentCanvas/canvas.js | 1 + modules/documentCanvas/canvasManager.js | 21 +++++++++++++++++++++ modules/documentCanvas/documentCanvas.js | 3 --- modules/rng/rng.js | 4 ---- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 80d3915..a6becf4 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -76,6 +76,7 @@ Canvas.prototype.insertNode = function(options) { $(textElement).replaceWith(newNode); newNode.before(prefix); newNode.after(suffix); + return newNode; } } diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index 3ced49a..5d17ec0 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -96,6 +96,27 @@ Manager.prototype.selectNode = function(wlxmlNode, options) { this.sandbox.publish('nodeSelected', wlxmlNode); }; +Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { + var selection = window.getSelection(); + + if(selection.getRangeAt(0).collapsed) { + + } else { + var offsetStart = selection.anchorOffset; + var offsetEnd = selection.focusOffset; + if(offsetStart > offsetEnd) { + var tmp = offsetStart; + offsetStart = offsetEnd; + offsetEnd = tmp; + } + var node = new wlxmlNode.Node($(selection.anchorNode).parent()); + var newNode = this.canvas.insertNode({place: 'wrapText', context: node, tag: wlxmlTag, klass: wlxmlClass, offsetStart: offsetStart, offsetEnd: offsetEnd}); + this.selectNode(new wlxmlNode.Node(newNode), {movecaret: 'end'}); + } + + +} + Manager.prototype.getNodeElement = function(wlxmlNode) { return this.canvas.dom.find('#'+wlxmlNode.id); }; diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index cc4964b..bec74fc 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -50,9 +50,6 @@ return function(sandbox) { insertNewNode: function(wlxmlTag, wlxmlClass) { manager.insertNewNode(wlxmlTag, wlxmlClass); }, - wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) { - manager.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); - }, command: function(command, meta) { manager.command(command, meta); } diff --git a/modules/rng/rng.js b/modules/rng/rng.js index 7c39d0f..a1fe65e 100644 --- a/modules/rng/rng.js +++ b/modules/rng/rng.js @@ -254,11 +254,7 @@ return function(sandbox) { sandbox.getModule('documentCanvas').toggleGrid(toggle); }, newNodeRequested: function(wlxmlTag, wlxmlClass) { - if(window.getSelection().isCollapsed) { sandbox.getModule('documentCanvas').insertNewNode(wlxmlTag, wlxmlClass); - } else { - sandbox.getModule('documentCanvas').wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); - } }, command: function(cmd, meta) { sandbox.getModule('documentCanvas').command(cmd, meta); -- 2.20.1 From 35a137765b59206318bffecca43a478f4aba6a33 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Wed, 26 Jun 2013 12:32:58 +0200 Subject: [PATCH 11/16] Fixing canvas.createList Selecting text for list items from bottom to top wasn't supported --- modules/documentCanvas/canvas.js | 8 ++++++++ modules/documentCanvas/tests/canvas.test.js | 19 +++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index a6becf4..0d4ad75 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -131,6 +131,14 @@ Canvas.prototype.createList = function(options) { return false; var parent = element1.parent(); + + if(parent.contents().index(element1) > parent.contents().index(element2)) { + var tmp = element1; + element1 = element2; + element2 = tmp; + } + + var nodesToWrap = []; var place = 'before'; diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 35f0d85..53bd35d 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -137,6 +137,25 @@ define([ }); + test('create list from existing nodes reverse', function() { + var c = new canvas.Canvas('
Alice
has
a cat
some text
'); + var div1 = c.getNode({tag:'div'})[0]; + var div2 = c.getNode({tag:'div'})[1]; + + c.createList({start: div2, end: div1}); + + assert.xmlEqual(c.toXML(), '\ +
\ +
\ +
Alice
\ +
has
\ +
a cat
\ +
\ +
some text
\ +
'); + + }); + test('remove list', function() { var xml = '\
\ -- 2.20.1 From c986f6ebfd3d20bdc75ce00ee09bd2c716e0cb16 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 27 Jun 2013 09:41:49 +0200 Subject: [PATCH 12/16] WIP: Refactoring canvas api - canvas, canvasNode + tests todo: integration into the rest of the documentCanvas module and its helper modules --- modules/documentCanvas/canvas.js | 190 ++++++------ modules/documentCanvas/canvasNode.js | 56 ++++ modules/documentCanvas/template.html | 3 +- modules/documentCanvas/tests/canvas.test.js | 278 +++++++++--------- .../documentCanvas/tests/canvasNode.test.js | 47 +++ modules/documentCanvas/tests/utils.js | 24 +- 6 files changed, 357 insertions(+), 241 deletions(-) create mode 100644 modules/documentCanvas/canvasNode.js create mode 100644 modules/documentCanvas/tests/canvasNode.test.js diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 0d4ad75..c2f6c85 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -2,88 +2,79 @@ define([ 'libs/jquery-1.9.1.min', 'libs/underscore-min', 'modules/documentCanvas/transformations', -'modules/documentCanvas/wlxmlNode', +'modules/documentCanvas/canvasNode', 'libs/text!./template.html' -], function($, _, transformations, wlxmlNode, template) { +], function($, _, transformations, canvasNode, template) { 'use strict'; -var Canvas = function(xml) { +var Canvas = function(html) { this.dom = $(template); this.content = this.dom.find('#rng-module-documentCanvas-content'); - this.setXML(xml); -} - -Canvas.prototype.setXML = function(xml) { - this.xml = $.trim(xml); - this.content.html(transformations.fromXML.getHTMLTree(this.xml)); -} + if(html) { + this.content.html(html); + } +}; -Canvas.prototype.toXML = function() { - return transformations.toXML.getXML(this.content.html()); -} +Canvas.prototype.getContent = function() { + return this.content.contents(); +}; -Canvas.prototype.getNode = function(desc) { +Canvas.prototype.findNodes = function(desc) { var selector = ''; - if(desc.klass) - selector += '[wlxml-class=' + desc.klass + ']'; - if(desc.tag) - selector += '[wlxml-tag=' + desc.tag + ']'; + if(typeof desc === 'string') { + selector = desc; + } + else { + if(desc.klass) + selector += '[wlxml-class=' + desc.klass + ']'; + if(desc.tag) + selector += '[wlxml-tag=' + desc.tag + ']'; + } var toret = []; this.content.find(selector).each(function() { - toret.push(new wlxmlNode.Node($(this))); + toret.push(canvasNode.create($(this))); }); return toret; -} - -Canvas.prototype.getPreviousNode = function(options) { - var element = $(this.content.find('#' + options.node.id).get(0)); - var prev = element.prev() - if(prev.length === 0) - prev = element.parent(); - return new wlxmlNode.Node(prev); -} - -Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) { - var toBlock = ['div', 'document', 'section', 'header']; - var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span'; - var toret = $('<' + htmlTag + '>'); - toret.attr('wlxml-tag', wlxmlTag); - if(wlxmlClass) - toret.attr('wlxml-class', wlxmlClass); - 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);})); - return toret; - }; - -Canvas.prototype.insertNode = function(options) { - var element = $(this.content.find('#' + options.context.id).get(0)); - if(options.place == 'after') { - var node = this._createNode(options.tag, options.klass); - element[options.place](node); - return node; - } - else if(options.place == 'wrapText') { - var elementContents = element.contents(); - if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3) - return false; - var textElement = elementContents.get(0); - - var prefix = textElement.data.substr(0, options.offsetStart); - var suffix = textElement.data.substr(options.offsetEnd); - var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart); - var newNode = this._createNode(options.tag, options.klass); - newNode.text(core); - $(textElement).replaceWith(newNode); - newNode.before(prefix); - newNode.after(suffix); - return newNode; +}; + +Canvas.prototype.nodeAppend = function(options) { + var element; // = $(this.content.find('#' + options.context.id).get(0)); + if(options.to === 'root') { + element = this.content; + } else { + element = $(this.content.find('#' + options.to.getId()).get(0)); } -} + element.append(options.node.dom); +}; + +Canvas.prototype.nodeInsertAfter = function(options) { + var element = $(this.content.find('#' + options.after.getId()).get(0)); + element.after(options.node.dom); +}; + +Canvas.prototype.nodeWrap = function(options) { + var element = $(this.content.find('#' + options.inside.getId()).get(0)); -Canvas.prototype.splitNode = function(options) { + var elementContents = element.contents(); + if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3) + return false; + var textElement = elementContents.get(0); + + var prefix = textElement.data.substr(0, options.offsetStart); + var suffix = textElement.data.substr(options.offsetEnd); + var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart); + options._with.setContent(core); + + $(textElement).replaceWith(options._with.dom); + options._with.dom.before(prefix); + options._with.dom.after(suffix); +}; + +Canvas.prototype.nodeSplit = function(options) { options = _.extend({textNodeIdx: 0}, options); - var nodeToSplit = $(this.content.find('#' + options.node.id).get(0)); + var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0)); var nodeContents = nodeToSplit.contents(); if(nodeContents.length === 0 || @@ -103,30 +94,29 @@ Canvas.prototype.splitNode = function(options) { passed = true; }); - var prefix = textNode.text().substr(0, options.offset); - var suffix = textNode.text().substr(options.offset); + var prefix = $.trim(textNode.text().substr(0, options.offset)); + var suffix = $.trim(textNode.text().substr(options.offset)); textNode.before(prefix); textNode.remove(); - var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class')); - newNode.append(suffix); + var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')}); + newNode.dom.append(suffix); succeedingNodes.forEach(function(node) { - newNode.append(node) + newNode.dom.append(node) }); - nodeToSplit.after(newNode); + nodeToSplit.after(newNode.dom); return newNode; -} +}; -Canvas.prototype.removeNode = function(options) { - var toRemove = $(this.content.find('#' + options.node.id).get(0)); +Canvas.prototype.nodeRemove = function(options) { + var toRemove = $(this.content.find('#' + options.node.getId()).get(0)); toRemove.remove(); +}; -} - -Canvas.prototype.createList = function(options) { - var element1 = $(this.content.find('#' + options.start.id).get(0)); - var element2 = $(this.content.find('#' + options.end.id).get(0)); +Canvas.prototype.listCreate = function(options) { + var element1 = $(this.content.find('#' + options.start.getId()).get(0)); + var element2 = $(this.content.find('#' + options.end.getId()).get(0)); if(!element1.parent().get(0).isSameNode(element2.parent().get(0))) return false; @@ -137,7 +127,6 @@ Canvas.prototype.createList = function(options) { element1 = element2; element2 = tmp; } - var nodesToWrap = []; @@ -150,7 +139,7 @@ Canvas.prototype.createList = function(options) { if(place === 'inside') { var $node; if(node.nodeType === 3) { - $node = canvas._createNode('div').text(node.data); + $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data); $(node).remove(); } else { @@ -163,38 +152,47 @@ Canvas.prototype.createList = function(options) { return false; }); - var list = this._createNode('div', 'list-items'); + var list = canvasNode.create({tag: 'div', klass: 'list-items'}).dom; //this._createNode('div', 'list-items'); element1.before(list); nodesToWrap.forEach(function(node) { node.remove(); list.append(node); }); -} +}; -Canvas.prototype.removeList = function(options) { - var pointerElement = $(this.content.find('#' + options.pointer.id)); - var listElement = options.pointer.klass === 'list-items' ? pointerElement : +Canvas.prototype.listRemove = function(options) { + var pointerElement = $(this.content.find('#' + options.pointer.getId())); + var listElement = options.pointer.getClass() === 'list-items' ? pointerElement : pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]'); listElement.find('[wlxml-class=item]').each(function() { - $(this).attr('wlxml-class', ''); - });; + $(this).removeAttr('wlxml-class'); + }); listElement.children().unwrap(); - -} +}; + +Canvas.prototype.getPrecedingNode = function(options) { + var element = $(this.content.find('#' + options.node.getId()).get(0)); + var prev = element.prev() + if(prev.length === 0) + prev = element.parent(); + return canvasNode.create(prev); +}; -Canvas.prototype.insideList = function(options) { +Canvas.prototype.nodeInsideList = function(options) { if(options.pointer) { - if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item') + if(options.pointer.getClass() === 'list-items' || options.pointer.getClass() === 'item') return true; - var pointerElement = $(this.content.find('#' + options.pointer.id)); - return pointerElement.parents('list-items').length > 0; + var pointerElement = $(this.content.find('#' + options.pointer.getId())); + return pointerElement.parents('list-items, item').length > 0; } return false; -} +}; -return {Canvas: Canvas, Node: Node}; +return { + create: function(desc) { return new Canvas(desc); } +}; }); \ No newline at end of file diff --git a/modules/documentCanvas/canvasNode.js b/modules/documentCanvas/canvasNode.js new file mode 100644 index 0000000..0bfd358 --- /dev/null +++ b/modules/documentCanvas/canvasNode.js @@ -0,0 +1,56 @@ +define(['libs/jquery-1.9.1.min'], function($) { + +'use strict'; + +var CanvasNode = function(desc) { + if(desc instanceof $) { + this.dom = desc; + if(!this.dom.attr('id')) { + this.dom.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);})); + } + } else { + var toBlock = ['div', 'document', 'section', 'header']; + var htmlTag = _.contains(toBlock, desc.tag) ? 'div' : 'span'; + this.dom = $('<' + htmlTag + '>'); + this.dom.attr('wlxml-tag', desc.tag); + if(desc.klass) + this.dom.attr('wlxml-class', desc.klass); + if(desc.content) + this.dom.text(desc.content); + this.dom.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);})); + } +}; + +CanvasNode.prototype.getTag = function() { + return this.dom.attr('wlxml-tag'); +} + +CanvasNode.prototype.getClass = function() { + return this.dom.attr('wlxml-class'); +} + +CanvasNode.prototype.getId = function() { + return this.dom.attr('id'); +} + +CanvasNode.prototype.getContent = function() { + return this.dom.text(); +} + +CanvasNode.prototype.setContent = function(content) { + this.dom.text(content); +} + +CanvasNode.prototype.isSame = function(other) { + return this.dom.get(0).isSameNode(other.dom.get(0)); +} + +return { + create: function(desc) { + return new CanvasNode(desc); + } + +} + + +}); \ No newline at end of file diff --git a/modules/documentCanvas/template.html b/modules/documentCanvas/template.html index b4d7dd7..c973f1b 100644 --- a/modules/documentCanvas/template.html +++ b/modules/documentCanvas/template.html @@ -1,8 +1,7 @@
-
-
+
\ No newline at end of file diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 53bd35d..0589c11 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -2,181 +2,177 @@ define([ 'libs/jquery-1.9.1.min', 'libs/chai', './utils.js', -'modules/documentCanvas/canvas' -], function($, chai, utils, canvas) { +'modules/documentCanvas/canvas', +'modules/documentCanvas/canvasNode' +], function($, chai, utils, canvas, canvasNode) { 'use strict'; var assert = chai.assert; + var assertDomEqual = utils.assertDomEqual; - assert.xmlEqual = function(lhsText, rhsText) { - var cleanLhs = utils.cleanUp(lhsText); - var cleanRhs = utils.cleanUp(rhsText); - - var lhs = $(cleanLhs); - var rhs = $(cleanRhs); - - this.equal(lhs.length, 1); - this.equal(rhs.length, 1); - - lhs = lhs.get(0); - rhs = rhs.get(0); - - var test = lhs.isEqualNode(rhs); - if(!test) { - console.log(cleanLhs); - console.log(cleanRhs); - } - return this.ok(test, 'xmls are equal'); - }; - var retrievingTest = function(title, xml) { - test(title, function() { - var c = new canvas.Canvas(xml); - assert.xmlEqual(c.toXML(), xml); + suite('Quering nodes', function() { + test('getting preceding node', function() { + var c = canvas.create('
a
b
'); + var secondP = c.findNodes({tag: 'p'})[1]; + var firstP = c.getPrecedingNode({node: secondP}); + assert.equal(firstP.getContent(), 'a'); }); - }; - - suite('Basic document retrieving', function() { - test('empty document', function() { - var c = new canvas.Canvas(''); - assert.equal(c.toXML(), ''); + + test('pervious node of node without "previous siblings" is its parent', function() { + var c = canvas.create('
a
'); + var paragraph = c.findNodes({tag: 'p'})[0]; + assert.equal(c.getPrecedingNode({node: paragraph}).getTag(), 'section'); }); - retrievingTest('empty tag', '
'); - retrievingTest('tag with content', '
Some text
'); - retrievingTest('tag with class', '
'); + }); - suite('Nodes', function() { - test('getting nodes via selector', function() { - var c = new canvas.Canvas('
Header 1
'); - var header = c.getNode({tag: 'header'})[0]; - assert.equal(header.tag, 'header'); - assert.equal(header.klass, 'some-class'); - }); + + suite('Inserting nodes', function() { + test('append node to root', function() { + var c = canvas.create(); + var node = canvasNode.create({tag: 'header', klass: 'some-class'}); + c.nodeAppend({node: node, to: 'root'}); + assertDomEqual(c.getContent(), '
'); + }); - test('getting previous node', function() { - var c = new canvas.Canvas('
Div 1
Div 2
'); - var secondDiv = c.getNode({tag: 'div'})[1]; - var firstDiv = c.getPreviousNode({node: secondDiv}); - assert.equal(firstDiv.klass, 'some-class'); - }) + test('append node to another node', function() { + var c = canvas.create('
'); + var node = canvasNode.create({tag: 'header', klass: 'some-class'}); + var to = c.findNodes('div')[0]; + c.nodeAppend({node: node, to: to}); + assertDomEqual(c.getContent(), '
'); + }); - test('pervious node of node without "previous siblings" is its parent', function() { - var c = new canvas.Canvas('
Div 1
'); - var div = c.getNode({tag: 'div'})[0]; - var section = c.getPreviousNode({node: div}); - assert.equal(section.tag, 'section'); - }) - - test('inserting after', function() { - var c = new canvas.Canvas('
Header 1
'); - var header = c.getNode({tag: 'header'})[0]; - c.insertNode({place: 'after', context: header, tag: 'div', klass: 'some.class'}); - assert.xmlEqual(c.toXML(), '
Header 1
'); + test('insert node after another node', function() { + var c = canvas.create('
'); + var node = canvasNode.create({tag: 'header', klass: 'some-class'}); + var after = c.findNodes('div')[0]; + c.nodeInsertAfter({node: node, after: after}); + assertDomEqual(c.getContent(), '
'); }); test('wrap text in node', function() { - var c = new canvas.Canvas('
Header 1
'); - var header = c.getNode({tag: 'header'})[0]; - c.insertNode({place: 'wrapText', context: header, tag: 'span', klass: 'url', offsetStart: 1, offsetEnd: 6}); - assert.xmlEqual(c.toXML(), '
Header 1
'); + var c = canvas.create('
Header 1
'); + var header = c.findNodes({tag: 'header'})[0]; + var wrapper = canvasNode.create({tag: 'aside'}); + c.nodeWrap({inside: header, _with: wrapper, offsetStart: 1, offsetEnd: 6}) + assertDomEqual(c.getContent(), '
Header 1
'); }); test('split node', function() { - var c = new canvas.Canvas('
Header 1
'); - var header = c.getNode({tag: 'header'})[0]; - c.splitNode({node: header, offset: 4}); - assert.xmlEqual(c.toXML(), '\ -
\ -
Head
\ -
er 1
\ -
' - ); + var c = canvas.create('
Header 1
'); + var header = c.findNodes({tag: 'header'})[0]; + var newNode = c.nodeSplit({node: header, offset: 4}); + assertDomEqual(c.getContent(), utils.cleanUp('\ +
\ +
Head
\ +
er 1
\ +
')); + assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1])); + }); + + test('split root node', function() { + var c = canvas.create('
cat
'); + var header = c.findNodes({tag: 'header'})[0]; + var newNode = c.nodeSplit({node: header, offset: 1}); + assertDomEqual(c.getContent(), utils.cleanUp('\ +
c
\ +
at
')); + assert.ok(newNode.isSame(c.findNodes({tag: 'header'})[1])); }); test('split node with subnodes', function() { - var c = new canvas.Canvas('
Fancy and nice header 1
'); - var header = c.getNode({tag: 'header'})[0]; - c.splitNode({node: header, textNodeIdx: 0, offset: 5}); - assert.xmlEqual(c.toXML(), '\ -
\ -
Fancy
\ -
and nice header 1
\ -
' - ); + var c = canvas.create(utils.cleanUp('\ +
\ +
Fancy and niceheader 1
\ +
')); + var header = c.findNodes({tag: 'header'})[0]; + var newNode = c.nodeSplit({node: header, offset: 5}); + assertDomEqual(c.getContent(), utils.cleanUp('\ +
\ +
Fancy
\ +
and niceheader 1
\ +
')); }); test('remove node', function() { - var c = new canvas.Canvas('
Fancy and nice header 1
'); - var span = c.getNode({tag: 'span'})[0]; - var siblings = c.removeNode({node:span}); - assert.xmlEqual(c.toXML(), '\ -
\ -
Fancy and nice 1
\ -
' - ); + var c = canvas.create('
some text
'); + var span = c.findNodes({tag: 'span'})[0]; + c.nodeRemove({node: span}); + assertDomEqual(c.getContent(), '
'); }); - - test('create list from existing nodes', function() { - var c = new canvas.Canvas('
Alice
has
a cat
some text
'); - var div1 = c.getNode({tag:'div'})[0]; - var div2 = c.getNode({tag:'div'})[1]; + }); + + + suite('Lists', function() { + test('create from existing nodes', function() { + var c = canvas.create(utils.cleanUp('\ +
\ +
alice
\ + has\ +
a
\ +
cat
\ +
or not
\ +
' + )); + + var div_alice = c.findNodes({tag: 'div'})[0]; + var div_cat = c.findNodes({tag:'div'})[2]; - c.createList({start: div1, end: div2}); + c.listCreate({start: div_alice, end: div_cat}); - assert.xmlEqual(c.toXML(), '\ -
\ -
\ -
Alice
\ -
has
\ -
a cat
\ + assertDomEqual(c.getContent(), utils.cleanUp('\ +
\ +
\ +
alice
\ +
has
\ +
a
\ +
cat
\
\ -
some text
\ -
'); - +
or not
\ +
')); }); - test('create list from existing nodes reverse', function() { - var c = new canvas.Canvas('
Alice
has
a cat
some text
'); - var div1 = c.getNode({tag:'div'})[0]; - var div2 = c.getNode({tag:'div'})[1]; - - c.createList({start: div2, end: div1}); + test('create from existing nodes - start/end order doesn\'t matter', function() { + var html = utils.cleanUp('\ +
alice
\ +
cat
'); + var expected = utils.cleanUp('\ +
\ +
alice
\ +
cat
\ +
'); + + var c = canvas.create(html); + var div_alice = c.findNodes({tag: 'div'})[0]; + var div_cat = c.findNodes({tag:'div'})[1]; + c.listCreate({start: div_cat, end: div_alice}); + assertDomEqual(c.getContent(), expected); - assert.xmlEqual(c.toXML(), '\ -
\ -
\ -
Alice
\ -
has
\ -
a cat
\ -
\ -
some text
\ -
'); - + c = canvas.create(html); + div_alice = c.findNodes({tag: 'div'})[0]; + div_cat = c.findNodes({tag:'div'})[1]; + c.listCreate({start: div_alice, end: div_cat}); + assertDomEqual(c.getContent(), expected); }); - test('remove list', function() { - var xml = '\ -
\ -
\ -
Alice
\ -
has
\ -
a cat
\ + test('remove', function() { + var c = canvas.create(utils.cleanUp('\ +
\ +
\ +
alice
\ +
cat
\
\ -
some text
\ -
'; - var c = new canvas.Canvas(xml); - var item = c.getNode({klass: 'item'})[1]; - c.removeList({pointer: item}); - assert.xmlEqual(c.toXML(), '\ -
\ -
Alice
\ -
has
\ -
a cat
\ -
some text
\ -
'); + ')); + var item = c.findNodes({klass: 'item'})[1]; + c.listRemove({pointer: item}); + assertDomEqual(c.getContent(), utils.cleanUp('\ +
\ +
alice
\ +
cat
\ +
')); }); }); - }); \ No newline at end of file diff --git a/modules/documentCanvas/tests/canvasNode.test.js b/modules/documentCanvas/tests/canvasNode.test.js new file mode 100644 index 0000000..bc11a80 --- /dev/null +++ b/modules/documentCanvas/tests/canvasNode.test.js @@ -0,0 +1,47 @@ +define([ +'libs/jquery-1.9.1.min', +'libs/chai', +'./utils.js', +'modules/documentCanvas/canvasNode' +], function($, chai, utils, canvasNode) { + +'use strict'; + +var assert = chai.assert; + +var assertDomEqual = function(lhs, rhs) { + lhs.attr('id', ''); + rhs.attr('id', ''); + return assert.ok(lhs[0].isEqualNode(rhs[0]), 'nodes are equal'); + +} + +suite('Create canvas node', function() { + test('from description', function() { + var node = canvasNode.create({tag: 'header', klass: 'some-class', content: 'some text content'}); + assert.equal(node.getTag(), 'header'); + assert.equal(node.getClass(), 'some-class'); + assert.equal(node.getContent(), 'some text content'); + assertDomEqual($('
some text content
'), node.dom); + }); + + test('from dom object', function() { + var node = canvasNode.create($('
')); + assert.equal(node.getTag(), 'header'); + assert.equal(node.getClass(), 'some-class'); + //assertDomEqual($('
'), node.dom); + }); +}); + +suite('comparing nodes', function() { + test('isSame', function() { + var html = '
'; + var dom1 = $(html); + var dom2 = $(html); + assert.ok(canvasNode.create(dom1).isSame(canvasNode.create(dom1))); + assert.notOk(canvasNode.create(dom1).isSame(canvasNode.create(dom2))); + }); +}); + + +}); \ No newline at end of file diff --git a/modules/documentCanvas/tests/utils.js b/modules/documentCanvas/tests/utils.js index e23808c..cf1f7c2 100644 --- a/modules/documentCanvas/tests/utils.js +++ b/modules/documentCanvas/tests/utils.js @@ -1,7 +1,6 @@ -define(['libs/jquery-1.9.1.min'], function($) { +define(['libs/jquery-1.9.1.min', 'libs/chai'], function($, chai) { return { cleanUp: function(xml) { - var rmws = function(node) { if(node.nodeType === 3) { node.data = $.trim(node.data); @@ -24,6 +23,27 @@ define(['libs/jquery-1.9.1.min'], function($) { .replace(/(<\/.*>)\s*(<.*>)/gm, '$1$2'); return $.trim(toret);*/ return $('
').append(xml).html(); + }, + + assertDomEqual: function(lhs, rhs) { + lhs = lhs.clone(); + var rhsArr = $.parseHTML(rhs); + if(rhsArr.length === 1) { + rhs = $(rhsArr[0]); + } else { + rhs = $('
'); + $.each(rhsArr, function(i, el) { + rhs.append(el); + }); + } + if(lhs.length > 1) { + lhs = $('
').append(lhs); + } + lhs.attr('id', ''); + rhs.attr('id', ''); + lhs.find('*').each(function() {$(this).attr('id', '');}); + rhs.find('*').each(function() {$(this).attr('id', '');}); + return chai.assert.ok(lhs[0].isEqualNode(rhs[0]), 'nodes are equal'); } } }); \ No newline at end of file -- 2.20.1 From f7c97ef38dc00ec9b5358ae0bf959a5e6f99271c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 27 Jun 2013 11:00:10 +0200 Subject: [PATCH 13/16] Integrating new canvas api into rest of the modules --- modules/documentCanvas/canvas.js | 14 +++- modules/documentCanvas/canvasManager.js | 77 ++++++++++--------- modules/documentCanvas/canvasNode.js | 30 +++++++- modules/documentCanvas/documentCanvas.js | 21 +++-- modules/documentCanvas/documentCanvas.less | 2 +- .../documentCanvas/{wlxml.less => nodes.less} | 0 modules/documentCanvas/wlxmlNode.js | 42 ---------- modules/nodeBreadCrumbs/nodeBreadCrumbs.js | 10 +-- modules/nodeBreadCrumbs/template.html | 4 +- modules/nodeFamilyTree/nodeFamilyTree.js | 32 ++++---- modules/nodePane/nodePane.js | 6 +- modules/rng/rng.js | 54 ++++++------- 12 files changed, 146 insertions(+), 146 deletions(-) rename modules/documentCanvas/{wlxml.less => nodes.less} (100%) delete mode 100644 modules/documentCanvas/wlxmlNode.js diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index c2f6c85..9ae3a53 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -11,6 +11,10 @@ define([ var Canvas = function(html) { this.dom = $(template); this.content = this.dom.find('#rng-module-documentCanvas-content'); + this.setHTML(html); +}; + +Canvas.prototype.setHTML = function(html) { if(html) { this.content.html(html); } @@ -38,6 +42,10 @@ Canvas.prototype.findNodes = function(desc) { return toret; }; +Canvas.prototype.getNodeById = function(id) { + return canvasNode.create($(this.content.find('#' +id))); +} + Canvas.prototype.nodeAppend = function(options) { var element; // = $(this.content.find('#' + options.context.id).get(0)); if(options.to === 'root') { @@ -181,10 +189,10 @@ Canvas.prototype.getPrecedingNode = function(options) { }; Canvas.prototype.nodeInsideList = function(options) { - if(options.pointer) { - if(options.pointer.getClass() === 'list-items' || options.pointer.getClass() === 'item') + if(options.node) { + if(options.node.getClass() === 'list-items' || options.node.getClass() === 'item') return true; - var pointerElement = $(this.content.find('#' + options.pointer.getId())); + var pointerElement = $(this.content.find('#' + options.node.getId())); return pointerElement.parents('list-items, item').length > 0; } return false; diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index 5d17ec0..71c9342 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -1,7 +1,7 @@ define([ 'libs/jquery-1.9.1.min', -'./wlxmlNode' -], function($, wlxmlNode) { +'./canvasNode' +], function($, canvasNode) { 'use strict'; @@ -34,16 +34,16 @@ var Manager = function(canvas, sandbox) { canvas.dom.on('mouseover', '[wlxml-tag]', function(e) { e.stopPropagation(); - manager.sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target))); + manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target))); }); canvas.dom.on('mouseout', '[wlxml-tag]', function(e) { e.stopPropagation(); - manager.sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target))); + manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target))); }); canvas.dom.on('click', '[wlxml-tag]', function(e) { e.stopPropagation(); console.log('clicked node type: '+e.target.nodeType); - manager.selectNode(new wlxmlNode.Node($(e.target))); + manager.selectNode(canvasNode.create($(e.target))); }); canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { @@ -53,7 +53,7 @@ var Manager = function(canvas, sandbox) { anchor = anchor.parent(); if(!anchor.is('[wlxml-tag]')) return; - manager.selectNode(new wlxmlNode.Node(anchor)); + manager.selectNode(canvasNode.create(anchor)); }); canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { @@ -79,11 +79,11 @@ var Manager = function(canvas, sandbox) { } }; -Manager.prototype.selectNode = function(wlxmlNode, options) { +Manager.prototype.selectNode = function(cnode, options) { options = options || {}; - var nodeElement = this.getNodeElement(wlxmlNode) + var nodeElement = this.getNodeElement(cnode) - this.dimNode(wlxmlNode); + this.dimNode(cnode); this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode'); nodeElement.addClass('rng-module-documentCanvas-currentNode'); @@ -92,8 +92,8 @@ Manager.prototype.selectNode = function(wlxmlNode, options) { this.movecaretToNode(nodeElement, options.movecaret); } - this.currentNode = wlxmlNode; - this.sandbox.publish('nodeSelected', wlxmlNode); + this.currentNode = cnode; + this.sandbox.publish('nodeSelected', cnode); }; Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { @@ -109,20 +109,24 @@ Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { offsetStart = offsetEnd; offsetEnd = tmp; } - var node = new wlxmlNode.Node($(selection.anchorNode).parent()); - var newNode = this.canvas.insertNode({place: 'wrapText', context: node, tag: wlxmlTag, klass: wlxmlClass, offsetStart: offsetStart, offsetEnd: offsetEnd}); - this.selectNode(new wlxmlNode.Node(newNode), {movecaret: 'end'}); + var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass}); + this.canvas.nodeWrap({inside: canvasNode.create($(selection.anchorNode).parent()), + _with: wrapper, + offsetStart: offsetStart, + offsetEnd: offsetEnd + }); + this.selectNode(wrapper, {movecaret: 'end'}); } } -Manager.prototype.getNodeElement = function(wlxmlNode) { - return this.canvas.dom.find('#'+wlxmlNode.id); +Manager.prototype.getNodeElement = function(cnode) { + return this.canvas.dom.find('#'+cnode.getId()); }; -Manager.prototype.highlightNode = function(wlxmlNode) { - var nodeElement = this.getNodeElement(wlxmlNode); +Manager.prototype.highlightNode = function(cnode) { + var nodeElement = this.getNodeElement(cnode); if(!this.gridToggled) { nodeElement.addClass('rng-common-hoveredNode'); var label = nodeElement.attr('wlxml-tag'); @@ -133,8 +137,8 @@ Manager.prototype.highlightNode = function(wlxmlNode) { } }; -Manager.prototype.dimNode = function(wlxmlNode) { - var nodeElement = this.getNodeElement(wlxmlNode); +Manager.prototype.dimNode = function(cnode) { + var nodeElement = this.getNodeElement(cnode); if(!this.gridToggled) { nodeElement.removeClass('rng-common-hoveredNode'); nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove(); @@ -151,7 +155,7 @@ Manager.prototype.selectFirstNode = function() { else { node = this.canvas.dom.find('[wlxml-class|="p"]') } - this.selectNode(new wlxmlNode.Node(node), {movecaret: true}); + this.selectNode(canvasNode.create(node), {movecaret: true}); }; Manager.prototype.movecaretToNode = function(nodeElement, where) { @@ -175,14 +179,17 @@ Manager.prototype.toggleGrid = function(toggle) { Manager.prototype.onEnterKey = function(e) { e.preventDefault(); var pos = getCursorPosition(); - var insertedNode; + var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id')); + var newNode; + if(pos.isAtEnd) { - insertedNode = this.canvas.insertNode({place: 'after', context: {id: pos.parentNode.attr('id')}, tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')}); + newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')}); + this.canvas.nodeInsertAfter({node: newNode, after: canvas.getNodeById(pos.parentNode.attr('id'))}); } else { - insertedNode = this.canvas.splitNode({node: {id: pos.parentNode.attr('id')}, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset}); + newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset}); } - if(insertedNode.length) - this.selectNode(new wlxmlNode.Node(insertedNode), {movecaret: true}); + if(newNode) + this.selectNode(newNode, {movecaret: true}); this.sandbox.publish('contentChanged'); }; @@ -196,9 +203,9 @@ Manager.prototype.onBackspaceKey = function(e) { } if(len === 0) { e.preventDefault(); - var toRemove = new wlxmlNode.Node(pos.textNode); - var prevNode = this.canvas.getPreviousNode({node:toRemove}); - this.canvas.removeNode({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem + var toRemove = canvasNode.create(pos.textNode); + var prevNode = this.canvas.getPrecedingNode({node:toRemove}); + this.canvas.nodeRemove({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem this.selectNode(prevNode, {movecaret: 'end'}); } } @@ -207,16 +214,16 @@ Manager.prototype.command = function(command, meta) { var pos = getCursorPosition(); if(command === 'createList') { - var node = new wlxmlNode.Node(pos.parentNode); - if(window.getSelection().getRangeAt().collapsed && this.canvas.insideList({pointer: node})) { - this.canvas.removeList({pointer: node}); + var node = canvasNode.create(pos.parentNode); + if(window.getSelection().getRangeAt().collapsed && this.canvas.nodeInsideList({node: node})) { + this.canvas.listRemove({pointer: node}); this.selectNode(node, {movecaret: 'end'}); this.sandbox.publish('contentChanged'); } else { - if(!this.canvas.insideList({pointer: node})) { - this.canvas.createList({start: new wlxmlNode.Node(pos.parentNode), end: new wlxmlNode.Node(pos.focusNode)}); - this.selectNode(new wlxmlNode.Node(pos.parentNode), {movecaret: 'end'}); + if(!this.canvas.nodeInsideList({node: node})) { + this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode)}); + this.selectNode(node, {movecaret: 'end'}); this.sandbox.publish('contentChanged'); } } diff --git a/modules/documentCanvas/canvasNode.js b/modules/documentCanvas/canvasNode.js index 0bfd358..2b108a1 100644 --- a/modules/documentCanvas/canvasNode.js +++ b/modules/documentCanvas/canvasNode.js @@ -2,6 +2,9 @@ define(['libs/jquery-1.9.1.min'], function($) { 'use strict'; + +var tagSelector = '[wlxml-tag]'; + var CanvasNode = function(desc) { if(desc instanceof $) { this.dom = desc; @@ -42,9 +45,34 @@ CanvasNode.prototype.setContent = function(content) { } CanvasNode.prototype.isSame = function(other) { - return this.dom.get(0).isSameNode(other.dom.get(0)); + return (other instanceof CanvasNode) && this.dom.get(0).isSameNode(other.dom.get(0)); } +CanvasNode.prototype.children = function() { + var list = []; + this.dom.children(tagSelector).each(function() { + list.push(new CanvasNode($(this))); + }); + return $(list); +}; + + +CanvasNode.prototype.parent = function() { + var node = this.dom.parent(tagSelector); + if(node.length) + return new CanvasNode(node); + return null; +}; + +CanvasNode.prototype.parents = function() { + var list = []; + this.dom.parents(tagSelector).each(function() { + list.push(new CanvasNode($(this))); + }); + return $(list); +}; + + return { create: function(desc) { return new CanvasNode(desc); diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index bec74fc..a4dcf37 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -3,16 +3,15 @@ define([ 'libs/underscore-min', './transformations', -'./wlxmlNode', './canvas', './canvasManager', -'libs/text!./template.html'], function(_, transformations, wlxmlNode, Canvas, CanvasManager, template) { +'libs/text!./template.html'], function(_, transformations, Canvas, CanvasManager, template) { 'use strict'; return function(sandbox) { - var canvas = new Canvas.Canvas(); + var canvas = Canvas.create(); var manager = new CanvasManager(canvas, sandbox); /* public api */ @@ -22,7 +21,7 @@ return function(sandbox) { return canvas.dom; }, setDocument: function(xml) { - canvas.setXML(xml); + canvas.setHTML(transformations.fromXML.getHTMLTree(xml)); sandbox.publish('documentSet'); }, getDocument: function() { @@ -34,15 +33,15 @@ return function(sandbox) { sandbox.publish('contentChanged'); } }, - highlightNode: function(wlxmlNode) { - manager.highlightNode(wlxmlNode); + highlightNode: function(canvasNode) { + manager.highlightNode(canvasNode); }, - dimNode: function(wlxmlNode) { - manager.dimNode(wlxmlNode); + dimNode: function(canvasNode) { + manager.dimNode(canvasNode); }, - selectNode: function(wlxmlNode) { - if(!wlxmlNode.is(manager.currentNode)) - manager.selectNode(wlxmlNode, {movecaret: true}); + selectNode: function(canvasNode) { + if(!canvasNode.isSame(manager.currentNode)) + manager.selectNode(canvasNode, {movecaret: true}); }, toggleGrid: function(toggle) { manager.toggleGrid(toggle); diff --git a/modules/documentCanvas/documentCanvas.less b/modules/documentCanvas/documentCanvas.less index acfc4c1..94a8b6e 100644 --- a/modules/documentCanvas/documentCanvas.less +++ b/modules/documentCanvas/documentCanvas.less @@ -1,4 +1,4 @@ -@import 'wlxml.less'; +@import 'nodes.less'; #rng-module-documentCanvas { height: 100%; diff --git a/modules/documentCanvas/wlxml.less b/modules/documentCanvas/nodes.less similarity index 100% rename from modules/documentCanvas/wlxml.less rename to modules/documentCanvas/nodes.less diff --git a/modules/documentCanvas/wlxmlNode.js b/modules/documentCanvas/wlxmlNode.js deleted file mode 100644 index 6bd0c35..0000000 --- a/modules/documentCanvas/wlxmlNode.js +++ /dev/null @@ -1,42 +0,0 @@ -define(['libs/jquery-1.9.1.min'], function($) { - -'use strict'; - -var tagSelector = '[wlxml-tag]'; - -var Node = function(domNode) { - - return { - id: domNode.attr('id'), - tag: domNode.attr('wlxml-tag'), - klass: domNode.attr('wlxml-class'), - parent: function() { - var node = domNode.parent(tagSelector); - if(node.length) - return new Node(node); - return null; - }, - children: function() { - var list = []; - domNode.children(tagSelector).each(function() { - list.push(new Node($(this))); - }); - return $(list); - }, - parents: function() { - var list = []; - domNode.parents(tagSelector).each(function() { - list.push(new Node($(this))); - }); - return $(list); - }, - is: function(wlxmlNode) { - return wlxmlNode && (wlxmlNode.id === this.id); - } - } - -}; - -return { Node: Node} - -}); \ No newline at end of file diff --git a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js index 517f45b..c147c09 100644 --- a/modules/nodeBreadCrumbs/nodeBreadCrumbs.js +++ b/modules/nodeBreadCrumbs/nodeBreadCrumbs.js @@ -32,11 +32,11 @@ return function(sandbox) { this.dom.empty(); var nodes = this.nodes = {}; this.currentNode = node; - this.nodes[node.id] = node; + this.nodes[node.getId()] = node; var parents = node.parents(); parents.each(function() { var parent = this; - nodes[parent.id] = parent; + nodes[parent.getId()] = parent; }); this.dom.html(template({node: node, parents: parents})); }, @@ -54,9 +54,9 @@ return function(sandbox) { return { start: function() { sandbox.publish('ready'); }, getView: function() { return view.dom; }, - setNode: function(wlxmlNode) { - if(!wlxmlNode.is(view.currentNode)) { - view.setNode(wlxmlNode); + setNode: function(canvasNode) { + if(!canvasNode.isSame(view.currentNode)) { + view.setNode(canvasNode); } }, highlightNode: function(id) { view.highlightNode(id); }, diff --git a/modules/nodeBreadCrumbs/template.html b/modules/nodeBreadCrumbs/template.html index e1e9042..2d980c3 100644 --- a/modules/nodeBreadCrumbs/template.html +++ b/modules/nodeBreadCrumbs/template.html @@ -2,9 +2,9 @@
\ No newline at end of file diff --git a/modules/nodeFamilyTree/nodeFamilyTree.js b/modules/nodeFamilyTree/nodeFamilyTree.js index 7415b2d..b5cb56e 100644 --- a/modules/nodeFamilyTree/nodeFamilyTree.js +++ b/modules/nodeFamilyTree/nodeFamilyTree.js @@ -37,26 +37,26 @@ return function(sandbox) { if(parentNode) { parent = { - repr: parentNode.tag + (parentNode.klass ? ' / ' + parentNode.klass : ''), - id: parentNode.id + repr: parentNode.getTag() + (parentNode.getClass() ? ' / ' + parentNode.getClass() : ''), + id: parentNode.getId() }; - this.nodes[parentNode.id] = parentNode; + this.nodes[parentNode.getId()] = parentNode; } var children = []; node.children().each(function() { var child = this; - children.push({repr: child.tag + (child.klass ? ' / ' + child.klass : ''), id: child.id}); - nodes[child.id] = child; + children.push({repr: child.getTag() + (child.getClass() ? ' / ' + child.getClass() : ''), id: child.getId()}); + nodes[child.getId()] = child; }); this.dom.empty(); this.dom.append($(template({parent: parent, children: children}))); }, - highlightNode: function(wlxmlNode) { - this.dom.find('a[data-id="'+wlxmlNode.id+'"]').addClass('rng-common-hoveredNode'); + highlightNode: function(canvasNode) { + this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode'); }, - dimNode: function(wlxmlNode) { - this.dom.find('a[data-id="'+wlxmlNode.id+'"]').removeClass('rng-common-hoveredNode'); + dimNode: function(canvasNode) { + this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode'); } } @@ -66,18 +66,18 @@ return function(sandbox) { start: function() { sandbox.publish('ready'); }, - setNode: function(wlxmlNode) { - if(!wlxmlNode.is(view.currentNode)) - view.setNode(wlxmlNode); + setNode: function(canvasNode) { + if(!canvasNode.isSame(view.currentNode)) + view.setNode(canvasNode); }, getView: function() { return view.dom; }, - highlightNode: function(wlxmlNode) { - view.highlightNode(wlxmlNode); + highlightNode: function(canvasNode) { + view.highlightNode(canvasNode); }, - dimNode: function(wlxmlNode) { - view.dimNode(wlxmlNode); + dimNode: function(canvasNode) { + view.dimNode(canvasNode); } }; }; diff --git a/modules/nodePane/nodePane.js b/modules/nodePane/nodePane.js index a9ef9e4..b825b1b 100644 --- a/modules/nodePane/nodePane.js +++ b/modules/nodePane/nodePane.js @@ -24,9 +24,9 @@ return function(sandbox) { getView: function() { return view; }, - setNode: function(node) { - view.find('.rng-module-nodePane-tagSelect').val(node.tag); - view.find('.rng-module-nodePane-classSelect').val(node.klass); + setNode: function(canvasNode) { + view.find('.rng-module-nodePane-tagSelect').val(canvasNode.getTag()); + view.find('.rng-module-nodePane-classSelect').val(canvasNode.getClass()); } } diff --git a/modules/rng/rng.js b/modules/rng/rng.js index a1fe65e..4189902 100644 --- a/modules/rng/rng.js +++ b/modules/rng/rng.js @@ -50,23 +50,23 @@ return function(sandbox) { } var commands = { - highlightDocumentNode: function(wlxmlNode, origin) { + highlightDocumentNode: function(canvasNode, origin) { ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) { if(!origin || moduleName != origin) - sandbox.getModule(moduleName).highlightNode(wlxmlNode) + sandbox.getModule(moduleName).highlightNode(canvasNode) }); }, - dimDocumentNode: function(wlxmlNode, origin) { + dimDocumentNode: function(canvasNode, origin) { ['documentCanvas', 'nodeBreadCrumbs', 'nodeFamilyTree'].forEach(function(moduleName) { if(!origin || moduleName != origin) - sandbox.getModule(moduleName).dimNode(wlxmlNode) + sandbox.getModule(moduleName).dimNode(canvasNode) }); }, - selectNode: function(wlxmlNode, origin) { - sandbox.getModule('documentCanvas').selectNode(wlxmlNode); - sandbox.getModule('nodePane').setNode(wlxmlNode); - sandbox.getModule('nodeFamilyTree').setNode(wlxmlNode); - sandbox.getModule('nodeBreadCrumbs').setNode(wlxmlNode); + selectNode: function(canvasNode, origin) { + sandbox.getModule('documentCanvas').selectNode(canvasNode); + sandbox.getModule('nodePane').setNode(canvasNode); + sandbox.getModule('nodeFamilyTree').setNode(canvasNode); + sandbox.getModule('nodeBreadCrumbs').setNode(canvasNode); }, resetDocument: function(document, reason) { @@ -191,20 +191,20 @@ return function(sandbox) { dirty.documentCanvas = false; }, - nodeSelected: function(wlxmlNode) { - commands.selectNode(wlxmlNode); + nodeSelected: function(canvasNode) { + commands.selectNode(canvasNode); }, contentChanged: function() { dirty.documentCanvas = true; }, - nodeHovered: function(wlxmlNode) { - commands.highlightDocumentNode(wlxmlNode); + nodeHovered: function(canvasNode) { + commands.highlightDocumentNode(canvasNode); }, - nodeBlured: function(wlxmlNode) { - commands.dimDocumentNode(wlxmlNode); + nodeBlured: function(canvasNode) { + commands.dimDocumentNode(canvasNode); } }; @@ -235,14 +235,14 @@ return function(sandbox) { ready: function() { views.currentNodePaneLayout.appendView(sandbox.getModule('nodeFamilyTree').getView()); }, - nodeEntered: function(wlxmlNode) { - commands.highlightDocumentNode(wlxmlNode, 'nodeFamilyTree'); + nodeEntered: function(canvasNode) { + commands.highlightDocumentNode(canvasNode, 'nodeFamilyTree'); }, - nodeLeft: function(wlxmlNode) { - commands.dimDocumentNode(wlxmlNode, 'nodeFamilyTree'); + nodeLeft: function(canvasNode) { + commands.dimDocumentNode(canvasNode, 'nodeFamilyTree'); }, - nodeSelected: function(wlxmlNode) { - commands.selectNode(wlxmlNode); + nodeSelected: function(canvasNode) { + commands.selectNode(canvasNode); } }; @@ -265,14 +265,14 @@ return function(sandbox) { ready: function() { views.visualEditing.setView('statusBar', sandbox.getModule('nodeBreadCrumbs').getView()); }, - nodeHighlighted: function(wlxmlNode) { - commands.highlightDocumentNode(wlxmlNode, 'nodeBreadCrumbs'); + nodeHighlighted: function(canvasNode) { + commands.highlightDocumentNode(canvasNode, 'nodeBreadCrumbs'); }, - nodeDimmed: function(wlxmlNode) { - commands.dimDocumentNode(wlxmlNode, 'nodeBreadCrumbs'); + nodeDimmed: function(canvasNode) { + commands.dimDocumentNode(canvasNode, 'nodeBreadCrumbs'); }, - nodeSelected: function(wlxmlNode) { - commands.selectNode(wlxmlNode); + nodeSelected: function(canvasNode) { + commands.selectNode(canvasNode); } } -- 2.20.1 From 58f12279b796c932263a4cfad12c3f17695be02a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 27 Jun 2013 13:01:45 +0200 Subject: [PATCH 14/16] Test for canvas.nodeInsideList --- modules/documentCanvas/tests/canvas.test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index 0589c11..afe777a 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -174,5 +174,17 @@ define([
cat
\
')); }); + + test('checking if node is inside a list', function() { + var c = canvas.create(utils.cleanUp('\ +
\ +
\ +
alice
\ +
cat
\ +
\ +
')); + var item = c.findNodes({klass: 'item'})[1]; + assert.ok(c.nodeInsideList({node: item})); + }); }); }); \ No newline at end of file -- 2.20.1 From 4ac9bc0d440f080281210f023fb9d8c1da42dadd Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 27 Jun 2013 13:35:16 +0200 Subject: [PATCH 15/16] Fixing canvas.nodeInsideList --- modules/documentCanvas/canvas.js | 2 +- modules/documentCanvas/tests/canvas.test.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index 9ae3a53..d0629d3 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -193,7 +193,7 @@ Canvas.prototype.nodeInsideList = function(options) { if(options.node.getClass() === 'list-items' || options.node.getClass() === 'item') return true; var pointerElement = $(this.content.find('#' + options.node.getId())); - return pointerElement.parents('list-items, item').length > 0; + return pointerElement.parents('[wlxml-class=list-items], [wlxml-class=item]').length > 0; } return false; }; diff --git a/modules/documentCanvas/tests/canvas.test.js b/modules/documentCanvas/tests/canvas.test.js index afe777a..fc842e5 100644 --- a/modules/documentCanvas/tests/canvas.test.js +++ b/modules/documentCanvas/tests/canvas.test.js @@ -179,12 +179,12 @@ define([ var c = canvas.create(utils.cleanUp('\
\
\ -
alice
\ +
alice \
cat
\
\
')); - var item = c.findNodes({klass: 'item'})[1]; - assert.ok(c.nodeInsideList({node: item})); + assert.ok(c.nodeInsideList({node: c.findNodes({klass: 'item'})[1]}), 'item is inside a list'); + assert.ok(c.nodeInsideList({node: c.findNodes({tag: 'span'})[0]}), 'things nested in item are inside a list'); }); }); }); \ No newline at end of file -- 2.20.1 From 756c5554a2b6a23eb95a7e538b4fe45f06b644e5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Thu, 27 Jun 2013 13:39:56 +0200 Subject: [PATCH 16/16] Fixing list removal --- modules/documentCanvas/canvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/documentCanvas/canvas.js b/modules/documentCanvas/canvas.js index d0629d3..baa2f3c 100644 --- a/modules/documentCanvas/canvas.js +++ b/modules/documentCanvas/canvas.js @@ -172,7 +172,7 @@ Canvas.prototype.listCreate = function(options) { Canvas.prototype.listRemove = function(options) { var pointerElement = $(this.content.find('#' + options.pointer.getId())); var listElement = options.pointer.getClass() === 'list-items' ? pointerElement : - pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]'); + pointerElement.parents('[wlxml-class|="list-items"][wlxml-tag]'); listElement.find('[wlxml-class=item]').each(function() { $(this).removeAttr('wlxml-class'); -- 2.20.1