Show icons depicting the different values of the crossing:markings …

…field

for openstreetmap/id-tagging-schema#590

CHANGELOG.md

@@ -61,6 +61,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
   * Add new field type `colour` ([schema-builder#38], [#8782])
   * Add ability to reference strings of other presets/fields
 * Render `natural=strait` features in blue color ([#9294])
+* Show icons depicting the different values of the `crossing:markings` field
 #### :hammer: Development
 * Synchronize fetching of released presets files
 * Make settings like CDN and API urls configurable in a central config file (`/config/is.js`)

css/80_app.css

@@ -1735,6 +1735,37 @@ a.hide-toggle {
     width: auto;
 }
 
+.form-field-input-combo .tag-value-icon {
+    display: inline-block;
+    position: relative;
+    height: 24px;
+    width: 30px;
+    margin-right: -30px;
+    align-self: center;
+    vertical-align: middle;
+    z-index: 1;
+    text-align: center;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon {
+    margin-right: 0;
+    margin-left: -30px;
+}
+.tag-value-icon .icon {
+    width: 11px;
+    height: 17px;
+    margin: auto;
+}
+.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input {
+    padding-left: 30px;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input {
+    padding-right: 30px;
+}
+.combobox-option .tag-value-icon {
+    display: inline-block;
+    width: 18px;
+}
+
 
 /* Field - Text / Numeric
 ------------------------------------------------------- */

modules/ui/fields/combo.js

@@ -8,6 +8,7 @@ import { osmEntity } from '../../osm/entity';
 import { t } from '../../core/localizer';
 import { services } from '../../services';
 import { uiCombobox } from '../combobox';
+import { svgIcon } from '../../svg/icon';
 
 import { utilKeybinding } from '../../util/keybinding';
 import { utilArrayUniq, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent, utilUnicodeCharsCount } from '../../util';
@@ -20,6 +21,22 @@ export {
     uiFieldCombo as uiFieldTypeCombo
 };
 
+const valueIcons = {
+    'crossing:markings': [
+        'dashes',
+        'dots',
+        'ladder:paired',
+        'ladder:skewed',
+        'ladder',
+        'lines:paired',
+        'lines',
+        'surface',
+        'zebra:bicolour',
+        'zebra:double',
+        'zebra:paired',
+        'zebra',
+    ]
+};
 
 export function uiFieldCombo(field, context) {
     var dispatch = d3_dispatch('change');
@@ -165,7 +182,7 @@ export function uiFieldCombo(field, context) {
                 key: v,
                 value: stringsField.t('options.' + v, { default: v }),
                 title: v,
-                display: stringsField.t.append('options.' + v, { default: v }),
+                display: beautifyDisplay(stringsField.t.append('options.' + v, { default: v }), v),
                 klass: stringsField.hasTextForStringId('options.' + v) ? '' : 'raw-option'
             };
         });
@@ -244,7 +261,7 @@ export function uiFieldCombo(field, context) {
                 return {
                     key: k,
                     value: label,
-                    display: stringsField.t.append('options.' + k, { default: k }),
+                    display: beautifyDisplay(stringsField.t.append('options.' + k, { default: k }), k),
                     title: isLocalizable ? k : (d.title !== label ? d.title : ''),
                     klass: isLocalizable ? '' : 'raw-option'
                 };
@@ -257,6 +274,20 @@ export function uiFieldCombo(field, context) {
         });
     }
 
+    // adds icons to tag values which have one
+    function beautifyDisplay(disp, value) {
+        if (valueIcons[field.key] && valueIcons[field.key].indexOf(value) !== -1) {
+            return function(selection) {
+                selection
+                    .insert('span', ':first-child')
+                    .attr('class', 'tag-value-icon')
+                    .call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_')));
+                disp.call(this, selection);
+            };
+        }
+        return disp;
+    }
+
 
     function setPlaceholder(values) {
 
@@ -626,6 +657,21 @@ export function uiFieldCombo(field, context) {
                         dispatch.call('change', this, t);
                     }
                 });
+
+            if (valueIcons[field.key]) {
+                _container.selectAll('.tag-value-icon').remove();
+                var value = tags[field.key];
+                if (valueIcons[field.key].indexOf(value) !== -1) {
+                    var iconSelector = _container.selectAll('.tag-value-icon')
+                        .data([value]);
+
+                    iconSelector
+                        .enter()
+                        .insert('div', 'input')
+                        .attr('class', 'tag-value-icon')
+                        .call(svgIcon('#iD-crossing_markings-' + value.replace(':', '_')));
+                }
+            }
         }
     };