d0629d348b63fc7ff2d073963b1fabe68ef413e6
[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.nodeWrap = function(options) {\r
65     var element = $(this.content.find('#' + options.inside.getId()).get(0));\r
66 \r
67     var elementContents = element.contents();\r
68     if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
69         return false;\r
70     var textElement = elementContents.get(0);\r
71 \r
72     var prefix = textElement.data.substr(0, options.offsetStart);\r
73     var suffix = textElement.data.substr(options.offsetEnd);\r
74     var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
75     options._with.setContent(core);\r
76 \r
77     $(textElement).replaceWith(options._with.dom);\r
78     options._with.dom.before(prefix);\r
79     options._with.dom.after(suffix);\r
80 };\r
81 \r
82 Canvas.prototype.nodeSplit = function(options) {\r
83     options = _.extend({textNodeIdx: 0}, options);\r
84     \r
85     var nodeToSplit = $(this.content.find('#' + options.node.getId()).get(0));\r
86     \r
87     var nodeContents = nodeToSplit.contents();\r
88     if(nodeContents.length === 0 || \r
89        nodeContents.length - 1 < options.textNodeIdx || \r
90        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
91         return false;\r
92     \r
93     var textNode = $(nodeContents.get(options.textNodeIdx));\r
94 \r
95     var succeedingNodes = [];\r
96     var passed = false;\r
97     nodeContents.each(function() {\r
98         var node = this;\r
99         if(passed)\r
100             succeedingNodes.push(node);\r
101         if(node.isSameNode(textNode.get(0)))\r
102             passed = true;\r
103     });\r
104     \r
105     var prefix = $.trim(textNode.text().substr(0, options.offset));\r
106     var suffix = $.trim(textNode.text().substr(options.offset));\r
107     \r
108     textNode.before(prefix);\r
109     textNode.remove();\r
110     \r
111     var newNode = canvasNode.create({tag: nodeToSplit.attr('wlxml-tag'), klass: nodeToSplit.attr('wlxml-class')});\r
112     newNode.dom.append(suffix);\r
113     succeedingNodes.forEach(function(node) {\r
114         newNode.dom.append(node)\r
115     });\r
116     nodeToSplit.after(newNode.dom);\r
117     return newNode;\r
118 };\r
119 \r
120 Canvas.prototype.nodeRemove = function(options) {\r
121     var toRemove = $(this.content.find('#' + options.node.getId()).get(0));\r
122     toRemove.remove();\r
123 };\r
124 \r
125 Canvas.prototype.listCreate = function(options) {\r
126     var element1 = $(this.content.find('#' + options.start.getId()).get(0));\r
127     var element2 = $(this.content.find('#' + options.end.getId()).get(0));\r
128     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
129         return false;\r
130         \r
131     var parent = element1.parent();\r
132     \r
133     if(parent.contents().index(element1) > parent.contents().index(element2)) {\r
134         var tmp = element1;\r
135         element1 = element2;\r
136         element2 = tmp;\r
137     }\r
138     \r
139     var nodesToWrap = [];\r
140     \r
141     var place = 'before';\r
142     var canvas = this;\r
143     parent.contents().each(function() {\r
144         var node = this;\r
145         if(node.isSameNode(element1.get(0)))\r
146             place = 'inside';\r
147         if(place === 'inside') {\r
148             var $node;\r
149             if(node.nodeType === 3) {\r
150                 $node = canvasNode.create({tag: 'div', content: $.trim(node.data)}).dom; //canvas._createNode('div').text(node.data);\r
151                 $(node).remove();\r
152             }\r
153             else {\r
154                 $node = $(node);\r
155             }\r
156             $node.attr('wlxml-class', 'item');\r
157             nodesToWrap.push($node);\r
158         }\r
159         if(node.isSameNode(element2.get(0)))\r
160             return false;\r
161     });\r
162     \r
163     var list = canvasNode.create({tag: 'div', klass: 'list-items'}).dom; //this._createNode('div', 'list-items');\r
164     element1.before(list);\r
165     \r
166     nodesToWrap.forEach(function(node) {\r
167         node.remove();\r
168         list.append(node);\r
169     });\r
170 };\r
171 \r
172 Canvas.prototype.listRemove = function(options) {\r
173     var pointerElement = $(this.content.find('#' + options.pointer.getId()));\r
174     var listElement = options.pointer.getClass() === 'list-items' ? pointerElement : \r
175         pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]');\r
176     \r
177     listElement.find('[wlxml-class=item]').each(function() {\r
178         $(this).removeAttr('wlxml-class');\r
179     });\r
180     listElement.children().unwrap();\r
181 };\r
182 \r
183 Canvas.prototype.getPrecedingNode = function(options) {\r
184     var element = $(this.content.find('#' + options.node.getId()).get(0));\r
185     var prev = element.prev()\r
186     if(prev.length === 0)\r
187         prev = element.parent();\r
188     return canvasNode.create(prev);\r
189 };\r
190 \r
191 Canvas.prototype.nodeInsideList = function(options) {\r
192     if(options.node) {\r
193         if(options.node.getClass() === 'list-items' || options.node.getClass() === 'item')\r
194             return true;\r
195         var pointerElement = $(this.content.find('#' + options.node.getId()));\r
196         return pointerElement.parents('[wlxml-class=list-items], [wlxml-class=item]').length > 0;\r
197     }\r
198     return false;\r
199 };\r
200 \r
201 \r
202 return {\r
203     create: function(desc) { return new Canvas(desc); }\r
204 };\r
205 \r
206 });