0e2cb3d4ea6edc24ec16574b517df36a2ab5c196
[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         if(this.parent().children().length === 1) {
203             var parent = this.parent();
204             parent.after(this);
205             parent.detach();
206         }
207     },
208     split: function(params) {
209         var parentElement = this.parent(),
210             myIdx = parentElement.childIndex(this),
211             myCanvas = this.canvas,
212             passed = false,
213             succeedingChildren = [],
214             thisElement = this,
215             prefix = this.getText().substr(0, params.offset),
216             suffix = this.getText().substr(params.offset);
217
218         parentElement.children().forEach(function(child) {
219             if(passed)
220                 succeedingChildren.push(child);
221             if(child.sameNode(thisElement))
222                 passed = true;
223         });
224
225         if(prefix.length > 0)
226             this.setText(prefix);
227         else
228             this.detach();
229         
230         var newElement = DocumentNodeElement.create({tag: parentElement.getWlxmlTag(), klass: parentElement.getWlxmlClass()}, myCanvas);
231         parentElement.after(newElement);
232
233         if(suffix.length > 0)
234             newElement.append({text: suffix});
235         succeedingChildren.forEach(function(child) {
236             newElement.append(child);
237         });
238     }
239 });
240
241 var documentElementFromHTMLElement = function(htmlElement, canvas) {
242     // if(!canvas)
243     //    throw 'no canvas specified';
244     if(htmlElement.nodeType === Node.ELEMENT_NODE)
245         return new DocumentNodeElement(htmlElement, canvas);
246     if(htmlElement.nodeType === Node.TEXT_NODE)
247         return new DocumentTextElement(htmlElement, canvas);
248 };
249
250 return {
251     wrap: function(htmlElement, canvas) {
252         return documentElementFromHTMLElement(htmlElement, canvas);
253     },
254     DocumentElement: DocumentElement,
255     DocumentNodeElement: DocumentNodeElement,
256     DocumentTextElement: DocumentTextElement
257 };
258
259 });