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