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 });