Fix wikipedia field link button

(closes #2024)
openstreetmap · Mar 22, 2017 · 2132110 · 2132110
1 parent 7548b62
commit 2132110
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/css/80_app.css b/css/80_app.css
@@ -1485,30 +1485,6 @@ input[type=number] {
     content: none;
 }
 
-.form-field .wiki-lang {
-    border-radius: 0;
-}
-
-.form-field .wiki-title {
-    padding-right: 10%;
-}
-
-.form-field .wiki-title ~ .combobox-caret {
-    margin-left: -18%;
-    margin-right: 9%;
-}
-
-.form-field .wiki-link {
-    float: right;
-    background: #fafafa;
-    padding: 5px;
-    text-align: center;
-}
-
-.form-field .wiki-link:hover {
-    background: #f1f1f1;
-}
-
 #preset-input-maxspeed {
     border-right: none;
     border-radius: 0 0 0 4px;
@@ -1528,13 +1504,32 @@ input[type=number] {
     border-radius: 0 0 0 4px;
 }
 
-/* Name + translate form */
+/* Wikipedia field */
+.form-field .wiki-lang {
+    border-radius: 0;
+}
+.form-field .wiki-title {
+    padding-right: 20%;
+}
+[dir='rtl'] .form-field .wiki-title {
+    padding-left: 20%;
+    padding-right: 10px;
+}
+
+.form-field .wiki-title ~ .combobox-caret {
+    right: 10%;
+}
+[dir='rtl'] .form-field .wiki-title ~ .combobox-caret {
+    right: auto;
+    left: 10%;
+}
 
+/* Localized field */
 .form-field .localized-main {
-    padding-right: 40px;
+    padding-right: 12%;
 }
 [dir='rtl'] .form-field .localized-main {
-    padding-left: 40px;
+    padding-left: 12%;
     padding-right: 10px;
 }
 

diff --git a/modules/ui/fields/wikipedia.js b/modules/ui/fields/wikipedia.js
@@ -21,6 +21,7 @@ export function uiFieldWikipedia(field, context) {
         link = d3.select(null),
         lang = d3.select(null),
         title = d3.select(null),
+        wikiURL = '',
         entity;
 
 
@@ -89,16 +90,21 @@ export function uiFieldWikipedia(field, context) {
             .on('change', change);
 
 
-        link = selection.selectAll('a.wiki-link')
+        link = selection.selectAll('.wiki-link')
             .data([0]);
 
         link = link.enter()
-            .append('a')
-            .attr('class', 'wiki-link button-input-action minor')
+            .append('button')
+            .attr('class', 'button-input-action wiki-link minor')
             .attr('tabindex', -1)
-            .attr('target', '_blank')
-            .call(svgIcon('#icon-out-link', 'inline'))
+            .call(svgIcon('#icon-out-link'))
             .merge(link);
+
+        link
+            .on('click', function() {
+                d3.event.preventDefault();
+                if (wikiURL) window.open(wikiURL, '_blank');
+            });
     }
 
 
@@ -211,16 +217,18 @@ export function uiFieldWikipedia(field, context) {
                     anchor = anchor.replace(/ /g, '_');
                 }
             }
-            link.attr('href', 'https://' + m[1] + '.wikipedia.org/wiki/' +
-                m[2].replace(/ /g, '_') + (anchor ? ('#' + anchor) : ''));
+            wikiURL = 'https://' + m[1] + '.wikipedia.org/wiki/' +
+                m[2].replace(/ /g, '_') + (anchor ? ('#' + anchor) : '');
 
         // unrecognized value format
         } else {
             utilGetSetValue(title, value);
             if (value && value !== '') {
                 utilGetSetValue(lang, '');
+                wikiURL = 'https://en.wikipedia.org/wiki/Special:Search?search=' + value;
+            } else {
+                wikiURL = '';
             }
-            link.attr('href', 'https://en.wikipedia.org/wiki/Special:Search?search=' + value);
         }
     };