modules/documentCanvas/canvasManager.js

   1 define([\r
   2 'libs/jquery-1.9.1.min',\r
   3 './wlxmlNode'\r
   4 ], function($, wlxmlNode) {\r
   5 \r
   6 'use strict';\r
   7 \r
   8 var Manager = function(canvas, sandbox) {\r
   9     this.canvas = canvas;\r
  10     this.sandbox = sandbox;\r
  11     this.shownAlready = false;\r
  12     this.gridToggled = false;\r
  13     this.scrollbarPosition = 0;\r
  14     this.currentNode = null;\r
  15     var manager = this;\r
  16         \r
  17     canvas.dom.find('#rng-module-documentCanvas-content').on('keyup', function() {\r
  18         manager.sandbox.publish('contentChanged');\r
  19     });\r
  20 \r
  21     canvas.dom.on('mouseover', '[wlxml-tag]', function(e) {\r
  22         e.stopPropagation();\r
  23         manager.sandbox.publish('nodeHovered', new wlxmlNode.Node($(e.target)));\r
  24     });\r
  25     canvas.dom.on('mouseout', '[wlxml-tag]', function(e) {\r
  26         e.stopPropagation();\r
  27         manager.sandbox.publish('nodeBlured', new wlxmlNode.Node($(e.target)));\r
  28     });\r
  29     canvas.dom.on('click', '[wlxml-tag]', function(e) {\r
  30         e.stopPropagation();\r
  31         console.log('clicked node type: '+e.target.nodeType);\r
  32         manager.selectNode(new wlxmlNode.Node($(e.target)));\r
  33     });\r
  34 \r
  35     canvas.dom.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
  36         var anchor = $(window.getSelection().anchorNode);\r
  37         if(anchor[0].nodeType === Node.TEXT_NODE)\r
  38             anchor = anchor.parent();\r
  39         if(!anchor.is('[wlxml-tag]'))\r
  40             return;\r
  41         manager.selectNode(new wlxmlNode.Node(anchor));\r
  42     });\r
  43     \r
  44     canvas.dom.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {\r
  45         if(e.which === 13) { \r
  46             e.preventDefault();\r
  47             manager.insertNewNode(null, null);\r
  48         }\r
  49         if(e.which === 8) {\r
  50             var anchor = window.getSelection().anchorNode;\r
  51             var len = anchor.length;\r
  52             console.log(len);\r
  53             if(len === 1) {\r
  54                 e.preventDefault();\r
  55                 $(anchor).parent().text('');\r
  56             }\r
  57         }\r
  58     });\r
  59               \r
  60     canvas.dom.onShow = function() {\r
  61         if(!manager.shownAlready) {\r
  62             manager.shownAlready = true;\r
  63             manager.selectFirstNode();\r
  64         } else if(manager.currentNode) {\r
  65             manager.movecaretToNode(manager.getNodeElement(manager.currentNode));\r
  66             canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition);\r
  67         }\r
  68     };\r
  69     canvas.dom.onHide = function() {\r
  70        manager.scrollbarPosition = canvas.dom.find('#rng-module-documentCanvas-contentWrapper').scrollTop();\r
  71     }\r
  72 };\r
  73     \r
  74 Manager.prototype.selectNode = function(wlxmlNode, options) {\r
  75     options = options || {};\r
  76     var nodeElement = this.getNodeElement(wlxmlNode)\r
  77     \r
  78     this.dimNode(wlxmlNode);\r
  79     \r
  80     this.canvas.dom.find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');\r
  81     nodeElement.addClass('rng-module-documentCanvas-currentNode');\r
  82     \r
  83     if(options.movecaret) {\r
  84         this.movecaretToNode(nodeElement);\r
  85     }\r
  86     \r
  87     this.currentNode = wlxmlNode;\r
  88     this.sandbox.publish('nodeSelected', wlxmlNode);\r
  89 };\r
  90 \r
  91 Manager.prototype.getNodeElement = function(wlxmlNode) {\r
  92     return this.canvas.dom.find('#'+wlxmlNode.id);\r
  93 };\r
  94 \r
  95 Manager.prototype.highlightNode = function(wlxmlNode) {\r
  96     var nodeElement = this.getNodeElement(wlxmlNode);\r
  97     if(!this.gridToggled) {\r
  98         nodeElement.addClass('rng-common-hoveredNode');\r
  99         var label = nodeElement.attr('wlxml-tag');\r
 100         if(nodeElement.attr('wlxml-class'))\r
 101             label += ' / ' + nodeElement.attr('wlxml-class');\r
 102         var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);\r
 103         nodeElement.append(tag);\r
 104     }\r
 105 };\r
 106 \r
 107 Manager.prototype.dimNode = function(wlxmlNode) {\r
 108     var nodeElement = this.getNodeElement(wlxmlNode);\r
 109     if(!this.gridToggled) {\r
 110         nodeElement.removeClass('rng-common-hoveredNode');\r
 111         nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove();\r
 112     }\r
 113 };\r
 114 \r
 115 Manager.prototype.selectFirstNode = function() {\r
 116     var firstNodeWithText = this.canvas.dom.find('[wlxml-tag]').filter(function() {\r
 117         return $(this).clone().children().remove().end().text().trim() !== '';\r
 118     }).first();\r
 119     var node;\r
 120     if(firstNodeWithText.length)\r
 121         node = $(firstNodeWithText[0])\r
 122     else {\r
 123         node = this.canvas.dom.find('[wlxml-class|="p"]')\r
 124     }\r
 125     this.selectNode(new wlxmlNode.Node(node), {movecaret: true});\r
 126 };\r
 127 \r
 128 Manager.prototype.movecaretToNode = function(nodeElement) {\r
 129     var range = document.createRange();\r
 130     range.selectNodeContents(nodeElement[0]);\r
 131     range.collapse(true);\r
 132     var selection = document.getSelection();\r
 133     selection.removeAllRanges()\r
 134     selection.addRange(range);\r
 135 };\r
 136 \r
 137 Manager.prototype.toggleGrid =  function(toggle) {\r
 138     this.canvas.dom.find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);\r
 139     this.gridToggled = toggle;\r
 140 };\r
 141 \r
 142 Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {\r
 143     //TODO: Insert inline\r
 144     var anchor = $(window.getSelection().anchorNode);\r
 145     var anchorOffset = window.getSelection().anchorOffset;\r
 146     \r
 147     var parent = anchor.parent();\r
 148     var idx = parent.contents().index(anchor);\r
 149     \r
 150     if(anchorOffset < anchor.text().length) {\r
 151         var newNode = this.canvas.splitNode({node: {id: parent.attr('id')}, textNodeIdx: idx, offset: anchorOffset});\r
 152         this.selectNode(new wlxmlNode.Node(newNode), {movecaret: true});\r
 153     }\r
 154 \r
 155     \r
 156     \r
 157     this.sandbox.publish('contentChanged');\r
 158 };\r
 159 \r
 160 return Manager;\r
 161     \r
 162 });