80d3915ab95c86a20ccf69cc0df91ba25f0928ab
[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/wlxmlNode',\r
6 'libs/text!./template.html'\r
7 ], function($, _, transformations, wlxmlNode, template) {\r
8 \r
9 'use strict';\r
10 \r
11 var Canvas = function(xml) {\r
12     this.dom = $(template);\r
13     this.content = this.dom.find('#rng-module-documentCanvas-content');\r
14     this.setXML(xml);\r
15 }\r
16 \r
17 Canvas.prototype.setXML = function(xml) {\r
18     this.xml = $.trim(xml);\r
19     this.content.html(transformations.fromXML.getHTMLTree(this.xml));  \r
20 }\r
21 \r
22 Canvas.prototype.toXML = function() {\r
23     return transformations.toXML.getXML(this.content.html());\r
24 }\r
25 \r
26 Canvas.prototype.getNode = function(desc) {\r
27     var selector = '';\r
28     if(desc.klass)\r
29         selector += '[wlxml-class=' + desc.klass + ']';\r
30     if(desc.tag)\r
31         selector += '[wlxml-tag=' + desc.tag + ']';\r
32     var toret = [];\r
33     this.content.find(selector).each(function() {\r
34         toret.push(new wlxmlNode.Node($(this)));\r
35     });\r
36     return toret;\r
37 }\r
38 \r
39 Canvas.prototype.getPreviousNode = function(options) {\r
40     var element = $(this.content.find('#' + options.node.id).get(0));\r
41     var prev = element.prev()\r
42     if(prev.length === 0)\r
43         prev = element.parent();\r
44     return new wlxmlNode.Node(prev);\r
45 }\r
46 \r
47 Canvas.prototype._createNode = function(wlxmlTag, wlxmlClass) {\r
48             var toBlock = ['div', 'document', 'section', 'header'];\r
49             var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
50             var toret = $('<' + htmlTag + '>');\r
51             toret.attr('wlxml-tag', wlxmlTag);\r
52             if(wlxmlClass)\r
53                 toret.attr('wlxml-class', wlxmlClass);\r
54             toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));\r
55             return toret;\r
56         };\r
57 \r
58 Canvas.prototype.insertNode = function(options) {\r
59     var element = $(this.content.find('#' + options.context.id).get(0));\r
60     if(options.place == 'after') {\r
61         var node = this._createNode(options.tag, options.klass);\r
62         element[options.place](node);\r
63         return node;\r
64     }\r
65     else if(options.place == 'wrapText') {\r
66         var elementContents = element.contents();\r
67         if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
68             return false;\r
69         var textElement = elementContents.get(0);\r
70 \r
71         var prefix = textElement.data.substr(0, options.offsetStart);\r
72         var suffix = textElement.data.substr(options.offsetEnd);\r
73         var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
74         var newNode = this._createNode(options.tag, options.klass);\r
75         newNode.text(core);\r
76         $(textElement).replaceWith(newNode);\r
77         newNode.before(prefix);\r
78         newNode.after(suffix);\r
79     }\r
80 }\r
81 \r
82 Canvas.prototype.splitNode = function(options) {\r
83     options = _.extend({textNodeIdx: 0}, options);\r
84     \r
85     var nodeToSplit = $(this.content.find('#' + options.node.id).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 = textNode.text().substr(0, options.offset);\r
106     var suffix = textNode.text().substr(options.offset);\r
107     \r
108     textNode.before(prefix);\r
109     textNode.remove();\r
110     \r
111     var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
112     newNode.append(suffix);\r
113     succeedingNodes.forEach(function(node) {\r
114         newNode.append(node)\r
115     });\r
116     nodeToSplit.after(newNode);\r
117     return newNode;\r
118 }\r
119 \r
120 Canvas.prototype.removeNode = function(options) {\r
121     var toRemove = $(this.content.find('#' + options.node.id).get(0));\r
122     toRemove.remove();\r
123 \r
124 }\r
125 \r
126 Canvas.prototype.createList = function(options) {\r
127     var element1 = $(this.content.find('#' + options.start.id).get(0));\r
128     var element2 = $(this.content.find('#' + options.end.id).get(0));\r
129     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
130         return false;\r
131         \r
132     var parent = element1.parent();\r
133     var nodesToWrap = [];\r
134     \r
135     var place = 'before';\r
136     var canvas = this;\r
137     parent.contents().each(function() {\r
138         var node = this;\r
139         if(node.isSameNode(element1.get(0)))\r
140             place = 'inside';\r
141         if(place === 'inside') {\r
142             var $node;\r
143             if(node.nodeType === 3) {\r
144                 $node = canvas._createNode('div').text(node.data);\r
145                 $(node).remove();\r
146             }\r
147             else {\r
148                 $node = $(node);\r
149             }\r
150             $node.attr('wlxml-class', 'item');\r
151             nodesToWrap.push($node);\r
152         }\r
153         if(node.isSameNode(element2.get(0)))\r
154             return false;\r
155     });\r
156     \r
157     var list = this._createNode('div', 'list-items');\r
158     element1.before(list);\r
159     \r
160     nodesToWrap.forEach(function(node) {\r
161         node.remove();\r
162         list.append(node);\r
163     });\r
164 }\r
165 \r
166 Canvas.prototype.removeList = function(options) {\r
167     var pointerElement = $(this.content.find('#' + options.pointer.id));\r
168     var listElement = options.pointer.klass === 'list-items' ? pointerElement : \r
169         pointerElement.parent('[wlxml-class="list-items"][wlxml-tag]');\r
170     \r
171     listElement.find('[wlxml-class=item]').each(function() {\r
172         $(this).attr('wlxml-class', '');\r
173     });;\r
174     listElement.children().unwrap();\r
175     \r
176 }\r
177 \r
178 Canvas.prototype.insideList = function(options) {\r
179     if(options.pointer) {\r
180         if(options.pointer.klass === 'list-items' || options.pointer.klass === 'item')\r
181             return true;\r
182         var pointerElement = $(this.content.find('#' + options.pointer.id));\r
183         return pointerElement.parents('list-items').length > 0;\r
184     }\r
185     return false;\r
186 }\r
187 \r
188 \r
189 return {Canvas: Canvas, Node: Node};\r
190 \r
191 });