From b7267e057107ef7d4928e8dd4e6a803748f4db55 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 26 Mar 2017 00:35:00 -0400
Subject: [PATCH] Add ability to put an OK button on the curtain-tooltip

---
 css/80_app.css                 |  1 +
 data/core.yaml                 |  1 +
 dist/locales/en.json           |  1 +
 modules/ui/curtain.js          | 21 ++++++++++++++++++++-
 modules/ui/intro/navigation.js |  8 ++++----
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 1aa0cbed2..fba7c802e 100644
--- a/css/80_app.css
+++ b/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;
diff --git a/data/core.yaml b/data/core.yaml
index 12cfc5c98..b9517b90b 100644
--- a/data/core.yaml
+++ b/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
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 7bf594b96..8afd6b340 100644
--- a/dist/locales/en.json
+++ b/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",
diff --git a/modules/ui/curtain.js b/modules/ui/curtain.js
index 8a7e926a3..cf29f5eb5 100644
--- a/modules/ui/curtain.js
+++ b/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,
diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js
index afefbeff3..043b91224 100644
--- a/modules/ui/intro/navigation.js
+++ b/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 }
+        );
     }