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