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