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