From: Aleksander Ɓukasz Date: Wed, 17 Apr 2013 10:02:14 +0000 (+0200) Subject: Visual editor: editing meta data via contenteditable instead of inputs X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/f129f1dd6ba62fa571960330c62191e08e53deb2?hp=ebaba7ac4948ae4280dea0a623045ffb6d5a722f Visual editor: editing meta data via contenteditable instead of inputs --- diff --git a/editor.css b/editor.css index 651b58b..58ed300 100644 --- a/editor.css +++ b/editor.css @@ -60,17 +60,18 @@ body { float:right; } -#rng-visualEditor-meta table input { +#rng-visualEditor-meta table [contenteditable] { font-size: 11px; line-height:13px; + cursor: pointer; } -#rng-visualEditor-meta table tr td:nth-child(1) input { +#rng-visualEditor-meta table tr td:nth-child(1) [contenteditable] { width:90px; } -#rng-visualEditor-meta table tr td:nth-child(2) input { +#rng-visualEditor-meta table tr td:nth-child(2) [contenteditable] { width:150px; } diff --git a/modules/visualEditor.js b/modules/visualEditor.js index 5833b71..dc0b801 100644 --- a/modules/visualEditor.js +++ b/modules/visualEditor.js @@ -21,7 +21,7 @@ rng.modules.visualEditor = function(sandbox) { view._markSelected($(e.target)); }); - this.node.on('keyup', function(e) { + this.node.on('keyup', '#rng-visualEditor-contentWrapper', function(e) { var anchor = $(window.getSelection().anchorNode); if(anchor[0].nodeType === Node.TEXT_NODE) anchor = anchor.parent(); @@ -31,10 +31,11 @@ rng.modules.visualEditor = function(sandbox) { }); - this.metaTable = this.node.find('#rng-visualEditor-meta table'); + var metaTable = this.metaTable = this.node.find('#rng-visualEditor-meta table'); this.metaTable.find('.rng-visualEditor-metaAddBtn').click(function() { - view._addMetaRow(); + var newRow = view._addMetaRow('', ''); + $(newRow.find('td div')[0]).focus(); isDirty = true; }); @@ -42,15 +43,31 @@ rng.modules.visualEditor = function(sandbox) { $(e.target).closest('tr').remove(); isDirty = true; }); + + this.metaTable.on('keydown', '[contenteditable]', function(e) { + console.log(e.which); + if(e.which === 13) { + if($('*:focus').hasClass('rng-visualEditor-metaItemKey')) { + metaTable.find('.rng-visualEditor-metaItemValue').focus(); + } else { + var input = $(''); + input.appendTo('body').focus() + metaTable.find('.rng-visualEditor-metaAddBtn').focus(); + input.remove(); + } + e.preventDefault(); + } + + }); }, getMetaData: function() { var toret = {}; this.metaTable.find('tr').not('.rng-visualEditor-addMetaRow').each(function() { var tr = $(this); - var inputs = $(this).find('td input'); - var key = $(inputs[0]).val() - var value = $(inputs[1]).val() + var inputs = $(this).find('td [contenteditable]'); + var key = $(inputs[0]).text(); + var value = $(inputs[1]).text(); toret[key] = value; }); console.log(toret); @@ -75,7 +92,9 @@ rng.modules.visualEditor = function(sandbox) { }, _addMetaRow: function(key, value) { var addRow = this.metaTable.find('.rng-visualEditor-addMetaRow'); - $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''})).insertBefore(addRow); + var newRow = $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''})); + newRow.insertBefore(addRow); + return newRow; } }; view.setup();