mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-16 22:03:37 +02:00
Add options for fields, allow unwrapped fields (no label, buttons, etc)
This commit is contained in:
Bryan Housel
@@ -1056,6 +1056,7 @@ button.save.has-count .count::before {
|
||||
transition: margin-bottom 200ms;
|
||||
}
|
||||
|
||||
.form-field.nowrap,
|
||||
.wrap-form-field:last-child .form-field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+46
-34
@@ -7,7 +7,12 @@ import { uiTagReference } from './tag_reference';
|
||||
import { utilRebind } from '../util';
|
||||
|
||||
|
||||
export function uiField(context, presetField, entity, show) {
|
||||
export function uiField(context, presetField, entity, options) {
|
||||
options = _.extend({
|
||||
show: true,
|
||||
wrap: true
|
||||
}, options);
|
||||
|
||||
var dispatch = d3.dispatch('change'),
|
||||
field = _.clone(presetField),
|
||||
state = '',
|
||||
@@ -25,7 +30,7 @@ export function uiField(context, presetField, entity, show) {
|
||||
|
||||
field.keys = field.keys || [field.key];
|
||||
|
||||
field.show = show;
|
||||
field.show = options.show;
|
||||
|
||||
|
||||
function isModified() {
|
||||
@@ -77,31 +82,34 @@ export function uiField(context, presetField, entity, show) {
|
||||
// Enter
|
||||
var enter = container.enter()
|
||||
.append('div')
|
||||
.attr('class', function(d) { return 'form-field form-field-' + d.id; });
|
||||
.attr('class', function(d) { return 'form-field form-field-' + d.id; })
|
||||
.classed('nowrap', !options.wrap);
|
||||
|
||||
var label = enter
|
||||
.append('label')
|
||||
.attr('class', 'form-label')
|
||||
.attr('for', function(d) { return 'preset-input-' + d.id; })
|
||||
.text(function(d) { return d.label(); });
|
||||
if (options.wrap) {
|
||||
var label = enter
|
||||
.append('label')
|
||||
.attr('class', 'form-label')
|
||||
.attr('for', function(d) { return 'preset-input-' + d.id; })
|
||||
.text(function(d) { return d.label(); });
|
||||
|
||||
var wrap = label
|
||||
.append('div')
|
||||
.attr('class', 'form-label-button-wrap');
|
||||
var wrap = label
|
||||
.append('div')
|
||||
.attr('class', 'form-label-button-wrap');
|
||||
|
||||
wrap
|
||||
.append('button')
|
||||
.attr('class', 'remove-icon')
|
||||
.attr('tabindex', -1)
|
||||
.call(svgIcon('#operation-delete'));
|
||||
wrap
|
||||
.append('button')
|
||||
.attr('class', 'remove-icon')
|
||||
.attr('tabindex', -1)
|
||||
.call(svgIcon('#operation-delete'));
|
||||
|
||||
wrap
|
||||
.append('button')
|
||||
.attr('class', 'modified-icon')
|
||||
.attr('tabindex', -1)
|
||||
.call(
|
||||
(textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
|
||||
);
|
||||
wrap
|
||||
.append('button')
|
||||
.attr('class', 'modified-icon')
|
||||
.attr('tabindex', -1)
|
||||
.call(
|
||||
(textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Update
|
||||
@@ -118,23 +126,27 @@ export function uiField(context, presetField, entity, show) {
|
||||
.classed('modified', isModified())
|
||||
.classed('present', isPresent())
|
||||
.each(function(d) {
|
||||
var referenceKey = d.key;
|
||||
if (d.type === 'multiCombo') { // lookup key without the trailing ':'
|
||||
referenceKey = referenceKey.replace(/:$/, '');
|
||||
}
|
||||
var reference = uiTagReference(d.reference || { key: referenceKey }, context);
|
||||
if (options.wrap) {
|
||||
var referenceKey = d.key;
|
||||
if (d.type === 'multiCombo') { // lookup key without the trailing ':'
|
||||
referenceKey = referenceKey.replace(/:$/, '');
|
||||
}
|
||||
var reference = uiTagReference(d.reference || { key: referenceKey }, context);
|
||||
|
||||
if (state === 'hover') {
|
||||
reference.showing(false);
|
||||
if (state === 'hover') {
|
||||
reference.showing(false);
|
||||
}
|
||||
}
|
||||
|
||||
d3.select(this)
|
||||
.call(d.impl);
|
||||
|
||||
d3.select(this)
|
||||
.call(reference.body)
|
||||
.select('.form-label-button-wrap')
|
||||
.call(reference.button);
|
||||
if (options.wrap) {
|
||||
d3.select(this)
|
||||
.call(reference.body)
|
||||
.select('.form-label-button-wrap')
|
||||
.call(reference.button);
|
||||
}
|
||||
|
||||
d.impl.tags(tags);
|
||||
});
|
||||
|
||||
+19
-68
@@ -121,12 +121,12 @@ export function uiFieldRadio(field, context) {
|
||||
.attr('class', 'structure-extras-wrap')
|
||||
.merge(extrasWrap);
|
||||
|
||||
// var list = extrasWrap.selectAll('ul')
|
||||
// .data([0]);
|
||||
var list = extrasWrap.selectAll('ul')
|
||||
.data([0]);
|
||||
|
||||
// list = list.enter()
|
||||
// .append('ul')
|
||||
// .merge(list);
|
||||
list = list.enter()
|
||||
.append('ul')
|
||||
.merge(list);
|
||||
|
||||
|
||||
// // Type
|
||||
@@ -174,14 +174,14 @@ export function uiFieldRadio(field, context) {
|
||||
var showLayer = (selected === 'bridge' || selected === 'tunnel');
|
||||
if (!layerField) {
|
||||
var field = context.presets().field('layer');
|
||||
layerField = uiField(context, field, entity, true)
|
||||
layerField = uiField(context, field, entity, { wrap: false })
|
||||
.on('change', changeLayer);
|
||||
}
|
||||
|
||||
layerField.tags(tags);
|
||||
|
||||
|
||||
var layerItem = extrasWrap.selectAll('.structure-layer-item')
|
||||
var layerItem = list.selectAll('.structure-layer-item')
|
||||
.data(layerField && showLayer ? [0] : []);
|
||||
|
||||
// Exit
|
||||
@@ -190,73 +190,26 @@ export function uiFieldRadio(field, context) {
|
||||
|
||||
// Enter
|
||||
var layerEnter = layerItem.enter()
|
||||
.append('div')
|
||||
.append('li')
|
||||
.attr('class', 'cf structure-layer-item');
|
||||
|
||||
layerEnter
|
||||
.append('span')
|
||||
.attr('class', 'col6 label structure-label-layer')
|
||||
.attr('for', 'preset-input-layer')
|
||||
.text(t('inspector.radio.structure.layer'));
|
||||
|
||||
layerEnter
|
||||
.append('div')
|
||||
.attr('class', 'col6 structure-input-layer-wrap');
|
||||
|
||||
// Update
|
||||
layerItem = layerItem
|
||||
.merge(layerEnter);
|
||||
|
||||
layerItem
|
||||
layerItem.selectAll('.structure-input-layer-wrap')
|
||||
.call(layerField.render);
|
||||
|
||||
|
||||
// var layerItem = list.selectAll('.structure-layer-item')
|
||||
// .data(showLayer ? [0] : []);
|
||||
|
||||
// layerItem.exit()
|
||||
// .remove();
|
||||
|
||||
// var layerEnter = layerItem.enter()
|
||||
// .append('li')
|
||||
// .attr('class', 'cf structure-layer-item');
|
||||
|
||||
// layerEnter
|
||||
// .append('span')
|
||||
// .attr('class', 'col6 label structure-label-layer')
|
||||
// .attr('for', 'structure-input-layer')
|
||||
// .text(t('inspector.radio.structure.layer'));
|
||||
|
||||
// layerEnter
|
||||
// .append('div')
|
||||
// .attr('class', 'col6 structure-input-layer-wrap')
|
||||
// .append('input')
|
||||
// .attr('type', 'text')
|
||||
// .attr('class', 'structure-input-layer')
|
||||
// .attr('placeholder', '0')
|
||||
// .call(utilNoAuto);
|
||||
|
||||
// var spin = layerEnter
|
||||
// .append('div')
|
||||
// .attr('class', 'spin-control');
|
||||
|
||||
// spin
|
||||
// .append('button')
|
||||
// .datum(-1)
|
||||
// .attr('class', 'decrement')
|
||||
// .attr('tabindex', -1);
|
||||
|
||||
// spin
|
||||
// .append('button')
|
||||
// .datum(1)
|
||||
// .attr('class', 'increment')
|
||||
// .attr('tabindex', -1);
|
||||
|
||||
// layerItem = layerItem
|
||||
// .merge(layerEnter);
|
||||
|
||||
// layerInput = layerItem.selectAll('.structure-input-layer')
|
||||
// .on('change', changeLayer)
|
||||
// .on('blur', changeLayer);
|
||||
|
||||
// layerItem.selectAll('button')
|
||||
// .on('click', function(d) {
|
||||
// d3.event.preventDefault();
|
||||
// var num = parseInt(layerInput.node().value || 0, 10);
|
||||
// if (!isNaN(num)) layerInput.node().value = num + d;
|
||||
// changeLayer();
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -292,8 +245,6 @@ export function uiFieldRadio(field, context) {
|
||||
|
||||
|
||||
function changeLayer(t, onInput) {
|
||||
// note: don't use utilGetSetValue here because we want 0 to be falsy.
|
||||
// var t = { layer: layerInput.node().value || undefined };
|
||||
if (t.layer === '0') {
|
||||
t.layer = undefined;
|
||||
}
|
||||
|
||||
@@ -47,21 +47,21 @@ export function uiPresetEditor(context) {
|
||||
preset.fields.forEach(function(field) {
|
||||
if (field.matchGeometry(geometry)) {
|
||||
fieldsArr.push(
|
||||
uiField(context, field, entity, true)
|
||||
uiField(context, field, entity)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
if (entity.isHighwayIntersection(context.graph()) && presets.field('restrictions')) {
|
||||
fieldsArr.push(
|
||||
uiField(context, presets.field('restrictions'), entity, true)
|
||||
uiField(context, presets.field('restrictions'), entity)
|
||||
);
|
||||
}
|
||||
|
||||
presets.universal().forEach(function(field) {
|
||||
if (preset.fields.indexOf(field) === -1) {
|
||||
fieldsArr.push(
|
||||
uiField(context, field, entity, false)
|
||||
uiField(context, field, entity, { show: false })
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user