Refactor duplicate form-field code to uiFormFields

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()