ee340f106e7389b78d8f1c7aee16d3b51c27daf4
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / documentElement.js
1 define([
2 'libs/jquery',
3 'libs/underscore',
4 'modules/documentCanvas/classAttributes',
5 'modules/documentCanvas/canvas/utils',
6 'modules/documentCanvas/canvas/widgets',
7 'modules/documentCanvas/canvas/wlxmlManagers'
8 ], function($, _, classAttributes, utils, widgets, wlxmlManagers) {
9     
10 'use strict';
11
12
13 // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
14 var DocumentElement = function(htmlElement, canvas) {
15     if(arguments.length === 0)
16         return;
17     this.canvas = canvas;
18     this._setupDOMHandler(htmlElement);
19 }
20
21 var elementTypeFromParams = function(params) {
22     return params.text !== undefined ? DocumentTextElement : DocumentNodeElement;
23
24 };
25
26 var elementTypeFromNode = function(wlxmlNode) {
27     return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement;
28 }
29
30 $.extend(DocumentElement, {
31     create: function(params, canvas) {
32         return elementTypeFromParams(params).create(params);
33     },
34
35     create2: function(node, canvas) {
36         return elementTypeFromNode(node).create2(node, canvas);
37     },
38
39     createDOM: function(wlxmlNode) {
40         return elementTypeFromParams(wlxmlNode).createDOM(params);
41     },
42
43     fromHTMLElement: function(htmlElement, canvas) {
44         var $element = $(htmlElement);
45         if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined)
46             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
47         if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined))
48             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
49         return undefined;
50     }
51 });
52
53 $.extend(DocumentElement.prototype, {
54     _setupDOMHandler: function(htmlElement) {
55         this.$element = $(htmlElement);
56     },
57     bound: function() {
58         return $.contains(document.documentElement, this.dom()[0]);
59     },
60     dom: function() {
61         return this.$element;
62     },
63     parent: function() {
64         var parents = this.$element.parents('[document-node-element]');
65         if(parents.length)
66             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
67         return null;
68     },
69
70     parents: function() {
71         var parents = [],
72             parent = this.parent();
73         while(parent) {
74             parents.push(parent);
75             parent = parent.parent();
76         }
77         return parents;
78     },
79
80     sameNode: function(other) {
81         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
82     },
83
84     wrapWithNodeElement: function(wlxmlNode) {
85         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass}, this);
86         this.dom().replaceWith(wrapper.dom());
87         wrapper.append(this);
88         return wrapper;
89     },
90
91     markAsCurrent: function() {
92         this.canvas.markAsCurrent(this);
93     },
94
95     getVerticallyFirstTextElement: function() {
96         var toret;
97         this.children().some(function(child) {
98             if(!child.isVisible())
99                 return false; // continue
100             if(child instanceof DocumentTextElement) {
101                 toret = child;
102                 return true; // break
103             } else {
104                 toret = child.getVerticallyFirstTextElement();
105                 if(toret)
106                     return true; // break
107             }
108         });
109         return toret;
110     },
111
112     getPreviousTextElement: function(includeInvisible) {
113         return this.getNearestTextElement('above', includeInvisible);
114     },
115
116     getNextTextElement: function(includeInvisible) {
117         return this.getNearestTextElement('below', includeInvisible);
118     },
119
120     getNearestTextElement: function(direction, includeInvisible) {
121         includeInvisible = includeInvisible !== undefined ? includeInvisible : false;
122         var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible');
123         return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0]));
124     },
125
126     isVisible: function() {
127         return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
128     },
129
130     isInsideList: function() {
131         return this.parents().some(function(parent) {
132             return parent.is('list');
133         });
134     },
135
136     exec: function(method) {
137         var manager = this.data('_wlxmlManager');
138         if(manager[method])
139             return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1));
140     }
141 });
142
143
144 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
145 var DocumentNodeElement = function(htmlElement, canvas) {
146     DocumentElement.call(this, htmlElement, canvas);
147 };
148
149 $.extend(DocumentNodeElement, {
150     createDOM: function(params, canvas) {
151         var dom = $('<div>')
152                 .attr('document-node-element', ''),
153             widgetsContainer = $('<div>')
154                 .addClass('canvas-widgets')
155                 .attr('contenteditable', false),
156             container = $('<div>')
157                 .attr('document-element-content', '');
158         
159         dom.append(widgetsContainer, container);
160         // Make sure widgets aren't navigable with arrow keys
161         widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
162
163         var element = this.fromHTMLElement(dom[0], canvas);
164
165         element.setWlxml({tag: params.tag, klass: params.klass});
166         if(params.meta) {
167             _.keys(params.meta).forEach(function(key) {
168                 element.setWlxmlMetaAttr(key, params.meta[key]);
169             });
170         }
171         element.data('other-attrs', params.others);
172
173         if(params.rawChildren && params.rawChildren.length) {
174             container.append(params.rawChildren);
175         } else if(params.prepopulateOnEmpty) {
176             element.append(DocumentTextElement.create({text: ''}));
177         }
178         return dom;
179     },
180
181     create: function(params, canvas) {
182         return this.fromHTMLElement(this.createDOM(params, canvas)[0], canvas);
183     },
184
185     fromHTMLElement: function(htmlElement, canvas) {
186         return new this(htmlElement, canvas);
187     },
188
189     createDOM2: function(wlxmlNode, canvas) {
190         
191         //     tag: wlxmlNode.getTagName(),
192         //     klass: wlxmlNode.getClass(), //currentTag.attr('class'),
193         //     meta: wlxmlNode.getMetaAttributes(), //meta,
194         //     others: wlxmlNode.getOtherAttributes(), // ~ //others,
195         //     rawChildren: wlxmlNode.contents(),
196         //     prepopulateOnEmpty: true
197
198         var dom = $('<div>')
199                 .attr('document-node-element', ''),
200             widgetsContainer = $('<div>')
201                 .addClass('canvas-widgets')
202                 .attr('contenteditable', false),
203             container = $('<div>')
204                 .attr('document-element-content', '');
205         
206         dom.append(widgetsContainer, container);
207         // Make sure widgets aren't navigable with arrow keys
208         widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
209
210         var element = this.fromHTMLElement(dom[0], canvas);
211
212         element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()});
213
214         _.keys(wlxmlNode.getMetaAttributes()).forEach(function(key) {
215             element.setWlxmlMetaAttr(key, params.meta[key]);
216         });
217
218         //element.data('other-attrs', params.others);
219
220         // element.contents
221
222         wlxmlNode.contents().forEach((function(node) {
223             container.append(DocumentElement.create2(node).dom());
224         }).bind(this));
225
226         // if(params.rawChildren && params.rawChildren.length) {
227         //     container.append(params.rawChildren);
228         // } else if(params.prepopulateOnEmpty) {
229         //     element.append(DocumentTextElement.create({text: ''}));
230         // }
231         return dom;
232     },
233
234     create2: function(params, canvas) {
235         return this.fromHTMLElement2(this.createDOM2(params, canvas)[0], canvas);
236     },
237
238     fromHTMLElement2: function(htmlElement, canvas) {
239         return new this(htmlElement, canvas);
240     }
241 });
242
243 var manipulate = function(e, params, action) {
244     var element;
245     if(params instanceof DocumentElement) {
246         element = params;
247     } else {
248         element = DocumentElement.create(params);
249     }
250     var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom();
251     target[action](element.dom());
252     return element;
253 };
254
255 DocumentNodeElement.prototype = new DocumentElement();
256
257
258 $.extend(DocumentNodeElement.prototype, {
259     _container: function() {
260         return this.dom().children('[document-element-content]');
261     },
262     detach: function() {
263         var parent = this.parent();
264         if(!parent)
265             return;
266
267         var parentChildren = parent.children(),
268             myIdx = parent.childIndex(this);
269
270         if(myIdx > 0 && myIdx < parentChildren.length) {
271             if((parentChildren[myIdx-1] instanceof DocumentTextElement) && (parentChildren[myIdx+1] instanceof DocumentTextElement)) {
272                 parentChildren[myIdx-1].appendText(parentChildren[myIdx+1].getText());
273                 parentChildren[myIdx+1].detach();
274             }
275         }
276         this.dom().detach();
277         this.canvas = null;
278         return this;
279     },
280     unwrapContents: function() {
281         var parent = this.parent();
282         if(!parent)
283             return;
284
285         var parentChildren = parent.children(),
286             myChildren = this.children(),
287             myIdx = parent.childIndex(this);
288
289         if(myChildren.length === 0)
290             return this.detach();
291
292         var moveLeftRange, moveRightRange, leftMerged;
293
294         if(myIdx > 0 && (parentChildren[myIdx-1] instanceof DocumentTextElement) && (myChildren[0] instanceof DocumentTextElement)) {
295             parentChildren[myIdx-1].appendText(myChildren[0].getText());
296             myChildren[0].detach();
297             moveLeftRange = true;
298             leftMerged = true;
299         } else {
300             leftMerged = false;
301         }
302
303         if(!(leftMerged && myChildren.length === 1)) {
304             if(myIdx < parentChildren.length - 1 && (parentChildren[myIdx+1] instanceof DocumentTextElement) && (myChildren[myChildren.length-1] instanceof DocumentTextElement)) {
305                 parentChildren[myIdx+1].prependText(myChildren[myChildren.length-1].getText());
306                 myChildren[myChildren.length-1].detach();
307                 moveRightRange = true;
308             }
309         }
310
311         var childrenLength = this.children().length;
312         this.children().forEach(function(child) {
313             this.before(child);
314         }.bind(this));
315
316         this.detach();
317
318         return {
319             element1: parent.children()[myIdx + (moveLeftRange ? -1 : 0)],
320             element2: parent.children()[myIdx + childrenLength-1 + (moveRightRange ? 1 : 0)]
321         };
322     },
323     data: function() {
324         var dom = this.dom(),
325             args = Array.prototype.slice.call(arguments, 0);
326         if(args.length === 2 && args[1] === undefined)
327             return dom.removeData(args[0]);
328         return dom.data.apply(dom, arguments);
329     },
330     toXML: function(level) {
331         var node = $('<' + this.getWlxmlTag() + '>');
332
333         if(this.getWlxmlClass())
334             node.attr('class', this.getWlxmlClass());
335         var meta = this.getWlxmlMetaAttrs();
336         meta.forEach(function(attr) {
337             if(attr.value)
338                 node.attr('meta-' + attr.name, attr.value);
339         });
340         _.keys(this.data('other-attrs') || {}).forEach(function(key) {
341             node.attr(key, this.data('other-attrs')[key]);
342         }, this);
343
344         var addFormatting = function() {
345             var toret = $('<div>');
346             var formattings = {};
347
348             if(this.data('orig-before') !== undefined) {
349                 if(this.data('orig-before')) {
350                     toret.prepend(document.createTextNode(this.data('orig-before')));
351                 }
352             } else if(level && this.getWlxmlTag() !== 'span') {
353                 toret.append('\n' + (new Array(level * 2 + 1)).join(' '));
354             }
355
356             toret.append(node);
357
358             if(this.data('orig-after')) {
359                 toret.append(document.createTextNode(this.data('orig-after')));
360             }
361
362             /* Inside node */
363             if(this.data('orig-begin')) {
364                 node.prepend(this.data('orig-begin'));
365                 formattings.begin = true;
366             }
367
368             if(this.data('orig-end') !== undefined) {
369                 if(this.data('orig-end')) {
370                     node.append(this.data('orig-end'));
371                 }
372             } else if(this.getWlxmlTag() !== 'span' && children.length){
373                 node.append('\n' + (new Array(level * 2 + 1)).join(' '));
374             }
375            
376             return {parts: toret.contents(), formattings: formattings};
377         }.bind(this);
378
379         
380         
381         var children = this.children(),
382             childParts;
383
384         var formatting = addFormatting(node);
385
386         for(var i = children.length - 1; i >= 0; i--) {
387             childParts = children[i].toXML(level + 1);
388             if(typeof childParts === 'string')
389                 childParts = [document.createTextNode(childParts)];
390
391             if(formatting.formattings.begin) {
392                 $(node.contents()[0]).after(childParts);
393             } else
394                 node.prepend(childParts);
395         }
396         return formatting.parts;
397     },
398     append: function(params) {
399         if(params.tag !== 'span')
400             this.data('orig-end', undefined);
401         return manipulate(this, params, 'append');
402     },
403     prepend: function(params) {
404         return manipulate(this, params, 'prepend');
405     },
406     before: function(params) {
407         return manipulate(this, params, 'before');
408
409     },
410     after: function(params) {
411         return manipulate(this, params, 'after');
412     },
413     children: function() {
414         var toret = [];
415         if(this instanceof DocumentTextElement)
416             return toret;
417
418
419         var elementContent = this._container().contents();
420         var element = this;
421         elementContent.each(function(idx) {
422             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
423             if(childElement === undefined)
424                 return true;
425             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
426                 return true;
427             if(idx > 0 && childElement instanceof DocumentTextElement) {
428                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
429                     return true;
430             }
431             toret.push(childElement);
432         });
433         return toret;
434     },
435     childIndex: function(child) {
436         var children = this.children(),
437             toret = null;
438         children.forEach(function(c, idx) {
439             if(c.sameNode(child)) {
440                 toret = idx;
441                 return false;
442             }
443         });
444         return toret;
445     },
446     getWlxmlTag: function() {
447         return this._container().attr('wlxml-tag');
448     },
449     setWlxmlTag: function(tag) {
450         if(tag === this.getWlxmlTag())
451             return;
452
453         this._container().attr('wlxml-tag', tag);
454         if(!this.__updatingWlxml)
455             this._updateWlxmlManager();
456     },
457     getWlxmlClass: function() {
458         var klass = this._container().attr('wlxml-class');
459         if(klass)
460             return klass.replace(/-/g, '.');
461         return undefined;
462     },
463     setWlxmlClass: function(klass) {
464         if(klass === this.getWlxmlClass())
465             return;
466
467         this.getWlxmlMetaAttrs().forEach(function(attr) {
468             if(!classAttributes.hasMetaAttr(klass, attr.name))
469                 this.dom().removeAttr('wlxml-meta-' + attr.name);
470         }, this);
471
472         if(klass)
473             this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
474         else
475             this._container().removeAttr('wlxml-class');
476         if(!this.__updatingWlxml)
477             this._updateWlxmlManager();
478     },
479     setWlxml: function(params) {
480         this.__updatingWlxml = true;
481         if(params.tag !== undefined)
482             this.setWlxmlTag(params.tag);
483         if(params.klass !== undefined)
484             this.setWlxmlClass(params.klass);
485         this._updateWlxmlManager();
486         this.__updatingWlxml = false;
487     },
488     _updateWlxmlManager: function() {
489         var manager = wlxmlManagers.getFor(this);
490         this.data('_wlxmlManager', manager);
491         manager.setup();
492     },
493     is: function(what) {
494         if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass()))
495             return true;
496         return false;
497     },
498
499     getWlxmlMetaAttr: function(attr) {
500         return this.dom().attr('wlxml-meta-'+attr);
501     },
502
503     getWlxmlMetaAttrs: function() {
504         var toret = [];
505         var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass());
506         attrList.all.forEach(function(attr) {
507             toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''});
508         }, this);
509         return toret;
510     },
511
512     setWlxmlMetaAttr: function(attr, value) {
513         this.dom().attr('wlxml-meta-'+attr, value);
514     },
515     
516     toggleLabel: function(toggle) {
517         var displayCss = toggle ? 'inline-block' : 'none';
518         var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label');
519         label.css('display', displayCss);
520         this.toggleHighlight(toggle);
521     },
522
523     toggleHighlight: function(toggle) {
524         this._container().toggleClass('highlighted-element', toggle);
525     },
526
527     toggle: function(toggle) {
528         var mng = this.data('_wlxmlManager');
529         if(mng) {
530             mng.toggle(toggle);
531         }
532     }
533 });
534
535
536 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
537 var DocumentTextElement = function(htmlElement, canvas) {
538     DocumentElement.call(this, htmlElement, canvas);
539 };
540
541 $.extend(DocumentTextElement, {
542     createDOM: function(params) {
543         return $('<div>')
544             .attr('document-text-element', '')
545             .text(params.text || utils.unicode.ZWS);
546     },
547
548     createDOM2: function(wlxmlTextNode) {
549         return $('<div>')
550             .attr('document-text-element', '')
551             .text(wlxmlTextNode.getText() || utils.unicode.ZWS);
552     },
553
554     create: function(params, canvas) {
555         return this.fromHTMLElement(this.createDOM(params)[0]);
556     },
557
558     create2: function(wlxmlTextNode, canvas) {
559         return this.fromHTMLElement(this.createDOM2(wlxmlTextNode)[0]);
560     },
561
562     fromHTMLElement: function(htmlElement, canvas) {
563         return new this(htmlElement, canvas);
564     },
565     isContentContainer: function(htmlElement) {
566         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
567     }
568 });
569
570 DocumentTextElement.prototype = new DocumentElement();
571
572 $.extend(DocumentTextElement.prototype, {
573     toXML: function(parent) {
574         return this.getText();
575     },
576     _setupDOMHandler: function(htmlElement) {
577         var $element = $(htmlElement);
578         if(htmlElement.nodeType === Node.TEXT_NODE)
579             this.$element = $element.parent();
580         else
581             this.$element = $element;
582     },
583     detach: function() {
584         this.dom().detach();
585         this.canvas = null;
586         return this;
587     },
588     setText: function(text) {
589         this.dom().contents()[0].data = text;
590     },
591     appendText: function(text) {
592         this.dom().contents()[0].data += text;
593     },
594     prependText: function(text) {
595         this.dom().contents()[0].data = text + this.dom().contents()[0].data;
596     },
597     getText: function() {
598         return this.dom().text().replace(utils.unicode.ZWS, '');
599     },
600     isEmpty: function() {
601         // Having at least Zero Width Space is guaranteed be Content Observer
602         return this.dom().contents()[0].data === utils.unicode.ZWS;
603     },
604     after: function(params) {
605         if(params instanceof DocumentTextElement || params.text)
606             return false;
607         var element;
608         if(params instanceof DocumentNodeElement) {
609             element = params;
610         } else {
611             element = DocumentNodeElement.create(params, this.canvas);
612         }
613         this.dom().wrap('<div>');
614         this.dom().parent().after(element.dom());
615         this.dom().unwrap();
616         return element;
617     },
618     before: function(params) {
619         if(params instanceof DocumentTextElement || params.text)
620             return false;
621         var element;
622         if(params instanceof DocumentNodeElement) {
623             element = params;
624         } else {
625             element = DocumentNodeElement.create(params, this.canvas);
626         }
627         this.dom().wrap('<div>');
628         this.dom().parent().before(element.dom());
629         this.dom().unwrap();
630         return element;
631     },
632     wrapWithNodeElement: function(wlxmlNode) {
633         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
634             return this.canvas.wrapText({
635                 inside: this.parent(),
636                 textNodeIdx: this.parent().childIndex(this),
637                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
638                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
639                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
640             });
641         } else {
642             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
643         }
644     },
645     unwrap: function() {
646         var parent = this.parent(),
647             toret;
648         if(parent.children().length === 1) {
649             toret = parent.parent();
650             var grandParent = parent.parent();
651             if(grandParent) {
652                 var grandParentChildren = grandParent.children(),
653                     idx = grandParent.childIndex(parent),
654                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
655                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
656                 
657                 prev = (prev instanceof DocumentTextElement) ? prev : null;
658                 next = (next instanceof DocumentTextElement) ? next : null;
659
660                 if(prev && next) {
661                     prev.setText(prev.getText() + this.getText() + next.getText());
662                     next.detach();
663                 } else if (prev || next) {
664                     var target = prev ? prev : next,
665                         newText = prev ? target.getText() + this.getText() : this.getText() + target.getText();
666                     target.setText(newText);
667                 } else {
668                     parent.after(this);
669                 }
670             } else {
671                 parent.after(this);
672             }
673             parent.detach();
674             return toret;
675         }
676     },
677     split: function(params) {
678         var parentElement = this.parent(),
679             myIdx = parentElement.childIndex(this),
680             myCanvas = this.canvas,
681             passed = false,
682             succeedingChildren = [],
683             thisElement = this,
684             prefix = this.getText().substr(0, params.offset),
685             suffix = this.getText().substr(params.offset);
686
687         parentElement.children().forEach(function(child) {
688             if(passed)
689                 succeedingChildren.push(child);
690             if(child.sameNode(thisElement))
691                 passed = true;
692         });
693
694         if(prefix.length > 0)
695             this.setText(prefix);
696         else
697             this.detach();
698         
699         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
700         parentElement.after(newElement);
701
702         if(suffix.length > 0)
703             newElement.append({text: suffix});
704         succeedingChildren.forEach(function(child) {
705             newElement.append(child);
706         });
707
708         return {first: parentElement, second: newElement};
709     },
710     divide: function(params) {
711         var myText = this.getText();
712
713         if(params.offset === myText.length)
714             return this.after(params);
715         if(params.offset === 0)
716             return this.before(params);
717
718         var lhsText = myText.substr(0, params.offset),
719             rhsText = myText.substr(params.offset),
720             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
721             rhsTextElement = DocumentTextElement.create({text: rhsText});
722
723         this.setText(lhsText);
724         this.after(newElement);
725         newElement.after(rhsTextElement);
726         return newElement;
727     },
728
729     toggleHighlight: function() {
730         // do nothing for now
731     }
732 });
733
734 return {
735     DocumentElement: DocumentElement,
736     DocumentNodeElement: DocumentNodeElement,
737     DocumentTextElement: DocumentTextElement
738 };
739
740 });