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.metaTable.find('tr').each(function() {
  86                 var tr = $(this),
  87                     tds, keyTd, valueTd;
  88                 if(tr.data('row') === row) {
  89                     tds = tr.find('td');
  90                     keyTd = $(tds[0]);
  91                     valueTd = $(tds[1]);
  92
  93                     if(keyTd.text() !== row.getKey()) {
  94                         keyTd.text(row.getKey());
  95                     }
  96                     if(valueTd.text() !== row.getValue()) {
  97                         valueTd.text(row.getValue());
  98                     }
  99                 }
 100             });
 101         },
 102         removeMetadataRow: function(row) {
 103             this.metaTable.find('tr').each(function() {
 104                 var tr = $(this);
 105                 if(tr.data('row') === row) {
 106                     tr.remove();
 107                 }
 108             });
 109         }
 110     };
 111
 112     view.setup();
 113
 114     return {
 115         start: function() {
 116             sandbox.publish('ready');
 117         },
 118         setDocument: function(document) {
 119             document.on('change', function(event) {
 120                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 121                     view.addMetadataRow(event.meta.row);
 122                 }
 123                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 124                     view.updateMetadataRow(event.meta.row);
 125                 }
 126                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 127                     view.removeMetadataRow(event.meta.row);
 128                 }
 129             });
 130         },
 131         setNodeElement: function(node) {
 132             if(currentNode && currentNode.sameNode(node)) {
 133                 return;
 134             }
 135             currentNode = node;
 136             view.setMetadata(node);
 137         },
 138         getView: function() {
 139             return view.node;
 140         }
 141     };
 142 };
 143
 144 });