From a29236f6a3f5166a3cace703dd5f89cf17405617 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Tue, 9 Jul 2013 09:45:11 +0200 Subject: [PATCH 1/1] integration wip --- modules/documentCanvas/canvas/canvas.js | 66 +++++++++++++----------- modules/documentCanvas/canvasManager.js | 30 +++++------ modules/documentCanvas/documentCanvas.js | 14 +++-- 3 files changed, 59 insertions(+), 51 deletions(-) diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 3ae6a3e..5ec69ea 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -6,41 +6,45 @@ define([ 'use strict'; -var Canvas = function(xml) { - xml = $.parseXML(xml); - this.d = xml !== null ? $(xml.childNodes[0]) : null; - if(this.d) { - var wrapper = $('
'); - wrapper.append(this.d); - wrapper.find(':not(iframe)').addBack().contents() - .filter(function() {return this.nodeType === Node.TEXT_NODE}) - .each(function() { - - var el = $(this); - - // TODO: use DocumentElement API - var spanParent = el.parent().prop('tagName') === 'span', - spanBefore = el.prev().length > 0 && $(el.prev()[0]).prop('tagName') === 'span', - spanAfter = el.next().length > 0 && $(el.next()[0]).prop('tagName') === 'span'; - - if(spanParent || spanBefore || spanAfter) { - var startSpace = /\s/g.test(this.data.substr(0,1)); - var endSpace = /\s/g.test(this.data.substr(-1)) && this.data.length > 1; - var trimmed = $.trim(this.data); - this.data = (startSpace && (spanParent || spanBefore) ? ' ' : '') - + trimmed - + (endSpace && (spanParent || spanAfter) ? ' ' : ''); - - } else { - this.data = $.trim(this.data); - } - }); - this.d.unwrap(); - }; +var Canvas = function(wlxml) { + this.loadWlxml(wlxml); }; $.extend(Canvas.prototype, { + loadWlxml: function(wlxml) { + var xml = $.parseXML(wlxml); + this.d = xml !== null ? $(xml.childNodes[0]) : null; + if(this.d) { + var wrapper = $('
'); + wrapper.append(this.d); + wrapper.find(':not(iframe)').addBack().contents() + .filter(function() {return this.nodeType === Node.TEXT_NODE}) + .each(function() { + + var el = $(this); + + // TODO: use DocumentElement API + var spanParent = el.parent().prop('tagName') === 'span', + spanBefore = el.prev().length > 0 && $(el.prev()[0]).prop('tagName') === 'span', + spanAfter = el.next().length > 0 && $(el.next()[0]).prop('tagName') === 'span'; + + if(spanParent || spanBefore || spanAfter) { + var startSpace = /\s/g.test(this.data.substr(0,1)); + var endSpace = /\s/g.test(this.data.substr(-1)) && this.data.length > 1; + var trimmed = $.trim(this.data); + this.data = (startSpace && (spanParent || spanBefore) ? ' ' : '') + + trimmed + + (endSpace && (spanParent || spanAfter) ? ' ' : ''); + + } else { + this.data = $.trim(this.data); + } + }); + this.d.unwrap(); + }; + }, + doc: function() { if(this.d === null) return null; diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index edb599c..26bc4fa 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -28,25 +28,25 @@ var Manager = function(canvas, sandbox) { this.currentNode = null; var manager = this; - canvas.dom.find('#rng-module-documentCanvas-content').on('keyup', function() { + canvas.doc().dom().find('#rng-module-documentCanvas-content').on('keyup', function() { manager.sandbox.publish('contentChanged'); }); - canvas.dom.on('mouseover', '[wlxml-tag]', function(e) { + canvas.doc().dom().on('mouseover', '[wlxml-tag]', function(e) { e.stopPropagation(); manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target))); }); - canvas.dom.on('mouseout', '[wlxml-tag]', function(e) { + canvas.doc().dom().on('mouseout', '[wlxml-tag]', function(e) { e.stopPropagation(); manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target))); }); - canvas.dom.on('click', '[wlxml-tag]', function(e) { + canvas.doc().dom().on('click', '[wlxml-tag]', function(e) { e.stopPropagation(); console.log('clicked node type: '+e.target.nodeType); manager.selectNode(canvasNode.create($(e.target))); }); - canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { + canvas.doc().dom().on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { var anchor = $(window.getSelection().anchorNode); if(anchor[0].nodeType === Node.TEXT_NODE) @@ -56,7 +56,7 @@ var Manager = function(canvas, sandbox) { manager.selectNode(canvasNode.create(anchor)); }); - canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { + canvas.doc().dom().on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { if(e.which === 13) { manager.onEnterKey(e); } @@ -65,17 +65,17 @@ var Manager = function(canvas, sandbox) { } }); - canvas.dom.onShow = function() { + canvas.doc().dom().onShow = function() { if(!manager.shownAlready) { manager.shownAlready = true; manager.selectFirstNode(); } else if(manager.currentNode) { manager.movecaretToNode(manager.getNodeElement(manager.currentNode)); - canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition); + canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition); } }; - canvas.dom.onHide = function() { - manager.scrollbarPosition = canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop(); + canvas.doc().dom().onHide = function() { + manager.scrollbarPosition = canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(); }; }; @@ -85,7 +85,7 @@ Manager.prototype.selectNode = function(cnode, options) { this.dimNode(cnode); - this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode'); + this.canvas.doc().dom().find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode'); nodeElement.addClass('rng-module-documentCanvas-currentNode'); if(options.movecaret) { @@ -138,7 +138,7 @@ Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) { }; Manager.prototype.getNodeElement = function(cnode) { - return this.canvas.dom.find('#'+cnode.getId()); + return this.canvas.doc().dom().find('#'+cnode.getId()); }; Manager.prototype.highlightNode = function(cnode) { @@ -162,14 +162,14 @@ Manager.prototype.dimNode = function(cnode) { }; Manager.prototype.selectFirstNode = function() { - var firstNodeWithText = this.canvas.dom.find('[wlxml-tag]').filter(function() { + var firstNodeWithText = this.canvas.doc().dom().find('[wlxml-tag]').filter(function() { return $(this).clone().children().remove().end().text().trim() !== ''; }).first(); var node; if(firstNodeWithText.length) node = $(firstNodeWithText[0]); else { - node = this.canvas.dom.find('[wlxml-class|="p"]'); + node = this.canvas.doc().dom().find('[wlxml-class|="p"]'); } this.selectNode(canvasNode.create(node), {movecaret: true}); }; @@ -190,7 +190,7 @@ Manager.prototype.movecaretToNode = function(nodeElement, where) { }; Manager.prototype.toggleGrid = function(toggle) { - this.canvas.dom.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle); + this.canvas.doc().dom().find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle); this.gridToggled = toggle; }; diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index 2fa8722..7500e35 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -5,23 +5,27 @@ define([ './transformations', './canvas', './canvasManager', -'libs/text!./template.html'], function(_, transformations, Canvas, CanvasManager, template) { +'./canvas/canvas', +'libs/text!./template.html'], function(_, transformations, Canvas, CanvasManager, canvas3, template) { 'use strict'; return function(sandbox) { - var canvas = Canvas.create(); - var manager = new CanvasManager(canvas, sandbox); + var canvas = canvas3.fromXML(''); //canvasCanvas.create(); + var manager; + var canvasWrapper = $(template); /* public api */ return { start: function() { sandbox.publish('ready'); }, getView: function() { - return canvas.dom; + return canvasWrapper; }, setDocument: function(xml) { - canvas.setHTML(transformations.fromXML.getHTMLTree(xml)); + canvas.loadWlxml(xml); //canvas.setHTML(transformations.fromXML.getHTMLTree(xml)); + canvasWrapper.find('#rng-module-documentCanvas-content').empty().append(canvas.doc().dom()); + manager = new CanvasManager(canvas, sandbox); sandbox.publish('documentSet'); }, getDocument: function() { -- 2.20.1