f2ef09c207ff37cf6d9d504e9e99acf07e90917a
[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(wlxmlNode.start && wlxmlNode.end) {
190             return this.canvas.wrapText({
191                 inside: this.parent(),
192                 textNodeIdx: this.parent().childIndex(this),
193                 offsetStart: wlxmlNode.start,
194                 offsetEnd: wlxmlNode.end,
195                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
196             });
197         } else {
198             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
199         }
200     },
201     split: function(params) {
202         var parentElement = this.parent(),
203             myIdx = parentElement.childIndex(this),
204             myCanvas = this.canvas,
205             passed = false,
206             succeedingChildren = [],
207             thisElement = this,
208             prefix = this.getText().substr(0, params.offset),
209             suffix = this.getText().substr(params.offset);
210
211         parentElement.children().forEach(function(child) {
212             if(passed)
213                 succeedingChildren.push(child);
214             if(child.sameNode(thisElement))
215                 passed = true;
216         });
217
218         if(prefix.length > 0)
219             this.setText(prefix);
220         else
221             this.remove();
222         
223         var newElement = DocumentNodeElement.create({tag: parentElement.wlxmlTag, klass: parentElement.wlxmlClass}, myCanvas);
224         parentElement.after(newElement);
225
226         if(suffix.length > 0)
227             newElement.append({text: suffix});
228         succeedingChildren.forEach(function(child) {
229             newElement.append(child);
230         });
231     }
232 });
233
234 var documentElementFromHTMLElement = function(htmlElement, canvas) {
235     // if(!canvas)
236     //    throw 'no canvas specified';
237     if(htmlElement.nodeType === Node.ELEMENT_NODE)
238         return new DocumentNodeElement(htmlElement, canvas);
239     if(htmlElement.nodeType === Node.TEXT_NODE)
240         return new DocumentTextElement(htmlElement, canvas);
241 };
242
243 return {
244     wrap: function(htmlElement, canvas) {
245         return documentElementFromHTMLElement(htmlElement, canvas);
246     },
247     DocumentElement: DocumentElement,
248     DocumentNodeElement: DocumentNodeElement,
249     DocumentTextElement: DocumentTextElement
250 };
251
252 });