7e5824bd7a74d796cbd27232b165bc31a9d5d6df
[fnpeditor.git] / modules / documentCanvas / canvas / documentElement.js
1 define([
2 'libs/jquery-1.9.1.min',
3 'libs/underscore-min'
4 ], function($, _) {
5     
6 'use strict';
7
8
9 // DocumentElement represents a text or an element node from WLXML document rendered inside Canvas
10 var DocumentElement = function(htmlElement, canvas) {
11     if(arguments.length === 0)
12         return;
13     this.canvas = canvas;
14     this._setupDOMHandler(htmlElement);
15 }
16
17 var elementTypeFromParams = function(params) {
18     return params.text !== undefined ? DocumentTextElement : DocumentNodeElement;
19
20 };
21
22 $.extend(DocumentElement, {
23     create: function(params, canvas) {
24         return elementTypeFromParams(params).create(params);
25     },
26
27     createDOM: function(params) {
28         return elementTypeFromParams(params).createDOM(params);
29     },
30
31     fromHTMLElement: function(htmlElement, canvas) {
32         var $element = $(htmlElement);
33         if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag'))
34             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
35         if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined))
36             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
37         return undefined;
38     }
39 });
40
41 $.extend(DocumentElement.prototype, {
42     _setupDOMHandler: function(htmlElement) {
43         this.$element = $(htmlElement);
44     },
45     dom: function() {
46         return this.$element;
47     },
48     parent: function() {
49         var parents = this.$element.parents('[wlxml-tag]');
50         if(parents.length)
51             return DocumentElement.fromHTMLElement(parents[0], this.canvas);
52         return null;
53     },
54
55     parents: function() {
56         var parents = [],
57             parent = this.parent();
58         while(parent) {
59             parents.push(parent);
60             parent = parent.parent();
61         }
62         return parents;
63     },
64
65     sameNode: function(other) {
66         return other && (typeof other === typeof this) && other.dom()[0] === this.dom()[0];
67     },
68
69     wrapWithNodeElement: function(wlxmlNode) {
70         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
71         this.dom().replaceWith(wrapper.dom());
72         wrapper.append(this);
73         return wrapper;
74     },
75
76     detach: function() {
77         this.dom().detach();
78         this.canvas = null;
79     },
80
81     markAsCurrent: function() {
82         this.canvas.markAsCurrent(this);
83     },
84
85     getVerticallyFirstTextElement: function() {
86         var toret;
87         this.children().some(function(child) {
88             if(!child.isVisible())
89                 return false; // continue
90             if(child instanceof DocumentTextElement) {
91                 toret = child;
92                 return true; // break
93             } else {
94                 toret = child.getVerticallyFirstTextElement();
95                 if(toret)
96                     return true; // break
97             }
98         });
99         return toret;
100     },
101
102     isVisible: function() {
103         return this instanceof DocumentTextElement || this.getWlxmlTag() !== 'metadata';
104     }
105 });
106
107
108 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
109 var DocumentNodeElement = function(htmlElement, canvas) {
110     DocumentElement.call(this, htmlElement, canvas);
111 };
112
113 $.extend(DocumentNodeElement, {
114     createDOM: function(params) {
115         var dom = $('<div>')
116             .attr('wlxml-tag', params.tag);
117         if(params.klass)
118             dom.attr('wlxml-class', params.klass.replace(/\./g, '-'));
119         return dom;
120     },
121
122     create: function(params, canvas) {
123         return this.fromHTMLElement(this.createDOM(params)[0]);
124     },
125
126     fromHTMLElement: function(htmlElement, canvas) {
127         return new this(htmlElement, canvas);
128     }
129 });
130
131 var manipulate = function(e, params, action) {
132     var element;
133     if(params instanceof DocumentElement) {
134         element = params;
135     } else {
136         element = DocumentElement.create(params);
137     }
138     e.dom()[action](element.dom());
139     return element;
140 };
141
142 DocumentNodeElement.prototype = new DocumentElement();
143
144 $.extend(DocumentNodeElement.prototype, {
145     append: function(params) {
146         manipulate(this, params, 'append');
147     },
148     before: function(params) {
149         manipulate(this, params, 'before');
150
151     },
152     after: function(params) {
153         manipulate(this, params, 'after');
154     },
155     children: function() {
156         var toret = [];
157         if(this instanceof DocumentTextElement)
158             return toret;
159
160
161         var elementContent = this.dom().contents();
162         var element = this;
163         elementContent.each(function(idx) {
164             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
165             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
166                 return true;
167             if(idx > 0 && childElement instanceof DocumentTextElement) {
168                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
169                     return true;
170             }
171             toret.push(childElement);
172         });
173         return toret;
174     },
175     childIndex: function(child) {
176         var children = this.children(),
177             toret = null;
178         children.forEach(function(c, idx) {
179             if(c.sameNode(child)) {
180                 toret = idx;
181                 return false;
182             }
183         });
184         return toret;
185     },
186     getWlxmlTag: function() {
187         return this.dom().attr('wlxml-tag');
188     },
189     setWlxmlTag: function(tag) {
190         this.dom().attr('wlxml-tag', tag);
191     },
192     getWlxmlClass: function() {
193         var klass = this.dom().attr('wlxml-class');
194         if(klass)
195             return klass.replace('-', '.');
196         return undefined;
197     },
198     setWlxmlClass: function(klass) {
199         if(klass)
200             this.dom().attr('wlxml-class', klass);
201         else
202             this.dom().removeAttr('wlxml-class');
203     },
204     is: function(what) {
205         if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class')))
206             return true;
207         return false;
208     }
209 });
210
211
212 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
213 var DocumentTextElement = function(htmlElement, canvas) {
214     DocumentElement.call(this, htmlElement, canvas);
215 };
216
217 $.extend(DocumentTextElement, {
218     createDOM: function(params) {
219         return $('<div>')
220             .attr('wlxml-text', '')
221             .text(params.text);
222     },
223
224     create: function(params, canvas) {
225         return this.fromHTMLElement(this.createDOM(params)[0]);
226     },
227
228     fromHTMLElement: function(htmlElement, canvas) {
229         return new this(htmlElement, canvas);
230     }
231 });
232
233 DocumentTextElement.prototype = new DocumentElement();
234
235 $.extend(DocumentTextElement.prototype, {
236     _setupDOMHandler: function(htmlElement) {
237         var $element = $(htmlElement);
238         if(htmlElement.nodeType === Node.TEXT_NODE)
239             this.$element = $element.parent();
240         else
241             this.$element = $element;
242     },
243     setText: function(text) {
244         this.dom().contents()[0].data = text;
245     },
246     getText: function() {
247         return this.dom().text();
248     },
249     after: function(params) {
250         if(params instanceof DocumentTextElement || params.text)
251             return false;
252         var element;
253         if(params instanceof DocumentNodeElement) {
254             element = params;
255         } else {
256             element = DocumentNodeElement.create(params);
257         }
258         this.dom().wrap('<div>');
259         this.dom().parent().after(element.dom());
260         this.dom().unwrap();
261         return element;
262     },
263     before: function(params) {
264         if(params instanceof DocumentTextElement || params.text)
265             return false;
266         var element;
267         if(params instanceof DocumentNodeElement) {
268             element = params;
269         } else {
270             element = DocumentNodeElement.create(params);
271         }
272         this.dom().wrap('<div>');
273         this.dom().parent().before(element.dom());
274         this.dom().unwrap();
275         return element;
276     },
277     wrapWithNodeElement: function(wlxmlNode) {
278         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
279             return this.canvas.wrapText({
280                 inside: this.parent(),
281                 textNodeIdx: this.parent().childIndex(this),
282                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
283                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
284                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
285             });
286         } else {
287             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
288         }
289     },
290     unwrap: function() {
291         var parent = this.parent();
292         if(parent.children().length === 1) {
293             var grandParent = parent.parent();
294             if(grandParent) {
295                 var grandParentChildren = grandParent.children(),
296                     idx = grandParent.childIndex(parent),
297                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
298                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
299                 if(prev && next) {
300                     prev.setText(prev.getText() + this.getText() + next.getText());
301                     next.detach();
302                 } else if (prev || next) {
303                     var target = prev ? prev : next;
304                     target.setText(target.getText() + this.getText());
305                 } else {
306                     parent.after(this);
307                 }
308             } else {
309                 parent.after(this);
310             }
311             parent.detach();
312         }
313     },
314     split: function(params) {
315         var parentElement = this.parent(),
316             myIdx = parentElement.childIndex(this),
317             myCanvas = this.canvas,
318             passed = false,
319             succeedingChildren = [],
320             thisElement = this,
321             prefix = this.getText().substr(0, params.offset),
322             suffix = this.getText().substr(params.offset);
323
324         parentElement.children().forEach(function(child) {
325             if(passed)
326                 succeedingChildren.push(child);
327             if(child.sameNode(thisElement))
328                 passed = true;
329         });
330
331         if(prefix.length > 0)
332             this.setText(prefix);
333         else
334             this.detach();
335         
336         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
337         parentElement.after(newElement);
338
339         if(suffix.length > 0)
340             newElement.append({text: suffix});
341         succeedingChildren.forEach(function(child) {
342             newElement.append(child);
343         });
344     },
345 });
346
347 return {
348     DocumentElement: DocumentElement,
349     DocumentNodeElement: DocumentNodeElement,
350     DocumentTextElement: DocumentTextElement
351 };
352
353 });