38b4e56be20f547096e40618543315c5662f53d2
[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     
14     var view = {
15         node: $(_.template(mainTemplate)()),
16         setup: function() {
17             var view = this;
18             var metaTable = this.metaTable = this.node.find('table');
19             
20             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
21                 var newRow = view._addMetaRow('', '');
22                 $(newRow.find('td div')[0]).focus();
23             });
24             
25             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
26                 $(e.target).closest('tr').remove();
27             });
28             
29             this.metaTable.on('keydown', '[contenteditable]', function(e) {
30                 /* globals document */
31                 if(e.which === 13) {
32                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
33                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
34                     } else {
35                         var input = $('<input>');
36                         input.appendTo('body').focus();
37                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
38                         input.remove();
39                     }
40                     e.preventDefault();
41                 }
42             });
43             
44             
45             var onKeyUp = function(e) {
46                 if(e.which !== 13) {
47                     var editable = $(e.target),
48                         myIndex = metaTable.find('.'+editable.attr('class')).index(editable),
49                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
50                         toSet = {};
51                     toSet[isKey ? 'key' : 'value'] = editable.text();
52                     currentNode.setMetadataRow(myIndex, toSet);
53                 }
54             };
55             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
56         },
57         setMetadata: function(node) {
58             var view = this,
59                 metadata = node.getMetadata();
60             this.metaTable.find('tr').remove();
61             metadata.forEach(function(row) {
62                 view._addMetaRow(row.getKey(), row.getValue());
63             });
64         },
65         _addMetaRow: function(key, value) {
66             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));
67             newRow.appendTo(this.metaTable);
68             return newRow;
69         }
70     };
71     
72     view.setup();
73     
74     return {
75         start: function() {
76             sandbox.publish('ready');
77         },
78         setDocument: function(document) {
79             document.on('change', function(event) {
80                 if(event.type === 'nodeMetadataChange' && event.meta.node.sameNode(currentNode)) {
81                     view.setMetadata(currentNode);
82                 }
83             });
84         },
85         setNodeElement: function(node) {
86             if(currentNode && currentNode.sameNode(node)) {
87                 return
88             }
89             currentNode = node;
90             view.setMetadata(node);
91         },
92         getView: function() {
93             return view.node;
94         }
95     };
96 };
97
98 });