CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-13 01:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(fields/combo): add navigate button to web links in "chip" fields (#9974)

Browse Source 
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!
This commit is contained in:
Le_Futuriste
2023-11-13 23:06:05 +01:00
committed by GitHub
parent c9e9d160c1
commit 100d94955f
2 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/80_app.css
View File

@@ -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 {

39
modules/ui/fields/combo.js
View File

@@ -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')