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