From 064901239c2478c0fa4763812771cb370c76742d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Sun, 14 Jul 2013 15:36:04 +0200 Subject: [PATCH] Allowing for canvas to listen to dom key events --- modules/documentCanvas/canvas/canvas.js | 15 ++-- modules/documentCanvas/canvasManager.js | 92 ++++++++++++------------ modules/documentCanvas/documentCanvas.js | 2 +- modules/documentCanvas/template.html | 2 +- 4 files changed, 57 insertions(+), 54 deletions(-) diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index 90dac8c..45c7fe2 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -15,10 +15,10 @@ $.extend(Canvas.prototype, { loadWlxml: function(wlxml) { var d = wlxml ? $($.trim(wlxml)) : null; if(d) { - var wrapper = $('
'); - wrapper.append(d); + this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); + this.wrapper.append(d); - wrapper.find('*').replaceWith(function() { + this.wrapper.find('*').replaceWith(function() { var currentTag = $(this); if(currentTag.attr('wlxml-tag')) return; @@ -31,7 +31,7 @@ $.extend(Canvas.prototype, { return element; }); - wrapper.find(':not(iframe)').addBack().contents() + this.wrapper.find(':not(iframe)').addBack().contents() .filter(function() {return this.nodeType === Node.TEXT_NODE}) .each(function() { @@ -65,13 +65,16 @@ $.extend(Canvas.prototype, { $(this).replaceWith(element.dom()); }); - this.d = wrapper.children(0); - this.d.unwrap(); + this.d = this.wrapper.children(0); } else { this.d = null; } }, + view: function() { + return this.wrapper; + }, + doc: function() { if(this.d === null) return null; diff --git a/modules/documentCanvas/canvasManager.js b/modules/documentCanvas/canvasManager.js index 4b26135..a480d2a 100644 --- a/modules/documentCanvas/canvasManager.js +++ b/modules/documentCanvas/canvasManager.js @@ -28,55 +28,55 @@ var Manager = function(canvas, sandbox) { this.currentNode = null; var manager = this; - canvas.doc().dom().find('#rng-module-documentCanvas-content').on('keyup', function() { - manager.sandbox.publish('contentChanged'); - }); - - canvas.doc().dom().on('mouseover', '[wlxml-tag]', function(e) { - e.stopPropagation(); - manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target))); - }); - canvas.doc().dom().on('mouseout', '[wlxml-tag]', function(e) { - e.stopPropagation(); - manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target))); - }); - 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.doc().dom().on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { - var anchor = $(window.getSelection().anchorNode); + // canvas.doc().dom().find('#rng-module-documentCanvas-content').on('keyup', function() { + // manager.sandbox.publish('contentChanged'); + // }); + + // canvas.doc().dom().on('mouseover', '[wlxml-tag]', function(e) { + // e.stopPropagation(); + // manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target))); + // }); + // canvas.doc().dom().on('mouseout', '[wlxml-tag]', function(e) { + // e.stopPropagation(); + // manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target))); + // }); + // 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.doc().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]')) - return; - manager.selectNode(canvasNode.create(anchor)); - }); + // if(anchor[0].nodeType === Node.TEXT_NODE) + // anchor = anchor.parent(); + // if(!anchor.is('[wlxml-tag]')) + // return; + // manager.selectNode(canvasNode.create(anchor)); + // }); - canvas.doc().dom().on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { - if(e.which === 13) { - manager.onEnterKey(e); - } - if(e.which === 8) { - manager.onBackspaceKey(e); - } - }); + // canvas.doc().dom().on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { + // if(e.which === 13) { + // manager.onEnterKey(e); + // } + // if(e.which === 8) { + // manager.onBackspaceKey(e); + // } + // }); - canvas.doc().dom().onShow = function() { - if(!manager.shownAlready) { - manager.shownAlready = true; - manager.selectFirstNode(); - } else if(manager.currentNode) { - manager.movecaretToNode(manager.getNodeElement(manager.currentNode)); - canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition); - } - }; - canvas.doc().dom().onHide = function() { - manager.scrollbarPosition = canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(); - }; + // canvas.doc().dom().onShow = function() { + // if(!manager.shownAlready) { + // manager.shownAlready = true; + // manager.selectFirstNode(); + // } else if(manager.currentNode) { + // manager.movecaretToNode(manager.getNodeElement(manager.currentNode)); + // canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition); + // } + // }; + // canvas.doc().dom().onHide = function() { + // manager.scrollbarPosition = canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(); + // }; }; Manager.prototype.selectNode = function(cnode, options) { diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js index 39b2610..4a49783 100644 --- a/modules/documentCanvas/documentCanvas.js +++ b/modules/documentCanvas/documentCanvas.js @@ -24,7 +24,7 @@ return function(sandbox) { }, setDocument: function(xml) { canvas.loadWlxml(xml); //canvas.setHTML(transformations.fromXML.getHTMLTree(xml)); - canvasWrapper.find('#rng-module-documentCanvas-content').empty().append(canvas.doc().dom()); + canvasWrapper.find('#rng-module-documentCanvas-content').empty().append(canvas.view()); manager = new CanvasManager(canvas, sandbox); sandbox.publish('documentSet'); }, diff --git a/modules/documentCanvas/template.html b/modules/documentCanvas/template.html index 5be1a42..63dc331 100644 --- a/modules/documentCanvas/template.html +++ b/modules/documentCanvas/template.html @@ -1,7 +1,7 @@
-
+
\ No newline at end of file -- 2.20.1