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