bf68ede7d9ff6d00bd049a24238b0c1a98b26f30
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / canvas.js
1 define([
2 'libs/jquery',
3 'libs/underscore',
4 'libs/backbone',
5 'modules/documentCanvas/canvas/documentElement',
6 'modules/documentCanvas/canvas/keyboard',
7 'modules/documentCanvas/canvas/utils'
8 ], function($, _, Backbone, documentElement, keyboard, utils) {
9     
10 'use strict';
11
12 var Canvas = function(wlxmlDocument, publisher) {
13     this.eventBus = _.extend({}, Backbone.Events);
14     this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
15     this.loadWlxmlDocument(wlxmlDocument);
16     this.publisher = publisher ? publisher : function() {};
17 };
18
19 $.extend(Canvas.prototype, {
20
21     loadWlxmlDocument: function(wlxmlDocument) {
22         wlxmlDocument = wlxmlDocument || this.wlxmlDocument;
23         if(!wlxmlDocument) {
24             return false;
25         }
26         var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root);
27
28         this.wrapper.empty();
29         this.wrapper.append(canvasDOM);
30         this.d = this.wrapper.children(0);
31         this.setupEventHandling();
32
33         var canvas = this;
34
35         var findCanvasElement = function(node) {
36             if(node.nodeType === Node.ELEMENT_NODE) {
37                 return node.getData('canvasElement');
38             }
39             if(node.nodeType === Node.TEXT_NODE) {
40                 var parent = node.parent(),
41                     toret;
42
43                 parent.children().forEach(function(child) {
44                     if(child.data('wlxmlNode').sameNode(node))
45                         toret = child;
46                 });
47                 if(toret)
48                     return toret;
49             }
50         }
51
52         if(this.wlxmlDocument !== wlxmlDocument) {
53             wlxmlDocument.on('change', function(event) {
54                 var canvasNode = findCanvasElement(event.meta.node);
55                 if(event.type === 'nodeAttrChange' && event.meta.attr === 'class') {
56                     canvasNode.setWlxmlClass(event.meta.newVal);
57                 }
58
59             });
60         }
61         this.wlxmlDocument = wlxmlDocument;
62     },
63
64     generateCanvasDOM: function(wlxmlNode) {
65         var element = documentElement.DocumentNodeElement.create(wlxmlNode, this);
66         return element.dom();
67     },
68
69     setupEventHandling: function() {
70         var canvas = this;
71         this.wrapper.on('keyup keydown keypress', function(e) {
72             keyboard.handleKey(e, this);
73         }.bind(this));
74
75         this.wrapper.on('click', '[document-node-element], [document-text-element]', function(e) {
76             e.stopPropagation();
77             canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false});
78         });
79
80         var observer = new MutationObserver(function(mutations) {
81             mutations.forEach(function(mutation) {
82                 if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) {
83                     observer.disconnect();
84                     if(mutation.target.data === '')
85                         mutation.target.data = utils.unicode.ZWS;
86                     else if(mutation.oldValue === utils.unicode.ZWS) {
87                         mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, '');
88                         canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end');
89                     }
90                     observer.observe(canvas.d[0], config);
91                     canvas.publisher('contentChanged');
92                 }
93             });
94         });
95         var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true};
96         observer.observe(this.d[0], config);
97
98
99         this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) {
100             var el = canvas.getDocumentElement(e.currentTarget);
101             if(!el)
102                 return;
103             e.stopPropagation();
104             if(el instanceof documentElement.DocumentTextElement)
105                 el = el.parent();
106             el.toggleLabel(true);
107         });
108         this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) {
109             var el = canvas.getDocumentElement(e.currentTarget);
110             if(!el)
111                 return;
112             e.stopPropagation();
113             if(el instanceof documentElement.DocumentTextElement)
114                 el = el.parent();
115             el.toggleLabel(false);
116         });
117
118         this.eventBus.on('elementToggled', function(toggle, element) {
119             if(!toggle) {
120                 canvas.setCurrentElement(element.getPreviousTextElement());
121             }
122         });
123     },
124
125     view: function() {
126         return this.wrapper;
127     },
128
129     doc: function() {
130         if(this.d === null)
131             return null;
132         return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')};
133     },
134
135     createNodeElement: function(params) {
136         return documentElement.DocumentNodeElement.create(params, this);
137     },
138
139     wrapText: function(params) {
140         params = _.extend({textNodeIdx: 0}, params);
141         if(typeof params.textNodeIdx === 'number')
142             params.textNodeIdx = [params.textNodeIdx];
143         
144         var childrenInside = params.inside.children(),
145             idx1 = Math.min.apply(Math, params.textNodeIdx),
146             idx2 = Math.max.apply(Math, params.textNodeIdx),
147             textNode1 = childrenInside[idx1],
148             textNode2 = childrenInside[idx2],
149             sameNode = textNode1.sameNode(textNode2),
150             prefixOutside = textNode1.getText().substr(0, params.offsetStart),
151             prefixInside = textNode1.getText().substr(params.offsetStart),
152             suffixInside = textNode2.getText().substr(0, params.offsetEnd),
153             suffixOutside = textNode2.getText().substr(params.offsetEnd)
154         ;
155         
156         var wrapperElement = this.createNodeElement({tag: params._with.tag, klass: params._with.klass});
157         textNode1.after(wrapperElement);
158         textNode1.detach();
159         
160         if(prefixOutside.length > 0)
161             wrapperElement.before({text:prefixOutside});
162         if(sameNode) {
163             var core = textNode1.getText().substr(params.offsetStart, params.offsetEnd - params.offsetStart);
164             wrapperElement.append({text: core});
165         } else {
166             textNode2.detach();
167             if(prefixInside.length > 0)
168                 wrapperElement.append({text: prefixInside});
169             for(var i = idx1 + 1; i < idx2; i++) {
170                 wrapperElement.append(childrenInside[i]);
171             }
172             if(suffixInside.length > 0)
173                 wrapperElement.append({text: suffixInside});
174         }
175         if(suffixOutside.length > 0)
176             wrapperElement.after({text: suffixOutside});
177         return wrapperElement;
178     },
179
180     wrapElements: function(params) {
181         if(!(params.element1.parent().sameNode(params.element2.parent())))
182             return;
183
184         var parent = params.element1.parent(),
185             parentChildren = parent.children(),
186             wrapper = this.createNodeElement({
187                 tag: params._with.tag,
188                 klass: params._with.klass}),
189             idx1 = parent.childIndex(params.element1),
190             idx2 = parent.childIndex(params.element2);
191
192         if(idx1 > idx2) {
193             var tmp = idx1;
194             idx1 = idx2;
195             idx2 = tmp;
196         }
197
198         var insertingMethod, insertingTarget;
199         if(idx1 === 0) {
200             insertingMethod = 'prepend';
201             insertingTarget = parent;
202         } else {
203             insertingMethod = 'after';
204             insertingTarget = parentChildren[idx1-1];
205         }
206
207         for(var i = idx1; i <= idx2; i++) {
208             wrapper.append(parentChildren[i].detach());
209         }
210
211         insertingTarget[insertingMethod](wrapper);
212         return wrapper;
213     },
214
215     getSiblingParents: function(params) {
216         var parents1 = [params.element1].concat(params.element1.parents()).reverse(),
217             parents2 = [params.element2].concat(params.element2.parents()).reverse(),
218             noSiblingParents = null;
219
220         if(parents1.length === 0 || parents2.length === 0 || !(parents1[0].sameNode(parents2[0])))
221             return noSiblingParents;
222
223         var i;
224         for(i = 0; i < Math.min(parents1.length, parents2.length); i++) {
225             if(parents1[i].sameNode(parents2[i]))
226                 continue;
227             break;
228         }
229         return {element1: parents1[i], element2: parents2[i]};
230     },
231
232     getDocumentElement: function(from) {
233         if(from instanceof HTMLElement || from instanceof Text) {
234            return documentElement.DocumentElement.fromHTMLElement(from, this);
235         }
236     },
237     getCursor: function() {
238         return new Cursor(this);
239     },
240
241     list: {},
242
243     
244     getCurrentNodeElement: function() {
245         return this.getDocumentElement(this.wrapper.find('.current-node-element').parent()[0]);
246     },
247
248     getCurrentTextElement: function() {
249         return this.getDocumentElement(this.wrapper.find('.current-text-element')[0]);
250     },
251
252
253
254     setCurrentElement: function(element, params) {
255         params = _.extend({caretTo: 'end'}, params);
256         var findFirstDirectTextChild = function(e, nodeToLand) {
257             var byBrowser = this.getCursor().getPosition().element;
258             if(byBrowser && byBrowser.parent().sameNode(nodeToLand))
259                 return byBrowser;
260             var children = e.children();
261             for(var i = 0; i < children.length; i++) {
262                 if(children[i] instanceof documentElement.DocumentTextElement)
263                     return children[i];
264             }
265             return null;
266         }.bind(this);
267         var _markAsCurrent = function(element) {
268             if(element instanceof documentElement.DocumentTextElement) {
269                 this.wrapper.find('.current-text-element').removeClass('current-text-element');
270                 element.dom().addClass('current-text-element');
271             } else {
272                 this.wrapper.find('.current-node-element').removeClass('current-node-element')
273                 element._container().addClass('current-node-element');
274                 this.publisher('currentElementChanged', element);
275             }
276         }.bind(this);
277
278
279         var isTextElement = element instanceof documentElement.DocumentTextElement,
280             nodeElementToLand = isTextElement ? element.parent() : element,
281             textElementToLand = isTextElement ? element : findFirstDirectTextChild(element, nodeElementToLand),
282             currentTextElement = this.getCurrentTextElement(),
283             currentNodeElement = this.getCurrentNodeElement();
284
285         if(currentTextElement && !(currentTextElement.sameNode(textElementToLand)))
286             this.wrapper.find('.current-text-element').removeClass('current-text-element');
287
288         if(textElementToLand) {
289             _markAsCurrent(textElementToLand);
290             if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element))
291                 this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element?
292             if(!(textElementToLand.sameNode(currentTextElement)))
293                 this.publisher('currentTextElementSet', textElementToLand);
294         } else {
295             document.getSelection().removeAllRanges();
296         }
297
298         if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) {
299             _markAsCurrent(nodeElementToLand);
300
301             this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode'));
302         }
303     },
304
305     _moveCaretToTextElement: function(element, where) {
306         var range = document.createRange(),
307             node = element.dom().contents()[0];
308
309         if(typeof where !== 'number') {
310             range.selectNodeContents(node);
311         } else {
312             range.setStart(node, where);
313         }
314         
315         var collapseArg = true;
316         if(where === 'end')
317             collapseArg = false;
318         range.collapse(collapseArg);
319         
320         var selection = document.getSelection();
321
322         selection.removeAllRanges();
323         selection.addRange(range);
324         this.wrapper.focus(); // FF requires this for caret to be put where range colllapses, Chrome doesn't.
325     },
326
327     setCursorPosition: function(position) {
328         if(position.element)
329             this._moveCaretToTextElement(position.element, position.offset);
330     },
331
332     toXML: function() {
333         var parent = $('<div>'),
334             parts = this.doc().toXML(0);
335         parent.append(parts);
336         return parent.html();
337     }
338 });
339
340 $.extend(Canvas.prototype.list, {
341     create: function(params) {
342         if(!(params.element1.parent().sameNode(params.element2.parent())))
343             return false;
344             
345         var parent = params.element1.parent(),
346             canvas = params.element1.canvas;
347         
348         if(parent.childIndex(params.element1) > parent.childIndex(params.element2)) {
349             var tmp = params.element1;
350             params.element1 = params.element2;
351             params.element2 = tmp;
352         }
353         
354         var elementsToWrap = [];
355         
356         var place = 'before';
357         parent.children().some(function(element) {
358             var _e = element;
359             if(element.sameNode(params.element1))
360                 place = 'inside';
361             if(place === 'inside') {
362                 if(element instanceof documentElement.DocumentTextElement) {
363                     element = element.wrapWithNodeElement({tag: 'div', klass: 'list.item'});
364                     if(element.children()[0].sameNode(params.element1))
365                         params.element1 = element;
366                 }
367                 element.setWlxmlClass('item');
368                 elementsToWrap.push(element);
369             }
370             if(_e.sameNode(params.element2))
371                 return true;
372         });
373         
374         var listElement = canvas.createNodeElement({tag: 'div', klass: 'list-items' + (params.type === 'enum' ? '-enum' : '')});
375         var toret;
376         if(parent.is('list')) {
377             var item = listElement.wrapWithNodeElement({tag: 'div', klass: 'item'});
378             item.exec('toggleBullet', false);
379             toret = listElement.parent();
380         } else {
381             toret = listElement;
382         }  
383         
384         params.element1.before(toret);
385         
386         elementsToWrap.forEach(function(element) {
387             element.detach();
388             listElement.append(element);
389         });
390     },
391     extractItems: function(params) {
392         params = _.extend({merge: true}, params);
393         var list = params.element1.parent();
394         if(!list.is('list') || !(list.sameNode(params.element2.parent())))
395             return false;
396
397         var idx1 = list.childIndex(params.element1),
398             idx2 = list.childIndex(params.element2),
399             precedingItems = [],
400             extractedItems = [],
401             succeedingItems = [],
402             items = list.children(),
403             listIsNested = list.parent().getWlxmlClass() === 'item',
404             canvas = params.element1.canvas,
405             i;
406
407         if(idx1 > idx2) {
408             var tmp = idx1; idx1 = idx2; idx2 = tmp;
409         }
410
411         items.forEach(function(item, idx) {
412             if(idx < idx1)
413                 precedingItems.push(item);
414             else if(idx >= idx1 && idx <= idx2) {
415                 extractedItems.push(item);
416             }
417             else {
418                 succeedingItems.push(item);
419             }
420         });
421
422         var reference = listIsNested ? list.parent() : list;
423         if(succeedingItems.length === 0) {
424             var reference_orig = reference;
425             extractedItems.forEach(function(item) {
426                 reference.after(item);
427                 reference = item;
428                 if(!listIsNested)
429                     item.setWlxmlClass(null);
430             });
431             if(precedingItems.length === 0)
432                 reference_orig.detach();
433         } else if(precedingItems.length === 0) {
434             extractedItems.forEach(function(item) {
435                 reference.before(item);
436                 if(!listIsNested)
437                     item.setWlxmlClass(null);
438             });
439         } else {
440             extractedItems.forEach(function(item) {
441                 reference.after(item);
442                 if(!listIsNested)
443                     item.setWlxmlClass(null);
444                 reference = item;
445             });
446             var secondList = canvas.createNodeElement({tag: 'div', klass:'list-items'}),
447                 toAdd = secondList;
448             
449             if(listIsNested) {
450                 toAdd = secondList.wrapWithNodeElement({tag: 'div', klass:'item'});
451             }
452             succeedingItems.forEach(function(item) {
453                 secondList.append(item);
454             });
455
456             reference.after(toAdd);
457         }
458         if(!params.merge && listIsNested) {
459             return this.extractItems({element1: extractedItems[0], element2: extractedItems[extractedItems.length-1]});
460         }
461         return true;
462     },
463     areItemsOfTheSameList: function(params) {
464         var e1 = params.element1,
465             e2 = params.element2;
466         return e1.parent().sameNode(e2.parent())
467             && e1.parent().is('list');
468     }
469 });
470
471
472 var Cursor = function(canvas) {
473     this.canvas = canvas;
474 };
475
476 $.extend(Cursor.prototype, {
477     isSelecting: function() {
478         var selection = window.getSelection();
479         return !selection.isCollapsed;
480     },
481     isSelectingWithinElement: function() {
482         return this.isSelecting() && this.getSelectionStart().element.sameNode(this.getSelectionEnd().element);
483     },
484     isSelectingSiblings: function() {
485         return this.isSelecting() && this.getSelectionStart().element.parent().sameNode(this.getSelectionEnd().element.parent());
486     },
487     getPosition: function() {
488         return this.getSelectionAnchor();
489     },
490     getSelectionStart: function() {
491         return this.getSelectionBoundry('start');
492     },
493     getSelectionEnd: function() {
494         return this.getSelectionBoundry('end');
495     },
496     getSelectionAnchor: function() {
497         return this.getSelectionBoundry('anchor');
498     },
499     getSelectionFocus: function() {
500         return this.getSelectionBoundry('focus');
501     },
502     getSelectionBoundry: function(which) {
503         var selection = window.getSelection(),
504             anchorElement = this.canvas.getDocumentElement(selection.anchorNode),
505             focusElement = this.canvas.getDocumentElement(selection.focusNode);
506         
507         if((!anchorElement) || (anchorElement instanceof documentElement.DocumentNodeElement) || (!focusElement) || focusElement instanceof documentElement.DocumentNodeElement)
508             return {};
509
510         if(which === 'anchor') {
511             return {
512                 element: anchorElement,
513                 offset: selection.anchorOffset,
514                 offsetAtBeginning: selection.anchorOffset === 0,
515                 offsetAtEnd: selection.anchorNode.data.length === selection.anchorOffset
516             };
517         }
518         if(which === 'focus') {
519             return {
520                 element: focusElement,
521                 offset: selection.focusOffset,
522                 offsetAtBeginning: selection.focusOffset === 0,
523                 offsetAtEnd: selection.focusNode.data.length === selection.focusOffset
524             };
525         }
526         
527         var element,
528             offset;
529
530         if(anchorElement.parent().sameNode(focusElement.parent())) {
531             var parent = anchorElement.parent(),
532                 anchorFirst = parent.childIndex(anchorElement) < parent.childIndex(focusElement);
533             if(anchorFirst) {
534                 if(which === 'start') {
535                     element = anchorElement;
536                     offset = selection.anchorOffset
537                 }
538                 else if(which === 'end') {
539                     element = focusElement,
540                     offset = selection.focusOffset
541                 }
542             } else {
543                 if(which === 'start') {
544                     element = focusElement,
545                     offset = selection.focusOffset
546                 }
547                 else if(which === 'end') {
548                     element = anchorElement;
549                     offset = selection.anchorOffset
550                 }
551             }
552         } else {
553             // TODO: Handle order via https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition
554             if(which === 'start') {
555                 element = anchorElement;
556                 offset = selection.anchorOffset
557             } else {
558                 element = focusElement;
559                 offset = selection.focusOffset
560             }
561         }
562
563         var nodeLen = (element.sameNode(focusElement) ? selection.focusNode : selection.anchorNode).length;
564         return {
565             element: element,
566             offset: offset,
567             offsetAtBeginning: offset === 0,
568             offsetAtEnd: nodeLen === offset
569         }
570     }
571 })
572
573 return {
574     fromXMLDocument: function(wlxmlDocument, publisher) {
575         return new Canvas(wlxmlDocument, publisher);
576     }
577 };
578
579 });