62c67312b447558391836894eee0e1d20b494e61
[fnpeditor.git] / modules / documentCanvas / canvas / documentElement.js
1 define([
2 'libs/jquery-1.9.1.min'
3 ], function($) {
4     
5 'use strict';
6
7
8 // DocumentElement represents a node from WLXML document rendered inside Canvas
9 var DocumentElement = function(htmlElement, canvas) {
10     if(arguments.length === 0)
11         return;
12     this.canvas = canvas;
13     this.$element = $(htmlElement);
14
15     var tagNameProp = this.$element.prop('tagName');
16     this.wlxmlTag = tagNameProp ? tagNameProp.toLowerCase() : undefined;
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 + '"">')[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 });
109
110 DocumentNodeElement.createDOM = function(params) {
111     var dom;
112     if(params.text) {
113         dom = $(document.createTextNode(params.text));
114     } else {
115         dom = $('<' + params.tag + '>');
116         if(params.klass)
117             dom.attr('class', params.klass);
118     }
119     return dom;
120 };
121
122
123 DocumentNodeElement.create = function(params, canvas) {
124     return documentElementFromHTMLElement(DocumentNodeElement.createDOM(params)[0]);
125 };
126
127
128 $.extend(DocumentTextElement.prototype, {
129     setText: function(text) {
130         this.$element[0].data = text;
131     },
132     getText: function() {
133         return this.$element.text();
134     },
135     after: function(params) {
136         if(params instanceof DocumentTextElement || params.text)
137             return false;
138         var dom;
139         if(params instanceof DocumentNodeElement) {
140             dom = params.dom();
141         } else {
142             dom = DocumentNodeElement.createDOM(params);
143         }
144         this.$element.wrap('<div>');
145         this.$element.parent().after(dom[0]);
146         this.$element.unwrap();
147         return documentElementFromHTMLElement(dom[0]);
148     },
149     wrapWithNodeElement: function(wlxmlNode) {
150         if(wlxmlNode.start && wlxmlNode.end) {
151             return this.canvas.wrapText({
152                 inside: this.parent(),
153                 textNodeIdx: this.parent().childIndex(this),
154                 offsetStart: wlxmlNode.start,
155                 offsetEnd: wlxmlNode.end,
156                 _with: {tag: wlxmlNode.tag, klass: wlxmlNode.klass}
157             });
158         } else {
159             return DocumentElement.prototype.wrapWithNodeElement.call(this, wlxmlNode);
160         }
161     },
162     split: function(params) {
163         var parentElement = this.parent(),
164             myIdx = parentElement.childIndex(this),
165             myCanvas = this.canvas,
166             passed = false,
167             succeedingChildren = [],
168             thisElement = this,
169             prefix = this.getText().substr(0, params.offset),
170             suffix = this.getText().substr(params.offset);
171
172         parentElement.children().forEach(function(child) {
173             if(passed)
174                 succeedingChildren.push(child);
175             if(child.sameNode(thisElement))
176                 passed = true;
177         });
178
179         if(prefix.length > 0)
180             this.setText(prefix);
181         else
182             this.remove();
183         
184         var newElement = DocumentNodeElement.create({tag: parentElement.wlxmlTag, klass: parentElement.wlxmlClass}, myCanvas);
185         parentElement.after(newElement);
186
187         if(suffix.length > 0)
188             newElement.append({text: suffix});
189         succeedingChildren.forEach(function(child) {
190             newElement.append(child);
191         });
192     }
193 });
194
195 var documentElementFromHTMLElement = function(htmlElement, canvas) {
196     // if(!canvas)
197     //    throw 'no canvas specified';
198     if(htmlElement.nodeType === Node.ELEMENT_NODE)
199         return new DocumentNodeElement(htmlElement, canvas);
200     if(htmlElement.nodeType === Node.TEXT_NODE)
201         return new DocumentTextElement(htmlElement, canvas);
202 };
203
204 return {
205     wrap: function(htmlElement, canvas) {
206         return documentElementFromHTMLElement(htmlElement, canvas);
207     },
208     DocumentElement: DocumentElement,
209     DocumentNodeElement: DocumentNodeElement,
210     DocumentTextElement: DocumentTextElement
211 };
212
213 });