src/editor/modules/metadataEditor/metadataEditor.js

   1 define([
   2 'libs/jquery',
   3 'libs/underscore',
   4 './transformations',
   5 'libs/text!./templates/main.html',
   6 'libs/text!./templates/item.html'
   7 ], function($, _, transformations, mainTemplate, itemTemplate) {
   8
   9 'use strict';
  10
  11 return function(sandbox) {
  12
  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                 sandbox.publish('metadataChanged', view.getMetadata());
  24             });
  25
  26             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
  27                 $(e.target).closest('tr').remove();
  28                 sandbox.publish('metadataChanged', view.getMetadata());
  29             });
  30
  31             this.metaTable.on('keydown', '[contenteditable]', function(e) {
  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                     sandbox.publish('metadataChanged', view.getMetadata());
  49                 }
  50             };
  51             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
  52         },
  53         getMetadata: function() {
  54             var toret = {};
  55             this.node.find('tr').each(function() {
  56                 var inputs = $(this).find('td [contenteditable]');
  57                 var key = $(inputs[0]).text();
  58                 var value = $(inputs[1]).text();
  59                 toret[key] = value;
  60             });
  61             return toret;
  62         },
  63         setMetadata: function(metadata) {
  64             var view = this;
  65             this.metaTable.find('tr').remove();
  66             _.each(_.keys(metadata), function(key) {
  67                 view._addMetaRow(key, metadata[key]);
  68             });
  69         },
  70         _addMetaRow: function(key, value) {
  71             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));
  72             newRow.appendTo(this.metaTable);
  73             return newRow;
  74         }
  75     };
  76
  77     view.setup();
  78
  79     return {
  80         start: function() {
  81             sandbox.publish('ready');
  82         },
  83         setDocument: function(xml) {
  84             view.setMetadata(transformations.getMetadata(xml));
  85             sandbox.publish('metadataSet');
  86         },
  87         getMetadata: function() {
  88             return transformations.getXML(view.getMetadata());
  89         },
  90         getView: function() {
  91             return view.node;
  92         },
  93         attachMetadata: function(document) {
  94             var toret = $('<div>');
  95             toret.append($(document));
  96             var meta = $('<metadata></metadata>\n').append(transformations.getXML(view.getMetadata()));
  97
  98             var metadata = toret.find('metadata');
  99             if(metadata.length === 0) {
 100                 var section = toret.find('section');
 101                 section = section.length ? $(section[0]) : null;
 102                 if(section) {
 103                     section.prepend(meta);
 104                 }
 105             } else {
 106                 metadata.replaceWith(meta);
 107             }
 108             return toret.html();
 109         }
 110
 111     };
 112 };
 113
 114 });