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
  46             var onKeyUp = function(e) {
  47                 if(e.which !== 13) {
  48                     var editable = $(e.target),
  49                         //myIndex = metaTable.find('.'+editable.attr('class')).index(editable),
  50                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey';
  51                     //toSet[isKey ? 'key' : 'value'] = editable.text();
  52                     //currentNode.setMetadataRow(myIndex, toSet);
  53
  54                     var row = editable.parents('tr').data('row'),
  55                         toSet = editable.text();
  56                     if(isKey) {
  57                         row.setKey(toSet);
  58                     } else {
  59                         row.setValue(toSet);
  60                     }
  61
  62                 }
  63             };
  64             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
  65         },
  66         setMetadata: function(node) {
  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             if(adding) {
  79                 $(newRow.find('td div')[0]).focus();
  80                 adding = false;
  81             }
  82             return newRow;
  83         },
  84         updateMetadataRow: function(row) {
  85             this._getRowTr(row, function(tr) {
  86                 var tds = tr.find('td'),
  87                     keyTd = $(tds[0]),
  88                     valueTd = $(tds[1]);
  89
  90                 if(keyTd.text() !== row.getKey()) {
  91                     keyTd.text(row.getKey());
  92                 }
  93                 if(valueTd.text() !== row.getValue()) {
  94                     valueTd.text(row.getValue());
  95                 }
  96             });
  97         },
  98         removeMetadataRow: function(row) {
  99             this._getRowTr(row, function(tr) {
 100                 tr.remove();
 101             });
 102         },
 103         _getRowTr: function(row, callback) {
 104             this.metaTable.find('tr').each(function() {
 105                 var tr = $(this);
 106                 if(tr.data('row') === row) {
 107                     callback(tr);
 108                     return false;
 109                 }
 110             });
 111         }
 112     };
 113
 114     view.setup();
 115
 116     return {
 117         start: function() {
 118             sandbox.publish('ready');
 119         },
 120         setDocument: function(document) {
 121             document.on('change', function(event) {
 122                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 123                     view.addMetadataRow(event.meta.row);
 124                 }
 125                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 126                     view.updateMetadataRow(event.meta.row);
 127                 }
 128                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 129                     view.removeMetadataRow(event.meta.row);
 130                 }
 131             });
 132         },
 133         setNodeElement: function(node) {
 134             if(currentNode && currentNode.sameNode(node)) {
 135                 return;
 136             }
 137             currentNode = node;
 138             view.setMetadata(node);
 139         },
 140         getView: function() {
 141             return view.node;
 142         }
 143     };
 144 };
 145
 146 });