add preview for colour input

Author: k-yle

css/80_app.css

@@ -1505,6 +1505,15 @@ a.hide-toggle {
     fill: #333;
     opacity: .5;
 }
+.form-field-button.colour-preview {
+    background-color: #fff;
+    border-radius: 0 0 4px 0;
+}
+.form-field-button.colour-preview > div {
+    border: 3px solid #fff;
+    height: 100%;
+    border-radius: 8px;
+}
 
 
 /* round corners of first/last child elements */
@@ -1703,12 +1712,13 @@ a.hide-toggle {
 
 /* Field - Text / Numeric
 ------------------------------------------------------- */
-.form-field-input-text > input:only-of-type,
+.form-field-input-text > input:only-child,
 .form-field-input-tel > input:only-of-type,
 .form-field-input-email > input:only-of-type,
 .form-field-input-url > input:only-child {
     border-radius: 0 0 4px 4px;
 }
+.form-field-input-text > input:not(:only-child),
 .form-field-input-url > input:not(:only-child) {
     border-radius: 0 0 0 4px;
 }

modules/ui/fields/address.js

@@ -288,7 +288,7 @@ export function uiFieldAddress(field, context) {
             })
             .attr('title', function(subfield) {
                 var val = tags[field.key + ':' + subfield.id];
-                return val && Array.isArray(val) && val.filter(Boolean).join('\n');
+                return (val && Array.isArray(val)) ? val.filter(Boolean).join('\n') : undefined;
             })
             .classed('mixed', function(subfield) {
                 return Array.isArray(tags[field.key + ':' + subfield.id]);

modules/ui/fields/input.js

@@ -21,6 +21,7 @@ export function uiFieldText(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
     var outlinkButton = d3_select(null);
+    var wrap = d3_select(null);
     var _entityIDs = [];
     var _tags;
     var _phoneFormats = {};
@@ -62,7 +63,7 @@ export function uiFieldText(field, context) {
         calcLocked();
         var isLocked = field.locked();
 
-        var wrap = selection.selectAll('.form-field-input-wrap')
+        wrap = selection.selectAll('.form-field-input-wrap')
             .data([0]);
 
         wrap = wrap.enter()
@@ -167,9 +168,37 @@ export function uiFieldText(field, context) {
                     if (value) window.open(value, '_blank');
                 })
                 .merge(outlinkButton);
+        } else if (field.key.includes('colour')) {
+            input.attr('type', 'text');
+
+            updateColourPreview();
         }
     }
 
+    function updateColourPreview() {
+        wrap.selectAll('.foreign-id-permalink')
+            .remove();
+
+        const colour = utilGetSetValue(input);
+
+        // see https://github.com/openstreetmap/openstreetmap-website/blob/08e2a0/app/helpers/browse_tags_helper.rb#L173
+        // we use the same logic to validate colours, except we don't need to check whether named colours
+        // are valid, since the browser does this natively when we set the background-colour
+        const isColourValid = !!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/);
+        if (!isColourValid) return;
+
+        outlinkButton = wrap.selectAll('.foreign-id-permalink')
+            .data([colour], d => d);
+
+        outlinkButton
+            .enter()
+            .append('div')
+            .attr('class', 'form-field-button foreign-id-permalink colour-preview')
+            .append('div')
+            .style('background-color', d => d)
+            .merge(outlinkButton);
+    }
+
 
     function updatePhonePlaceholder() {
         if (input.empty() || !Object.keys(_phoneFormats).length) return;
@@ -247,6 +276,8 @@ export function uiFieldText(field, context) {
             .attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
             .classed('mixed', isMixed);
 
+        if (field.key.includes('colour')) updateColourPreview();
+
         if (outlinkButton && !outlinkButton.empty()) {
             var disabled = !validIdentifierValueForLink();
             outlinkButton.classed('disabled', disabled);

modules/util/get_set_value.js

@@ -1,5 +1,6 @@
 // Like selection.property('value', ...), but avoids no-op value sets,
 // which can result in layout/repaint thrashing in some situations.
+/** @returns {string} */
 export function utilGetSetValue(selection, value) {
     function d3_selection_value(value) {
         function valueNull() {