235c97b53958d6d12709d6bd0bd6c750f5497b84
[fnpeditor.git] / modules / documentCanvas / canvasManager.js
1 define([
2 'libs/jquery-1.9.1.min',
3 './canvasNode'
4 ], function($, canvasNode) {
5
6 'use strict';
7
8 var getCursorPosition = function() {
9     var selection = window.getSelection();
10     var anchorNode = $(selection.anchorNode);
11     var parent = anchorNode.parent();
12     return {
13         textNode: anchorNode,
14         textNodeOffset: selection.anchorOffset,
15         textNodeIndex: parent.contents().index(anchorNode),
16         parentNode: parent,
17         focusNode: $(selection.focusNode).parent(),
18         isAtEnd: selection.anchorOffset === anchorNode.text().length
19     };
20 };
21
22 var Manager = function(canvas, sandbox) {
23     this.canvas = canvas;
24     this.sandbox = sandbox;
25     this.shownAlready = false;
26     this.gridToggled = false;
27     this.scrollbarPosition = 0;
28     this.currentNode = null;
29     var manager = this;
30         
31     canvas.doc().dom().find('#rng-module-documentCanvas-content').on('keyup', function() {
32         manager.sandbox.publish('contentChanged');
33     });
34
35     canvas.doc().dom().on('mouseover', '[wlxml-tag]', function(e) {
36         e.stopPropagation();
37         manager.sandbox.publish('nodeHovered', canvasNode.create($(e.target)));
38     });
39     canvas.doc().dom().on('mouseout', '[wlxml-tag]', function(e) {
40         e.stopPropagation();
41         manager.sandbox.publish('nodeBlured', canvasNode.create($(e.target)));
42     });
43     canvas.doc().dom().on('click', '[wlxml-tag]', function(e) {
44         e.stopPropagation();
45         console.log('clicked node type: '+e.target.nodeType);
46         manager.selectNode(canvasNode.create($(e.target)));
47     });
48
49     canvas.doc().dom().on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) {
50         var anchor = $(window.getSelection().anchorNode);
51         
52         if(anchor[0].nodeType === Node.TEXT_NODE)
53             anchor = anchor.parent();
54         if(!anchor.is('[wlxml-tag]'))
55             return;
56         manager.selectNode(canvasNode.create(anchor));
57     });
58     
59     canvas.doc().dom().on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) {
60         if(e.which === 13) { 
61             manager.onEnterKey(e);
62         }
63         if(e.which === 8) {
64             manager.onBackspaceKey(e);
65         }
66     });
67               
68     canvas.doc().dom().onShow = function() {
69         if(!manager.shownAlready) {
70             manager.shownAlready = true;
71             manager.selectFirstNode();
72         } else if(manager.currentNode) {
73             manager.movecaretToNode(manager.getNodeElement(manager.currentNode));
74             canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop(manager.scrollbarPosition);
75         }
76     };
77     canvas.doc().dom().onHide = function() {
78        manager.scrollbarPosition = canvas.doc().dom().find('#rng-module-documentCanvas-contentWrapper').scrollTop();
79     };
80 };
81     
82 Manager.prototype.selectNode = function(cnode, options) {
83     options = options || {};
84     var nodeElement = this.getNodeElement(cnode);
85     
86     this.dimNode(cnode);
87     
88     this.canvas.doc().dom().find('.rng-module-documentCanvas-currentNode').removeClass('rng-module-documentCanvas-currentNode');
89     nodeElement.addClass('rng-module-documentCanvas-currentNode');
90     
91     if(options.movecaret) {
92         this.movecaretToNode(nodeElement, options.movecaret);
93     }
94     
95     this.currentNode = cnode;
96     this.sandbox.publish('nodeSelected', cnode);
97 };
98
99 Manager.prototype.insertNewNode = function(wlxmlTag, wlxmlClass) {
100     var selection = window.getSelection(),
101         $anchorNode = $(selection.anchorNode),
102         $focusNode = $(selection.focusNode);
103         
104         
105     if(!selection.isCollapsed && $anchorNode.parent()[0] === $focusNode.parent()[0]) {
106         var textNodeIdx,
107             parent = $anchorNode.parent(),
108             parentContents = parent.contents(),
109             offsetStart = selection.anchorOffset,
110             offsetEnd = selection.focusOffset;
111         
112         if(selection.anchorNode === selection.focusNode) {
113             if(offsetStart > offsetEnd) {
114                 var tmp = offsetStart;
115                 offsetStart = offsetEnd;
116                 offsetEnd = tmp;
117             }
118             textNodeIdx = parentContents.index($anchorNode);
119         } else {
120             if(parentContents.index($anchorNode) > parentContents.index($focusNode)) {
121                 offsetStart = selection.focusOffset;
122                 offsetEnd = selection.anchorOffset;
123             }
124             textNodeIdx = [parentContents.index($anchorNode), parentContents.index($focusNode)];
125         }
126         
127         var wrapper = canvasNode.create({tag: wlxmlTag, klass: wlxmlClass});
128         this.canvas.nodeWrap({inside: canvasNode.create(parent),
129                               _with: wrapper,
130                               offsetStart: offsetStart,
131                               offsetEnd: offsetEnd,
132                               textNodeIdx: textNodeIdx
133                             });
134         this.selectNode(wrapper, {movecaret: 'end'});
135     }
136     
137     
138 };
139
140 Manager.prototype.getNodeElement = function(cnode) {
141     return this.canvas.doc().dom().find('#'+cnode.getId());
142 };
143
144 Manager.prototype.highlightNode = function(cnode) {
145     var nodeElement = this.getNodeElement(cnode);
146     if(!this.gridToggled) {
147         nodeElement.addClass('rng-common-hoveredNode');
148         var label = nodeElement.attr('wlxml-tag');
149         if(nodeElement.attr('wlxml-class'))
150             label += ' / ' + nodeElement.attr('wlxml-class');
151         var tag = $('<div>').addClass('rng-module-documentCanvas-hoveredNodeTag').text(label);
152         nodeElement.append(tag);
153     }
154 };
155
156 Manager.prototype.dimNode = function(cnode) {
157     var nodeElement = this.getNodeElement(cnode);
158     if(!this.gridToggled) {
159         nodeElement.removeClass('rng-common-hoveredNode');
160         nodeElement.find('.rng-module-documentCanvas-hoveredNodeTag').remove();
161     }
162 };
163
164 Manager.prototype.selectFirstNode = function() {
165     var firstNodeWithText = this.canvas.doc().dom().find('[wlxml-tag]').filter(function() {
166         return $(this).clone().children().remove().end().text().trim() !== '';
167     }).first();
168     var node;
169     if(firstNodeWithText.length)
170         node = $(firstNodeWithText[0]);
171     else {
172         node = this.canvas.doc().dom().find('[wlxml-class|="p"]');
173     }
174     this.selectNode(canvasNode.create(node), {movecaret: true});
175 };
176
177 Manager.prototype.movecaretToNode = function(nodeElement, where) {
178     if(!nodeElement.length)
179         return;
180     var range = document.createRange();
181     range.selectNodeContents(nodeElement[0]);
182     
183     var collapseArg = true;
184     if(where === 'end')
185         collapseArg = false;
186     range.collapse(collapseArg);
187     var selection = document.getSelection();
188     selection.removeAllRanges();
189     selection.addRange(range);
190 };
191
192 Manager.prototype.toggleGrid =  function(toggle) {
193     this.canvas.doc().dom().find('[wlxml-tag]').toggleClass('rng-common-hoveredNode', toggle);
194     this.gridToggled = toggle;
195 };
196
197 Manager.prototype.onEnterKey = function(e) {
198     e.preventDefault();
199     var pos = getCursorPosition();
200     var contextNode = this.canvas.getNodeById(pos.parentNode.attr('id'));
201     var newNode;
202
203     if(pos.isAtEnd) {
204         newNode = canvasNode.create({tag: pos.parentNode.attr('wlxml-tag'), klass: pos.parentNode.attr('wlxml-class')});
205         this.canvas.nodeInsertAfter({node: newNode, after: this.canvas.getNodeById(pos.parentNode.attr('id'))});
206     } else {
207         newNode = this.canvas.nodeSplit({node: contextNode, textNodeIdx: pos.textNodeIndex, offset: pos.textNodeOffset});
208     }
209     if(newNode)
210         this.selectNode(newNode, {movecaret: true});
211     this.sandbox.publish('contentChanged');
212 };
213
214 Manager.prototype.onBackspaceKey = function(e) {
215     var pos = getCursorPosition();
216     var len = pos.textNode.text().length;
217     if(len === 1) {
218         // Prevent deleting node by browser after last character removed;
219         e.preventDefault();
220         pos.parentNode.text('');
221     }
222     if(len === 0) {
223         e.preventDefault();
224         var toRemove = canvasNode.create(pos.textNode);
225         var prevNode = this.canvas.getPrecedingNode({node:toRemove});
226         this.canvas.nodeRemove({node: toRemove}); // jesli nie ma tekstu, to anchor nie jest tex nodem
227         this.selectNode(prevNode, {movecaret: 'end'});
228     }
229 };
230
231 Manager.prototype.toggleList = function(toggle) {
232     var selection  = window.getSelection(),
233         node1 = $(selection.anchorNode).parent()[0],
234         node2 = $(selection.focusNode).parent()[0],
235         element1 = this.canvas.getDocumentElement(node1),
236         element2 = this.canvas.getDocumentElement(node2);
237     if(toggle) {
238         this.canvas.list.create({element1: element1, element2: element2});
239     } else {
240         if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
241             this.canvas.list.extractItems({element1: element1, element2: element2, merge: false});
242         } 
243     }
244 };
245
246 Manager.prototype.command = function(command, meta) {
247     var selection  = window.getSelection(),
248         node1 = $(selection.anchorNode).parent()[0],
249         node2 = $(selection.focusNode).parent()[0],
250         element1 = this.canvas.getDocumentElement(node1),
251         element2 = this.canvas.getDocumentElement(node2);
252     if(command === 'unwrap-node') {
253         // this.canvas.nodeUnwrap({node: canvasNode.create(pos.parentNode)});
254         // this.sandbox.publish('contentChanged');
255         if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
256             this.canvas.list.extractItems({element1: element1, element2: element2});
257         }
258     } else if(command === 'wrap-node') {
259         if(this.canvas.list.areItemsOfTheSameList({element1: element1, element2: element2})) {
260             this.canvas.list.create({element1: element1, element2: element2});
261         }
262     }
263
264 };
265
266
267 return Manager;
268     
269 });