c71950d054dd6bd62651f3a3aae3331ce100b58b
[fnpeditor.git] / modules / documentCanvas / canvas.js
1 define([\r
2 'libs/jquery-1.9.1.min',\r
3 'libs/underscore-min',\r
4 'modules/documentCanvas/transformations',\r
5 'modules/documentCanvas/canvasNode',\r
6 'libs/text!./template.html'\r
7 ], function($, _, transformations, canvasNode, template) {\r
8 \r
9 'use strict';\r
10 \r
11 var Canvas = function(html) {\r
12     this.dom = $(template);\r
13     this.content = this.dom.find('#rng-module-documentCanvas-content');\r
14     this.setHTML(html);\r
15 };\r
16 \r
17 Canvas.prototype.setHTML = function(html) {\r
18     if(html) {\r
19         this.content.html(html);\r
20     }\r
21 };\r
22 \r
23 Canvas.prototype.getContent = function() {\r
24     return this.content.contents();\r
25 };\r
26 \r
27 Canvas.prototype.findNodes = function(desc) {\r
28     var selector = '';\r
29     if(typeof desc === 'string') {\r
30         selector = desc;\r
31     }\r
32     else {\r
33         if(desc.klass)\r
34             selector += '[wlxml-class=' + desc.klass + ']';\r
35         if(desc.tag)\r
36             selector += '[wlxml-tag=' + desc.tag + ']';\r
37     }\r
38     var toret = [];\r
39     this.content.find(selector).each(function() {\r
40         toret.push(canvasNode.create($(this)));\r
41     });\r
42     return toret;\r
43 };\r
44 \r
45 Canvas.prototype.getNodeById = function(id) {\r
46     return canvasNode.create($(this.content.find('#' +id)));\r
47 }\r
48 \r
49 Canvas.prototype.nodeAppend = function(options) {\r
50     var element; // = $(this.content.find('#' + options.context.id).get(0));\r
51     if(options.to === 'root') {\r
52         element = this.content;\r
53     } else {\r
54         element = $(this.content.find('#' + options.to.getId()).get(0));\r
55     }\r
56     element.append(options.node.dom);\r
57 };\r
58 \r
59 Canvas.prototype.nodeInsertAfter = function(options) {\r
60     var element = $(this.content.find('#' + options.after.getId()).get(0));\r
61     element.after(options.node.dom);\r
62 };\r
63 \r
64 Canvas.prototype.nodeWrap2 = function(options) {\r
65     var container = $(this.content.find('#' + options.inside.getId()).get(0));\r
66     \r
67     var containerContent = container.contents();\r
68     var idx1 = Math.min.apply(Math, options.textNodeIdx);\r
69     var idx2 = Math.max.apply(Math, options.textNodeIdx);\r
70     var textNode1 = $(containerContent.get(idx1));\r
71     var textNode2 = $(containerContent.get(idx2));\r
72     \r
73     textNode1.after(options._with.dom);\r
74     textNode1.detach();\r
75     textNode2.detach();\r
76     \r
77     \r
78     options._with.dom.before(textNode1.text().substr(0, options.offsetStart));\r
79     options._with.dom.append(textNode1.text().substr(options.offsetStart));\r
80     for(var i = idx1 + 1; i < idx2; i++) {\r
81         options._with.dom.append(containerContent[i]);\r
82     }\r
83     options._with.dom.append(textNode2.text().substr(0, options.offsetEnd));\r
84     options._with.dom.after(textNode2.text().substr(options.offsetEnd));\r
85 };\r
86 \r
87 Canvas.prototype.nodeWrap = function(options) {\r
88     options = _.extend({textNodeIdx: 0}, options);\r
89     \r
90     if(options.textNodeIdx instanceof Array)\r
91         return this.nodeWrap2(options);\r
92 \r
93     var element = $(this.content.find('#' + options.inside.getId()).get(0));\r
94     \r
95     var elementContents = element.contents();\r
96     if(elementContents.length === 0 || \r
97        elementContents.length - 1 < options.textNodeIdx || \r
98        elementContents.get(options.textNodeIdx).nodeType != 3)\r
99         return false;\r
100     var textElement = elementContents.get(options.textNodeIdx);\r
101 \r
102     var prefix = textElement.data.substr(0, options.offsetStart);\r
103     var suffix = textElement.data.substr(options.offsetEnd);\r
104     var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
105     options._with.setContent(core);\r
106 \r
107     $(textElement).replaceWith(options._with.dom);\r
108     options._with.dom.before(prefix);\r
109     options._with.dom.after(suffix);\r
110 };\r
111 \r
112 Canvas.prototype.nodeSplit = function(options) {\r
113     options = _.extend({textNodeIdx: 0}, options);\r
114     \r
115     var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0));\r
116     \r
117     var nodeContents = nodeToSplit.contents();\r
118     if(nodeContents.length === 0 || \r
119        nodeContents.length - 1 < options.textNodeIdx || \r
120        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
121         return false;\r
122     \r
123     var textNode = $(nodeContents.get(options.textNodeIdx));\r
124 \r
125     var succeedingNodes = [];\r
126     var passed = false;\r
127     nodeContents.each(function() {\r
128         var node = this;\r
129         if(passed)\r
130             succeedingNodes.push(node);\r
131         if(node === textNode.get(0))\r
132             passed = true;\r
133     });\r
134     \r
135     var prefix = $.trim(textNode.text().substr(0, options.offset));\r
136     var suffix = $.trim(textNode.text().substr(options.offset));\r
137     \r
138     textNode.before(prefix);\r
139     textNode.remove();\r
140     \r
141     var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')});\r
142     newNode.dom.append(suffix);\r
143     succeedingNodes.forEach(function(node) {\r
144         newNode.dom.append(node)\r
145     });\r
146     nodeToSplit.after(newNode.dom);\r
147     return newNode;\r
148 };\r
149 \r
150 Canvas.prototype.nodeRemove = function(options) {\r
151     var toRemove = $(this.content.find('#' + options.node.getId()).get(0));\r
152     toRemove.remove();\r
153 };\r
154 \r
155 Canvas.prototype.listCreate = function(options) {\r
156     var element1 = $(this.content.find('#' + options.start.getId()).get(0));\r
157     var element2 = $(this.content.find('#' + options.end.getId()).get(0));\r
158     if(!element1.parent().get(0) === element2.parent().get(0))\r
159         return false;\r
160         \r
161     var parent = element1.parent();\r
162     \r
163     if(parent.contents().index(element1) > parent.contents().index(element2)) {\r
164         var tmp = element1;\r
165         element1 = element2;\r
166         element2 = tmp;\r
167     }\r
168     \r
169     var nodesToWrap = [];\r
170     \r
171     var place = 'before';\r
172     var canvas = this;\r
173     parent.contents().each(function() {\r
174         var node = this;\r
175         if(node === element1.get(0))\r
176             place = 'inside';\r
177         if(place === 'inside') {\r
178             var $node;\r
179             if(node.nodeType === 3) {\r
180                 $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data);\r
181                 $(node).remove();\r
182             }\r
183             else {\r
184                 $node = $(node);\r
185             }\r
186             $node.attr('wlxml-class', 'item');\r
187             nodesToWrap.push($node);\r
188         }\r
189         if(node === element2.get(0))\r
190             return false;\r
191     });\r
192     \r
193     var list = canvasNode.create({tag: 'div', klass: 'list-items' + (options.type === 'enum' ? '-enum' : '')}).dom; //this._createNode('div', 'list-items');\r
194     \r
195     var parentNode = options.start.parent();\r
196     \r
197     var toret;\r
198     if(parentNode && parentNode.isOfClass('list-items')) {\r
199         list.wrap('<div wlxml-tag="div" wlxml-class="item" class="canvas-silent-item">');\r
200         toret = list.parent();\r
201     } else {\r
202         toret = list;\r
203     }\r
204         \r
205     \r
206     element1.before(toret);\r
207     \r
208     nodesToWrap.forEach(function(node) {\r
209         node.remove();\r
210         list.append(node);\r
211     });\r
212 };\r
213 \r
214 Canvas.prototype.listRemove = function(options) {\r
215     var pointerElement = $(this.content.find('#' + options.pointer.getId()));\r
216     var listElement = options.pointer.getClass() === 'list-items' ? pointerElement : \r
217         pointerElement.parents('[wlxml-class|="list-items"][wlxml-tag]');\r
218     \r
219     var nested = false;\r
220     if(listElement.length > 1) {\r
221         listElement = $(listElement[0]);\r
222         nested = true;\r
223     }\r
224     \r
225     if(nested) {\r
226         listElement.unwrap();\r
227     } else {\r
228         listElement.find('[wlxml-class=item]').each(function() {\r
229             $(this).removeAttr('wlxml-class');\r
230         });\r
231     }\r
232     listElement.children().unwrap();\r
233 };\r
234 \r
235 Canvas.prototype.getPrecedingNode = function(options) {\r
236     var element = $(this.content.find('#' + options.node.getId()).get(0));\r
237     var prev = element.prev()\r
238     if(prev.length === 0)\r
239         prev = element.parent();\r
240     return canvasNode.create(prev);\r
241 };\r
242 \r
243 Canvas.prototype.nodeInsideList = function(options) {\r
244     if(options.node) {\r
245         if(options.node.isOfClass('list-items') || options.node.isOfClass('item'))\r
246             return true;\r
247         var pointerElement = $(this.content.find('#' + options.node.getId()));\r
248         return pointerElement.parents('[wlxml-class=list-items], [wlxml-class=item]').length > 0;\r
249     }\r
250     return false;\r
251 };\r
252 \r
253 \r
254 return {\r
255     create: function(desc) { return new Canvas(desc); }\r
256 };\r
257 \r
258 });