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) {