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                 /* globals document */
  33                 if(e.which === 13) {
  34                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
  35                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
  36                     } else {
  37                         var input = $('<input>');
  38                         input.appendTo('body').focus();
  39                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
  40                         input.remove();
  41                     }
  42                     e.preventDefault();
  43                 }
  44             });
  45
  46
  47             var onKeyUp = function(e) {
  48                 if(e.which !== 13) {
  49                     sandbox.publish('metadataChanged', view.getMetadata());
  50                 }
  51             };
  52             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
  53         },
  54         getMetadata: function() {
  55             var toret = {};
  56             this.node.find('tr').each(function() {
  57                 var inputs = $(this).find('td [contenteditable]');
  58                 var key = $(inputs[0]).text();
  59                 var value = $(inputs[1]).text();
  60                 toret[key] = value;
  61             });
  62             return toret;
  63         },
  64         setMetadata: function(metadata) {
  65             var view = this;
  66             this.metaTable.find('tr').remove();
  67             _.each(_.keys(metadata), function(key) {
  68                 view._addMetaRow(key, metadata[key]);
  69             });
  70         },
  71         _addMetaRow: function(key, value) {
  72             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));
  73             newRow.appendTo(this.metaTable);
  74             return newRow;
  75         }
  76     };
  77
  78     view.setup();
  79
  80     return {
  81         start: function() {
  82             sandbox.publish('ready');
  83         },
  84         setDocument: function(xml) {
  85             view.setMetadata(transformations.getMetadata(xml));
  86             sandbox.publish('metadataSet');
  87         },
  88         getMetadata: function() {
  89             return transformations.getXML(view.getMetadata());
  90         },
  91         getView: function() {
  92             return view.node;
  93         },
  94         attachMetadata: function(document) {
  95             var toret = $('<div>');
  96             toret.append($(document));
  97             var meta = $('<metadata></metadata>\n').append(transformations.getXML(view.getMetadata()));
  98
  99             var metadata = toret.find('metadata');
 100             if(metadata.length === 0) {
 101                 var section = toret.find('section');
 102                 section = section.length ? $(section[0]) : null;
 103                 if(section) {
 104                     section.prepend(meta);
 105                 }
 106             } else {
 107                 metadata.replaceWith(meta);
 108             }
 109             return toret.html();
 110         }
 111
 112     };
 113 };
 114
 115 });