editor: tweaking visual appearance

[fnpeditor.git] / src / editor / modules / metadataEditor / metadataEditor.js

diff --git a/src/editor/modules/metadataEditor/metadataEditor.js b/src/editor/modules/metadataEditor/metadataEditor.js
index 6145740..70df62e 100644 (file)
--- a/src/editor/modules/metadataEditor/metadataEditor.js
+++ b/src/editor/modules/metadataEditor/metadataEditor.js
@@ -2,15 +2,37 @@ define([
 'libs/jquery',
 'libs/underscore',
 'libs/text!./templates/main.html',
 'libs/jquery',
 'libs/underscore',
 'libs/text!./templates/main.html',

-'libs/text!./templates/item.html'
-], function($, _, mainTemplate, itemTemplate) {
+'libs/text!./templates/item.html',
+'views/openSelect/openSelect'
+], function($, _, mainTemplate, itemTemplate, OpenSelectView) {

 
 'use strict';
 
 'use strict';

+/* globals gettext */

 
 return function(sandbox) {
 
     var currentNode,
 
 return function(sandbox) {
 
     var currentNode,

-        adding = false;
+        adding = false,
+        metadataConfig = (sandbox.getConfig().metadata || []).sort(function(configRow1, configRow2) {
+            if(configRow1.key < configRow2.key) {
+                return -1;
+            }
+            if(configRow1.key > configRow2.key) {
+                return 1;
+            }
+            return 0;
+        });
+
+    var getValuesForKey = function(key) {
+        var toret = [];
+        metadataConfig.some(function(configRow) {
+            if(configRow.key === key) {
+                toret = configRow.values || [];
+                return true;
+            }
+        });
+        return toret;
+    };

     
     var view = {
         node: $(_.template(mainTemplate)()),
     
     var view = {
         node: $(_.template(mainTemplate)()),


@@ -20,11 +42,15 @@ return function(sandbox) {
             
             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
                 adding = true;
             
             this.node.find('.rng-module-metadataEditor-addBtn').click(function() {
                 adding = true;

-                currentNode.getMetadata().add('','');
+                currentNode.document.transaction(function() {
+                    currentNode.getMetadata().add('','');
+                }, this, gettext('Add metadata row'));

             });
             
             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {
             });
             
             this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) {

-                $(e.target).closest('tr').data('row').remove();
+                currentNode.document.transaction(function() {
+                    $(e.target).closest('tr').data('row').remove();
+                }, this, gettext('Remove metadata row'));

             });
             
             this.metaTable.on('keydown', '[contenteditable]', function(e) {
             });
             
             this.metaTable.on('keydown', '[contenteditable]', function(e) {


@@ -49,11 +75,20 @@ return function(sandbox) {
                         row = editable.parents('tr').data('row'),
                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
                         method = isKey ? 'setKey' : 'setValue';
                         row = editable.parents('tr').data('row'),
                         isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey',
                         method = isKey ? 'setKey' : 'setValue';

-                    row[method](toSet);
+                    row.metadata.node.document.transaction(function() {
+                        row[method](toSet);
+                    }, this, gettext('Metadata edit'));

                 }
             }, 500));
         },
                 }
             }, 500));
         },

+        clear: function() {
+        },

         setMetadata: function(node) {
         setMetadata: function(node) {

+            this.node.find('.rng-module-metadataEditor-addBtn').attr('disabled', !node);
+            if(!node) {
+                this.metaTable.html('');
+                return;
+            }

             var view = this,
                 metadata = node.getMetadata();
             this.metaTable.find('tr').remove();
             var view = this,
                 metadata = node.getMetadata();
             this.metaTable.find('tr').remove();


@@ -65,6 +100,48 @@ return function(sandbox) {
             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
             newRow.appendTo(this.metaTable);
             newRow.data('row', row);
             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
             newRow.appendTo(this.metaTable);
             newRow.data('row', row);

+
+            var keySelectView = new OpenSelectView({
+                value: row.getKey() || '',
+                inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemKey" contentEditable="true"><%= value %></div>')({value: row.getKey() || '' }),
+                setInput: function(inputDOM, value) {
+                    if(inputDOM.text() !== value) {
+                        inputDOM.text(value);
+                        row.setKey(value);
+                    }
+                    valueSelectView.clearItems();
+                    getValuesForKey(value).forEach(function(value) {
+                        valueSelectView.addItem(value);
+                    });
+                }
+            });
+            newRow.find('td:first').append(keySelectView.el).data('view', keySelectView);
+
+
+            var valueSelectView = new OpenSelectView({
+                value: row.getValue(),
+                inputTemplate: _.template('<div class="openInput rng-module-metadataEditor-metaItemValue" contentEditable="true"><%= value %></div>')({value: row.getValue() || '' }),
+                maxHeight: '300px',
+                maxWidth: '100px',
+                setInput: function(inputDOM, value) {
+                    if(inputDOM.text() !== value) {
+                        inputDOM.text(value);
+                        row.setValue(value);
+                    }
+                }
+            });
+            newRow.find('td:nth-child(2)').append(valueSelectView.el).data('view', valueSelectView);
+            
+
+            metadataConfig.forEach(function(configRow) {
+                keySelectView.addItem(configRow.key);
+                if(row.getKey() === configRow.key) {
+                    (configRow.values || []).forEach(function(value) {
+                        valueSelectView.addItem(value);
+                    });
+                }
+            });
+

             if(adding) {
                 $(newRow.find('td div')[0]).focus();
                 adding = false;
             if(adding) {
                 $(newRow.find('td div')[0]).focus();
                 adding = false;


@@ -77,12 +154,8 @@ return function(sandbox) {
                     keyTd = $(tds[0]),
                     valueTd = $(tds[1]);
 
                     keyTd = $(tds[0]),
                     valueTd = $(tds[1]);
 

-                if(keyTd.text() !== row.getKey()) {
-                    keyTd.text(row.getKey());
-                }
-                if(valueTd.text() !== row.getValue()) {
-                    valueTd.text(row.getValue());
-                }
+                keyTd.data('view').setInput(row.getKey());
+                valueTd.data('view').setInput(row.getValue());

             });
         },
         removeMetadataRow: function(row) {
             });
         },
         removeMetadataRow: function(row) {


@@ -118,6 +191,9 @@ return function(sandbox) {
                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
                     view.removeMetadataRow(event.meta.row);
                 }
                 if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) {
                     view.removeMetadataRow(event.meta.row);
                 }

+                if(event.type === 'nodeDetached' && event.meta.node.containsNode(currentNode)) {
+                    view.setMetadata(null);
+                }

             });
         },
         setNodeElement: function(node) {
             });
         },
         setNodeElement: function(node) {