editor: Support for selecting metadata keys from a list in the metadata editor

diff --git a/src/editor/modules/metadataEditor/metadataEditor.js b/src/editor/modules/metadataEditor/metadataEditor.js
index ec64455..502c16a 100644 (file)
--- a/src/editor/modules/metadataEditor/metadataEditor.js
+++ b/src/editor/modules/metadataEditor/metadataEditor.js
@@ -2,15 +2,19 @@ define([
 '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';
 
 return function(sandbox) {
 
     var currentNode,
-        adding = false;
+        adding = false,
+        metadataKeys = (sandbox.getConfig().metadataKeys || [
+            'author', 'creator', 'date'
+        ]).sort();
     
     var view = {
         node: $(_.template(mainTemplate)()),
@@ -71,6 +75,20 @@ return function(sandbox) {
             var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''}));
             newRow.appendTo(this.metaTable);
             newRow.data('row', row);
+
+            var selectView = 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) {
+                    inputDOM.text(value);
+                    row.setKey(value);
+                }
+            });
+            newRow.find('td:first').append(selectView.el);
+            metadataKeys.forEach(function(key) {
+                selectView.addItem(key);
+            });
+
             if(adding) {
                 $(newRow.find('td div')[0]).focus();
                 adding = false;
@@ -79,7 +97,7 @@ return function(sandbox) {
         },
         updateMetadataRow: function(row) {
             this._getRowTr(row, function(tr) {
-                var tds = tr.find('td > div'),
+                var tds = tr.find('td [contenteditable]'),
                     keyTd = $(tds[0]),
                     valueTd = $(tds[1]);
 

diff --git a/src/editor/modules/metadataEditor/metadataEditor.less b/src/editor/modules/metadataEditor/metadataEditor.less
index f17b91e..e214e71 100644 (file)
--- a/src/editor/modules/metadataEditor/metadataEditor.less
+++ b/src/editor/modules/metadataEditor/metadataEditor.less
@@ -5,7 +5,7 @@
         margin-bottom:10px;
 
         [contenteditable] {
-            cursor: pointer;
+            cursor: text;
             word-wrap: break-word;
             min-height: 13px;
         }
@@ -14,17 +14,20 @@
             border-bottom: none !important;
         }
 
+        tr td {
+            vertical-align: middle;
+        }
+
         tr td:nth-child(1){
-            width: 20%;
+            width: 30%;
         }
 
         tr td:nth-child(2)  {
-            width:80%;
+            width:70%;
         }
 
         tr td:nth-child(3) {
             width: 14px;
-            vertical-align: middle;
         }
     }
 

diff --git a/src/editor/modules/metadataEditor/templates/item.html b/src/editor/modules/metadataEditor/templates/item.html
index 3920f68..8166eb5 100644 (file)
--- a/src/editor/modules/metadataEditor/templates/item.html
+++ b/src/editor/modules/metadataEditor/templates/item.html
@@ -1,5 +1,5 @@
 <tr>
-    <td><div contenteditable="true" class="rng-module-metadataEditor-metaItemKey"><%= key %></div></td>
+    <td></td>
     <td><div contenteditable="true" class="rng-module-metadataEditor-metaItemValue"><%= value %></div></td>
     <td><button class="rng-visualEditor-metaRemoveBtn btn btn-mini btn-danger">x</button></td>
 </tr>
\ No newline at end of file

diff --git a/src/editor/styles/main.less b/src/editor/styles/main.less
index d74c4d3..2792657 100644 (file)
--- a/src/editor/styles/main.less
+++ b/src/editor/styles/main.less
@@ -2,6 +2,7 @@
 @import 'mixins.less';
 @import 'common.less';
 
+@import '../views/openSelect/openSelect.less';
 @import '../modules/data/data.less';
 @import '../modules/rng/rng.less';
 @import '../modules/documentCanvas/documentCanvas.less';

diff --git a/src/editor/views/openSelect/itemTemplate.html b/src/editor/views/openSelect/itemTemplate.html
new file mode 100644 (file)
index 0000000..b9df54a
--- /dev/null
+++ b/src/editor/views/openSelect/itemTemplate.html
@@ -0,0 +1 @@
+<li><a tabindex="-1" href="#"><%= value %></a></li>
\ No newline at end of file

diff --git a/src/editor/views/openSelect/openSelect.js b/src/editor/views/openSelect/openSelect.js
new file mode 100644 (file)
index 0000000..451570e
--- /dev/null
+++ b/src/editor/views/openSelect/openSelect.js
@@ -0,0 +1,41 @@
+define(function(require) {
+    
+'use strict';
+
+var _ = require('libs/underscore'),
+    $ = require('libs/jquery'),
+    Backbone = require('libs/backbone'),
+    template = require('libs/text!./template.html'),
+    itemTemplate = require('libs/text!./itemTemplate.html');
+
+
+var OpenSelect = Backbone.View.extend({
+    className: 'openSelect',
+    events: {
+        'click a': 'onSelection',
+    },
+    initialize: function() {
+        this.$el.css('position', 'relative');
+        this.$el.append(_.template(template)({value: this.options.value || ''}));
+        this.$('.toggle').dropdown();
+        this.menu = this.$('.dropdown-menu');
+        if(this.options.inputTemplate) {
+            this.input = $(this.options.inputTemplate);
+            this.$('.input-wrapper').append(this.input);
+        }
+    },
+    addItem: function(value) {
+        this.menu.append(_.template(itemTemplate)({value: value}));
+    },
+    onSelection: function(e) {
+        var val = $(e.target).text();
+        if(this.options.setInput) {
+            this.options.setInput(this.input, val);
+        }
+        this.trigger('itemSelected', this.input.val());
+    }
+});
+
+return OpenSelect;
+
+});
\ No newline at end of file

diff --git a/src/editor/views/openSelect/openSelect.less b/src/editor/views/openSelect/openSelect.less
new file mode 100644 (file)
index 0000000..4031ce5
--- /dev/null
+++ b/src/editor/views/openSelect/openSelect.less
@@ -0,0 +1,21 @@
+.openSelect {
+    @lineHeight: 13px;
+
+    line-height: @lineHeight;
+
+    .toggle-wrapper {
+        width: 1em;
+        :link {
+            text-decoration: none;
+            outline: none;
+        }
+    }
+
+    .input-wrapper {
+        margin: 0;
+        border: 0;
+        padding: 0 0 0 1em;
+        width: calc(~"100% - 1em");
+        margin-top: -@lineHeight;
+    }
+}
\ No newline at end of file

diff --git a/src/editor/views/openSelect/template.html b/src/editor/views/openSelect/template.html
new file mode 100644 (file)
index 0000000..4d2bf9c
--- /dev/null
+++ b/src/editor/views/openSelect/template.html
@@ -0,0 +1,5 @@
+ <div style="position: relative" class="toggle-wrapper">
+     <a class="toggle" href="#">&#x25BC;</a>
+     <ul class="dropdown-menu"></ul>
+</div>
+<div class="input-wrapper"></div>