48b10ebf6a5827d9a2ea7de4f169b7da7a233772
[fnpeditor.git] / src / editor / modules / metadataEditor / metadataEditor.js
1 define([
2 'libs/jquery',
3 'libs/underscore',
4 'libs/text!./templates/main.html',
5 'libs/text!./templates/item.html'
6 ], function($, _, mainTemplate, itemTemplate) {
7
8 'use strict';
9
10 return function(sandbox) {
11
12     var currentNode,
13         adding = false;
14     
15     var view = {
16         node: $(_.template(mainTemplate)()),
17         setup: function() {
18             var view = this;
19             var metaTable = this.metaTable = this.node.find('table');
20             
21             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
22                 adding = true;
23                 currentNode.getMetadata().add('','');
24             });
25             
26             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
27                 $(e.target).closest('tr').data('row').remove();
28             });
29             
30             this.metaTable.on('keydown', '[contenteditable]', function(e) {
31                 /* globals document */
32                 if(e.which === 13) {
33                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
34                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
35                     } else {
36                         var input = $('<input>');
37                         input.appendTo('body').focus();
38                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
39                         input.remove();
40                     }
41                     e.preventDefault();
42                 }
43             });
44             
45             
46             var onKeyUp = function(e) {
47                 if(e.which !== 13) {
48                     var editable = $(e.target),
49                         //myIndex = metaTable.find('.'+editable.attr('class')).index(editable),
50                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey';
51                     //toSet[isKey ? 'key' : 'value'] = editable.text();
52                     //currentNode.setMetadataRow(myIndex, toSet);
53
54                     var row = editable.parents('tr').data('row'),
55                         toSet = editable.text();
56                     if(isKey) {
57                         row.setKey(toSet);
58                     } else {
59                         row.setValue(toSet);
60                     }
61
62                 }
63             };
64             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
65         },
66         setMetadata: function(node) {
67             var view = this,
68                 metadata = node.getMetadata();
69             this.metaTable.find('tr').remove();
70             metadata.forEach(function(row) {
71                 view.addMetadataRow(row);
72             });
73         },
74         addMetadataRow: function(row) {
75             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
76             newRow.appendTo(this.metaTable);
77             newRow.data('row', row);
78             if(adding) {
79                 $(newRow.find('td div')[0]).focus();
80                 adding = false;
81             }
82             return newRow;
83         },
84         updateMetadataRow: function(row) {
85             this.metaTable.find('tr').each(function() {
86                 var tr = $(this),
87                     tds, keyTd, valueTd;
88                 if(tr.data('row') === row) {
89                     tds = tr.find('td');
90                     keyTd = $(tds[0]);
91                     valueTd = $(tds[1]);
92
93                     if(keyTd.text() !== row.getKey()) {
94                         keyTd.text(row.getKey());
95                     }
96                     if(valueTd.text() !== row.getValue()) {
97                         valueTd.text(row.getValue());
98                     }
99                 }
100             });
101         },
102         removeMetadataRow: function(row) {
103             this.metaTable.find('tr').each(function() {
104                 var tr = $(this);
105                 if(tr.data('row') === row) {
106                     tr.remove();
107                 }
108             });
109         }
110     };
111     
112     view.setup();
113     
114     return {
115         start: function() {
116             sandbox.publish('ready');
117         },
118         setDocument: function(document) {
119             document.on('change', function(event) {
120                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
121                     view.addMetadataRow(event.meta.row);
122                 }
123                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
124                     view.updateMetadataRow(event.meta.row);
125                 }
126                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
127                     view.removeMetadataRow(event.meta.row);
128                 }
129             });
130         },
131         setNodeElement: function(node) {
132             if(currentNode && currentNode.sameNode(node)) {
133                 return;
134             }
135             currentNode = node;
136             view.setMetadata(node);
137         },
138         getView: function() {
139             return view.node;
140         }
141     };
142 };
143
144 });