wrapping document node and text element
[fnpeditor.git] / modules / documentCanvas / canvasManager.js
index a42eee6..edb599c 100644 (file)
-define([\r
-'libs/jquery-1.9.1.min',\r
-'./canvasNode'\r
-], function($, canvasNode) {\r
-\r
-'use strict';\r
-\r
-var getCursorPosition = function() {\r
-    var selection = window.getSelection();\r
-    var anchorNode = $(selection.anchorNode);\r
-    var parent = anchorNode.parent();\r
-    return {\r
-        textNode: anchorNode,\r
-        textNodeOffset: selection.anchorOffset,\r
-        textNodeIndex: parent.contents().index(anchorNode),\r
-        parentNode: parent,\r
-        focusNode: $(selection.focusNode).parent(),\r
-        isAtEnd: selection.anchorOffset === anchorNode.text().length\r
-    }\r
-};\r
-\r
-var Manager = function(canvas, sandbox) {\r
-    this.canvas = canvas;\r
-    this.sandbox = sandbox;\r
-    this.shownAlready = false;\r
-    this.gridToggled = false;\r
-    this.scrollbarPosition = 0;\r
-    this.currentNode = null;\r
-    var manager = this;\r
-        \r
-    canvas.dom.find('#rng-module-documentCanvas-content').on('keyup', function() {\r
-        manager.sandbox.publish('contentChanged');\r
-    });\r
-\r
-    canvas.dom.on('mouseover', '[wlxml-tag]', function(e) {\r
-        e.stopPropagation();\r
-        manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target)));\r
-    });\r
-    canvas.dom.on('mouseout', '[wlxml-tag]', function(e) {\r
-        e.stopPropagation();\r
-        manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target)));\r
-    });\r
-    canvas.dom.on('click', '[wlxml-tag]', function(e) {\r
-        e.stopPropagation();\r
-        console.log('clicked node type: '+e.target.nodeType);\r
-        manager.selectNode(canvasNode.create($(e.target)));\r
-    });\r
-\r
-    canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
-        var anchor = $(window.getSelection().anchorNode);\r
-        \r
-        if(anchor[0].nodeType === Node.TEXT_NODE)\r
-            anchor = anchor.parent();\r
-        if(!anchor.is('[wlxml-tag]'))\r
-            return;\r
-        manager.selectNode(canvasNode.create(anchor));\r
-    });\r
-    \r
-    canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
-        if(e.which === 13) { \r
-            manager.onEnterKey(e);\r
-        }\r
-        if(e.which === 8) {\r
-            manager.onBackspaceKey(e);\r
-        }\r
-    });\r
-              \r
-    canvas.dom.onShow = function() {\r
-        if(!manager.shownAlready) {\r
-            manager.shownAlready = true;\r
-            manager.selectFirstNode();\r
-        } else if(manager.currentNode) {\r
-            manager.movecaretToNode(manager.getNodeElement(manager.currentNode));\r
-            canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition);\r
-        }\r
-    };\r
-    canvas.dom.onHide = function() {\r
-       manager.scrollbarPosition = canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop();\r
-    }\r
-};\r
-    \r
-Manager.prototype.selectNode = function(cnode, options) {\r
-    options = options || {};\r
-    var nodeElement = this.getNodeElement(cnode)\r
-    \r
-    this.dimNode(cnode);\r
-    \r
-    this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');\r
-    nodeElement.addClass('rng-module-documentCanvas-currentNode');\r
-    \r
-    if(options.movecaret) {\r
-        this.movecaretToNode(nodeElement, options.movecaret);\r
-    }\r
-    \r
-    this.currentNode = cnode;\r
-    this.sandbox.publish('nodeSelected', cnode);\r
-};\r
-\r
-Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {\r
-    var selection = window.getSelection();\r
-\r
-    if(selection.getRangeAt(0).collapsed) {\r
-    \r
-    } else {\r
-        var offsetStart = selection.anchorOffset;\r
-        var offsetEnd = selection.focusOffset;\r
-        if(offsetStart > offsetEnd) {\r
-            var tmp = offsetStart;\r
-            offsetStart = offsetEnd;\r
-            offsetEnd = tmp;\r
-        }\r
-        var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass});\r
-        this.canvas.nodeWrap({inside: canvasNode.create($(selection.anchorNode).parent()),\r
-                              _with: wrapper,\r
-                              offsetStart: offsetStart,\r
-                              offsetEnd: offsetEnd\r
-                            });\r
-        this.selectNode(wrapper, {movecaret: 'end'});\r
-    }\r
-    \r
-    \r
-}\r
-\r
-Manager.prototype.getNodeElement = function(cnode) {\r
-    return this.canvas.dom.find('#'+cnode.getId());\r
-};\r
-\r
-Manager.prototype.highlightNode = function(cnode) {\r
-    var nodeElement = this.getNodeElement(cnode);\r
-    if(!this.gridToggled) {\r
-        nodeElement.addClass('rng-common-hoveredNode');\r
-        var label = nodeElement.attr('wlxml-tag');\r
-        if(nodeElement.attr('wlxml-class'))\r
-            label += ' / ' + nodeElement.attr('wlxml-class');\r
-        var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);\r
-        nodeElement.append(tag);\r
-    }\r
-};\r
-\r
-Manager.prototype.dimNode = function(cnode) {\r
-    var nodeElement = this.getNodeElement(cnode);\r
-    if(!this.gridToggled) {\r
-        nodeElement.removeClass('rng-common-hoveredNode');\r
-        nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove();\r
-    }\r
-};\r
-\r
-Manager.prototype.selectFirstNode = function() {\r
-    var firstNodeWithText = this.canvas.dom.find('[wlxml-tag]').filter(function() {\r
-        return $(this).clone().children().remove().end().text().trim() !== '';\r
-    }).first();\r
-    var node;\r
-    if(firstNodeWithText.length)\r
-        node = $(firstNodeWithText[0])\r
-    else {\r
-        node = this.canvas.dom.find('[wlxml-class|="p"]')\r
-    }\r
-    this.selectNode(canvasNode.create(node), {movecaret: true});\r
-};\r
-\r
-Manager.prototype.movecaretToNode = function(nodeElement, where) {\r
-    if(!nodeElement.length)\r
-        return;\r
-    var range = document.createRange();\r
-    range.selectNodeContents(nodeElement[0]);\r
-    \r
-    var collapseArg = true;\r
-    if(where === 'end')\r
-        collapseArg = false;\r
-    range.collapse(collapseArg);\r
-    var selection = document.getSelection();\r
-    selection.removeAllRanges()\r
-    selection.addRange(range);\r
-};\r
-\r
-Manager.prototype.toggleGrid =  function(toggle) {\r
-    this.canvas.dom.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);\r
-    this.gridToggled = toggle;\r
-};\r
-\r
-Manager.prototype.onEnterKey = function(e) {\r
-    e.preventDefault();\r
-    var pos = getCursorPosition();\r
-    var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id'));\r
-    var newNode;\r
-\r
-    if(pos.isAtEnd) {\r
-        newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')});\r
-        this.canvas.nodeInsertAfter({node: newNode, after: this.canvas.getNodeById(pos.parentNode.attr('id'))});\r
-    } else {\r
-        newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset});\r
-    }\r
-    if(newNode)\r
-        this.selectNode(newNode, {movecaret: true});\r
-    this.sandbox.publish('contentChanged');\r
-};\r
-\r
-Manager.prototype.onBackspaceKey = function(e) {\r
-    var pos = getCursorPosition();\r
-    var len = pos.textNode.text().length;\r
-    if(len === 1) {\r
-        // Prevent deleting node by browser after last character removed;\r
-        e.preventDefault();\r
-        pos.parentNode.text('');\r
-    }\r
-    if(len === 0) {\r
-        e.preventDefault();\r
-        var toRemove = canvasNode.create(pos.textNode);\r
-        var prevNode = this.canvas.getPrecedingNode({node:toRemove});\r
-        this.canvas.nodeRemove({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem\r
-        this.selectNode(prevNode, {movecaret: 'end'});\r
-    }\r
-}\r
-\r
-Manager.prototype.command = function(command, meta) {\r
-    var pos = getCursorPosition();\r
-    \r
-    if(command === 'createList') {\r
-        var node = canvasNode.create(pos.parentNode);\r
-        if(window.getSelection().getRangeAt().collapsed && this.canvas.nodeInsideList({node: node})) {\r
-            this.canvas.listRemove({pointer: node});\r
-            this.selectNode(node, {movecaret: 'end'});\r
-            this.sandbox.publish('contentChanged');\r
-        }\r
-        else {\r
-            //if(!this.canvas.nodeInsideList({node: node})) {\r
-                this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode), type: meta});\r
-                this.selectNode(node, {movecaret: 'end'});\r
-                this.sandbox.publish('contentChanged');\r
-            //}\r
-        }\r
-    }\r
-\r
-}\r
-\r
-\r
-return Manager;\r
-    \r
+define([
+'libs/jquery-1.9.1.min',
+'./canvasNode'
+], function($, canvasNode) {
+
+'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,
+        focusNode: $(selection.focusNode).parent(),
+        isAtEnd: selection.anchorOffset === anchorNode.text().length
+    };
+};
+
+var Manager = function(canvas, sandbox) {
+    this.canvas = canvas;
+    this.sandbox = sandbox;
+    this.shownAlready = false;
+    this.gridToggled = false;
+    this.scrollbarPosition = 0;
+    this.currentNode = null;
+    var manager = this;
+        
+    canvas.dom.find('#rng-module-documentCanvas-content').on('keyup', function() {
+        manager.sandbox.publish('contentChanged');
+    });
+
+    canvas.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) {
+        e.stopPropagation();
+        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(canvasNode.create($(e.target)));
+    });
+
+    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]'))
+            return;
+        manager.selectNode(canvasNode.create(anchor));
+    });
+    
+    canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {
+        if(e.which === 13) { 
+            manager.onEnterKey(e);
+        }
+        if(e.which === 8) {
+            manager.onBackspaceKey(e);
+        }
+    });
+              
+    canvas.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.dom.onHide = function() {
+       manager.scrollbarPosition = canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop();
+    };
+};
+    
+Manager.prototype.selectNode = function(cnode, options) {
+    options = options || {};
+    var nodeElement = this.getNodeElement(cnode);
+    
+    this.dimNode(cnode);
+    
+    this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');
+    nodeElement.addClass('rng-module-documentCanvas-currentNode');
+    
+    if(options.movecaret) {
+        this.movecaretToNode(nodeElement, options.movecaret);
+    }
+    
+    this.currentNode = cnode;
+    this.sandbox.publish('nodeSelected', cnode);
+};
+
+Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {
+    var selection = window.getSelection(),
+        $anchorNode = $(selection.anchorNode),
+        $focusNode = $(selection.focusNode);
+        
+        
+    if(!selection.isCollapsed && $anchorNode.parent()[0] === $focusNode.parent()[0]) {
+        var textNodeIdx,
+            parent = $anchorNode.parent(),
+            parentContents = parent.contents(),
+            offsetStart = selection.anchorOffset,
+            offsetEnd = selection.focusOffset;
+        
+        if(selection.anchorNode === selection.focusNode) {
+            if(offsetStart > offsetEnd) {
+                var tmp = offsetStart;
+                offsetStart = offsetEnd;
+                offsetEnd = tmp;
+            }
+            textNodeIdx = parentContents.index($anchorNode);
+        } else {
+            if(parentContents.index($anchorNode) > parentContents.index($focusNode)) {
+                offsetStart = selection.focusOffset;
+                offsetEnd = selection.anchorOffset;
+            }
+            textNodeIdx = [parentContents.index($anchorNode), parentContents.index($focusNode)];
+        }
+        
+        var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass});
+        this.canvas.nodeWrap({inside: canvasNode.create(parent),
+                              _with: wrapper,
+                              offsetStart: offsetStart,
+                              offsetEnd: offsetEnd,
+                              textNodeIdx: textNodeIdx
+                            });
+        this.selectNode(wrapper, {movecaret: 'end'});
+    }
+    
+    
+};
+
+Manager.prototype.getNodeElement = function(cnode) {
+    return this.canvas.dom.find('#'+cnode.getId());
+};
+
+Manager.prototype.highlightNode = function(cnode) {
+    var nodeElement = this.getNodeElement(cnode);
+    if(!this.gridToggled) {
+        nodeElement.addClass('rng-common-hoveredNode');
+        var label = nodeElement.attr('wlxml-tag');
+        if(nodeElement.attr('wlxml-class'))
+            label += ' / ' + nodeElement.attr('wlxml-class');
+        var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);
+        nodeElement.append(tag);
+    }
+};
+
+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();
+    }
+};
+
+Manager.prototype.selectFirstNode = function() {
+    var firstNodeWithText = this.canvas.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"]');
+    }
+    this.selectNode(canvasNode.create(node), {movecaret: true});
+};
+
+Manager.prototype.movecaretToNode = function(nodeElement, where) {
+    if(!nodeElement.length)
+        return;
+    var range = document.createRange();
+    range.selectNodeContents(nodeElement[0]);
+    
+    var collapseArg = true;
+    if(where === 'end')
+        collapseArg = false;
+    range.collapse(collapseArg);
+    var selection = document.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+};
+
+Manager.prototype.toggleGrid =  function(toggle) {
+    this.canvas.dom.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
+    this.gridToggled = toggle;
+};
+
+Manager.prototype.onEnterKey = function(e) {
+    e.preventDefault();
+    var pos = getCursorPosition();
+    var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id'));
+    var newNode;
+
+    if(pos.isAtEnd) {
+        newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')});
+        this.canvas.nodeInsertAfter({node: newNode, after: this.canvas.getNodeById(pos.parentNode.attr('id'))});
+    } else {
+        newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset});
+    }
+    if(newNode)
+        this.selectNode(newNode, {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 = 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'});
+    }
+};
+
+Manager.prototype.command = function(command, meta) {
+    var pos = getCursorPosition();
+    
+    if(command === 'createList') {
+        var node = canvasNode.create(pos.parentNode);
+        if(window.getSelection().getRangeAt(0).collapsed && this.canvas.nodeInsideList({node: node})) {
+            this.canvas.listRemove({pointer: node});
+            this.selectNode(node, {movecaret: 'end'});
+            this.sandbox.publish('contentChanged');
+        }
+        else {
+            //if(!this.canvas.nodeInsideList({node: node})) {
+                this.canvas.listCreate({start: node, end: canvasNode.create(pos.focusNode), type: meta});
+                this.selectNode(node, {movecaret: 'end'});
+                this.sandbox.publish('contentChanged');
+            //}
+        }
+    } else if(command === 'unwrap-node') {
+        this.canvas.nodeUnwrap({node: canvasNode.create(pos.parentNode)});
+        this.sandbox.publish('contentChanged');
+    }
+
+};
+
+
+return Manager;
+    
 });
\ No newline at end of file