4 'libs/text!./templates/main.html',
5 'libs/text!./templates/item.html',
6 'views/openSelect/openSelect'
7 ], function($, _, mainTemplate, itemTemplate, OpenSelectView) {
11 return function(sandbox) {
15 metadataKeys = (sandbox.getConfig().metadataKeys || [
16 'author', 'creator', 'date'
20 node: $(_.template(mainTemplate)()),
23 var metaTable = this.metaTable = this.node.find('table');
25 this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
27 currentNode.getMetadata().add('','');
30 this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
31 $(e.target).closest('tr').data('row').remove();
34 this.metaTable.on('keydown', '[contenteditable]', function(e) {
35 /* globals document */
37 if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
38 metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
40 var input = $('<input>');
41 input.appendTo('body').focus();
42 view.node.find('.rng-module-metadataEditor-addBtn').focus();
49 this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
51 var editable = $(e.target),
52 toSet = editable.text(),
53 row = editable.parents('tr').data('row'),
54 isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
55 method = isKey ? 'setKey' : 'setValue';
62 setMetadata: function(node) {
64 this.metaTable.html('');
68 metadata = node.getMetadata();
69 this.metaTable.find('tr').remove();
70 metadata.forEach(function(row) {
71 view.addMetadataRow(row);
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);
79 var selectView = new OpenSelectView({
80 value: row.getKey() || '',
81 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemKey" contentEditable="true"><%= value %></div>')({value: row.getKey() || '' }),
82 setInput: function(inputDOM, value) {
87 newRow.find('td:first').append(selectView.el);
88 metadataKeys.forEach(function(key) {
89 selectView.addItem(key);
93 $(newRow.find('td div')[0]).focus();
98 updateMetadataRow: function(row) {
99 this._getRowTr(row, function(tr) {
100 var tds = tr.find('td [contenteditable]'),
104 if(keyTd.text() !== row.getKey()) {
105 keyTd.text(row.getKey());
107 if(valueTd.text() !== row.getValue()) {
108 valueTd.text(row.getValue());
112 removeMetadataRow: function(row) {
113 this._getRowTr(row, function(tr) {
117 _getRowTr: function(row, callback) {
118 this.metaTable.find('tr').each(function() {
120 if(tr.data('row') === row) {
132 sandbox.publish('ready');
134 setDocument: function(document) {
135 document.on('change', function(event) {
136 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
137 view.addMetadataRow(event.meta.row);
139 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
140 view.updateMetadataRow(event.meta.row);
142 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
143 view.removeMetadataRow(event.meta.row);
145 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
146 view.setMetadata(null);
150 setNodeElement: function(node) {
151 if(currentNode && currentNode.sameNode(node)) {
155 view.setMetadata(node);
157 getView: function() {