Added roadheight field with unit dropdowns

css/80_app.css

@@ -1885,25 +1885,36 @@ a.hide-toggle {
 }
 
 
-/* Field - roadspeed
+/* Field - roadheight and roadspeed
 ------------------------------------------------------- */
+.form-field-input-roadheight input.roadheight-number,
+.form-field-input-roadheight input.roadheight-secondary-number,
 .form-field-input-roadspeed input.roadspeed-number {
     flex-basis: 0;
 }
+.form-field-input-roadheight input.roadheight-unit,
+.form-field-input-roadheight input.roadheight-secondary-unit {
+    flex: 0 1 auto;
+    width: 60px;
+}
 .form-field-input-roadspeed input.roadspeed-unit {
     flex: 0 1 auto;
     width: 80px;
 }
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
     border-radius: 0 0 0 4px;
 }
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
     border-radius: 0 0 4px 0;
 }
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
     border-left: 0;
     border-radius: 0 0 4px 0;
 }
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
     border-right: 0;
     border-radius: 0 0 0 4px;

data/core.yaml

@@ -764,6 +764,13 @@ en:
       network_ref_direction: "{network} {ref} {direction}"
       network_ref_from_to: "{network} {ref} from {from} to {to}"
       network_ref_from_to_via: "{network} {ref} from {from} to {to} via {via}"
+    roadheight:
+      # symbol for meters
+      meter: m
+      # abbreviation of feet
+      foot: ft
+      # abbreviation of inches
+      inch: in
   background:
     title: Background
     description: Background Settings

modules/ui/fields/index.js

@@ -6,6 +6,7 @@ export * from './address';
 export * from './cycleway';
 export * from './lanes';
 export * from './localized';
+export * from './roadheight';
 export * from './roadspeed';
 export * from './radio';
 export * from './restrictions';
@@ -47,6 +48,7 @@ import { uiFieldAddress } from './address';
 import { uiFieldCycleway } from './cycleway';
 import { uiFieldLanes } from './lanes';
 import { uiFieldLocalized } from './localized';
+import { uiFieldRoadheight } from './roadheight';
 import { uiFieldRoadspeed } from './roadspeed';
 import { uiFieldRestrictions } from './restrictions';
 import { uiFieldTextarea } from './textarea';
@@ -64,8 +66,8 @@ export var uiFields = {
     identifier: uiFieldIdentifier,
     lanes: uiFieldLanes,
     localized: uiFieldLocalized,
+    roadheight: uiFieldRoadheight,
     roadspeed: uiFieldRoadspeed,
-    roadheight: uiFieldText,
     manyCombo: uiFieldManyCombo,
     multiCombo: uiFieldMultiCombo,
     networkCombo: uiFieldNetworkCombo,

modules/ui/fields/input.js

@@ -75,7 +75,7 @@ export function uiFieldText(field, context) {
 
         input = input.enter()
             .append('input')
-            .attr('type', field.type === 'identifier' || field.type === 'roadheight' ? 'text' : field.type)
+            .attr('type', field.type === 'identifier' ? 'text' : field.type)
             .attr('id', field.domId)
             .classed(field.type, true)
             .call(utilNoAuto)

modules/ui/fields/roadheight.js

@@ -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 uiFieldRoadheight(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.roadheight.meter'),
+        },
+        {
+            value: 'ft',
+            title: t('inspector.roadheight.foot'),
+        },
+    ];
+
+    var unitCombo = uiCombobox(context, 'roadheight-unit')
+        .data(primaryUnits);
+
+    function roadheight(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.roadheight-number')
+            .data([0]);
+
+        primaryInput = primaryInput.enter()
+            .append('input')
+            .attr('type', 'text')
+            .attr('class', 'roadheight-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.roadheight-unit')
+            .data([0]);
+
+        primaryUnitInput = primaryUnitInput.enter()
+            .append('input')
+            .attr('type', 'text')
+            .attr('class', 'roadheight-unit')
+            .call(unitCombo)
+            .merge(primaryUnitInput);
+
+        primaryUnitInput
+            .on('blur', changeUnits)
+            .on('change', changeUnits);
+
+        secondaryInput = wrap.selectAll('input.roadheight-secondary-number')
+            .data([0]);
+
+        secondaryInput = secondaryInput.enter()
+            .append('input')
+            .attr('type', 'text')
+            .attr('class', 'roadheight-secondary-number')
+            .call(utilNoAuto)
+            .merge(secondaryInput);
+
+        secondaryInput
+            .on('change', change)
+            .on('blur', change);
+
+        secondaryUnitInput = wrap.selectAll('input.roadheight-secondary-unit')
+            .data([0]);
+        secondaryUnitInput = secondaryUnitInput.enter()
+            .append('input')
+            .attr('type', 'text')
+            .call(utilNoAuto)
+            .classed('disabled', true)
+            .classed('roadheight-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);
+    }
+
+
+    roadheight.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.roadheight.inch') : null);
+    };
+
+
+    roadheight.focus = function() {
+        primaryInput.node().focus();
+    };
+
+
+    roadheight.entityIDs = function(val) {
+        _entityIDs = val;
+    };
+
+
+    function combinedEntityExtent() {
+        return _entityIDs && _entityIDs.length && utilTotalExtent(_entityIDs, context.graph());
+    }
+
+
+    return utilRebind(roadheight, dispatch, 'on');
+}