Fixing node selection via bread crumbs
[fnpeditor.git] / modules / metadataEditor / metadataEditor.js
1 define([\r
2 'libs/jquery-1.9.1.min',\r
3 'libs/underscore-min',\r
4 './transformations',\r
5 'libs/text!./templates/main.html',\r
6 'libs/text!./templates/item.html'\r
7 ], function($, _, transformations, mainTemplate, itemTemplate) {\r
8 \r
9 'use strict';\r
10 \r
11 return function(sandbox) {\r
12 \r
13     \r
14     var view = {\r
15         node: $(_.template(mainTemplate)()),\r
16         setup: function() {\r
17             var metaTable = this.metaTable = this.node.find('table');\r
18             \r
19             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {\r
20                 var newRow = view._addMetaRow('', '');\r
21                 $(newRow.find('td div')[0]).focus();\r
22                 //isDirty = true;\r
23             });\r
24             \r
25             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {\r
26                 $(e.target).closest('tr').remove();\r
27                 //isDirty = true;\r
28             });\r
29             \r
30             this.metaTable.on('keydown', '[contenteditable]', function(e) {\r
31                 console.log(e.which);\r
32                 if(e.which === 13) { \r
33                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {\r
34                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();\r
35                     } else {\r
36                         var input = $('<input>');\r
37                         input.appendTo('body').focus()\r
38                         view.node.find('.rng-module-metadataEditor-addBtn').focus();\r
39                         input.remove();\r
40                     }\r
41                     e.preventDefault();\r
42                 }\r
43                 \r
44             });\r
45         },\r
46         getMetaData: function() {\r
47             var toret = {};\r
48             this.node.find('tr').each(function() {\r
49                 var tr = $(this);\r
50                 var inputs = $(this).find('td [contenteditable]');\r
51                 var key = $(inputs[0]).text();\r
52                 var value = $(inputs[1]).text();\r
53                 toret[key] = value;\r
54             });\r
55             return toret;\r
56         },\r
57         setMetadata: function(metadata) {\r
58             var view = this;\r
59             this.metaTable.find('tr').remove();\r
60             _.each(_.keys(metadata), function(key) {    \r
61                 view._addMetaRow(key, metadata[key]);\r
62             });\r
63         },\r
64         _addMetaRow: function(key, value) {\r
65             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));\r
66             newRow.appendTo(this.metaTable);\r
67             return newRow;\r
68         }\r
69     }\r
70     \r
71     view.setup();\r
72     \r
73     return {\r
74         start: function() {\r
75             sandbox.publish('ready');\r
76         },\r
77         setMetadata: function(xml) {\r
78             view.setMetadata(transformations.getMetadata(xml));\r
79         },\r
80         getMetadata: function() {\r
81             return view.getMetadata();\r
82         },\r
83         getView: function() {\r
84             return view.node;\r
85         }\r
86         \r
87     };\r
88 }\r
89 \r
90 });