From d9e4acfcc9623d31b3440db0d89df9f7ff44a41c Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Wed, 27 Mar 2013 18:22:05 -0400 Subject: [PATCH] Add "Start mapping" button to walkthrough --- css/app.css | 5 +++++ data/intro.yaml | 1 + data/locales.js | 9 +++++++-- js/id/ui/intro.js | 3 ++- js/id/ui/intro/start_editing.js | 27 +++++++++++++++++++++++++-- js/lib/d3.curtain.js | 24 ++++++++++++++---------- 6 files changed, 54 insertions(+), 15 deletions(-) diff --git a/css/app.css b/css/app.css index bfe330b14..3ffd25454 100644 --- a/css/app.css +++ b/css/app.css @@ -2374,3 +2374,8 @@ div.typeahead a:first-child { .intro-lines-add .tooltip-inner::before { background-position: 0px -480px; } + +.huge-modal-button { + height: 180px; + width: 100%; +} diff --git a/data/intro.yaml b/data/intro.yaml index 34b71011d..13f7269a3 100644 --- a/data/intro.yaml +++ b/data/intro.yaml @@ -35,4 +35,5 @@ en: startediting: help: "More documentation and this walkthrough are available here." save: "Don't forget to regularly save your changes!" + start: "Start mapping!" diff --git a/data/locales.js b/data/locales.js index e3df50cb8..dc3ebb976 100644 --- a/data/locales.js +++ b/data/locales.js @@ -1468,8 +1468,8 @@ locale.en = { "place": "The point can be placed by clicking on the map. **Place the point on top of the building.**", "search": "There many different features that can be represented by points. The point you just added is a Cafe. **Search for 'Cafe' **", "choose": "**Choose Cafe from the grid.**", - "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**", - "close": "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**", + "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name**", + "close": "The feature editor can be closed by clicking on the close button. **Close the feature editor**", "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**", "fixname": "**Change the name and close the feature editor.**", "reselect_delete": "All features on the map can be deleted. **Reselect the point you created.**", @@ -1491,6 +1491,11 @@ locale.en = { "road": "**Select Road from the grid**", "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**", "describe": "**Name the road and close the feature editor.**" + }, + "startediting": { + "help": "More documentation and this walkthrough are available here.", + "save": "Don't forget to regularly save your changes!", + "start": "Start mapping!" } } }; diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js index 676d96062..e5d728e55 100644 --- a/js/id/ui/intro.js +++ b/js/id/ui/intro.js @@ -29,7 +29,8 @@ iD.ui.intro = function(context) { selection.call(curtain); function reveal(box, textid, duration) { - curtain.reveal(box, t(textid), textid.replace(/\./g, '-'), duration); + if (textid) curtain.reveal(box, t(textid), textid.replace(/\./g, '-'), duration); + else curtain.reveal(box, '', '', duration); } var steps = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(step, i) { diff --git a/js/id/ui/intro/start_editing.js b/js/id/ui/intro/start_editing.js index 8bae6b721..289b521fd 100644 --- a/js/id/ui/intro/start_editing.js +++ b/js/id/ui/intro/start_editing.js @@ -1,6 +1,7 @@ iD.ui.intro.startEditing = function(context, reveal) { var event = d3.dispatch('done', 'startEditing'), + modal, timeouts = []; var step = { @@ -20,13 +21,35 @@ iD.ui.intro.startEditing = function(context, reveal) { }, 3500); timeout(function() { - reveal('#surface', 'intro.startediting.save'); + reveal('#surface'); }, 7000); - timeout(event.startEditing, 7500); + timeout(function() { + modal = iD.ui.modal(context.container()); + + modal.select('.modal') + .attr('class', 'modal-splash modal col6'); + + modal.selectAll('.close').remove(); + + modal.select('.content') + .append('div') + .attr('class', 'fillL') + .append('div') + .attr('class','modal-section') + .append('button') + .attr('class', 'huge-modal-button') + .on('click', function() { + event.startEditing(); + modal.remove(); + }) + .append('h2') + .text(t('intro.startediting.start')); + }, 7500); }; step.exit = function() { + if (modal) modal.remove(); timeouts.forEach(window.clearTimeout); }; diff --git a/js/lib/d3.curtain.js b/js/lib/d3.curtain.js index 96ad99cf1..a4c4a390a 100644 --- a/js/lib/d3.curtain.js +++ b/js/lib/d3.curtain.js @@ -81,18 +81,22 @@ d3.curtain = function() { ]; // pseudo markdown bold text hack - var parts = text.split('**'); - var html = parts[0] ? '' + parts[0] + '' : ''; - if (parts[1]) html += '' + parts[1] + ''; + if (text) { + var parts = text.split('**'); + var html = parts[0] ? '' + parts[0] + '' : ''; + if (parts[1]) html += '' + parts[1] + ''; - tooltip - .style('top', pos[1] + 'px') - .style('left', pos[0] + 'px') - .attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + tooltipclass) - .select('.tooltip-inner') - .html(html); + tooltip + .style('top', pos[1] + 'px') + .style('left', pos[0] + 'px') + .attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + tooltipclass) + .select('.tooltip-inner') + .html(html); - if (duration !== 0) tooltip.call(iD.ui.Toggle(true)); + if (duration !== 0) tooltip.call(iD.ui.Toggle(true)); + } else { + tooltip.call(iD.ui.Toggle(false)); + } }; curtain.cut = function(datum, duration) {