From: Aleksander Ɓukasz Date: Fri, 17 Jan 2014 10:01:06 +0000 (+0100) Subject: editor: meta wip - first working version X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/a6d9ca1583cead374b580550fedb93104ef05a73 editor: meta wip - first working version --- diff --git a/src/editor/modules/metadataEditor/metadataEditor.js b/src/editor/modules/metadataEditor/metadataEditor.js index 38b4e56..48b10eb 100644 --- a/src/editor/modules/metadataEditor/metadataEditor.js +++ b/src/editor/modules/metadataEditor/metadataEditor.js @@ -9,7 +9,8 @@ define([ return function(sandbox) { - var currentNode; + var currentNode, + adding = false; var view = { node: $(_.template(mainTemplate)()), @@ -18,12 +19,12 @@ return function(sandbox) { var metaTable = this.metaTable = this.node.find('table'); this.node.find('.rng-module-metadataEditor-addBtn').click(function() { - var newRow = view._addMetaRow('', ''); - $(newRow.find('td div')[0]).focus(); + adding = true; + currentNode.getMetadata().add('',''); }); this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) { - $(e.target).closest('tr').remove(); + $(e.target).closest('tr').data('row').remove(); }); this.metaTable.on('keydown', '[contenteditable]', function(e) { @@ -45,11 +46,19 @@ return function(sandbox) { var onKeyUp = function(e) { if(e.which !== 13) { var editable = $(e.target), - myIndex = metaTable.find('.'+editable.attr('class')).index(editable), - isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey', - toSet = {}; - toSet[isKey ? 'key' : 'value'] = editable.text(); - currentNode.setMetadataRow(myIndex, toSet); + //myIndex = metaTable.find('.'+editable.attr('class')).index(editable), + isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey'; + //toSet[isKey ? 'key' : 'value'] = editable.text(); + //currentNode.setMetadataRow(myIndex, toSet); + + var row = editable.parents('tr').data('row'), + toSet = editable.text(); + if(isKey) { + row.setKey(toSet); + } else { + row.setValue(toSet); + } + } }; this.metaTable.on('keyup', '[contenteditable]', _.throttle(onKeyUp, 500)); @@ -59,13 +68,44 @@ return function(sandbox) { metadata = node.getMetadata(); this.metaTable.find('tr').remove(); metadata.forEach(function(row) { - view._addMetaRow(row.getKey(), row.getValue()); + view.addMetadataRow(row); }); }, - _addMetaRow: function(key, value) { - var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''})); + addMetadataRow: function(row) { + var newRow = $(_.template(itemTemplate)({key: row.getKey() || '', value: row.getValue() || ''})); newRow.appendTo(this.metaTable); + newRow.data('row', row); + if(adding) { + $(newRow.find('td div')[0]).focus(); + adding = false; + } return newRow; + }, + updateMetadataRow: function(row) { + this.metaTable.find('tr').each(function() { + var tr = $(this), + tds, keyTd, valueTd; + if(tr.data('row') === row) { + tds = tr.find('td'); + keyTd = $(tds[0]); + valueTd = $(tds[1]); + + if(keyTd.text() !== row.getKey()) { + keyTd.text(row.getKey()); + } + if(valueTd.text() !== row.getValue()) { + valueTd.text(row.getValue()); + } + } + }); + }, + removeMetadataRow: function(row) { + this.metaTable.find('tr').each(function() { + var tr = $(this); + if(tr.data('row') === row) { + tr.remove(); + } + }); } }; @@ -77,14 +117,20 @@ return function(sandbox) { }, setDocument: function(document) { document.on('change', function(event) { - if(event.type === 'nodeMetadataChange' && event.meta.node.sameNode(currentNode)) { - view.setMetadata(currentNode); + if(event.type === 'metadataAdded' && event.meta.node.sameNode(currentNode)) { + view.addMetadataRow(event.meta.row); + } + if(event.type === 'metadataChanged' && event.meta.node.sameNode(currentNode)) { + view.updateMetadataRow(event.meta.row); + } + if(event.type === 'metadataRemoved' && event.meta.node.sameNode(currentNode)) { + view.removeMetadataRow(event.meta.row); } }); }, setNodeElement: function(node) { if(currentNode && currentNode.sameNode(node)) { - return + return; } currentNode = node; view.setMetadata(node);