editor: tweaking main bar ui
[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         metadataKeys = (sandbox.getConfig().metadataKeys || [
16             'author', 'creator', 'date'
17         ]).sort();
18     
19     var view = {
20         node: $(_.template(mainTemplate)()),
21         setup: function() {
22             var view = this;
23             var metaTable = this.metaTable = this.node.find('table');
24             
25             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
26                 adding = true;
27                 currentNode.getMetadata().add('','');
28             });
29             
30             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
31                 $(e.target).closest('tr').data('row').remove();
32             });
33             
34             this.metaTable.on('keydown', '[contenteditable]', function(e) {
35                 /* globals document */
36                 if(e.which === 13) {
37                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
38                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
39                     } else {
40                         var input = $('<input>');
41                         input.appendTo('body').focus();
42                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
43                         input.remove();
44                     }
45                     e.preventDefault();
46                 }
47             });
48             
49             this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
50                 if(e.which !== 13) {
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';
56                     row[method](toSet);
57                 }
58             }, 500));
59         },
60         clear: function() {
61         },
62         setMetadata: function(node) {
63             if(!node) {
64                 this.metaTable.html('');
65                 return;
66             }
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
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) {
83                     inputDOM.text(value);
84                     row.setKey(value);
85                 }
86             });
87             newRow.find('td:first').append(selectView.el);
88             metadataKeys.forEach(function(key) {
89                 selectView.addItem(key);
90             });
91
92             if(adding) {
93                 $(newRow.find('td div')[0]).focus();
94                 adding = false;
95             }
96             return newRow;
97         },
98         updateMetadataRow: function(row) {
99             this._getRowTr(row, function(tr) {
100                 var tds = tr.find('td [contenteditable]'),
101                     keyTd = $(tds[0]),
102                     valueTd = $(tds[1]);
103
104                 if(keyTd.text() !== row.getKey()) {
105                     keyTd.text(row.getKey());
106                 }
107                 if(valueTd.text() !== row.getValue()) {
108                     valueTd.text(row.getValue());
109                 }
110             });
111         },
112         removeMetadataRow: function(row) {
113             this._getRowTr(row, function(tr) {
114                 tr.remove();
115             });
116         },
117         _getRowTr: function(row, callback) {
118             this.metaTable.find('tr').each(function() {
119                 var tr = $(this);
120                 if(tr.data('row') === row) {
121                     callback(tr);
122                     return false;
123                 }
124             });
125         }
126     };
127     
128     view.setup();
129     
130     return {
131         start: function() {
132             sandbox.publish('ready');
133         },
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);
138                 }
139                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
140                     view.updateMetadataRow(event.meta.row);
141                 }
142                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
143                     view.removeMetadataRow(event.meta.row);
144                 }
145                 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
146                     view.setMetadata(null);
147                 }
148             });
149         },
150         setNodeElement: function(node) {
151             if(currentNode && currentNode.sameNode(node)) {
152                 return;
153             }
154             currentNode = node;
155             view.setMetadata(node);
156         },
157         getView: function() {
158             return view.node;
159         }
160     };
161 };
162
163 });