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