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     var currentNode;
  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                 var newRow = view._addMetaRow('', '');
  23                 $(newRow.find('td div')[0]).focus();
  24             });
  25
  26             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
  27                 $(e.target).closest('tr').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 = {};
  52                     toSet[isKey ? 'key' : 'value'] = editable.text();
  53                     currentNode.setMetadataRow(myIndex, toSet);
  54                 }
  55             };
  56             this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500));
  57         },
  58         getMetadata: function() {
  59             var toret = [];
  60             this.node.find('tr').each(function() {
  61                 var inputs = $(this).find('td [contenteditable]');
  62                 var key = $(inputs[0]).text();
  63                 var value = $(inputs[1]).text();
  64                 toret.push({key:key, value: value});
  65             });
  66             return toret;
  67         },
  68         setMetadata: function(node) {
  69             var view = this,
  70                 metadata = node.getMetadata();
  71             this.metaTable.find('tr').remove();
  72             metadata.forEach(function(row) {
  73                 view._addMetaRow(row.key, row.value);
  74             });
  75         },
  76         _addMetaRow: function(key, value) {
  77             var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''}));
  78             newRow.appendTo(this.metaTable);
  79             return newRow;
  80         }
  81     };
  82
  83     view.setup();
  84
  85     return {
  86         start: function() {
  87             sandbox.publish('ready');
  88         },
  89         setDocument: function(document) {
  90             document.on('change', function(event) {
  91                 if(event.type === 'nodeMetadataChange' && event.meta.node.sameNode(currentNode)) {
  92                     view.setMetadata(currentNode);
  93                 }
  94             });
  95 //            view.setMetadata(transformations.getMetadata(xml));
  96             // sandbox.publish('metadataSet'); to wywalki
  97         },
  98         setNodeElement: function(node) {
  99             if(currentNode && currentNode.sameNode(node)) {
 100                 return;
 101             }
 102             currentNode = node;
 103             view.setMetadata(node);
 104         },
 105         getMetadata: function() {
 106             return transformations.getXML(view.getMetadata());
 107         },
 108         getView: function() {
 109             return view.node;
 110         },
 111         attachMetadata: function(document) {
 112             var toret = $('<div>');
 113             toret.append($(document));
 114             var meta = $('<metadata></metadata>\n').append(transformations.getXML(view.getMetadata()));
 115
 116             var metadata = toret.find('metadata');
 117             if(metadata.length === 0) {
 118                 var section = toret.find('section');
 119                 section = section.length ? $(section[0]) : null;
 120                 if(section) {
 121                     section.prepend(meta);
 122                 }
 123             } else {
 124                 metadata.replaceWith(meta);
 125             }
 126             return toret.html();
 127         }
 128
 129     };
 130 };
 131
 132 });