0d08aabe6592eb515b613fdaa628105aa3a89ff7
[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         this.$element.wrap($('<' + wlxmlNode.tag + ' class="' + wlxmlNode.klass.replace('.', '-') + '">')[0]);
53         return documentElementFromHTMLElement(this.$element.parent().get(0), this.canvas);
54     },
55
56     childIndex: function(child) {
57         var children = this.children(),
58             toret = null;
59         children.forEach(function(c, idx) {
60             if(c.sameNode(child)) {
61                 toret = idx;
62                 return false;
63             }
64         });
65         return toret;
66     },
67
68     detach: function() {
69         this.$element.detach();
70         this.canvas = null;
71     }
72 });
73
74
75 var DocumentNodeElement = function(htmlElement, canvas) {
76     DocumentElement.call(this, htmlElement, canvas);
77 };
78
79 var DocumentTextElement = function(htmlElement, canvas) {
80     DocumentElement.call(this, htmlElement, canvas);
81 };
82
83 DocumentNodeElement.prototype = new DocumentElement();
84 DocumentTextElement.prototype = new DocumentElement();
85
86 var manipulate = function(e, params, action) {
87     var dom;
88     if(params instanceof DocumentElement) {
89         dom = params.dom()
90     } else {
91         dom = DocumentNodeElement.createDOM(params);
92     }
93     e.$element[action](dom);
94     return documentElementFromHTMLElement(dom);
95 };
96
97 $.extend(DocumentNodeElement.prototype, {
98     append: function(params) {
99         manipulate(this, params, 'append');
100     },
101     before: function(params) {
102         manipulate(this, params, 'before');
103
104     },
105     after: function(params) {
106         manipulate(this, params, 'after');
107     },
108     setWlxmlClass: function(klass) {
109         this.$element.attr('class', klass);
110     },
111     is: function(what) {
112         if(what === 'list' && _.contains(['list-items', 'list-items-enum'], this.$element.attr('wlxml-class')))
113             return true;
114         return false;
115     }
116 });
117
118 DocumentNodeElement.createDOM = function(params) {
119     var dom;
120     if(params.text) {
121         dom = $(document.createTextNode(params.text));
122     } else {
123         dom = $('<div>').attr('wlxml-tag', params.tag);
124         if(params.klass)
125             dom.attr('wlxml-class', params.klass);
126     }
127     return dom;
128 };
129
130
131 DocumentNodeElement.create = function(params, canvas) {
132     return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]);
133 };
134
135
136 $.extend(DocumentTextElement.prototype, {
137     setText: function(text) {
138         this.$element[0].data = text;
139     },
140     getText: function() {
141         return this.$element.text();
142     },
143     after: function(params) {
144         if(params instanceof DocumentTextElement || params.text)
145             return false;
146         var dom;
147         if(params instanceof DocumentNodeElement) {
148             dom = params.dom();
149         } else {
150             dom = DocumentNodeElement.createDOM(params);
151         }
152         this.$element.wrap('<div>');
153         this.$element.parent().after(dom[0]);
154         this.$element.unwrap();
155         return documentElementFromHTMLElement(dom[0]);
156     },
157     before: function(params) {
158         if(params instanceof DocumentTextElement || params.text)
159             return false;
160         var dom;
161         if(params instanceof DocumentNodeElement) {
162             dom = params.dom();
163         } else {
164             dom = DocumentNodeElement.createDOM(params);
165         }
166         this.$element.wrap('<div>');
167         this.$element.parent().before(dom[0]);
168         this.$element.unwrap();
169         return documentElementFromHTMLElement(dom[0]);
170     },
171     wrapWithNodeElement: function(wlxmlNode) {
172         if(wlxmlNode.start && wlxmlNode.end) {
173             return this.canvas.wrapText({
174                 inside: this.parent(),
175                 textNodeIdx: this.parent().childIndex(this),
176                 offsetStart: wlxmlNode.start,
177                 offsetEnd: wlxmlNode.end,
178                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
179             });
180         } else {
181             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
182         }
183     },
184     split: function(params) {
185         var parentElement = this.parent(),
186             myIdx = parentElement.childIndex(this),
187             myCanvas = this.canvas,
188             passed = false,
189             succeedingChildren = [],
190             thisElement = this,
191             prefix = this.getText().substr(0, params.offset),
192             suffix = this.getText().substr(params.offset);
193
194         parentElement.children().forEach(function(child) {
195             if(passed)
196                 succeedingChildren.push(child);
197             if(child.sameNode(thisElement))
198                 passed = true;
199         });
200
201         if(prefix.length > 0)
202             this.setText(prefix);
203         else
204             this.remove();
205         
206         var newElement = DocumentNodeElement.create({tag: parentElement.wlxmlTag, klass: parentElement.wlxmlClass}, myCanvas);
207         parentElement.after(newElement);
208
209         if(suffix.length > 0)
210             newElement.append({text: suffix});
211         succeedingChildren.forEach(function(child) {
212             newElement.append(child);
213         });
214     }
215 });
216
217 var documentElementFromHTMLElement = function(htmlElement, canvas) {
218     // if(!canvas)
219     //    throw 'no canvas specified';
220     if(htmlElement.nodeType === Node.ELEMENT_NODE)
221         return new DocumentNodeElement(htmlElement, canvas);
222     if(htmlElement.nodeType === Node.TEXT_NODE)
223         return new DocumentTextElement(htmlElement, canvas);
224 };
225
226 return {
227     wrap: function(htmlElement, canvas) {
228         return documentElementFromHTMLElement(htmlElement, canvas);
229     },
230     DocumentElement: DocumentElement,
231     DocumentNodeElement: DocumentNodeElement,
232     DocumentTextElement: DocumentTextElement
233 };
234
235 });