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         clear: function() {
  57         },
  58         setMetadata: function(node) {
  59             if(!node) {
  60                 this.metaTable.html('');
  61                 return;
  62             }
  63             var view = this,
  64                 metadata = node.getMetadata();
  65             this.metaTable.find('tr').remove();
  66             metadata.forEach(function(row) {
  67                 view.addMetadataRow(row);
  68             });
  69         },
  70         addMetadataRow: function(row) {
  71             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
  72             newRow.appendTo(this.metaTable);
  73             newRow.data('row', row);
  74             if(adding) {
  75                 $(newRow.find('td div')[0]).focus();
  76                 adding = false;
  77             }
  78             return newRow;
  79         },
  80         updateMetadataRow: function(row) {
  81             this._getRowTr(row, function(tr) {
  82                 var tds = tr.find('td > div'),
  83                     keyTd = $(tds[0]),
  84                     valueTd = $(tds[1]);
  85
  86                 if(keyTd.text() !== row.getKey()) {
  87                     keyTd.text(row.getKey());
  88                 }
  89                 if(valueTd.text() !== row.getValue()) {
  90                     valueTd.text(row.getValue());
  91                 }
  92             });
  93         },
  94         removeMetadataRow: function(row) {
  95             this._getRowTr(row, function(tr) {
  96                 tr.remove();
  97             });
  98         },
  99         _getRowTr: function(row, callback) {
 100             this.metaTable.find('tr').each(function() {
 101                 var tr = $(this);
 102                 if(tr.data('row') === row) {
 103                     callback(tr);
 104                     return false;
 105                 }
 106             });
 107         }
 108     };
 109
 110     view.setup();
 111
 112     return {
 113         start: function() {
 114             sandbox.publish('ready');
 115         },
 116         setDocument: function(document) {
 117             document.on('change', function(event) {
 118                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 119                     view.addMetadataRow(event.meta.row);
 120                 }
 121                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 122                     view.updateMetadataRow(event.meta.row);
 123                 }
 124                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 125                     view.removeMetadataRow(event.meta.row);
 126                 }
 127                 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
 128                     view.setMetadata(null);
 129                 }
 130             });
 131         },
 132         setNodeElement: function(node) {
 133             if(currentNode && currentNode.sameNode(node)) {
 134                 return;
 135             }
 136             currentNode = node;
 137             view.setMetadata(node);
 138         },
 139         getView: function() {
 140             return view.node;
 141         }
 142     };
 143 };
 144
 145 });