WIP: selection, highlighting, some styling for visual editor
[fnpeditor.git] / modules / visualEditor.js
1 rng.modules.visualEditor = function(sandbox) {\r
2     var transformations = rng.modules.visualEditor.transformations;\r
3 \r
4     var view = {\r
5         node: $(sandbox.getTemplate('main')()),\r
6         setup: function() {\r
7             var node = this.node;\r
8             node.find('#rng-visualEditor-content').on('keyup', function() {\r
9                 isDirty = true;\r
10             });\r
11             \r
12             node.find('#rng-visualEditor-meta').on('keyup', function() {\r
13                 isDirty = true;\r
14             });\r
15
16             this.node.on('mouseover', '.rng', function(e) { $(e.target).addClass('rng-hover')});\r
17             this.node.on('mouseout', '.rng', function(e) { $(e.target).removeClass('rng-hover')});\r
18             this.node.on('click', '.rng', function(e) {\r
19                 node.find('.rng').removeClass('rng-current');\r
20                 $(e.target).addClass('rng-current');\r
21             });
22         },\r
23         getMetaData: function() {\r
24             var toret = {};\r
25             this.node.find('#rng-visualEditor-meta table tr').each(function() {\r
26                 var tr = $(this);\r
27                 var key = $(tr.find('td')[0]).html();\r
28                 var value = $(tr.find('td input')[0]).val();\r
29                 toret[key] = value;\r
30             });\r
31             console.log(toret);\r
32             return toret;\r
33         },\r
34         setMetaData: function(metadata) {\r
35             var table = this.node.find('#rng-visualEditor-meta table');\r
36             table.empty();\r
37             _.each(_.keys(metadata), function(key) {    \r
38                 $(sandbox.getTemplate('metaItem')({key: key, value: metadata[key]})).appendTo(table);\r
39             });\r
40         },\r
41         setBody: function(HTMLTree) {\r
42             this.node.find('#rng-visualEditor-content').html(HTMLTree);\r
43         },\r
44         getBody: function() {\r
45             return this.node.find('#rng-visualEditor-content').html();\r
46         }   \r
47     };\r
48     view.setup();\r
49     \r
50     var isDirty = false;\r
51     \r
52     \r
53     return {\r
54         start: function() {\r
55             sandbox.publish('ready');\r
56         },\r
57         getView: function() {\r
58             return view.node;\r
59         },\r
60         setDocument: function(xml) {\r
61             var transformed = transformations.fromXML.getDocumentDescription(xml);\r
62             view.setBody(transformed.HTMLTree);\r
63             view.setMetaData(transformed.metadata);\r
64             isDirty = false;\r
65         },\r
66         getDocument: function() {\r
67             return transformations.toXML.getXML({HTMLTree: view.getBody(), metadata: view.getMetaData()});\r
68         },\r
69         isDirty: function() {\r
70             return isDirty;\r
71         },\r
72         setDirty: function(dirty) {\r
73             isDirty = dirty;\r
74         }\r
75     \r
76     }\r
77 };