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         metadataConfig = (sandbox.getConfig().metadata || []).sort(function(configRow1, configRow2) {
  16             if(configRow1.key < configRow2.key) {
  17                 return -1;
  18             }
  19             if(configRow1.key > configRow2.key) {
  20                 return 1;
  21             }
  22             return 0;
  23         });
  24
  25     var getValuesForKey = function(key) {
  26         var toret = [];
  27         metadataConfig.some(function(configRow) {
  28             if(configRow.key === key) {
  29                 toret = configRow.values || [];
  30                 return true;
  31             }
  32         });
  33         return toret;
  34     };
  35
  36     var view = {
  37         node: $(_.template(mainTemplate)()),
  38         setup: function() {
  39             var view = this;
  40             var metaTable = this.metaTable = this.node.find('table');
  41
  42             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
  43                 adding = true;
  44                 currentNode.getMetadata().add('','');
  45             });
  46
  47             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
  48                 $(e.target).closest('tr').data('row').remove();
  49             });
  50
  51             this.metaTable.on('keydown', '[contenteditable]', function(e) {
  52                 /* globals document */
  53                 if(e.which === 13) {
  54                     if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) {
  55                         metaTable.find('.rng-module-metadataEditor-metaItemValue').focus();
  56                     } else {
  57                         var input = $('<input>');
  58                         input.appendTo('body').focus();
  59                         view.node.find('.rng-module-metadataEditor-addBtn').focus();
  60                         input.remove();
  61                     }
  62                     e.preventDefault();
  63                 }
  64             });
  65
  66             this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) {
  67                 if(e.which !== 13) {
  68                     var editable = $(e.target),
  69                         toSet = editable.text(),
  70                         row = editable.parents('tr').data('row'),
  71                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
  72                         method = isKey ? 'setKey' : 'setValue';
  73                     row[method](toSet);
  74                 }
  75             }, 500));
  76         },
  77         clear: function() {
  78         },
  79         setMetadata: function(node) {
  80             this.node.find('.rng-module-metadataEditor-addBtn').attr('disabled', !node);
  81             if(!node) {
  82                 this.metaTable.html('');
  83                 return;
  84             }
  85             var view = this,
  86                 metadata = node.getMetadata();
  87             this.metaTable.find('tr').remove();
  88             metadata.forEach(function(row) {
  89                 view.addMetadataRow(row);
  90             });
  91         },
  92         addMetadataRow: function(row) {
  93             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
  94             newRow.appendTo(this.metaTable);
  95             newRow.data('row', row);
  96
  97             var keySelectView = new OpenSelectView({
  98                 value: row.getKey() || '',
  99                 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemKey" contentEditable="true"><%= value %></div>')({value: row.getKey() || '' }),
 100                 setInput: function(inputDOM, value) {
 101                     if(inputDOM.text() !== value) {
 102                         inputDOM.text(value);
 103                         row.setKey(value);
 104                     }
 105                     valueSelectView.clearItems();
 106                     getValuesForKey(value).forEach(function(value) {
 107                         valueSelectView.addItem(value);
 108                     });
 109                 }
 110             });
 111             newRow.find('td:first').append(keySelectView.el).data('view', keySelectView);
 112
 113
 114             var valueSelectView = new OpenSelectView({
 115                 value: row.getValue(),
 116                 inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemValue" contentEditable="true"><%= value %></div>')({value: row.getValue() || '' }),
 117                 maxHeight: '300px',
 118                 maxWidth: '100px',
 119                 setInput: function(inputDOM, value) {
 120                     if(inputDOM.text() !== value) {
 121                         inputDOM.text(value);
 122                         row.setValue(value);
 123                     }
 124                 }
 125             });
 126             newRow.find('td:nth-child(2)').append(valueSelectView.el).data('view', valueSelectView);
 127
 128
 129             metadataConfig.forEach(function(configRow) {
 130                 keySelectView.addItem(configRow.key);
 131                 if(row.getKey() === configRow.key) {
 132                     (configRow.values || []).forEach(function(value) {
 133                         valueSelectView.addItem(value);
 134                     });
 135                 }
 136             });
 137
 138             if(adding) {
 139                 $(newRow.find('td div')[0]).focus();
 140                 adding = false;
 141             }
 142             return newRow;
 143         },
 144         updateMetadataRow: function(row) {
 145             this._getRowTr(row, function(tr) {
 146                 var tds = tr.find('td'),
 147                     keyTd = $(tds[0]),
 148                     valueTd = $(tds[1]);
 149
 150                 keyTd.data('view').setInput(row.getKey());
 151                 valueTd.data('view').setInput(row.getValue());
 152             });
 153         },
 154         removeMetadataRow: function(row) {
 155             this._getRowTr(row, function(tr) {
 156                 tr.remove();
 157             });
 158         },
 159         _getRowTr: function(row, callback) {
 160             this.metaTable.find('tr').each(function() {
 161                 var tr = $(this);
 162                 if(tr.data('row') === row) {
 163                     callback(tr);
 164                     return false;
 165                 }
 166             });
 167         }
 168     };
 169
 170     view.setup();
 171
 172     return {
 173         start: function() {
 174             sandbox.publish('ready');
 175         },
 176         setDocument: function(document) {
 177             document.on('change', function(event) {
 178                 if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) {
 179                     view.addMetadataRow(event.meta.row);
 180                 }
 181                 if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) {
 182                     view.updateMetadataRow(event.meta.row);
 183                 }
 184                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
 185                     view.removeMetadataRow(event.meta.row);
 186                 }
 187                 if(event.type === 'nodeDetached' && event.meta.node.sameNode(currentNode)) {
 188                     view.setMetadata(null);
 189                 }
 190             });
 191         },
 192         setNodeElement: function(node) {
 193             if(currentNode && currentNode.sameNode(node)) {
 194                 return;
 195             }
 196             currentNode = node;
 197             view.setMetadata(node);
 198         },
 199         getView: function() {
 200             return view.node;
 201         }
 202     };
 203 };
 204
 205 });