210c492f8594a2d3bf644a730c1d85ae39cdd578
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / documentElement.js
1 define([
2 'libs/jquery',
3 'libs/underscore',
4 'modules/documentCanvas/canvas/utils',
5 'modules/documentCanvas/canvas/widgets',
6 'modules/documentCanvas/canvas/wlxmlManagers'
7 ], function($, _, utils, widgets, wlxmlManagers) {
8     
9 'use strict';
10
11
12 // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
13 var DocumentElement = function(htmlElement, canvas) {
14     if(arguments.length === 0)
15         return;
16     this.canvas = canvas;
17     this._setupDOMHandler(htmlElement);
18 }
19
20
21 var elementTypeFromWlxmlNode = function(wlxmlNode) {
22     return wlxmlNode.nodeType === Node.TEXT_NODE ? DocumentTextElement : DocumentNodeElement;
23 }
24
25 $.extend(DocumentElement, {
26     create: function(node, canvas) {
27         return elementTypeFromWlxmlNode(node).create(node, canvas);
28     },
29
30     createDOM: function(wlxmlNode) {
31         return elementTypeFromParams(wlxmlNode).createDOM(params);
32     },
33
34     fromHTMLElement: function(htmlElement, canvas) {
35         var $element = $(htmlElement);
36         if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('document-node-element') !== undefined)
37             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
38         if($element.attr('document-text-element') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('document-text-element') !== undefined))
39             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
40         return undefined;
41     }
42 });
43
44 $.extend(DocumentElement.prototype, {
45     _setupDOMHandler: function(htmlElement) {
46         this.$element = $(htmlElement);
47     },
48     bound: function() {
49         return $.contains(document.documentElement, this.dom()[0]);
50     },
51     dom: function() {
52         return this.$element;
53     },
54     data: function() {
55         var dom = this.dom(),
56             args = Array.prototype.slice.call(arguments, 0);
57         if(args.length === 2 && args[1] === undefined)
58             return dom.removeData(args[0]);
59         return dom.data.apply(dom, arguments);
60     },
61     parent: function() {
62         var parents = this.$element.parents('[document-node-element]');
63         if(parents.length)
64             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
65         return null;
66     },
67
68     parents: function() {
69         var parents = [],
70             parent = this.parent();
71         while(parent) {
72             parents.push(parent);
73             parent = parent.parent();
74         }
75         return parents;
76     },
77
78     sameNode: function(other) {
79         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
80     },
81
82     markAsCurrent: function() {
83         this.canvas.markAsCurrent(this);
84     },
85
86     getVerticallyFirstTextElement: function() {
87         var toret;
88         this.children().some(function(child) {
89             if(!child.isVisible())
90                 return false; // continue
91             if(child instanceof DocumentTextElement) {
92                 toret = child;
93                 return true; // break
94             } else {
95                 toret = child.getVerticallyFirstTextElement();
96                 if(toret)
97                     return true; // break
98             }
99         });
100         return toret;
101     },
102
103     getPreviousTextElement: function(includeInvisible) {
104         return this.getNearestTextElement('above', includeInvisible);
105     },
106
107     getNextTextElement: function(includeInvisible) {
108         return this.getNearestTextElement('below', includeInvisible);
109     },
110
111     getNearestTextElement: function(direction, includeInvisible) {
112         includeInvisible = includeInvisible !== undefined ? includeInvisible : false;
113         var selector = '[document-text-element]' + (includeInvisible ? '' : ':visible');
114         return this.canvas.getDocumentElement(utils.nearestInDocumentOrder(selector, direction, this.dom()[0]));
115     },
116
117     isVisible: function() {
118         return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
119     },
120
121     isInsideList: function() {
122         return this.parents().some(function(parent) {
123             return parent.is('list');
124         });
125     },
126
127     exec: function(method) {
128         var manager = this.data('_wlxmlManager');
129         if(manager[method])
130             return manager[method].apply(manager, Array.prototype.slice.call(arguments, 1));
131     }
132 });
133
134
135 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
136 var DocumentNodeElement = function(htmlElement, canvas) {
137     DocumentElement.call(this, htmlElement, canvas);
138 };
139
140 $.extend(DocumentNodeElement, {
141     create: function(wlxmlNode, canvas) {
142         return this.fromHTMLElement(this.createDOM(wlxmlNode, canvas)[0], canvas);
143     },
144
145     fromHTMLElement: function(htmlElement, canvas) {
146         return new this(htmlElement, canvas);
147     },
148
149     createDOM: function(wlxmlNode, canvas) {
150         var dom = $('<div>')
151                 .attr('document-node-element', ''),
152             widgetsContainer = $('<div>')
153                 .addClass('canvas-widgets')
154                 .attr('contenteditable', false),
155             container = $('<div>')
156                 .attr('document-element-content', '');
157         
158         dom.append(widgetsContainer, container);
159         // Make sure widgets aren't navigable with arrow keys
160         widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1);
161
162         var element = this.fromHTMLElement(dom[0], canvas);
163
164         element.data('wlxmlNode', wlxmlNode);
165         wlxmlNode.setData('canvasElement', element);
166
167         element.setWlxml({tag: wlxmlNode.getTagName(), klass: wlxmlNode.getClass()});
168
169         wlxmlNode.contents().forEach((function(node) {
170             container.append(DocumentElement.create(node).dom());
171         }).bind(this));
172
173         return dom;
174     }
175
176 });
177
178 var manipulate = function(e, params, action) {
179     var element;
180     if(params instanceof DocumentElement) {
181         element = params;
182     } else {
183         element = DocumentElement.create(params);
184     }
185     var target = (action === 'append' || action === 'prepend') ? e._container() : e.dom();
186     target[action](element.dom());
187     return element;
188 };
189
190 DocumentNodeElement.prototype = new DocumentElement();
191
192
193 $.extend(DocumentNodeElement.prototype, {
194     _container: function() {
195         return this.dom().children('[document-element-content]');
196     },
197     detach: function() {
198         this.dom().detach();
199         this.canvas = null;
200         return this;
201     },
202     append: function(params) {
203         if(params.tag !== 'span')
204             this.data('orig-end', undefined);
205         return manipulate(this, params, 'append');
206     },
207     prepend: function(params) {
208         return manipulate(this, params, 'prepend');
209     },
210     before: function(params) {
211         return manipulate(this, params, 'before');
212
213     },
214     after: function(params) {
215         return manipulate(this, params, 'after');
216     },
217     children: function() {
218         var toret = [];
219         if(this instanceof DocumentTextElement)
220             return toret;
221
222
223         var elementContent = this._container().contents();
224         var element = this;
225         elementContent.each(function(idx) {
226             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
227             if(childElement === undefined)
228                 return true;
229             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
230                 return true;
231             if(idx > 0 && childElement instanceof DocumentTextElement) {
232                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
233                     return true;
234             }
235             toret.push(childElement);
236         });
237         return toret;
238     },
239     childIndex: function(child) {
240         var children = this.children(),
241             toret = null;
242         children.forEach(function(c, idx) {
243             if(c.sameNode(child)) {
244                 toret = idx;
245                 return false;
246             }
247         });
248         return toret;
249     },
250     getWlxmlTag: function() {
251         return this._container().attr('wlxml-tag');
252     },
253     setWlxmlTag: function(tag) {
254         if(tag === this.getWlxmlTag())
255             return;
256
257         this._container().attr('wlxml-tag', tag);
258         if(!this.__updatingWlxml)
259             this._updateWlxmlManager();
260     },
261     getWlxmlClass: function() {
262         var klass = this._container().attr('wlxml-class');
263         if(klass)
264             return klass.replace(/-/g, '.');
265         return undefined;
266     },
267     setWlxmlClass: function(klass) {
268         if(klass === this.getWlxmlClass())
269             return;
270         if(klass)
271             this._container().attr('wlxml-class', klass.replace(/\./g, '-'));
272         else
273             this._container().removeAttr('wlxml-class');
274         if(!this.__updatingWlxml)
275             this._updateWlxmlManager();
276     },
277     setWlxml: function(params) {
278         this.__updatingWlxml = true;
279         if(params.tag !== undefined)
280             this.setWlxmlTag(params.tag);
281         if(params.klass !== undefined)
282             this.setWlxmlClass(params.klass);
283         this._updateWlxmlManager();
284         this.__updatingWlxml = false;
285     },
286     _updateWlxmlManager: function() {
287         var manager = wlxmlManagers.getFor(this);
288         this.data('_wlxmlManager', manager);
289         manager.setup();
290     },
291     is: function(what) {
292         if(what === 'list' && _.contains(['list.items', 'list.items.enum'], this.getWlxmlClass()))
293             return true;
294         return false;
295     },
296     toggleLabel: function(toggle) {
297         var displayCss = toggle ? 'inline-block' : 'none';
298         var label = this.dom().children('.canvas-widgets').find('.canvas-widget-label');
299         label.css('display', displayCss);
300         this.toggleHighlight(toggle);
301     },
302
303     toggleHighlight: function(toggle) {
304         this._container().toggleClass('highlighted-element', toggle);
305     },
306
307     toggle: function(toggle) {
308         var mng = this.data('_wlxmlManager');
309         if(mng) {
310             mng.toggle(toggle);
311         }
312     }
313 });
314
315
316 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
317 var DocumentTextElement = function(htmlElement, canvas) {
318     DocumentElement.call(this, htmlElement, canvas);
319 };
320
321 $.extend(DocumentTextElement, {
322     createDOM: function(wlxmlTextNode) {
323         var dom = $('<div>')
324             .attr('document-text-element', '')
325             .text(wlxmlTextNode.getText() || utils.unicode.ZWS),
326         element = this.fromHTMLElement(dom[0], this);
327         element.data('wlxmlNode', wlxmlTextNode);
328         return dom;
329     },
330
331     create: function(wlxmlTextNode, canvas) {
332         return this.fromHTMLElement(this.createDOM(wlxmlTextNode)[0]);
333     },
334
335     fromHTMLElement: function(htmlElement, canvas) {
336         return new this(htmlElement, canvas);
337     },
338     isContentContainer: function(htmlElement) {
339         return htmlElement.nodeType === Node.TEXT_NODE && $(htmlElement).parent().is('[document-text-element]');
340     }
341 });
342
343 DocumentTextElement.prototype = new DocumentElement();
344
345 $.extend(DocumentTextElement.prototype, {
346     _setupDOMHandler: function(htmlElement) {
347         var $element = $(htmlElement);
348         if(htmlElement.nodeType === Node.TEXT_NODE)
349             this.$element = $element.parent();
350         else
351             this.$element = $element;
352     },
353     detach: function() {
354         this.dom().detach();
355         this.canvas = null;
356         return this;
357     },
358     setText: function(text) {
359         this.dom().contents()[0].data = text;
360     },
361     appendText: function(text) {
362         this.dom().contents()[0].data += text;
363     },
364     prependText: function(text) {
365         this.dom().contents()[0].data = text + this.dom().contents()[0].data;
366     },
367     getText: function(options) {
368         options = _.extend({raw: false}, options || {});
369         var toret = this.dom().text();
370         if(!options.raw) {
371             toret = toret.replace(utils.unicode.ZWS, '');
372         }
373         return toret;
374     },
375     isEmpty: function() {
376         // Having at least Zero Width Space is guaranteed be Content Observer
377         return this.dom().contents()[0].data === utils.unicode.ZWS;
378     },
379     after: function(params) {
380         if(params instanceof DocumentTextElement || params.text)
381             return false;
382         var element;
383         if(params instanceof DocumentNodeElement) {
384             element = params;
385         } else {
386             element = DocumentElement.create(params, this.canvas);
387         }
388         this.dom().wrap('<div>');
389         this.dom().parent().after(element.dom());
390         this.dom().unwrap();
391         return element;
392     },
393     before: function(params) {
394         if(params instanceof DocumentTextElement || params.text)
395             return false;
396         var element;
397         if(params instanceof DocumentNodeElement) {
398             element = params;
399         } else {
400             element = DocumentNodeElement.create(params, this.canvas);
401         }
402         this.dom().wrap('<div>');
403         this.dom().parent().before(element.dom());
404         this.dom().unwrap();
405         return element;
406     },
407
408     divide: function(params) {
409         var myText = this.getText();
410
411         if(params.offset === myText.length)
412             return this.after(params);
413         if(params.offset === 0)
414             return this.before(params);
415
416         var lhsText = myText.substr(0, params.offset),
417             rhsText = myText.substr(params.offset),
418             newElement = DocumentNodeElement.create({tag: params.tag, klass: params.klass}, this.canvas),
419             rhsTextElement = DocumentTextElement.create({text: rhsText});
420
421         this.setText(lhsText);
422         this.after(newElement);
423         newElement.after(rhsTextElement);
424         return newElement;
425     },
426
427     toggleHighlight: function() {
428         // do nothing for now
429     }
430 });
431
432 return {
433     DocumentElement: DocumentElement,
434     DocumentNodeElement: DocumentNodeElement,
435     DocumentTextElement: DocumentTextElement
436 };
437
438 });