From e4008b422985fa3b6334d3afb496ff1827684ac5 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Wed, 1 Dec 2021 11:14:32 +0100
Subject: [PATCH] show native colour picker when clicking on colour preview

further tweaks:
* hide the box on invalid colours
* only affect field with a tag key that included "colour" separated by ":"
---
 css/80_app.css             | 26 ++++++++++++++++---
 modules/ui/fields/input.js | 53 +++++++++++++++++++++++++++++---------
 2 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 83a336655..cb3449c41 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -189,7 +189,8 @@ input[type=number],
 input[type=url],
 input[type=tel],
 input[type=email],
-input[type=date] {
+input[type=date],
+input[type=color] {
     /* need this since line-height interpretation may vary by font or browser */
     height: 2.585em;
 }
@@ -1506,13 +1507,32 @@ a.hide-toggle {
     opacity: .5;
 }
 .form-field-button.colour-preview {
-    background-color: #fff;
     border-radius: 0 0 4px 0;
 }
-.form-field-button.colour-preview > div {
+.form-field-button.colour-preview > div.colour-box {
     border: 3px solid #fff;
     height: 100%;
     border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 20px;
+    padding: 1px 0 0 1px;
+}
+.inspector-hover .form-field-button.colour-preview > div.colour-box {
+    border-color: #ececec;
+}
+.form-field-button.colour-preview:active > div.colour-box,
+.form-field-button.colour-preview:focus > div.colour-box {
+    border-color: #f1f1f1;
+}
+@media (hover: hover) {
+    .form-field-button.colour-preview:hover > div.colour-box {
+        border-color: #f1f1f1;
+    }
+}
+.form-field-button.colour-selector {
+    visibility: hidden;
+    position: absolute;
 }
 
 
diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js
index 099be53ae..7ce6513f9 100644
--- a/modules/ui/fields/input.js
+++ b/modules/ui/fields/input.js
@@ -1,5 +1,6 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
+import _debounce from 'lodash-es/debounce';
 import * as countryCoder from '@ideditor/country-coder';
 
 import { presetManager } from '../../presets';
@@ -168,34 +169,62 @@ export function uiFieldText(field, context) {
                     if (value) window.open(value, '_blank');
                 })
                 .merge(outlinkButton);
-        } else if (field.key.includes('colour')) {
+        } else if (field.key.split(':').includes('colour')) {
             input.attr('type', 'text');
 
             updateColourPreview();
         }
     }
 
+    function isColourValid(colour) {
+        if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
+            // OSM only supports hex or named colors
+            return false;
+        } else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
+            // see https://stackoverflow.com/a/68217760/1627467
+            return false;
+        }
+        return true;
+    }
     function updateColourPreview() {
-        wrap.selectAll('.foreign-id-permalink')
+        wrap.selectAll('.colour-preview')
             .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;
+        if (!isColourValid(colour) && colour !== '') return;
 
-        outlinkButton = wrap.selectAll('.foreign-id-permalink')
-            .data([colour], d => d);
+        var colourSelector = wrap.selectAll('.colour-selector')
+            .data([0]);
+        outlinkButton = wrap.selectAll('.colour-preview')
+            .data([colour]);
 
-        outlinkButton
+        colourSelector
+            .enter()
+            .append('input')
+            .attr('type', 'color')
+            .attr('class', 'form-field-button colour-selector')
+            .attr('value', colour)
+            .on('input', _debounce(function(d3_event) {
+                d3_event.preventDefault();
+                var colour = this.value;
+                if (!isColourValid(colour)) return;
+                utilGetSetValue(input, this.value);
+                change()();
+                updateColourPreview();
+            }, 100));
+
+        outlinkButton = outlinkButton
             .enter()
             .append('div')
-            .attr('class', 'form-field-button foreign-id-permalink colour-preview')
+            .attr('class', 'form-field-button colour-preview')
             .append('div')
             .style('background-color', d => d)
+            .attr('class', 'colour-box');
+        if (colour === '') outlinkButton = outlinkButton
+            .call(svgIcon('#iD-icon-edit'));
+        outlinkButton
+            .on('click', () => wrap.select('.colour-selector').node().click())
             .merge(outlinkButton);
     }
 
@@ -276,7 +305,7 @@ 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 (field.key.split(':').includes('colour')) updateColourPreview();
 
         if (outlinkButton && !outlinkButton.empty()) {
             var disabled = !validIdentifierValueForLink();