82a85c722960e101e0f1b0c57f26dec1b975f74c
[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 dom;
59     if(params instanceof DocumentElement) {
60         dom = params.dom()
61     } else {
62         dom = DocumentNodeElement.createDOM(params);
63     }
64     e.dom()[action](dom);
65     return documentElementFromHTMLElement(dom);
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 DocumentNodeElement.createDOM = function(params) {
136     var dom;
137     if(params.text) {
138         dom = $(document.createTextNode(params.text));
139     } else {
140         dom = $('<div>').attr('wlxml-tag', params.tag);
141         if(params.klass)
142             dom.attr('wlxml-class', params.klass);
143     }
144     return dom;
145 };
146
147
148 DocumentNodeElement.create = function(params, canvas) {
149     return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]);
150 };
151
152
153 $.extend(DocumentTextElement.prototype, {
154     setText: function(text) {
155         this.dom()[0].data = text;
156     },
157     getText: function() {
158         return this.dom().text();
159     },
160     after: function(params) {
161         if(params instanceof DocumentTextElement || params.text)
162             return false;
163         var dom;
164         if(params instanceof DocumentNodeElement) {
165             dom = params.dom();
166         } else {
167             dom = DocumentNodeElement.createDOM(params);
168         }
169         this.dom().wrap('<div>');
170         this.dom().parent().after(dom[0]);
171         this.dom().unwrap();
172         return documentElementFromHTMLElement(dom[0]);
173     },
174     before: function(params) {
175         if(params instanceof DocumentTextElement || params.text)
176             return false;
177         var dom;
178         if(params instanceof DocumentNodeElement) {
179             dom = params.dom();
180         } else {
181             dom = DocumentNodeElement.createDOM(params);
182         }
183         this.dom().wrap('<div>');
184         this.dom().parent().before(dom[0]);
185         this.dom().unwrap();
186         return documentElementFromHTMLElement(dom[0]);
187     },
188     wrapWithNodeElement: function(wlxmlNode) {
189         if(typeof wlxmlNode.start === 'number' && typeof wlxmlNode.end === 'number') {
190             return this.canvas.wrapText({
191                 inside: this.parent(),
192                 textNodeIdx: this.parent().childIndex(this),
193                 offsetStart: Math.min(wlxmlNode.start, wlxmlNode.end),
194                 offsetEnd: Math.max(wlxmlNode.start, wlxmlNode.end),
195                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
196             });
197         } else {
198             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
199         }
200     },
201     unwrap: function() {
202         var parent = this.parent();
203         if(parent.children().length === 1) {
204             var grandParent = parent.parent();
205             if(grandParent) {
206                 var grandParentChildren = grandParent.children(),
207                     idx = grandParent.childIndex(parent),
208                     prev = idx - 1 > -1 ? grandParentChildren[idx-1] : null,
209                     next = idx + 1 < grandParentChildren.length ? grandParentChildren[idx+1] : null;
210                 if(prev && next) {
211                     prev.setText(prev.getText() + this.getText() + next.getText());
212                     next.detach();
213                 } else if (prev || next) {
214                     var target = prev ? prev : next;
215                     target.setText(target.getText() + this.getText());
216                 } else {
217                     parent.after(this);
218                 }
219             } else {
220                 parent.after(this);
221             }
222             parent.detach();
223         }
224     },
225     split: function(params) {
226         var parentElement = this.parent(),
227             myIdx = parentElement.childIndex(this),
228             myCanvas = this.canvas,
229             passed = false,
230             succeedingChildren = [],
231             thisElement = this,
232             prefix = this.getText().substr(0, params.offset),
233             suffix = this.getText().substr(params.offset);
234
235         parentElement.children().forEach(function(child) {
236             if(passed)
237                 succeedingChildren.push(child);
238             if(child.sameNode(thisElement))
239                 passed = true;
240         });
241
242         if(prefix.length > 0)
243             this.setText(prefix);
244         else
245             this.detach();
246         
247         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
248         parentElement.after(newElement);
249
250         if(suffix.length > 0)
251             newElement.append({text: suffix});
252         succeedingChildren.forEach(function(child) {
253             newElement.append(child);
254         });
255     }
256 });
257
258 var documentElementFromHTMLElement = function(htmlElement, canvas) {
259     // if(!canvas)
260     //    throw 'no canvas specified';
261     if(htmlElement.nodeType === Node.ELEMENT_NODE)
262         return new DocumentNodeElement(htmlElement, canvas);
263     if(htmlElement.nodeType === Node.TEXT_NODE)
264         return new DocumentTextElement(htmlElement, canvas);
265 };
266
267 return {
268     wrap: function(htmlElement, canvas) {
269         return documentElementFromHTMLElement(htmlElement, canvas);
270     },
271     DocumentElement: DocumentElement,
272     DocumentNodeElement: DocumentNodeElement,
273     DocumentTextElement: DocumentTextElement
274 };
275
276 });