de085ce041a0e2263063426b3280a86f6f7dfd73
[fnpeditor.git] / 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(false);\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 });