From 7563f3ac167a9fbf484d40e80399a22101335db9 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 15 Aug 2017 09:35:57 -0400 Subject: [PATCH] Refactor duplicate form-field code to uiFormFields --- css/80_app.css | 4 +- modules/ui/changeset_editor.js | 106 +++-------------------------- modules/ui/form_fields.js | 120 +++++++++++++++++++++++++++++++++ modules/ui/index.js | 1 + modules/ui/preset_editor.js | 115 ++++--------------------------- 5 files changed, 143 insertions(+), 203 deletions(-) create mode 100644 modules/ui/form_fields.js diff --git a/css/80_app.css b/css/80_app.css index 028d6967a..006652a12 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1131,13 +1131,13 @@ button.save.has-count .count::before { margin: 0 20px 10px 20px; } -.preset-editor .preset-form { +.preset-editor .form-fields-container { padding: 10px; margin: 0 10px 10px 10px; border-radius: 8px; } -.preset-editor .preset-form:empty { +.preset-editor .form-fields-container:empty { display: none; } diff --git a/modules/ui/changeset_editor.js b/modules/ui/changeset_editor.js index 36cc855c1..fe43eef18 100644 --- a/modules/ui/changeset_editor.js +++ b/modules/ui/changeset_editor.js @@ -4,20 +4,19 @@ import { d3combobox } from '../lib/d3.combobox.js'; import { t } from '../util/locale'; import { svgIcon } from '../svg'; import { uiField } from './field'; -import { - utilGetSetValue, - utilNoAuto, - utilRebind -} from '../util'; +import { uiFormFields } from './form_fields'; +import { utilRebind } from '../util'; export function uiChangesetEditor(context) { var dispatch = d3.dispatch('change'), + formFields = uiFormFields(context), fieldsArr, tags, changesetId; + function changesetEditor(selection) { render(selection); } @@ -49,102 +48,13 @@ export function uiChangesetEditor(context) { .tags(tags); }); - var shown = fieldsArr.filter(function(field) { return field.isShown(); }), - notShown = fieldsArr.filter(function(field) { return !field.isShown(); }); - - var form = selection.selectAll('.preset-form') - .data([0]); - - form = form.enter() - .append('div') - .attr('class', 'preset-form') - .merge(form); - - - var fields = form.selectAll('.wrap-form-field') - .data(shown, function(d) { return d.id; }); - - fields.exit() - .remove(); - - // Enter - var enter = fields.enter() - .append('div') - .attr('class', function(d) { return 'wrap-form-field wrap-form-field-' + d.id; }); - - // Update - fields = fields - .merge(enter); - - fields - .order() - .each(function(d) { - d3.select(this) - .call(d.render); - }); - - - notShown = notShown.map(function(field) { - return { - title: field.label(), - value: field.label(), - field: field - }; - }); - - - var more = selection.selectAll('.more-fields') - .data((notShown.length > 0) ? [0] : []); - - more.exit() - .remove(); - - more = more.enter() - .append('div') - .attr('class', 'more-fields') - .append('label') - .text(t('inspector.add_fields')) - .merge(more); - - - var input = more.selectAll('.value') - .data([0]); - - input.exit() - .remove(); - - input = input.enter() - .append('input') - .attr('class', 'value') - .attr('type', 'text') - .call(utilNoAuto) - .merge(input); - - input - .call(utilGetSetValue, '') - .attr('placeholder', function() { - var placeholder = []; - for (var field in notShown) { - placeholder.push(notShown[field].title); - } - return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : ''); - }) - .call(d3combobox() - .container(context.container()) - .data(notShown) - .minItems(1) - .on('accept', function (d) { - var field = d.field; - field.show = true; - render(selection); - field.focus(); - }) - ); + selection + .call(formFields.fieldsArr(fieldsArr)); if (initial) { - var commentField = d3.select('#preset-input-comment'), + var commentField = selection.select('#preset-input-comment'), commentNode = commentField.node(); if (commentNode) { @@ -175,7 +85,7 @@ export function uiChangesetEditor(context) { } var matches = tags.comment.match(/google/i); - var commentWarning = d3.select('.form-field-comment').selectAll('.comment-warning') + var commentWarning = selection.select('.form-field-comment').selectAll('.comment-warning') .data(matches ? [0] : []); commentWarning.exit() diff --git a/modules/ui/form_fields.js b/modules/ui/form_fields.js new file mode 100644 index 000000000..6606e28f0 --- /dev/null +++ b/modules/ui/form_fields.js @@ -0,0 +1,120 @@ +import * as d3 from 'd3'; +import { d3combobox } from '../lib/d3.combobox.js'; +import { t } from '../util/locale'; +import { utilGetSetValue, utilNoAuto } from '../util'; + + +export function uiFormFields(context) { + var fieldsArr; + + + function formFields(selection, klass) { + render(selection, klass); + } + + + function render(selection, klass) { + + var shown = fieldsArr.filter(function(field) { return field.isShown(); }), + notShown = fieldsArr.filter(function(field) { return !field.isShown(); }); + + var container = selection.selectAll('.form-fields-container') + .data([0]); + + container = container.enter() + .append('div') + .attr('class', 'form-fields-container ' + (klass || '')) + .merge(container); + + + var fields = container.selectAll('.wrap-form-field') + .data(shown, function(d) { return d.id; }); + + fields.exit() + .remove(); + + // Enter + var enter = fields.enter() + .append('div') + .attr('class', function(d) { return 'wrap-form-field wrap-form-field-' + d.id; }); + + // Update + fields = fields + .merge(enter); + + fields + .order() + .each(function(d) { + d3.select(this) + .call(d.render); + }); + + + notShown = notShown.map(function(field) { + return { + title: field.label(), + value: field.label(), + field: field + }; + }); + + + var more = selection.selectAll('.more-fields') + .data((notShown.length > 0) ? [0] : []); + + more.exit() + .remove(); + + more = more.enter() + .append('div') + .attr('class', 'more-fields') + .append('label') + .text(t('inspector.add_fields')) + .merge(more); + + + var input = more.selectAll('.value') + .data([0]); + + input.exit() + .remove(); + + input = input.enter() + .append('input') + .attr('class', 'value') + .attr('type', 'text') + .call(utilNoAuto) + .merge(input); + + input + .call(utilGetSetValue, '') + .attr('placeholder', function() { + var placeholder = []; + for (var field in notShown) { + placeholder.push(notShown[field].title); + } + return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : ''); + }) + .call(d3combobox() + .container(context.container()) + .data(notShown) + .minItems(1) + .on('accept', function (d) { + var field = d.field; + field.show = true; + render(selection); + field.focus(); + }) + ); + } + + + formFields.fieldsArr = function(_) { + if (!arguments.length) return fieldsArr; + fieldsArr = _; + return formFields; + }; + + + return formFields; +} diff --git a/modules/ui/index.js b/modules/ui/index.js index 6eaef95d5..742aa7b1c 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -18,6 +18,7 @@ export { uiFeatureInfo } from './feature_info'; export { uiFeatureList } from './feature_list'; export { uiField } from './field'; export { uiFlash } from './flash'; +export { uiFormFields } from './form_fields'; export { uiFullScreen } from './full_screen'; export { uiGeolocate } from './geolocate'; export { uiHelp } from './help'; diff --git a/modules/ui/preset_editor.js b/modules/ui/preset_editor.js index beeb67cc5..c597256c5 100644 --- a/modules/ui/preset_editor.js +++ b/modules/ui/preset_editor.js @@ -1,18 +1,15 @@ import * as d3 from 'd3'; -import { d3combobox } from '../lib/d3.combobox.js'; import { t } from '../util/locale'; import { modeBrowse } from '../modes'; import { uiDisclosure } from './disclosure'; import { uiField } from './field'; -import { - utilGetSetValue, - utilNoAuto, - utilRebind -} from '../util'; +import { uiFormFields } from './form_fields'; +import { utilRebind } from '../util'; export function uiPresetEditor(context) { var dispatch = d3.dispatch('change'), + formFields = uiFormFields(context), expandedPreference = (context.storage('preset_fields.expanded') !== 'false'), state, fieldsArr, @@ -80,106 +77,18 @@ export function uiPresetEditor(context) { .tags(tags); }); - var shown = fieldsArr.filter(function(field) { return field.isShown(); }), - notShown = fieldsArr.filter(function(field) { return !field.isShown(); }); + + selection + .call(formFields.fieldsArr(fieldsArr), 'inspector-inner fillL3'); - var form = selection.selectAll('.preset-form') - .data([0]); - - form = form.enter() - .append('div') - .attr('class', 'preset-form inspector-inner fillL3') - .merge(form); - - - var fields = form.selectAll('.wrap-form-field') - .data(shown, function(d) { return d.id; }); - - fields.exit() - .remove(); - - // Enter - var enter = fields.enter() - .append('div') - .attr('class', function(d) { return 'wrap-form-field wrap-form-field-' + d.id; }); - - // Update - fields = fields - .merge(enter); - - fields - .order() - .each(function(d) { - d3.select(this) - .call(d.render) - .selectAll('input') - .on('keydown', function() { - // if user presses enter, and combobox is not active, accept edits.. - if (d3.event.keyCode === 13 && d3.select('.combobox').empty()) { - context.enter(modeBrowse(context)); - } - }); - }); - - - notShown = notShown.map(function(field) { - return { - title: field.label(), - value: field.label(), - field: field - }; - }); - - - var more = selection.selectAll('.more-fields') - .data((notShown.length > 0) ? [0] : []); - - more.exit() - .remove(); - - more = more.enter() - .append('div') - .attr('class', 'more-fields') - .append('label') - .text(t('inspector.add_fields')) - .merge(more); - - - var input = more.selectAll('.value') - .data([0]); - - input.exit() - .remove(); - - input = input.enter() - .append('input') - .attr('class', 'value') - .attr('type', 'text') - .call(utilNoAuto) - .merge(input); - - input - .call(utilGetSetValue, '') - .attr('placeholder', function() { - var placeholder = []; - for (var field in notShown) { - placeholder.push(notShown[field].title); + selection.selectAll('.wrap-form-field input') + .on('keydown', function() { + // if user presses enter, and combobox is not active, accept edits.. + if (d3.event.keyCode === 13 && d3.select('.combobox').empty()) { + context.enter(modeBrowse(context)); } - return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : ''); - }) - .call(d3combobox() - .container(context.container()) - .data(notShown) - .minItems(1) - .on('accept', function (d) { - var field = d.field; - field.show = true; - render(selection); - field.focus(); - }) - ); - + }); }