editor: canvas - refactoring
[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 'views/openSelect/openSelect'
7 ], function($, _, mainTemplate, itemTemplate, OpenSelectView) {
8
9 'use strict';
10
11 return function(sandbox) {
12
13     var currentNode,
14         adding = false,
15         metadataConfig = (sandbox.getConfig().metadata || []).sort(function(configRow1, configRow2) {
16             if(configRow1.key < configRow2.key) {
17                 return -1;
18             }
19             if(configRow1.key > configRow2.key) {
20                 return 1;
21             }
22             return 0;
23         });
24
25     var getValuesForKey = function(key) {
26         var toret = [];
27         metadataConfig.some(function(configRow) {
28             if(configRow.key === key) {
29                 toret = configRow.values || [];
30                 return true;
31             }
32         });
33         return toret;
34     };
35     
36     var view = {
37         node: $(_.template(mainTemplate)()),
38         setup: function() {
39             var view = this;
40             var metaTable = this.metaTable = this.node.find('table');
41             
42             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
43                 adding = true;
44                 currentNode.getMetadata().add('','');
45             });
46             
47             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
48                 $(e.target).closest('tr').data('row').remove();
49             });
50             
51             this.metaTable.on('keydown', '[contenteditable]', function(e) {
52                 /* globals document */
53                 if(e.which === 13) {
54                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
55                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
56                     } else {
57                         var input = $('<input>');
58                         input.appendTo('body').focus();
59                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
60                         input.remove();
61                     }
62                     e.preventDefault();
63                 }
64             });
65             
66             this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
67                 if(e.which !== 13) {
68                     var editable = $(e.target),
69                         toSet = editable.text(),
70                         row = editable.parents('tr').data('row'),
71                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
72                         method = isKey ? 'setKey' : 'setValue';
73                     row[method](toSet);
74                 }
75             }, 500));
76         },
77         clear: function() {
78         },
79         setMetadata: function(node) {
80             if(!node) {
81                 this.metaTable.html('');
82                 return;
83             }
84             var view = this,
85                 metadata = node.getMetadata();
86             this.metaTable.find('tr').remove();
87             metadata.forEach(function(row) {
88                 view.addMetadataRow(row);
89             });
90         },
91         addMetadataRow: function(row) {
92             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
93             newRow.appendTo(this.metaTable);
94             newRow.data('row', row);
95
96             var keySelectView = new OpenSelectView({
97                 value: row.getKey() || '',
98                 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemKey" contentEditable="true"><%= value %></div>')({value: row.getKey() || '' }),
99                 setInput: function(inputDOM, value) {
100                     if(inputDOM.text() !== value) {
101                         inputDOM.text(value);
102                         row.setKey(value);
103                     }
104                     valueSelectView.clearItems();
105                     getValuesForKey(value).forEach(function(value) {
106                         valueSelectView.addItem(value);
107                     });
108                 }
109             });
110             newRow.find('td:first').append(keySelectView.el).data('view', keySelectView);
111
112
113             var valueSelectView = new OpenSelectView({
114                 value: row.getValue(),
115                 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemValue" contentEditable="true"><%= value %></div>')({value: row.getValue() || '' }),
116                 maxHeight: '300px',
117                 maxWidth: '100px',
118                 setInput: function(inputDOM, value) {
119                     if(inputDOM.text() !== value) {
120                         inputDOM.text(value);
121                         row.setValue(value);
122                     }
123                 }
124             });
125             newRow.find('td:nth-child(2)').append(valueSelectView.el).data('view', valueSelectView);
126             
127
128             metadataConfig.forEach(function(configRow) {
129                 keySelectView.addItem(configRow.key);
130                 if(row.getKey() === configRow.key) {
131                     (configRow.values || []).forEach(function(value) {
132                         valueSelectView.addItem(value);
133                     });
134                 }
135             });
136
137             if(adding) {
138                 $(newRow.find('td div')[0]).focus();
139                 adding = false;
140             }
141             return newRow;
142         },
143         updateMetadataRow: function(row) {
144             this._getRowTr(row, function(tr) {
145                 var tds = tr.find('td'),
146                     keyTd = $(tds[0]),
147                     valueTd = $(tds[1]);
148
149                 keyTd.data('view').setInput(row.getKey());
150                 valueTd.data('view').setInput(row.getValue());
151             });
152         },
153         removeMetadataRow: function(row) {
154             this._getRowTr(row, function(tr) {
155                 tr.remove();
156             });
157         },
158         _getRowTr: function(row, callback) {
159             this.metaTable.find('tr').each(function() {
160                 var tr = $(this);
161                 if(tr.data('row') === row) {
162                     callback(tr);
163                     return false;
164                 }
165             });
166         }
167     };
168     
169     view.setup();
170     
171     return {
172         start: function() {
173             sandbox.publish('ready');
174         },
175         setDocument: function(document) {
176             document.on('change', function(event) {
177                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
178                     view.addMetadataRow(event.meta.row);
179                 }
180                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
181                     view.updateMetadataRow(event.meta.row);
182                 }
183                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
184                     view.removeMetadataRow(event.meta.row);
185                 }
186                 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
187                     view.setMetadata(null);
188                 }
189             });
190         },
191         setNodeElement: function(node) {
192             if(currentNode && currentNode.sameNode(node)) {
193                 return;
194             }
195             currentNode = node;
196             view.setMetadata(node);
197         },
198         getView: function() {
199             return view.node;
200         }
201     };
202 };
203
204 });