b82b47156d880cf2ecc31e67ab9efebeafc4a101
[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     this.wlxmlTag = this.$element.attr('wlxml-tag');
17 }
18
19 $.extend(DocumentElement.prototype, {
20     dom: function() {
21         return this.$element;
22     },
23     children: function() {
24         var toret = [];
25         if(this instanceof DocumentTextElement)
26             return toret;
27
28
29         var elementContent = this.$element.contents();
30         var element = this;
31         elementContent.each(function(idx) {
32             var childElement = documentElementFromHTMLElement(this, element.canvas);
33             if(idx === 0 && elementContent.length > 1 && elementContent[1].nodeType === Node.ELEMENT_NODE && (childElement instanceof DocumentTextElement) && $.trim($(this).text()) === '')
34                 return true;
35             if(idx > 0 && childElement instanceof DocumentTextElement) {
36                 if(toret[toret.length-1] instanceof DocumentNodeElement && $.trim($(this).text()) === '')
37                     return true;
38             }
39             toret.push(childElement);
40         });
41         return toret;
42     },
43     parent: function() {
44         return documentElementFromHTMLElement(this.$element.parent()[0], this.canvas);
45     },
46
47     sameNode: function(other) {
48         return other && (typeof other === typeof this) && other.$element[0] === this.$element[0];
49     },
50
51     wrapWithNodeElement: function(wlxmlNode) {
52         var wrapper = DocumentNodeElement.create({tag: wlxmlNode.tag, klass: wlxmlNode.klass});
53         this.$element.replaceWith(wrapper.dom());
54         wrapper.append(this);
55         return wrapper;
56     },
57
58     childIndex: function(child) {
59         var children = this.children(),
60             toret = null;
61         children.forEach(function(c, idx) {
62             if(c.sameNode(child)) {
63                 toret = idx;
64                 return false;
65             }
66         });
67         return toret;
68     },
69
70     detach: function() {
71         this.$element.detach();
72         this.canvas = null;
73     }
74 });
75
76
77 var DocumentNodeElement = function(htmlElement, canvas) {
78     DocumentElement.call(this, htmlElement, canvas);
79 };
80
81 var DocumentTextElement = function(htmlElement, canvas) {
82     DocumentElement.call(this, htmlElement, canvas);
83 };
84
85 DocumentNodeElement.prototype = new DocumentElement();
86 DocumentTextElement.prototype = new DocumentElement();
87
88 var manipulate = function(e, params, action) {
89     var dom;
90     if(params instanceof DocumentElement) {
91         dom = params.dom()
92     } else {
93         dom = DocumentNodeElement.createDOM(params);
94     }
95     e.$element[action](dom);
96     return documentElementFromHTMLElement(dom);
97 };
98
99 $.extend(DocumentNodeElement.prototype, {
100     append: function(params) {
101         manipulate(this, params, 'append');
102     },
103     before: function(params) {
104         manipulate(this, params, 'before');
105
106     },
107     after: function(params) {
108         manipulate(this, params, 'after');
109     },
110     getWlxmlTag: function() {
111         return this.$element.attr('wlxml-tag');
112     },
113     setWlxmlTag: function(tag) {
114         this.$element.attr('wlxml-tag', tag);
115     },
116     getWlxmlClass: function() {
117         var klass = this.$element.attr('wlxml-class');
118         if(klass)
119             return klass.replace('-', '.');
120         return undefined;
121     },
122     setWlxmlClass: function(klass) {
123         if(klass)
124             this.$element.attr('wlxml-class', klass);
125         else
126             this.$element.removeAttr('wlxml-class');
127     },
128     is: function(what) {
129         if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.$element.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.$element[0].data = text;
156     },
157     getText: function() {
158         return this.$element.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.$element.wrap('<div>');
170         this.$element.parent().after(dom[0]);
171         this.$element.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.$element.wrap('<div>');
184         this.$element.parent().before(dom[0]);
185         this.$element.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.remove();
229         
230         var newElement = DocumentNodeElement.create({tag: parentElement.wlxmlTag, klass: parentElement.wlxmlClass}, 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 });