e1d3203696806daaf9e1628e0b3f146de45fb6bc
[fnpeditor.git] / modules / documentCanvas / canvas / documentElement.js
1 define([
2 'libs/jquery-1.9.1.min',
3 'libs/underscore-min',
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 $.extend(DocumentElement, {
27     create: function(params, canvas) {
28         return elementTypeFromParams(params).create(params);
29     },
30
31     createDOM: function(params) {
32         return elementTypeFromParams(params).createDOM(params);
33     },
34
35     fromHTMLElement: function(htmlElement, canvas) {
36         var $element = $(htmlElement);
37         if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined)
38             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
39         if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined))
40             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
41         return undefined;
42     }
43 });
44
45 $.extend(DocumentElement.prototype, {
46     _setupDOMHandler: function(htmlElement) {
47         this.$element = $(htmlElement);
48     },
49     dom: function() {
50         return this.$element;
51     },
52     parent: function() {
53         var parents = this.$element.parents('[document-node-element]');
54         if(parents.length)
55             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
56         return null;
57     },
58
59     parents: function() {
60         var parents = [],
61             parent = this.parent();
62         while(parent) {
63             parents.push(parent);
64             parent = parent.parent();
65         }
66         return parents;
67     },
68
69     sameNode: function(other) {
70         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
71     },
72
73     wrapWithNodeElement: function(wlxmlNode) {
74         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
75         this.dom().replaceWith(wrapper.dom());
76         wrapper.append(this);
77         return wrapper;
78     },
79
80     detach: function() {
81         this.dom().detach();
82         this.canvas = null;
83     },
84
85     markAsCurrent: function() {
86         this.canvas.markAsCurrent(this);
87     },
88
89     getVerticallyFirstTextElement: function() {
90         var toret;
91         this.children().some(function(child) {
92             if(!child.isVisible())
93                 return false; // continue
94             if(child instanceof DocumentTextElement) {
95                 toret = child;
96                 return true; // break
97             } else {
98                 toret = child.getVerticallyFirstTextElement();
99                 if(toret)
100                     return true; // break
101             }
102         });
103         return toret;
104     },
105
106     isVisible: function() {
107         return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
108     }
109 });
110
111
112 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
113 var DocumentNodeElement = function(htmlElement, canvas) {
114     DocumentElement.call(this, htmlElement, canvas);
115 };
116
117 $.extend(DocumentNodeElement, {
118     createDOM: function(params) {
119         var dom = $('<div>')
120                 .attr('document-node-element', ''),
121             widgetsContainer = $('<div>')
122                 .addClass('canvas-widgets')
123                 .attr('contenteditable', false),
124             container = $('<div>')
125                 .attr('document-element-content', '');
126         
127         dom.append(widgetsContainer, container);
128         // Make sure widgets aren't navigable with arrow keys
129         widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
130
131         var element = this.fromHTMLElement(dom[0]);
132
133         element.setWlxmlTag(params.tag);
134         if(params.klass)
135             element.setWlxmlClass(params.klass);
136         if(params.meta) {
137             _.keys(params.meta).forEach(function(key) {
138                 element.setWlxmlMetaAttr(key, params.meta[key]);
139             });
140         }
141         element.data('other-attrs', params.others);
142
143         if(params.rawChildren) {
144             container.append(params.rawChildren);
145         }
146         return dom;
147     },
148
149     create: function(params, canvas) {
150         return this.fromHTMLElement(this.createDOM(params)[0]);
151     },
152
153     fromHTMLElement: function(htmlElement, canvas) {
154         return new this(htmlElement, canvas);
155     }
156 });
157
158 var manipulate = function(e, params, action) {
159     var element;
160     if(params instanceof DocumentElement) {
161         element = params;
162     } else {
163         element = DocumentElement.create(params);
164     }
165     var target = action === 'append' ? e._container() : e.dom();
166     target[action](element.dom());
167     return element;
168 };
169
170 DocumentNodeElement.prototype = new DocumentElement();
171
172
173 $.extend(DocumentNodeElement.prototype, {
174     _container: function() {
175         return this.dom().children('[document-element-content]');
176     },
177     data: function() {
178         var dom = this.dom(),
179             args = Array.prototype.slice.call(arguments, 0);
180         if(args.length === 2 && args[1] === undefined)
181             return dom.removeData(args[0]);
182         return dom.data.apply(dom, arguments);
183     },
184     toXML: function(level) {
185         var node = $('<' + this.getWlxmlTag() + '>');
186
187         if(this.getWlxmlClass())
188             node.attr('class', this.getWlxmlClass());
189         var meta = this.getWlxmlMetaAttrs();
190         meta.forEach(function(attr) {
191             if(attr.value)
192                 node.attr('meta-' + attr.name, attr.value);
193         });
194         _.keys(this.data('other-attrs') || {}).forEach(function(key) {
195             node.attr(key, this.data('other-attrs')[key]);
196         }, this);
197
198         var addFormatting = function() {
199             var toret = $('<div>');
200             var formattings = {};
201
202             if(this.data('orig-before') !== undefined) {
203                 if(this.data('orig-before')) {
204                     toret.prepend(document.createTextNode(this.data('orig-before')));
205                 }
206             } else if(level && this.getWlxmlTag() !== 'span') {
207                 toret.append('\n' + (new Array(level * 2 + 1)).join(' '));
208             }
209
210             toret.append(node);
211
212             if(this.data('orig-after')) {
213                 toret.append(document.createTextNode(this.data('orig-after')));
214             }
215
216             /* Inside node */
217             if(this.data('orig-begin')) {
218                 node.prepend(this.data('orig-begin'));
219                 formattings.begin = true;
220             }
221
222             if(this.data('orig-end') !== undefined) {
223                 if(this.data('orig-end')) {
224                     node.append(this.data('orig-end'));
225                 }
226             } else if(this.getWlxmlTag() !== 'span' && children.length){
227                 node.append('\n' + (new Array(level * 2 + 1)).join(' '));
228             }
229            
230             return {parts: toret.contents(), formattings: formattings};
231         }.bind(this);
232
233         
234         
235         var children = this.children(),
236             childParts;
237
238         var formatting = addFormatting(node);
239
240         for(var i = children.length - 1; i >= 0; i--) {
241             childParts = children[i].toXML(level + 1);
242             if(typeof childParts === 'string')
243                 childParts = [document.createTextNode(childParts)];
244
245             if(formatting.formattings.begin) {
246                 $(node.contents()[0]).after(childParts);
247             } else
248                 node.prepend(childParts);
249         }
250         return formatting.parts;
251     },
252     append: function(params) {
253         if(params.tag !== 'span')
254             this.data('orig-end', undefined);
255         return manipulate(this, params, 'append');
256     },
257     before: function(params) {
258         return manipulate(this, params, 'before');
259
260     },
261     after: function(params) {
262         return manipulate(this, params, 'after');
263     },
264     children: function() {
265         var toret = [];
266         if(this instanceof DocumentTextElement)
267             return toret;
268
269
270         var elementContent = this._container().contents();
271         var element = this;
272         elementContent.each(function(idx) {
273             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
274             if(childElement === undefined)
275                 return true;
276             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
277                 return true;
278             if(idx > 0 && childElement instanceof DocumentTextElement) {
279                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
280                     return true;
281             }
282             toret.push(childElement);
283         });
284         return toret;
285     },
286     childIndex: function(child) {
287         var children = this.children(),
288             toret = null;
289         children.forEach(function(c, idx) {
290             if(c.sameNode(child)) {
291                 toret = idx;
292                 return false;
293             }
294         });
295         return toret;
296     },
297     getWlxmlTag: function() {
298         return this._container().attr('wlxml-tag');
299     },
300     setWlxmlTag: function(tag) {
301         if(tag === this.getWlxmlTag())
302             return;
303
304         this._container().attr('wlxml-tag', tag);
305         this._updateWlxmlManager();
306     },
307     getWlxmlClass: function() {
308         var klass = this._container().attr('wlxml-class');
309         if(klass)
310             return klass.replace(/-/g, '.');
311         return undefined;
312     },
313     setWlxmlClass: function(klass) {
314         if(klass === this.getWlxmlClass())
315             return;
316
317         this.getWlxmlMetaAttrs().forEach(function(attr) {
318             if(!classAttributes.hasMetaAttr(klass, attr.name))
319                 this.dom().removeAttr('wlxml-meta-' + attr.name);
320         }, this);
321
322         if(klass)
323             this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
324         else
325             this._container().removeAttr('wlxml-class');
326         this._updateWlxmlManager();
327     },
328     _updateWlxmlManager: function() {
329         var manager = wlxmlManagers.getFor(this);
330         this.data('_wlxmlManager', manager);
331         manager.setup();
332     },
333     is: function(what) {
334         if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass()))
335             return true;
336         return false;
337     },
338
339     getWlxmlMetaAttr: function(attr) {
340         return this.dom().attr('wlxml-meta-'+attr);
341     },
342
343     getWlxmlMetaAttrs: function() {
344         var toret = [];
345         var attrList = classAttributes.getMetaAttrsList(this.getWlxmlClass());
346         attrList.all.forEach(function(attr) {
347             toret.push({name: attr.name, value: this.getWlxmlMetaAttr(attr.name) || ''});
348         }, this);
349         return toret;
350     },
351
352     setWlxmlMetaAttr: function(attr, value) {
353         this.dom().attr('wlxml-meta-'+attr, value);
354     },
355     
356     toggleLabel: function(toggle) {
357         var displayCss = toggle ? 'inline-block' : 'none';
358         var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label');
359         label.css('display', displayCss);
360         this.toggleHighlight(toggle);
361     },
362
363     toggleHighlight: function(toogle) {
364         this._container().toggleClass('highlighted-element');
365     },
366
367     toggle: function(toggle) {
368         var mng = this.data('_wlxmlManager');
369         if(mng) {
370             mng.toggle(toggle);
371         }
372     }
373 });
374
375
376 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
377 var DocumentTextElement = function(htmlElement, canvas) {
378     DocumentElement.call(this, htmlElement, canvas);
379 };
380
381 $.extend(DocumentTextElement, {
382     createDOM: function(params) {
383         return $('<div>')
384             .attr('document-text-element', '')
385             .text(params.text || utils.unicode.ZWS);
386     },
387
388     create: function(params, canvas) {
389         return this.fromHTMLElement(this.createDOM(params)[0]);
390     },
391
392     fromHTMLElement: function(htmlElement, canvas) {
393         return new this(htmlElement, canvas);
394     },
395     isContentContainer: function(htmlElement) {
396         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
397     }
398 });
399
400 DocumentTextElement.prototype = new DocumentElement();
401
402 $.extend(DocumentTextElement.prototype, {
403     toXML: function(parent) {
404         return this.getText();
405     },
406     _setupDOMHandler: function(htmlElement) {
407         var $element = $(htmlElement);
408         if(htmlElement.nodeType === Node.TEXT_NODE)
409             this.$element = $element.parent();
410         else
411             this.$element = $element;
412     },
413     setText: function(text) {
414         this.dom().contents()[0].data = text;
415     },
416     getText: function() {
417         return this.dom().text().replace(utils.unicode.ZWS, '');
418     },
419     isEmpty: function() {
420         // Having at least Zero Width Space is guaranteed be Content Observer
421         return this.dom().contents()[0].data === utils.unicode.ZWS;
422     },
423     after: function(params) {
424         if(params instanceof DocumentTextElement || params.text)
425             return false;
426         var element;
427         if(params instanceof DocumentNodeElement) {
428             element = params;
429         } else {
430             element = DocumentNodeElement.create(params);
431         }
432         this.dom().wrap('<div>');
433         this.dom().parent().after(element.dom());
434         this.dom().unwrap();
435         return element;
436     },
437     before: function(params) {
438         if(params instanceof DocumentTextElement || params.text)
439             return false;
440         var element;
441         if(params instanceof DocumentNodeElement) {
442             element = params;
443         } else {
444             element = DocumentNodeElement.create(params);
445         }
446         this.dom().wrap('<div>');
447         this.dom().parent().before(element.dom());
448         this.dom().unwrap();
449         return element;
450     },
451     wrapWithNodeElement: function(wlxmlNode) {
452         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
453             return this.canvas.wrapText({
454                 inside: this.parent(),
455                 textNodeIdx: this.parent().childIndex(this),
456                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
457                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
458                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
459             });
460         } else {
461             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
462         }
463     },
464     unwrap: function() {
465         var parent = this.parent(),
466             toret;
467         if(parent.children().length === 1) {
468             toret = parent.parent();
469             var grandParent = parent.parent();
470             if(grandParent) {
471                 var grandParentChildren = grandParent.children(),
472                     idx = grandParent.childIndex(parent),
473                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
474                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
475                 if(prev && next) {
476                     prev.setText(prev.getText() + this.getText() + next.getText());
477                     next.detach();
478                 } else if (prev || next) {
479                     var target = prev ? prev : next;
480                     target.setText(target.getText() + this.getText());
481                 } else {
482                     parent.after(this);
483                 }
484             } else {
485                 parent.after(this);
486             }
487             parent.detach();
488             return toret;
489         }
490     },
491     split: function(params) {
492         var parentElement = this.parent(),
493             myIdx = parentElement.childIndex(this),
494             myCanvas = this.canvas,
495             passed = false,
496             succeedingChildren = [],
497             thisElement = this,
498             prefix = this.getText().substr(0, params.offset),
499             suffix = this.getText().substr(params.offset);
500
501         parentElement.children().forEach(function(child) {
502             if(passed)
503                 succeedingChildren.push(child);
504             if(child.sameNode(thisElement))
505                 passed = true;
506         });
507
508         if(prefix.length > 0)
509             this.setText(prefix);
510         else
511             this.detach();
512         
513         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
514         parentElement.after(newElement);
515
516         if(suffix.length > 0)
517             newElement.append({text: suffix});
518         succeedingChildren.forEach(function(child) {
519             newElement.append(child);
520         });
521
522         return {first: parentElement, second: newElement};
523     },
524     divide: function(params) {
525         var myText = this.getText();
526
527         if(params.offset === myText.length)
528             return this.after(params);
529         if(params.offset === 0)
530             return this.before(params);
531
532         var lhsText = myText.substr(0, params.offset),
533             rhsText = myText.substr(params.offset),
534             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
535             rhsTextElement = DocumentTextElement.create({text: rhsText});
536
537         this.setText(lhsText);
538         this.after(newElement);
539         newElement.after(rhsTextElement);
540         return newElement;
541     },
542
543     toggleHighlight: function() {
544         // do nothing for now
545     }
546 });
547
548 return {
549     DocumentElement: DocumentElement,
550     DocumentNodeElement: DocumentNodeElement,
551     DocumentTextElement: DocumentTextElement
552 };
553
554 });