From c224cdef02533a5a5962fa25f1a76f86c0d60005 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Tue, 18 Mar 2014 11:56:40 +0100 Subject: [PATCH] editor: Support for selecting metadata keys from a list in the metadata editor --- .../modules/metadataEditor/metadataEditor.js | 26 ++++++++++-- .../metadataEditor/metadataEditor.less | 11 +++-- .../metadataEditor/templates/item.html | 2 +- src/editor/styles/main.less | 1 + src/editor/views/openSelect/itemTemplate.html | 1 + src/editor/views/openSelect/openSelect.js | 41 +++++++++++++++++++ src/editor/views/openSelect/openSelect.less | 21 ++++++++++ src/editor/views/openSelect/template.html | 5 +++ 8 files changed, 99 insertions(+), 9 deletions(-) create mode 100644 src/editor/views/openSelect/itemTemplate.html create mode 100644 src/editor/views/openSelect/openSelect.js create mode 100644 src/editor/views/openSelect/openSelect.less create mode 100644 src/editor/views/openSelect/template.html diff --git a/src/editor/modules/metadataEditor/metadataEditor.js b/src/editor/modules/metadataEditor/metadataEditor.js index ec64455..502c16a 100644 --- 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('
<%= value %>
')({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 --- 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 --- a/src/editor/modules/metadataEditor/templates/item.html +++ b/src/editor/modules/metadataEditor/templates/item.html @@ -1,5 +1,5 @@ -
<%= key %>
+
<%= value %>
\ No newline at end of file diff --git a/src/editor/styles/main.less b/src/editor/styles/main.less index d74c4d3..2792657 100644 --- 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 index 0000000..b9df54a --- /dev/null +++ b/src/editor/views/openSelect/itemTemplate.html @@ -0,0 +1 @@ +
  • <%= value %>
  • \ 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 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 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 index 0000000..4d2bf9c --- /dev/null +++ b/src/editor/views/openSelect/template.html @@ -0,0 +1,5 @@ +
    + + +
    +
    -- 2.20.1