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