From 100d94955f3aea14bc0e0b6dcf8fe4da603f6313 Mon Sep 17 00:00:00 2001
From: Le_Futuriste <mail@matthieubessat.fr>
Date: Mon, 13 Nov 2023 23:06:05 +0100
Subject: [PATCH] feat(fields/combo): add navigate button to web links in
 "chip" fields (#9974)

The common use case is for the `sources` key, often you have multiple URLs separated with semicolon.

This allow to navigate to URL and check them more easily instead of
doing manual work to select the URL copy and paste.

Created with the help of Martin Raifer at the sotmeu2023!
---
 css/80_app.css             | 36 +++++++++++++++++++++++++++++++++--
 modules/ui/fields/combo.js | 39 ++++++++++++++++++++++++++++++--------
 2 files changed, 65 insertions(+), 10 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 12ec777cd..4e684b64d 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1663,7 +1663,6 @@ input.date-selector {
 .form-field-input-multicombo li {
     display: inline-flex;
     flex-flow: row nowrap;
-    align-items: center;
     margin-bottom: 3px;
     margin-top: 3px;
     border-radius: 4px;
@@ -1686,6 +1685,8 @@ input.date-selector {
 }
 .form-field-input-multicombo li.chip input {
     width: 1em;
+    height: 11px;
+    margin-top: 7px;
 }
 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
     padding: 2px 0px 2px 5px;
@@ -1716,9 +1717,11 @@ input.date-selector {
     flex: 1 1 auto;
     overflow: hidden;
     word-wrap: break-word;
+    margin-top: 4px;
 }
 
-.form-field-input-multicombo a {
+.form-field-input-multicombo a,
+.form-field-input-multicombo button {
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 16px !important;
     padding: 0px 5px 0px 5px;
@@ -1728,6 +1731,35 @@ input.date-selector {
     display: block;
     text-align: center;
     flex: 0 0 auto;
+    background: transparent;
+    border: 0;
+}
+
+.form-field-input-multicombo li.chip .field_buttons {
+    display: inline-block;
+    text-align: right;
+    margin-right: 2px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.form-field-input-multicombo li.chip .field_buttons a {
+    display: block;
+    float: right;
+    margin-top: -2px;
+    margin-bottom: -2px;
+}
+
+.form-field-input-multicombo li.chip .field_buttons button {
+    display: inline-block;
+    margin-right: -4px;
+    margin-top: -4px;
+    margin-bottom: -2px;
+    margin-left: -2px;
+}
+
+.form-field-input-multicombo li.chip .field_buttons button:hover {
+    background-color: transparent;
 }
 
 .form-field-input-multicombo .input-wrap {
diff --git a/modules/ui/fields/combo.js b/modules/ui/fields/combo.js
index 1a224d7cd..6c81d0542 100644
--- a/modules/ui/fields/combo.js
+++ b/modules/ui/fields/combo.js
@@ -677,7 +677,12 @@ export function uiFieldCombo(field, context) {
                 .attr('class', 'chip');
 
             enter.append('span');
-            enter.append('a');
+            const field_buttons = enter
+                .append('div')
+                .attr('class', 'field_buttons');
+            field_buttons
+                .append('a')
+                .attr('class', 'remove');
 
             chips = chips.merge(enter)
                 .order()
@@ -714,17 +719,35 @@ export function uiFieldCombo(field, context) {
                 registerDragAndDrop(chips);
             }
 
-            chips.select('span').each(function(d) {
+            chips.each(function(d) {
                 const selection = d3_select(this);
-                if (d.display) {
-                    selection.text('');
-                    d.display(selection);
-                } else {
-                    selection.text(d.value);
+                const text_span = selection.select('span');
+                const field_buttons = selection.select('.field_buttons');
+                const clean_value = d.value.trim();
+                text_span.text('');
+                if (clean_value.startsWith('https://')) {
+                    // create a button to open the link in a new tab
+                    text_span.text(clean_value);
+                    field_buttons.select('button').remove();
+                    field_buttons.append('button')
+                        .call(svgIcon('#iD-icon-out-link'))
+                        .attr('class', 'form-field-button foreign-id-permalink')
+                        .attr('title', () => t('icons.visit_website'))
+                        .attr('aria-label', () => t('icons.visit_website'))
+                        .on('click', function(d3_event) {
+                            d3_event.preventDefault();
+                            window.open(clean_value, '_blank');
+                        });
+                    return;
                 }
+                if (d.display) {
+                    d.display(text_span);
+                    return;
+                }
+                text_span.text(d.value);
             });
 
-            chips.select('a')
+            chips.select('a.remove')
                 .attr('href', '#')
                 .on('click', removeMultikey)
                 .attr('class', 'remove')