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 'views/openSelect/openSelect'
   7 ], function($, _, mainTemplate, itemTemplate, OpenSelectView) {
   8
   9 'use strict';
  10
  11 return function(sandbox) {
  12
  13     var currentNode,
  14         adding = false,
  15         metadataKeys = (sandbox.getConfig().metadataKeys || [
  16             'author', 'creator', 'date'
  17         ]).sort();
  18
  19     var view = {
  20         node: $(_.template(mainTemplate)()),
  21         setup: function() {
  22             var view = this;
  23             var metaTable = this.metaTable = this.node.find('table');
  24
  25             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
  26                 adding = true;
  27                 currentNode.getMetadata().add('','');
  28             });
  29
  30             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
  31                 $(e.target).closest('tr').data('row').remove();
  32             });
  33
  34             this.metaTable.on('keydown', '[contenteditable]', function(e) {
  35                 /* globals document */
  36                 if(e.which === 13) {
  37                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
  38                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
  39                     } else {
  40                         var input = $('<input>');
  41                         input.appendTo('body').focus();
  42                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
  43                         input.remove();
  44                     }
  45                     e.preventDefault();
  46                 }
  47             });
  48
  49             this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
  50                 if(e.which !== 13) {
  51                     var editable = $(e.target),
  52                         toSet = editable.text(),
  53                         row = editable.parents('tr').data('row'),
  54                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
  55                         method = isKey ? 'setKey' : 'setValue';
  56                     row[method](toSet);
  57                 }
  58             }, 500));
  59         },
  60         clear: function() {
  61         },
  62         setMetadata: function(node) {
  63             if(!node) {
  64                 this.metaTable.html('');
  65                 return;
  66             }
  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
  79             var selectView = new OpenSelectView({
  80                 value: row.getKey() || '',
  81                 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemKey" contentEditable="true"><%= value %></div>')({value: row.getKey() || '' }),
  82                 setInput: function(inputDOM, value) {
  83                     inputDOM.text(value);
  84                     row.setKey(value);
  85                 }
  86             });
  87             newRow.find('td:first').append(selectView.el);
  88             metadataKeys.forEach(function(key) {
  89                 selectView.addItem(key);
  90             });
  91
  92             if(adding) {
  93                 $(newRow.find('td div')[0]).focus();
  94                 adding = false;
  95             }
  96             return newRow;
  97         },
  98         updateMetadataRow: function(row) {
  99             this._getRowTr(row, function(tr) {
 100                 var tds = tr.find('td [contenteditable]'),
 101                     keyTd = $(tds[0]),
 102                     valueTd = $(tds[1]);
 103
 104                 if(keyTd.text() !== row.getKey()) {
 105                     keyTd.text(row.getKey());
 106                 }
 107                 if(valueTd.text() !== row.getValue()) {
 108                     valueTd.text(row.getValue());
 109                 }
 110             });
 111         },
 112         removeMetadataRow: function(row) {
 113             this._getRowTr(row, function(tr) {
 114                 tr.remove();
 115             });
 116         },
 117         _getRowTr: function(row, callback) {
 118             this.metaTable.find('tr').each(function() {
 119                 var tr = $(this);
 120                 if(tr.data('row') === row) {
 121                     callback(tr);
 122                     return false;
 123                 }
 124             });
 125         }
 126     };
 127
 128     view.setup();
 129
 130     return {
 131         start: function() {
 132             sandbox.publish('ready');
 133         },
 134         setDocument: function(document) {
 135             document.on('change', function(event) {
 136                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 137                     view.addMetadataRow(event.meta.row);
 138                 }
 139                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 140                     view.updateMetadataRow(event.meta.row);
 141                 }
 142                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 143                     view.removeMetadataRow(event.meta.row);
 144                 }
 145                 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
 146                     view.setMetadata(null);
 147                 }
 148             });
 149         },
 150         setNodeElement: function(node) {
 151             if(currentNode && currentNode.sameNode(node)) {
 152                 return;
 153             }
 154             currentNode = node;
 155             view.setMetadata(node);
 156         },
 157         getView: function() {
 158             return view.node;
 159         }
 160     };
 161 };
 162
 163 });