20c286ae85889c5fb14d1b8458a2076614adb3c7
[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 = xml;\r
19     this.content.html(transformations.fromXML.getHTMLTree(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._createNode = function(wlxmlTag, wlxmlClass) {\r
40             var toBlock = ['div', 'document', 'section', 'header'];\r
41             var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span';\r
42             var toret = $('<' + htmlTag + '>');\r
43             toret.attr('wlxml-tag', wlxmlTag);\r
44             if(wlxmlClass)\r
45                 toret.attr('wlxml-class', wlxmlClass);\r
46             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
47             return toret;\r
48         };\r
49 \r
50 Canvas.prototype.insertNode = function(options) {\r
51     var element = $(this.content.find('#' + options.context.id).get(0));\r
52     if(options.place == 'after')\r
53         element[options.place](this._createNode(options.tag, options.klass));\r
54     else if(options.place == 'wrapText') {\r
55         var elementContents = element.contents();\r
56         if(elementContents.length !== 1 || elementContents.get(0).nodeType != 3)\r
57             return false;\r
58         var textElement = elementContents.get(0);\r
59 \r
60         var prefix = textElement.data.substr(0, options.offsetStart);\r
61         var suffix = textElement.data.substr(options.offsetEnd);\r
62         var core = textElement.data.substr(options.offsetStart, options.offsetEnd - options.offsetStart);\r
63         var newNode = this._createNode(options.tag, options.klass);\r
64         newNode.text(core);\r
65         $(textElement).replaceWith(newNode);\r
66         newNode.before(prefix);\r
67         newNode.after(suffix);\r
68     }\r
69 }\r
70 \r
71 Canvas.prototype.splitNode = function(options) {\r
72     options = _.extend({textNodeIdx: 0}, options);\r
73     \r
74     var nodeToSplit = $(this.content.find('#' + options.node.id).get(0));\r
75     \r
76     var nodeContents = nodeToSplit.contents();\r
77     if(nodeContents.length === 0 || \r
78        nodeContents.length - 1 < options.textNodeIdx || \r
79        nodeContents.get(options.textNodeIdx).nodeType != 3)\r
80         return false;\r
81     \r
82     var textNode = $(nodeContents.get(options.textNodeIdx));\r
83 \r
84     var succeedingNodes = [];\r
85     var passed = false;\r
86     nodeContents.each(function() {\r
87         var node = this;\r
88         if(passed)\r
89             succeedingNodes.push(node);\r
90         if(node.isSameNode(textNode.get(0)))\r
91             passed = true;\r
92     });\r
93     \r
94     var prefix = textNode.text().substr(0, options.offset);\r
95     var suffix = textNode.text().substr(options.offset);\r
96     \r
97     textNode.before(prefix);\r
98     textNode.remove();\r
99     \r
100     var newNode = this._createNode(nodeToSplit.attr('wlxml-tag'), nodeToSplit.attr('wlxml-class'));\r
101     newNode.append(suffix);\r
102     succeedingNodes.forEach(function(node) {\r
103         newNode.append(node)\r
104     });\r
105     nodeToSplit.after(newNode);\r
106     return newNode;\r
107 }\r
108 \r
109 Canvas.prototype.createList = function(options) {\r
110     var element1 = $(this.content.find('#' + options.start.id).get(0));\r
111     var element2 = $(this.content.find('#' + options.end.id).get(0));\r
112     if(!element1.parent().get(0).isSameNode(element2.parent().get(0)))\r
113         return false;\r
114         \r
115     var parent = element1.parent();\r
116     var nodesToWrap = [];\r
117     \r
118     var place = 'before';\r
119     var canvas = this;\r
120     parent.contents().each(function() {\r
121         var node = this;\r
122         if(node.isSameNode(element1.get(0)))\r
123             place = 'inside';\r
124         if(place === 'inside') {\r
125             var $node;\r
126             if(node.nodeType === 3) {\r
127                 $node = canvas._createNode('div').text(node.data);\r
128                 $(node).remove();\r
129             }\r
130             else {\r
131                 $node = $(node);\r
132             }\r
133             $node.attr('wlxml-class', 'list.item');\r
134             nodesToWrap.push($node);\r
135         }\r
136         if(node.isSameNode(element2.get(0)))\r
137             return;\r
138     });\r
139     \r
140     var list = this._createNode('div', 'list');\r
141     element1.before(list);\r
142     \r
143     nodesToWrap.forEach(function(node) {\r
144         node.remove();\r
145         list.append(node);\r
146     });\r
147     \r
148     \r
149     \r
150 }\r
151 \r
152 \r
153 return {Canvas: Canvas, Node: Node};\r
154 \r
155 });