Adjust language, remove curtain for play steps

This commit is contained in:
Bryan Housel
2017-04-17 17:51:22 -04:00
parent 28802daae4
commit cf9eb22e5f
8 changed files with 119 additions and 67 deletions
+7 -7
View File
@@ -454,7 +454,7 @@ en:
help_link_text: Details
help_link_url: "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F"
confirm:
okay: "Okay"
okay: "OK"
cancel: "Cancel"
splash:
welcome: Welcome to the iD OpenStreetMap editor
@@ -909,12 +909,12 @@ en:
selected_townhall: "Great! The point is now selected. Selected features are drawn with a pulsing glow."
editor_townhall: "When a feature is selected, the *feature editor* is displayed alongside the map."
preset_townhall: "The top part of the feature editor shows the feature's type. This point is a {preset}."
fields_townhall: "The middle part of the feature editor shows *fields* containing the feature's attributes, such as its name and address."
fields_townhall: "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address."
close_townhall: "**Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**"
search_street: "You can also search for features in the current view, or worldwide. **Search for '{name}'**"
choose_street: "**Choose {name} from the list to select it.**"
selected_street: "Great! {name} is now selected."
editor_street: "The fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by hitting escape or pressing the {button} button.**"
editor_street: "The fields shown for a street are different than the fields that were shown for the town hall. Now we see fields like {field1} and {field2}. **Close the feature editor by hitting escape or pressing the {button} button.**"
play: "Try moving the map and clicking on some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
points:
title: "Points"
@@ -923,13 +923,13 @@ en:
search_cafe: "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'**"
choose_cafe: "**Choose {preset} from the list.**"
feature_editor: "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe."
add_name: "In OpenStreetMap, all of the fields are optional, and it's ok to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**"
add_name: "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**"
add_close: "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, return, or click the {button} button to close the feature editor**"
reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**"
update: "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details**"
update_close: "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**"
rightclick: "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**"
delete: "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**"
delete: "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**"
undo: "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**"
play: "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
areas:
@@ -962,7 +962,7 @@ en:
finish_drag_endpoint: "This spot looks good. **Release the left mouse button to finish dragging.**"
start_drag_midpoint: "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**"
continue_drag_midpoint: "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**"
delete_lines: "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
delete_lines: "It's OK to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines."
rightclick_intersection: "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **Right click on the intersection node**"
split_intersection: "**Click on the {button} button to split {street}.**"
retry_split: "You didn't click the Split button. Try again."
@@ -980,7 +980,7 @@ en:
continue_building: "Continue adding more nodes to trace the outline of the building. Remember that you can zoom in if you want to add more details. Finish the building by pressing return, or clicking again on either the first or last node. **Finish tracing the building.**"
retry_building: "It looks like you had some trouble placing the nodes at the building corners. Try again!"
choose_category_building: "**Choose {category} from the list**"
choose_preset_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} building type**"
choose_preset_house: "There are many different types of buildings, but this one is clearly a house. If you're not sure of the type, it's OK to just choose the generic Building type. **Choose the {preset} type**"
close: "**Hit escape or click the {button} button to close the feature editor**"
rightclick_building: "**Right-click to select the building you created and show the edit menu.**"
square_building: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**"
+6 -6
View File
@@ -561,7 +561,7 @@
"help_link_url": "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F"
},
"confirm": {
"okay": "Okay",
"okay": "OK",
"cancel": "Cancel"
},
"splash": {
@@ -769,12 +769,12 @@
"selected_townhall": "Great! The point is now selected. Selected features are drawn with a pulsing glow.",
"editor_townhall": "When a feature is selected, the *feature editor* is displayed alongside the map.",
"preset_townhall": "The top part of the feature editor shows the feature's type. This point is a {preset}.",
"fields_townhall": "The middle part of the feature editor shows *fields* containing the feature's attributes, such as its name and address.",
"fields_townhall": "The middle part of the feature editor contains *fields* showing the feature's attributes, such as its name and address.",
"close_townhall": "**Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**",
"search_street": "You can also search for features in the current view, or worldwide. **Search for '{name}'**",
"choose_street": "**Choose {name} from the list to select it.**",
"selected_street": "Great! {name} is now selected.",
"editor_street": "The fields displayed for a street are different than the fields displayed for the town hall. **Close the feature editor by hitting escape or pressing the {button} button.**",
"editor_street": "The fields shown for a street are different than the fields that were shown for the town hall. Now we see fields like {field1} and {field2}. **Close the feature editor by hitting escape or pressing the {button} button.**",
"play": "Try moving the map and clicking on some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**"
},
"points": {
@@ -784,13 +784,13 @@
"search_cafe": "There are many different features that can be represented by points. The point you just added is a cafe. **Search for '{preset}'**",
"choose_cafe": "**Choose {preset} from the list.**",
"feature_editor": "The point is now marked as a cafe. Using the feature editor, we can add more information about the cafe.",
"add_name": "In OpenStreetMap, all of the fields are optional, and it's ok to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**",
"add_name": "In OpenStreetMap, all of the fields are optional, and it's OK to leave a field blank if you are unsure. Let's pretend that you have local knowledge of this cafe, and you know its name. **Add a name for the cafe**",
"add_close": "The feature editor will remember all of your changes automatically. **When you are finished adding the name, hit escape, return, or click the {button} button to close the feature editor**",
"reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Click to select the cafe you just created.**",
"update": "Let's fill in some more details for this cafe. You can change its name, add a cuisine, or add an address. **Change the cafe details**",
"update_close": "**When you are finished updating the cafe, hit escape, return, or click the {button} button to close the feature editor**",
"rightclick": "You can right-click on any feature to see the *edit menu*, which shows a list of editing operations that can be performed. **Right-click to select the point you created and show the edit menu.**",
"delete": "It's ok to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**",
"delete": "It's OK to delete features that don't exist in the real world. Deleting a feature from OpenStreetMap removes it from the map that everyone uses, so you should make sure a feature is really gone before you delete it. **Click on the {button} button to delete the point.**",
"undo": "You can always undo any changes up until you save your edits to OpenStreetMap. **Click on the {button} button to undo the delete and get the point back.**",
"play": "Now that you know how to create and edit points, try creating a few more points for practice! **When you are ready to continue to the next chapter, click '{next}'.**"
},
@@ -825,7 +825,7 @@
"finish_drag_endpoint": "This spot looks good. **Release the left mouse button to finish dragging.**",
"start_drag_midpoint": "Small triangles are drawn at the *midpoints* between nodes. Another way to create a new node is to drag a midpoint to a new location. **Drag the midpoint triangle to create a new node along the curve of the road.**",
"continue_drag_midpoint": "This line is looking much better! Continue to adjust this line by double-clicking or dragging midpoints until the curve matches the road shape. **When you're happy with how the line looks, click OK.**",
"delete_lines": "It is ok to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
"delete_lines": "It's OK to delete lines for roads that don't exist in the real world. Here's an example where the city planned a {street} but never built it. We can improve this part of the map by deleting the extra lines.",
"rightclick_intersection": "The last real street is {street1}, so we will *split* {street2} at this intersection and remove everything above it. **Right click on the intersection node**",
"split_intersection": "**Click on the {button} button to split {street}.**",
"retry_split": "You didn't click the Split button. Try again.",
+50 -26
View File
@@ -55,28 +55,47 @@ export function uiCurtain() {
* Reveal cuts the curtain to highlight the given box,
* and shows a tooltip with instructions next to the box.
*
* @param {String|ClientRect} [box] box to focus on
* @param {String} [text] text for a tooltip
* @param {String|ClientRect} [box] box used to cut the curtain
* @param {String} [text] text for a tooltip
* @param {Object} [options]
* @param {integer} [options.duration] transition time in milliseconds
* @param {string} [options.buttonText] if set, create a button with this text label
* @param {string} [options.tooltipClass] optional class to add to the tooltip
* @param {integer} [options.duration] transition time in milliseconds
* @param {string} [options.buttonText] if set, create a button with this text label
* @param {function} [options.buttonCallback] if set, the callback for the button
* @param {String|ClientRect} [options.tooltipBox] box for tooltip position, if different from box for the curtain
*/
curtain.reveal = function(box, text, options) {
if (typeof box === 'string') box = d3.select(box).node();
if (box && box.getBoundingClientRect) box = copyBox(box.getBoundingClientRect());
if (typeof box === 'string') {
box = d3.select(box).node();
}
if (box && box.getBoundingClientRect) {
box = copyBox(box.getBoundingClientRect());
}
options = options || {};
if (box && text) {
// pseudo markdown hacks
var tooltipBox;
if (options.tooltipBox) {
tooltipBox = options.tooltipBox;
if (typeof tooltipBox === 'string') {
tooltipBox = d3.select(tooltipBox).node();
}
if (tooltipBox && tooltipBox.getBoundingClientRect) {
tooltipBox = copyBox(tooltipBox.getBoundingClientRect());
}
} else {
tooltipBox = box;
}
if (tooltipBox && text) {
// pseudo markdown bold text for the instruction section..
var parts = text.split('**');
var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
if (parts[1]) {
html += '<span class="instruction">' + parts[1] + '</span>';
}
// pseudo markdown bold text hack
// pseudo markdown emphasis text..
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
@@ -100,7 +119,6 @@ export function uiCurtain() {
});
}
// var dimensions = utilGetDimensions(selection, true),
var tip = copyBox(tooltip.node().getBoundingClientRect()),
w = window.innerWidth,
h = window.innerHeight,
@@ -109,47 +127,53 @@ export function uiCurtain() {
side, pos;
// trim box dimensions to just the portion that fits in the window..
if (box.top + box.height > h) {
box.height -= (box.top + box.height - h);
if (tooltipBox.top + tooltipBox.height > h) {
tooltipBox.height -= (tooltipBox.top + tooltipBox.height - h);
}
if (box.left + box.width > w) {
box.width -= (box.left + box.width - w);
if (tooltipBox.left + tooltipBox.width > w) {
tooltipBox.width -= (tooltipBox.left + tooltipBox.width - w);
}
// determine tooltip placement..
if (box.top + box.height < 100) {
if (tooltipBox.top + tooltipBox.height < 100) {
// tooltip below box..
side = 'bottom';
pos = [box.left + box.width / 2 - tip.width / 2, box.top + box.height];
pos = [
tooltipBox.left + tooltipBox.width / 2 - tip.width / 2,
tooltipBox.top + tooltipBox.height
];
} else if (box.top > h - 140) {
} else if (tooltipBox.top > h - 140) {
// tooltip above box..
side = 'top';
pos = [box.left + box.width / 2 - tip.width / 2, box.top - tip.height];
pos = [
tooltipBox.left + tooltipBox.width / 2 - tip.width / 2,
tooltipBox.top - tip.height
];
} else {
// tooltip to the side of the box..
var tipY = box.top + box.height / 2 - tip.height / 2;
// tooltip to the side of the tooltipBox..
var tipY = tooltipBox.top + tooltipBox.height / 2 - tip.height / 2;
if (textDirection === 'rtl') {
if (box.left - tooltipWidth - tooltipArrow < 70) {
if (tooltipBox.left - tooltipWidth - tooltipArrow < 70) {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];
pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY];
} else {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY];
}
} else {
if (box.left + box.width + tooltipArrow + tooltipWidth > w - 70) {
if (tooltipBox.left + tooltipBox.width + tooltipArrow + tooltipWidth > w - 70) {
side = 'left';
pos = [box.left - tooltipWidth - tooltipArrow, tipY];
pos = [tooltipBox.left - tooltipWidth - tooltipArrow, tipY];
}
else {
side = 'right';
pos = [box.left + box.width + tooltipArrow, tipY];
pos = [tooltipBox.left + tooltipBox.width + tooltipArrow, tipY];
}
}
}
+4 -5
View File
@@ -355,13 +355,12 @@ export function uiIntroArea(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-line',
dispatch.call('done');
reveal('#id-container',
t('intro.areas.play', { next: t('intro.lines.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-line',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
+4 -5
View File
@@ -736,13 +736,12 @@ export function uiIntroBuilding(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-startEditing',
dispatch.call('done');
reveal('#id-container',
t('intro.buildings.play', { next: t('intro.startediting.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-startEditing',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
+5 -6
View File
@@ -1035,16 +1035,15 @@ export function uiIntroLine(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-building',
dispatch.call('done');
reveal('#id-container',
t('intro.lines.play', { next: t('intro.buildings.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-building',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
}
chapter.enter = function() {
+39 -7
View File
@@ -12,7 +12,9 @@ export function uiIntroNavigation(context, reveal) {
townHall = [-85.63591, 41.94285],
springStreetId = 'w397',
springStreetEndId = 'n1834',
springStreet = [-85.63582, 41.94255];
springStreet = [-85.63582, 41.94255],
onewayField = context.presets().field('oneway'),
maxspeedField = context.presets().field('maxspeed');
var chapter = {
@@ -352,8 +354,20 @@ export function uiIntroNavigation(context, reveal) {
continueTo(searchStreet);
});
context.history().on('change.intro', function() {
// update the close icon in the tooltip if the user edits something.
var selector = '.entity-editor-pane button.preset-close svg use';
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.close_townhall', { button: icon(href, 'pre-text') }),
{ duration: 0 }
);
});
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
nextStep();
}
}
@@ -469,28 +483,46 @@ export function uiIntroNavigation(context, reveal) {
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.editor_street', { button: icon(href, 'pre-text') })
t('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
field1: onewayField.label().toLowerCase(),
field2: maxspeedField.label().toLowerCase()
})
);
context.on('exit.intro', function() {
continueTo(play);
});
context.history().on('change.intro', function() {
// update the close icon in the tooltip if the user edits something.
var selector = '.entity-editor-pane button.preset-close svg use';
var href = d3.select(selector).attr('href') || '#icon-close';
reveal('.entity-editor-pane',
t('intro.navigation.editor_street', {
button: icon(href, 'pre-text'),
field1: onewayField.label().toLowerCase(),
field2: maxspeedField.label().toLowerCase()
}), { duration: 0 }
);
});
function continueTo(nextStep) {
context.on('exit.intro', null);
context.history().on('change.intro', null);
nextStep();
}
}
function play() {
reveal('.intro-nav-wrap .chapter-point',
dispatch.call('done');
reveal('#id-container',
t('intro.navigation.play', { next: t('intro.points.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-point',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}
+4 -5
View File
@@ -455,13 +455,12 @@ export function uiIntroPoint(context, reveal) {
function play() {
reveal('.intro-nav-wrap .chapter-area',
dispatch.call('done');
reveal('#id-container',
t('intro.points.play', { next: t('intro.areas.title') }), {
tooltipBox: '.intro-nav-wrap .chapter-area',
buttonText: t('intro.ok'),
buttonCallback: function() {
dispatch.call('done');
reveal('#id-container');
}
buttonCallback: function() { reveal('#id-container'); }
}
);
}