From: Aleksander Łukasz Date: Fri, 11 Jul 2014 12:27:58 +0000 (+0200) Subject: editor: Bring back metadata editor as a modal dialog X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/6515d67111202f746a1a58c66dcf2261636f2a26?ds=inline;hp=--cc editor: Bring back metadata editor as a modal dialog --- 6515d67111202f746a1a58c66dcf2261636f2a26 diff --git a/src/editor/plugins/core/core.js b/src/editor/plugins/core/core.js index 450f147..9445682 100644 --- a/src/editor/plugins/core/core.js +++ b/src/editor/plugins/core/core.js @@ -10,7 +10,8 @@ var _ = require('libs/underscore'), lists = require('plugins/core/lists'), plugin = {name: 'core', actions: [], canvas: {}, documentExtension: {textNode: {}}}, Dialog = require('views/dialog/dialog'), - canvasElements = require('plugins/core/canvasElements'); + canvasElements = require('plugins/core/canvasElements'), + metadataEditor = require('./metadataEditor/metadataEditor'); @@ -389,6 +390,7 @@ var linkAction = { } }; +var metadataParams = {}; plugin.actions = [ undoRedoAction('undo'), @@ -396,7 +398,8 @@ plugin.actions = [ commentAction, createWrapTextAction({name: 'emphasis', klass: 'emp', wrapDescription: gettext('Mark as emphasized'), unwrapDescription: gettext('Remove emphasis')}), createWrapTextAction({name: 'cite', klass: 'cite', wrapDescription: gettext('Mark as citation'), unwrapDescription: gettext('Remove citation')}), - linkAction + linkAction, + metadataEditor.action(metadataParams) ].concat(plugin.actions, templates.actions, footnote.actions, switchTo.actions, lists.actions); @@ -404,6 +407,15 @@ plugin.actions = [ plugin.config = function(config) { // templates.actions[0].config(config.templates); templates.actions[0].params.template.options = config.templates; + metadataParams.config = (config.metadata || []).sort(function(configRow1, configRow2) { + if(configRow1.key < configRow2.key) { + return -1; + } + if(configRow1.key > configRow2.key) { + return 1; + } + return 0; + }); }; plugin.canvasElements = canvasElements; diff --git a/src/editor/plugins/core/core.less b/src/editor/plugins/core/core.less index 14c179e..3d172ae 100644 --- a/src/editor/plugins/core/core.less +++ b/src/editor/plugins/core/core.less @@ -1,2 +1,3 @@ @import 'canvasElements.less'; @import 'links/links.less'; +@import 'metadataEditor/metadataEditor.less'; \ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/action.js b/src/editor/plugins/core/metadataEditor/action.js new file mode 100644 index 0000000..9184eda --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/action.js @@ -0,0 +1,42 @@ +define(function(require) { + +'use strict'; +/* globals gettext */ + +var Dialog = require('views/dialog/dialog'), + View = require('./view'); + + +return function(ctx) { + return { + name: 'showMetadataEditor', + params: { + doc: {type: 'context', name: 'document'} + }, + stateDefaults: { + allowed: true, + label: gettext('Metadata'), + execute: function(callback, params) { + void(callback); + var dialog = Dialog.create({ + title: gettext('Document Metadata'), + executeButtonText: gettext('Close'), + cssClass: 'metadataEditor' + }), + view = new View(params.doc.root, ctx.config); + dialog.show(); + dialog.setContentView(view.dom); + dialog.on('execute', function(e) { + e.success(); + }); + } + }, + getState: function(params) { + return { + allowed: !!params.doc + }; + } + }; +}; + +}); \ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/metadataEditor.js b/src/editor/plugins/core/metadataEditor/metadataEditor.js new file mode 100644 index 0000000..aa0277b --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/metadataEditor.js @@ -0,0 +1,11 @@ +define(function(require) { + +'use strict'; + +var action = require('./action'); + +return { + action: action +}; + +}); \ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/metadataEditor.less b/src/editor/plugins/core/metadataEditor/metadataEditor.less new file mode 100644 index 0000000..a0f2b9f --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/metadataEditor.less @@ -0,0 +1,55 @@ +.metadataEditor .modal-body { + overflow: visible; +} + +.rng-module-metadataEditor { + + table { + table-layout:fixed; + margin-bottom:10px; + + [contenteditable] { + cursor: text; + word-wrap: break-word; + min-height: 13px; + } + + li:last-child { + border-bottom: none !important; + } + + tr td { + vertical-align: middle; + } + + tr td:nth-child(1){ + width: 30%; + } + + tr td:nth-child(2) { + width:70%; + } + + tr td:nth-child(3) { + width: 14px; + } + } + + .rng-module-metadataEditor-addBtn { + float:right; + margin-right:6px; + } + + .rng-visualEditor-metaRemoveBtn { + color: @red; + } + + .btn { + padding:3px; + line-height:10px; + } + + .drop-menu { + overflow: auto; + } +} \ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/templates/item.html b/src/editor/plugins/core/metadataEditor/templates/item.html new file mode 100644 index 0000000..f170c5a --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/templates/item.html @@ -0,0 +1,5 @@ + + + + x + \ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/templates/main.html b/src/editor/plugins/core/metadataEditor/templates/main.html new file mode 100644 index 0000000..cd4cc89 --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/templates/main.html @@ -0,0 +1,6 @@ +
+ +
+ +
+
\ No newline at end of file diff --git a/src/editor/plugins/core/metadataEditor/view.js b/src/editor/plugins/core/metadataEditor/view.js new file mode 100644 index 0000000..2857736 --- /dev/null +++ b/src/editor/plugins/core/metadataEditor/view.js @@ -0,0 +1,202 @@ +define([ +'libs/jquery', +'libs/underscore', +'libs/text!./templates/main.html', +'libs/text!./templates/item.html', +'views/openSelect/openSelect' +], function($, _, mainTemplate, itemTemplate, OpenSelectView) { + +'use strict'; +/* globals gettext */ + + +var View = function(node, metadataConfig) { + this.node = node; + this.metadataConfig = metadataConfig; + this.dom = $(_.template(mainTemplate)()); + this.adding = false; + + var metaTable = this.metaTable = this.dom.find('table'); + + this.dom.find('.rng-module-metadataEditor-addBtn').click(function() { + this.adding = true; + this.node.document.transaction(function() { + this.node.getMetadata().add('',''); + }.bind(this), { + metadata: { + description: gettext('Add metadata row') + } + }); + }.bind(this)); + + this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) { + this.node.document.transaction(function() { + $(e.target).closest('tr').data('row').remove(); + }, { + metadata: { + description: gettext('Remove metadata row') + } + }); + }.bind(this)); + + this.metaTable.on('keydown', '[contenteditable]', function(e) { + /* globals document */ + if(e.which === 13) { + if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) { + metaTable.find('.rng-module-metadataEditor-metaItemValue').focus(); + } else { + var input = $(''); + input.appendTo('body').focus(); + this.dom.find('.rng-module-metadataEditor-addBtn').focus(); + input.remove(); + } + e.preventDefault(); + } + }.bind(this)); + + this.metaTable.on('keyup', '[contenteditable]', _.throttle(function(e) { + if(e.which !== 13) { + var editable = $(e.target), + toSet = editable.text(), + row = editable.parents('tr').data('row'), + isKey = _.last(editable.attr('class').split('-')) === 'metaItemKey', + method = isKey ? 'setKey' : 'setValue'; + row.metadata.node.document.transaction(function() { + row[method](toSet); + }, { + metadata: { + description: gettext('Metadata edit') + } + }); + } + }, 500)); + + this.setMetadata(this.node); // + + this.node.document.on('change', this.handleEvent, this); +}; + +_.extend(View.prototype, { + close: function() { + this.node.document.off('change', this.handleEvent); + }, + handleEvent: function(event) { + if(event.type === 'metadataAdded' && event.meta.node.sameNode(this.node)) { + this.addMetadataRow(event.meta.row); + } + if(event.type === 'metadataChanged' && event.meta.node.sameNode(this.node)) { + this.updateMetadataRow(event.meta.row); + } + if(event.type === 'metadataRemoved' && event.meta.node.sameNode(this.node)) { + this.removeMetadataRow(event.meta.row); + } + if(event.type === 'nodeDetached' && event.meta.node.containsNode(this.node)) { + this.setMetadata(null); + } + }, + getValuesForKey: function(key) { + var toret = []; + this.metadataConfig.some(function(configRow) { + if(configRow.key === key) { + toret = configRow.values || []; + return true; + } + }); + return toret; + }, + setMetadata: function(node) { + this.dom.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(); + metadata.forEach(function(row) { + view.addMetadataRow(row); + }); + }, + addMetadataRow: function(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('
<%= value %>
')({value: row.getKey() || '' }), + setInput: function(inputDOM, value) { + if(inputDOM.text() !== value) { + inputDOM.text(value); + row.setKey(value); + } + valueSelectView.clearItems(); + this.getValuesForKey(value).forEach(function(value) { + valueSelectView.addItem(value); + }); + }.bind(this) + }); + newRow.find('td:first').append(keySelectView.el).data('view', keySelectView); + + + var valueSelectView = new OpenSelectView({ + value: row.getValue(), + inputTemplate: _.template('
<%= value %>
')({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); + + + this.metadataConfig.forEach(function(configRow) { + keySelectView.addItem(configRow.key); + if(row.getKey() === configRow.key) { + (configRow.values || []).forEach(function(value) { + valueSelectView.addItem(value); + }); + } + }); + + if(this.adding) { + $(newRow.find('td div')[0]).focus(); + this.adding = false; + } + return newRow; + }, + updateMetadataRow: function(row) { + this._getRowTr(row, function(tr) { + var tds = tr.find('td'), + keyTd = $(tds[0]), + valueTd = $(tds[1]); + + keyTd.data('view').setInput(row.getKey()); + valueTd.data('view').setInput(row.getValue()); + }); + }, + removeMetadataRow: function(row) { + this._getRowTr(row, function(tr) { + tr.remove(); + }); + }, + _getRowTr: function(row, callback) { + this.metaTable.find('tr').each(function() { + var tr = $(this); + if(tr.data('row') === row) { + callback(tr); + return false; + } + }); + } +}); + + +return View; + + +}); \ No newline at end of file diff --git a/src/editor/views/dialog/dialog.html b/src/editor/views/dialog/dialog.html index 1576831..7499cd1 100644 --- a/src/editor/views/dialog/dialog.html +++ b/src/editor/views/dialog/dialog.html @@ -1,4 +1,4 @@ -
+

<%= title %>

diff --git a/src/editor/views/dialog/dialog.js b/src/editor/views/dialog/dialog.js index dff0b6f..7d9f775 100644 --- a/src/editor/views/dialog/dialog.js +++ b/src/editor/views/dialog/dialog.js @@ -28,7 +28,8 @@ define(function(require) { show: function() { this.setElement(this.template(_.extend({ executeButtonText: null, - cancelButtonText: null + cancelButtonText: null, + cssClass: '' }, this.options))); var body = this.$('.modal-body'); @@ -96,6 +97,10 @@ define(function(require) { this.$('.btn, button').toggleClass('disabled', !toggle); this.$('textarea').attr('disabled', !toggle); this.actionsDisabled = !toggle; + }, + setContentView: function(view) { + var body = this.$('.modal-body'); + body.append(view); } });