diff --git a/css/80_app.css b/css/80_app.css index 94e9dff86..34ee819bc 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1706,9 +1706,12 @@ a.hide-toggle { .form-field-input-text > input:only-of-type, .form-field-input-tel > input:only-of-type, .form-field-input-email > input:only-of-type, -.form-field-input-url > input:only-of-type { +.form-field-input-url > input:only-child { border-radius: 0 0 4px 4px; } +.form-field-input-url > input:not(:only-child) { + border-radius: 0 0 0 4px; +} .form-field-input-number > input:only-of-type { border-radius: 0 0 0 4px; } @@ -5639,4 +5642,4 @@ li.hide + li.version .badge .tooltip .popover-arrow { height: 100px; width: 100px; color: #7092ff; -} \ No newline at end of file +} diff --git a/data/core.yaml b/data/core.yaml index 760658048..653baae67 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -7,6 +7,7 @@ en: zoom_to: zoom to copy: copy view_on: view on {domain} + visit_website: visit website favorite: favorite list: list text: text diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js index 76fe41fac..3b06032c6 100644 --- a/modules/ui/fields/input.js +++ b/modules/ui/fields/input.js @@ -149,6 +149,24 @@ export function uiFieldText(field, context) { } }) .merge(outlinkButton); + } else if (field.type === 'url') { + input.attr('type', 'text'); + + outlinkButton = wrap.selectAll('.foreign-id-permalink') + .data([0]); + + outlinkButton.enter() + .append('button') + .call(svgIcon('#iD-icon-out-link')) + .attr('class', 'form-field-button foreign-id-permalink') + .attr('title', () => t('icons.visit_website')) + .on('click', function(d3_event) { + d3_event.preventDefault(); + + const value = validIdentifierValueForLink(); + if (value) window.open(value, '_blank'); + }) + .merge(outlinkButton); } } @@ -164,8 +182,10 @@ export function uiFieldText(field, context) { function validIdentifierValueForLink() { + const value = utilGetSetValue(input).trim().split(';')[0]; + + if (field.type === 'url' && value) return value; if (field.type === 'identifier' && field.pattern) { - var value = utilGetSetValue(input).trim().split(';')[0]; return value && value.match(new RegExp(field.pattern)); } return null;