Allowing for canvas to listen to dom key events

diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js
index 90dac8c..45c7fe2 100644 (file)
--- 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 = $('<div>');
-            wrapper.append(d);
+            this.wrapper = $('<div>').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 (file)
--- 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 (file)
--- 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 (file)
--- a/modules/documentCanvas/template.html
+++ b/modules/documentCanvas/template.html
@@ -1,7 +1,7 @@
 <div id="rng-module-documentCanvas">
     <div id="rng-module-documentCanvas-mainArea">
         <div id="rng-module-documentCanvas-contentWrapper">
-            <div id="rng-module-documentCanvas-content" contenteditable="true"></div>
+            <div id="rng-module-documentCanvas-content"></div>
         </div>
     </div>
 </div>
\ No newline at end of file