Add ability to put an OK button on the curtain-tooltip

css/80_app.css

@@ -3646,6 +3646,7 @@ img.tile-removing {
     padding: 20px;
 }
 
+.curtain-tooltip .tooltip-inner .button-section,
 .curtain-tooltip .tooltip-inner .bold {
     font-weight: bold;
     display: block;

data/core.yaml

@@ -778,6 +778,7 @@ en:
       click the "Merge" (+) button.
   intro:
     done: done
+    ok: OK
     graph:
       city_hall: Three Rivers City Hall
       fire_department: Three Rivers Fire Department

dist/locales/en.json

@@ -635,6 +635,7 @@
         },
         "intro": {
             "done": "done",
+            "ok": "OK",
             "graph": {
                 "city_hall": "Three Rivers City Hall",
                 "fire_department": "Three Rivers Fire Department",

modules/ui/curtain.js

@@ -62,7 +62,14 @@ export function uiCurtain() {
             // pseudo markdown bold text hack
             var parts = text.split('**');
             var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
-            if (parts[1]) html += '<span class="bold">' + parts[1] + '</span>';
+            if (parts[1]) {
+                html += '<span class="bold">' + parts[1] + '</span>';
+            }
+
+            if (options.buttonText && options.buttonCallback) {
+                html += '<div class="button-section">' +
+                    '<button href="#" class="button action col8">' + options.buttonText + '</button></div>';
+            }
 
             var classes = 'curtain-tooltip tooltip in ' + (options.tooltipClass || '');
             tooltip
@@ -70,6 +77,18 @@ export function uiCurtain() {
                 .selectAll('.tooltip-inner')
                 .html(html);
 
+            if (options.buttonText && options.buttonCallback) {
+                var button = tooltip.selectAll('.button-section .button.action');
+
+                button
+                    .on('click', function() {
+                        d3.event.preventDefault();
+                        options.buttonCallback();
+                    });
+
+                button.node().focus();
+            }
+
             // var dimensions = utilGetDimensions(selection, true),
             var tip = tooltip.node().getBoundingClientRect(),
                 w = window.innerWidth,

modules/ui/intro/navigation.js

@@ -26,10 +26,10 @@ export function uiIntroNavigation(context, reveal) {
 
 
     function welcome() {
-        reveal('.intro-nav-wrap', 'This walkthrough will teach you the basics of editing on OpenStreetMap.');
-        timeout(function() {
-            dragMap();
-        }, 5000);
+        reveal('.intro-nav-wrap',
+            'Welcome!  This walkthrough will teach you the basics of editing on OpenStreetMap.',
+            { buttonText: t('intro.ok'), buttonCallback: dragMap }
+        );
     }