3a89bd1809c924f9e9902aa2a662daa416e8ec84
[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
86
87 // DocumentNodeElement represents an element node from WLXML document rendered inside Canvas
88 var DocumentNodeElement = function(htmlElement, canvas) {
89     DocumentElement.call(this, htmlElement, canvas);
90 };
91
92 $.extend(DocumentNodeElement, {
93     createDOM: function(params) {
94         var dom = $('<div>')
95             .attr('wlxml-tag', params.tag);
96         if(params.klass)
97             dom.attr('wlxml-class', params.klass.replace(/\./g, '-'));
98         return dom;
99     },
100
101     create: function(params, canvas) {
102         return this.fromHTMLElement(this.createDOM(params)[0]);
103     },
104
105     fromHTMLElement: function(htmlElement, canvas) {
106         return new this(htmlElement, canvas);
107     }
108 });
109
110 var manipulate = function(e, params, action) {
111     var element;
112     if(params instanceof DocumentElement) {
113         element = params;
114     } else {
115         element = DocumentElement.create(params);
116     }
117     e.dom()[action](element.dom());
118     return element;
119 };
120
121 DocumentNodeElement.prototype = new DocumentElement();
122
123 $.extend(DocumentNodeElement.prototype, {
124     append: function(params) {
125         manipulate(this, params, 'append');
126     },
127     before: function(params) {
128         manipulate(this, params, 'before');
129
130     },
131     after: function(params) {
132         manipulate(this, params, 'after');
133     },
134     children: function() {
135         var toret = [];
136         if(this instanceof DocumentTextElement)
137             return toret;
138
139
140         var elementContent = this.dom().contents();
141         var element = this;
142         elementContent.each(function(idx) {
143             var childElement = DocumentElement.fromHTMLElement(this, element.canvas);
144             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
145                 return true;
146             if(idx > 0 && childElement instanceof DocumentTextElement) {
147                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
148                     return true;
149             }
150             toret.push(childElement);
151         });
152         return toret;
153     },
154     childIndex: function(child) {
155         var children = this.children(),
156             toret = null;
157         children.forEach(function(c, idx) {
158             if(c.sameNode(child)) {
159                 toret = idx;
160                 return false;
161             }
162         });
163         return toret;
164     },
165     getWlxmlTag: function() {
166         return this.dom().attr('wlxml-tag');
167     },
168     setWlxmlTag: function(tag) {
169         this.dom().attr('wlxml-tag', tag);
170     },
171     getWlxmlClass: function() {
172         var klass = this.dom().attr('wlxml-class');
173         if(klass)
174             return klass.replace('-', '.');
175         return undefined;
176     },
177     setWlxmlClass: function(klass) {
178         if(klass)
179             this.dom().attr('wlxml-class', klass);
180         else
181             this.dom().removeAttr('wlxml-class');
182     },
183     is: function(what) {
184         if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.dom().attr('wlxml-class')))
185             return true;
186         return false;
187     }
188 });
189
190
191 // DocumentNodeElement represents a text node from WLXML document rendered inside Canvas
192 var DocumentTextElement = function(htmlElement, canvas) {
193     DocumentElement.call(this, htmlElement, canvas);
194 };
195
196 $.extend(DocumentTextElement, {
197     createDOM: function(params) {
198         return $('<div>')
199             .attr('wlxml-text', '')
200             .text(params.text);
201     },
202
203     create: function(params, canvas) {
204         return this.fromHTMLElement(this.createDOM(params)[0]);
205     },
206
207     fromHTMLElement: function(htmlElement, canvas) {
208         return new this(htmlElement, canvas);
209     }
210 });
211
212 DocumentTextElement.prototype = new DocumentElement();
213
214 $.extend(DocumentTextElement.prototype, {
215     _setupDOMHandler: function(htmlElement) {
216         var $element = $(htmlElement);
217         if(htmlElement.nodeType === Node.TEXT_NODE)
218             this.$element = $element.parent();
219         else
220             this.$element = $element;
221     },
222     setText: function(text) {
223         this.dom().contents()[0].data = text;
224     },
225     getText: function() {
226         return this.dom().text();
227     },
228     after: function(params) {
229         if(params instanceof DocumentTextElement || params.text)
230             return false;
231         var element;
232         if(params instanceof DocumentNodeElement) {
233             element = params;
234         } else {
235             element = DocumentNodeElement.create(params);
236         }
237         this.dom().wrap('<div>');
238         this.dom().parent().after(element.dom());
239         this.dom().unwrap();
240         return element;
241     },
242     before: function(params) {
243         if(params instanceof DocumentTextElement || params.text)
244             return false;
245         var element;
246         if(params instanceof DocumentNodeElement) {
247             element = params;
248         } else {
249             element = DocumentNodeElement.create(params);
250         }
251         this.dom().wrap('<div>');
252         this.dom().parent().before(element.dom());
253         this.dom().unwrap();
254         return element;
255     },
256     wrapWithNodeElement: function(wlxmlNode) {
257         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
258             return this.canvas.wrapText({
259                 inside: this.parent(),
260                 textNodeIdx: this.parent().childIndex(this),
261                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
262                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
263                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
264             });
265         } else {
266             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
267         }
268     },
269     unwrap: function() {
270         var parent = this.parent();
271         if(parent.children().length === 1) {
272             var grandParent = parent.parent();
273             if(grandParent) {
274                 var grandParentChildren = grandParent.children(),
275                     idx = grandParent.childIndex(parent),
276                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
277                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
278                 if(prev && next) {
279                     prev.setText(prev.getText() + this.getText() + next.getText());
280                     next.detach();
281                 } else if (prev || next) {
282                     var target = prev ? prev : next;
283                     target.setText(target.getText() + this.getText());
284                 } else {
285                     parent.after(this);
286                 }
287             } else {
288                 parent.after(this);
289             }
290             parent.detach();
291         }
292     },
293     split: function(params) {
294         var parentElement = this.parent(),
295             myIdx = parentElement.childIndex(this),
296             myCanvas = this.canvas,
297             passed = false,
298             succeedingChildren = [],
299             thisElement = this,
300             prefix = this.getText().substr(0, params.offset),
301             suffix = this.getText().substr(params.offset);
302
303         parentElement.children().forEach(function(child) {
304             if(passed)
305                 succeedingChildren.push(child);
306             if(child.sameNode(thisElement))
307                 passed = true;
308         });
309
310         if(prefix.length > 0)
311             this.setText(prefix);
312         else
313             this.detach();
314         
315         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
316         parentElement.after(newElement);
317
318         if(suffix.length > 0)
319             newElement.append({text: suffix});
320         succeedingChildren.forEach(function(child) {
321             newElement.append(child);
322         });
323     },
324 });
325
326 return {
327     DocumentElement: DocumentElement,
328     DocumentNodeElement: DocumentNodeElement,
329     DocumentTextElement: DocumentTextElement
330 };
331
332 });