CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-16 13:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor duplicate form-field code to uiFormFields

Browse Source
This commit is contained in:
Bryan Housel
2017-08-15 09:35:57 -04:00
parent ba3f823141
commit 7563f3ac16
5 changed files with 143 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+2 -2
View File
@@ -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;
}
modules/ui/changeset_editor.js
+8 -98
View File
@@ -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()
modules/ui/form_fields.js
+120
View File
@@ -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;
}
modules/ui/index.js
+1
View File
@@ -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';
modules/ui/preset_editor.js
+12 -103
View File
@@ -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();
})
);
});
}