Merge pull request #8650 from k-yle/website-tag

add link button next to website tag

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;
-}
+}

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

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;