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         adding = false;
  14
  15     var view = {
  16         node: $(_.template(mainTemplate)()),
  17         setup: function() {
  18             var view = this;
  19             var metaTable = this.metaTable = this.node.find('table');
  20
  21             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
  22                 adding = true;
  23                 currentNode.getMetadata().add('','');
  24             });
  25
  26             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
  27                 $(e.target).closest('tr').data('row').remove();
  28             });
  29
  30             this.metaTable.on('keydown', '[contenteditable]', function(e) {
  31                 /* globals document */
  32                 if(e.which === 13) {
  33                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
  34                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
  35                     } else {
  36                         var input = $('<input>');
  37                         input.appendTo('body').focus();
  38                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
  39                         input.remove();
  40                     }
  41                     e.preventDefault();
  42                 }
  43             });
  44
  45             this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
  46                 if(e.which !== 13) {
  47                     var editable = $(e.target),
  48                         toSet = editable.text(),
  49                         row = editable.parents('tr').data('row'),
  50                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
  51                         method = isKey ? 'setKey' : 'setValue';
  52                     row[method](toSet);
  53                 }
  54             }, 500));
  55         },
  56         setMetadata: function(node) {
  57             var view = this,
  58                 metadata = node.getMetadata();
  59             this.metaTable.find('tr').remove();
  60             metadata.forEach(function(row) {
  61                 view.addMetadataRow(row);
  62             });
  63         },
  64         addMetadataRow: function(row) {
  65             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
  66             newRow.appendTo(this.metaTable);
  67             newRow.data('row', row);
  68             if(adding) {
  69                 $(newRow.find('td div')[0]).focus();
  70                 adding = false;
  71             }
  72             return newRow;
  73         },
  74         updateMetadataRow: function(row) {
  75             this._getRowTr(row, function(tr) {
  76                 var tds = tr.find('td > div'),
  77                     keyTd = $(tds[0]),
  78                     valueTd = $(tds[1]);
  79
  80                 if(keyTd.text() !== row.getKey()) {
  81                     keyTd.text(row.getKey());
  82                 }
  83                 if(valueTd.text() !== row.getValue()) {
  84                     valueTd.text(row.getValue());
  85                 }
  86             });
  87         },
  88         removeMetadataRow: function(row) {
  89             this._getRowTr(row, function(tr) {
  90                 tr.remove();
  91             });
  92         },
  93         _getRowTr: function(row, callback) {
  94             this.metaTable.find('tr').each(function() {
  95                 var tr = $(this);
  96                 if(tr.data('row') === row) {
  97                     callback(tr);
  98                     return false;
  99                 }
 100             });
 101         }
 102     };
 103
 104     view.setup();
 105
 106     return {
 107         start: function() {
 108             sandbox.publish('ready');
 109         },
 110         setDocument: function(document) {
 111             document.on('change', function(event) {
 112                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 113                     view.addMetadataRow(event.meta.row);
 114                 }
 115                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 116                     view.updateMetadataRow(event.meta.row);
 117                 }
 118                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 119                     view.removeMetadataRow(event.meta.row);
 120                 }
 121             });
 122         },
 123         setNodeElement: function(node) {
 124             if(currentNode && currentNode.sameNode(node)) {
 125                 return;
 126             }
 127             currentNode = node;
 128             view.setMetadata(node);
 129         },
 130         getView: function() {
 131             return view.node;
 132         }
 133     };
 134 };
 135
 136 });