Skip to content

Commit

Permalink
Added unit dropdowns to maxheight field
Browse files Browse the repository at this point in the history
  • Loading branch information
1ec5 committed Oct 12, 2020
1 parent bb56584 commit ad8903e
Show file tree
Hide file tree
Showing 9 changed files with 232 additions and 8 deletions.
13 changes: 12 additions & 1 deletion css/80_app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1831,25 +1831,36 @@ a.hide-toggle {
}


/* Field - Maxspeed
/* Field - Maxheight and Maxspeed
------------------------------------------------------- */
.form-field-input-maxheight input.maxheight-number,
.form-field-input-maxheight input.maxheight-secondary-number,
.form-field-input-maxspeed input.maxspeed-number {
flex-basis: 0;
}
.form-field-input-maxheight input.maxheight-unit,
.form-field-input-maxheight input.maxheight-secondary-unit {
flex: 0 1 auto;
width: 60px;
}
.form-field-input-maxspeed input.maxspeed-unit {
flex: 0 1 auto;
width: 80px;
}
.ideditor[dir='ltr'] .form-field-input-maxheight > input:first-of-type,
.ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type {
border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-maxheight > input:first-of-type,
.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
border-radius: 0 0 4px 0;
}
.ideditor[dir='ltr'] .form-field-input-maxheight > input:last-of-type,
.ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type {
border-left: 0;
border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .form-field-input-maxheight > input:last-of-type,
.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
border-right: 0;
border-radius: 0 0 0 4px;
Expand Down
4 changes: 4 additions & 0 deletions data/core.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -724,6 +724,10 @@ en:
add_fields: "Add field:"
lock:
suggestion: 'The "{label}" field is locked because there is a Wikidata tag. You can delete it or edit the tags in the "Tags" section.'
maxheight:
meter: m
foot: ft
inch: in
background:
title: Background
description: Background Settings
Expand Down
2 changes: 0 additions & 2 deletions data/presets.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1436,8 +1436,6 @@ en:
maxheight:
# maxheight=*
label: Max Height
# maxheight field placeholder
placeholder: '4, 4.5, 5, 14''0", 14''6", 15''0"'
terms: '[translate with synonyms or related terms for ''Max Height'', separated by commas]'
maxspeed:
# maxspeed=*
Expand Down
2 changes: 1 addition & 1 deletion data/presets/fields.json
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@
"marker": {"key": "marker", "type": "typeCombo", "label": "Type"},
"material": {"key": "material", "type": "combo", "label": "Material"},
"max_age": {"key": "max_age", "type": "number", "minValue": 0, "label": "Maximum Age", "terms": ["upper age limit"]},
"maxheight": {"key": "maxheight", "type": "combo", "label": "Max Height", "placeholder": "4, 4.5, 5, 14'0\", 14'6\", 15'0\"", "snake_case": false},
"maxheight": {"key": "maxheight", "type": "maxheight", "label": "Max Height", "snake_case": false},
"maxspeed": {"key": "maxspeed", "type": "maxspeed", "label": "Speed Limit", "placeholder": "40, 50, 60..."},
"maxspeed/advisory": {"key": "maxspeed:advisory", "type": "maxspeed", "label": "Advisory Speed Limit", "placeholder": "40, 50, 60..."},
"maxstay": {"key": "maxstay", "type": "combo", "label": "Max Stay", "options": ["15 min", "30 min", "45 min", "1 hr", "1.5 hr", "2 hr", "2.5 hr", "3 hr", "4 hr", "1 day", "2 day"], "snake_case": false},
Expand Down
3 changes: 1 addition & 2 deletions data/presets/fields/maxheight.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"key": "maxheight",
"type": "combo",
"type": "maxheight",
"label": "Max Height",
"placeholder": "4, 4.5, 5, 14'0\", 14'6\", 15'0\"",
"snake_case": false
}
1 change: 1 addition & 0 deletions data/presets/schema/field.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"identifier",
"localized",
"manyCombo",
"maxheight",
"maxspeed",
"multiCombo",
"networkCombo",
Expand Down
15 changes: 13 additions & 2 deletions dist/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -928,6 +928,11 @@
"add_fields": "Add field:",
"lock": {
"suggestion": "The \"{label}\" field is locked because there is a Wikidata tag. You can delete it or edit the tags in the \"Tags\" section."
},
"maxheight": {
"meter": "m",
"foot": "ft",
"inch": "in"
}
},
"background": {
Expand Down Expand Up @@ -4130,8 +4135,7 @@
},
"maxheight": {
"label": "Max Height",
"terms": "",
"placeholder": "4, 4.5, 5, 14'0\", 14'6\", 15'0\""
"terms": ""
},
"maxspeed": {
"label": "Speed Limit",
Expand Down Expand Up @@ -11142,6 +11146,13 @@
"description": "Orthophotos from the municipality of Stockholm 2016, CC0 license",
"name": "Stockholm Orthophoto"
},
"susono_shizuoka_jp_orthophoto": {
"attribution": {
"text": "Susono city orthophoto"
},
"description": "The aerial photos released by Susono City as open data.",
"name": "Susono city orthophoto"
},
"tf-cycle": {
"attribution": {
"text": "Maps © Thunderforest, Data © OpenStreetMap contributors"
Expand Down
3 changes: 3 additions & 0 deletions modules/ui/fields/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './address';
export * from './cycleway';
export * from './lanes';
export * from './localized';
export * from './maxheight';
export * from './maxspeed';
export * from './radio';
export * from './restrictions';
Expand Down Expand Up @@ -47,6 +48,7 @@ import { uiFieldAddress } from './address';
import { uiFieldCycleway } from './cycleway';
import { uiFieldLanes } from './lanes';
import { uiFieldLocalized } from './localized';
import { uiFieldMaxheight } from './maxheight';
import { uiFieldMaxspeed } from './maxspeed';
import { uiFieldRestrictions } from './restrictions';
import { uiFieldTextarea } from './textarea';
Expand All @@ -64,6 +66,7 @@ export var uiFields = {
identifier: uiFieldIdentifier,
lanes: uiFieldLanes,
localized: uiFieldLocalized,
maxheight: uiFieldMaxheight,
maxspeed: uiFieldMaxspeed,
manyCombo: uiFieldManyCombo,
multiCombo: uiFieldMultiCombo,
Expand Down
197 changes: 197 additions & 0 deletions modules/ui/fields/maxheight.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { dispatch as d3_dispatch } from 'd3-dispatch';
import { select as d3_select } from 'd3-selection';
import * as countryCoder from '@ideditor/country-coder';

import { uiCombobox } from '../combobox';
import { t } from '../../core/localizer';
import { utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util';


export function uiFieldMaxheight(field, context) {
var dispatch = d3_dispatch('change');
var primaryUnitInput = d3_select(null);
var primaryInput = d3_select(null);
var secondaryInput = d3_select(null);
var secondaryUnitInput = d3_select(null);
var _entityIDs = [];
var _tags;
var _isImperial;

var primaryUnits = [
{
value: 'm',
title: t('inspector.maxheight.meter'),
},
{
value: 'ft',
title: t('inspector.maxheight.foot'),
},
];

var unitCombo = uiCombobox(context, 'maxheight-unit')
.data(primaryUnits);

function maxheight(selection) {

var wrap = selection.selectAll('.form-field-input-wrap')
.data([0]);

wrap = wrap.enter()
.append('div')
.attr('class', 'form-field-input-wrap form-field-input-' + field.type)
.merge(wrap);


primaryInput = wrap.selectAll('input.maxheight-number')
.data([0]);

primaryInput = primaryInput.enter()
.append('input')
.attr('type', 'text')
.attr('class', 'maxheight-number')
.attr('id', field.domId)
.call(utilNoAuto)
.merge(primaryInput);

primaryInput
.on('change', change)
.on('blur', change);

var loc = combinedEntityExtent().center();
_isImperial = countryCoder.roadHeightUnit(loc) === 'ft';

primaryUnitInput = wrap.selectAll('input.maxheight-unit')
.data([0]);

primaryUnitInput = primaryUnitInput.enter()
.append('input')
.attr('type', 'text')
.attr('class', 'maxheight-unit')
.call(unitCombo)
.merge(primaryUnitInput);

primaryUnitInput
.on('blur', changeUnits)
.on('change', changeUnits);

secondaryInput = wrap.selectAll('input.maxheight-secondary-number')
.data([0]);

secondaryInput = secondaryInput.enter()
.append('input')
.attr('type', 'text')
.attr('class', 'maxheight-secondary-number')
.call(utilNoAuto)
.merge(secondaryInput);

secondaryInput
.on('change', change)
.on('blur', change);

secondaryUnitInput = wrap.selectAll('input.maxheight-secondary-unit')
.data([0]);
secondaryUnitInput = secondaryUnitInput.enter()
.append('input')
.attr('type', 'text')
.call(utilNoAuto)
.classed('disabled', true)
.classed('maxheight-secondary-unit', true)
.attr('readonly', 'readonly')
.merge(secondaryUnitInput);


function changeUnits() {
_isImperial = utilGetSetValue(primaryUnitInput) === 'ft';
utilGetSetValue(primaryUnitInput, _isImperial ? 'ft' : 'm');
setUnitSuggestions();
change();
}
}


function setUnitSuggestions() {
utilGetSetValue(primaryUnitInput, _isImperial ? 'ft' : 'm');
}


function change() {
var tag = {};
var primaryValue = utilGetSetValue(primaryInput).trim();
var secondaryValue = utilGetSetValue(secondaryInput).trim();

// don't override multiple values with blank string
if (!primaryValue && !secondaryValue && Array.isArray(_tags[field.key])) return;

if (!primaryValue && !secondaryValue) {
tag[field.key] = undefined;
} else if (isNaN(primaryValue) || isNaN(secondaryValue) || !_isImperial) {
tag[field.key] = context.cleanTagValue(primaryValue);
} else {
if (primaryValue !== '') {
primaryValue = context.cleanTagValue(primaryValue + '\'');
}
if (secondaryValue !== '') {
secondaryValue = context.cleanTagValue(secondaryValue + '"');
}
tag[field.key] = primaryValue + secondaryValue;
}

dispatch.call('change', this, tag);
}


maxheight.tags = function(tags) {
_tags = tags;

var primaryValue = tags[field.key];
var secondaryValue;
var isMixed = Array.isArray(primaryValue);

if (!isMixed) {
if (primaryValue && (primaryValue.indexOf('\'') >= 0 || primaryValue.indexOf('"') >= 0)) {
secondaryValue = primaryValue.match(/(-?[\d.]+)"/);
if (secondaryValue !== null) {
secondaryValue = secondaryValue[1];
}
primaryValue = primaryValue.match(/(-?[\d.]+)'/);
if (primaryValue !== null) {
primaryValue = primaryValue[1];
}
_isImperial = true;
} else if (primaryValue) {
_isImperial = false;
}
}

setUnitSuggestions();

utilGetSetValue(primaryInput, typeof primaryValue === 'string' ? primaryValue : '')
.attr('title', isMixed ? primaryValue.filter(Boolean).join('\n') : null)
.attr('placeholder', isMixed ? t('inspector.multiple_values') : field.placeholder())
.classed('mixed', isMixed);
utilGetSetValue(secondaryInput, typeof secondaryValue === 'string' ? secondaryValue : '')
.attr('placeholder', isMixed ? t('inspector.multiple_values') : (_isImperial ? field.placeholder() : null))
.classed('mixed', isMixed)
.classed('disabled', !_isImperial)
.attr('readonly', _isImperial ? null : 'readonly');
secondaryUnitInput.attr('value', _isImperial ? t('inspector.maxheight.inch') : null);
};


maxheight.focus = function() {
primaryInput.node().focus();
};


maxheight.entityIDs = function(val) {
_entityIDs = val;
};


function combinedEntityExtent() {
return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph());
}


return utilRebind(maxheight, dispatch, 'on');
}

0 comments on commit ad8903e

Please sign in to comment.