mirror of
https://github.com/FoggedLens/iD.git
synced 2026-04-21 19:26:41 +02:00
Gentler introduction to jargon, add some more defensive code
This commit is contained in:
Bryan Housel
+5
-2
@@ -3660,8 +3660,11 @@ img.tile-removing {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .button-section,
|
||||
.curtain-tooltip .tooltip-inner .bold {
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .button-section,
|
||||
.curtain-tooltip .tooltip-inner .instruction {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
border-top: 1px solid #CCC;
|
||||
@@ -3671,7 +3674,7 @@ img.tile-removing {
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .bold:only-child {
|
||||
.curtain-tooltip .tooltip-inner .instruction:only-child {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
+11
-6
@@ -900,12 +900,17 @@ en:
|
||||
title: "Navigation"
|
||||
drag: "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**"
|
||||
zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad. **Zoom the map!**"
|
||||
select: "Map features are represented three ways: using points, lines, or areas. All features can be selected by clicking on them. **Click on the point to select it.**"
|
||||
selected: "Great! The point is now selected. Selected items are drawn with a pulsing glow."
|
||||
pane: "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**"
|
||||
search: "You can also search for features in the current view, or worldwide. **Search for '{name}'**"
|
||||
choose: "**Choose {name} from the list to select it.**"
|
||||
chosen: "Great! {name} is now selected. 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.**"
|
||||
features: "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap."
|
||||
click_townhall: "Map features are represented three ways: using points, lines, or areas. All features can be selected by clicking on them. **Click on the point to select it.**"
|
||||
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 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.**"
|
||||
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"
|
||||
|
||||
Vendored
+11
-6
@@ -760,12 +760,17 @@
|
||||
"title": "Navigation",
|
||||
"drag": "The main map area shows OpenStreetMap data on top of a background. You can navigate by dragging and scrolling, just like any web map. **Drag the map!**",
|
||||
"zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad. **Zoom the map!**",
|
||||
"select": "Map features are represented three ways: using points, lines, or areas. All features can be selected by clicking on them. **Click on the point to select it.**",
|
||||
"selected": "Great! The point is now selected. Selected items are drawn with a pulsing glow.",
|
||||
"pane": "When a feature is selected, the feature editor is displayed. The header shows us the feature type and the main pane shows the feature's attributes, such as its name and address. **Close the feature editor by hitting escape or pressing the {button} button in the upper corner.**",
|
||||
"search": "You can also search for features in the current view, or worldwide. **Search for '{name}'**",
|
||||
"choose": "**Choose {name} from the list to select it.**",
|
||||
"chosen": "Great! {name} is now selected. 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.**",
|
||||
"features": "We use the word *features* to describe the things that appear on the map. Anything in the real world can be mapped as a feature on OpenStreetMap.",
|
||||
"click_townhall": "Map features are represented three ways: using points, lines, or areas. All features can be selected by clicking on them. **Click on the point to select it.**",
|
||||
"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 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.**",
|
||||
"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": {
|
||||
|
||||
@@ -58,13 +58,17 @@ export function uiCurtain() {
|
||||
options = options || {};
|
||||
|
||||
if (text) {
|
||||
// pseudo markdown bold text hack
|
||||
// pseudo markdown hacks
|
||||
var parts = text.split('**');
|
||||
var html = parts[0] ? '<span>' + parts[0] + '</span>' : '';
|
||||
if (parts[1]) {
|
||||
html += '<span class="bold">' + parts[1] + '</span>';
|
||||
html += '<span class="instruction">' + parts[1] + '</span>';
|
||||
}
|
||||
|
||||
// pseudo markdown bold text hack
|
||||
html = html.replace(/\*(.*)\*/, '<em>$1</em>');
|
||||
|
||||
|
||||
if (options.buttonText && options.buttonCallback) {
|
||||
html += '<div class="button-section">' +
|
||||
'<button href="#" class="button action col8">' + options.buttonText + '</button></div>';
|
||||
|
||||
+232
-38
@@ -1,5 +1,6 @@
|
||||
import * as d3 from 'd3';
|
||||
import { t, textDirection } from '../../util/locale';
|
||||
import { modeBrowse, modeSelect } from '../../modes';
|
||||
import { utilRebind } from '../../util/rebind';
|
||||
import { icon, pointBox, transitionTime } from './helper';
|
||||
|
||||
@@ -9,7 +10,10 @@ export function uiIntroNavigation(context, reveal) {
|
||||
timeouts = [],
|
||||
hallId = 'n2061',
|
||||
townHall = [-85.63591, 41.94285],
|
||||
springStreet = [-85.63585099140167, 41.942506848938926];
|
||||
townHallPreset = context.presets().item('amenity/townhall'),
|
||||
springStreetId = 'w397',
|
||||
springStreetEndId = 'n1834',
|
||||
springStreet = [-85.63582, 41.94255];
|
||||
|
||||
|
||||
var chapter = {
|
||||
@@ -88,7 +92,7 @@ export function uiIntroNavigation(context, reveal) {
|
||||
context.map().on('move.intro', function() {
|
||||
if (context.map().zoom() !== zoomStart) {
|
||||
context.map().on('move.intro', null);
|
||||
timeout(function() { continueTo(clickTownHall); }, 1500);
|
||||
timeout(function() { continueTo(features); }, 1500);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -99,35 +103,69 @@ export function uiIntroNavigation(context, reveal) {
|
||||
}
|
||||
|
||||
|
||||
function features() {
|
||||
var onClick = function() { continueTo(clickTownHall); };
|
||||
|
||||
reveal(trimmedMap(), t('intro.navigation.features'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
context.map().on('drawn.intro', function() {
|
||||
reveal(trimmedMap(), t('intro.navigation.features'),
|
||||
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.map().on('drawn.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function clickTownHall() {
|
||||
context.enter(modeBrowse(context));
|
||||
context.history().reset('initial');
|
||||
var hall = context.entity(hallId);
|
||||
|
||||
reveal(null, null, { duration: 0 });
|
||||
context.map().zoomEase(19, 250);
|
||||
context.map().zoomEase(19, 500);
|
||||
|
||||
timeout(function() {
|
||||
context.map().centerEase(hall.loc, 250);
|
||||
var entity = context.hasEntity(hallId);
|
||||
if (!entity) return;
|
||||
context.map().centerEase(entity.loc, 500);
|
||||
|
||||
timeout(function() {
|
||||
var box = pointBox(hall.loc, context);
|
||||
reveal(box, t('intro.navigation.select'));
|
||||
var entity = context.hasEntity(hallId);
|
||||
if (!entity) return;
|
||||
var box = pointBox(entity.loc, context);
|
||||
reveal(box, t('intro.navigation.click_townhall'));
|
||||
|
||||
context.map().on('move.intro drawn.intro', function() {
|
||||
var box = pointBox(hall.loc, context);
|
||||
reveal(box, t('intro.navigation.select'), { duration: 0 });
|
||||
var entity = context.hasEntity(hallId);
|
||||
if (!entity) return;
|
||||
var box = pointBox(entity.loc, context);
|
||||
reveal(box, t('intro.navigation.click_townhall'), { duration: 0 });
|
||||
});
|
||||
|
||||
context.on('enter.intro', function() {
|
||||
if (isTownHallSelected()) continueTo(selectedTownHall);
|
||||
});
|
||||
}, 300); // after centerEase
|
||||
|
||||
}, 300); // after zoomEase
|
||||
}, 550); // after centerEase
|
||||
|
||||
}, 550); // after zoomEase
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('enter.intro', null);
|
||||
context.map().on('move.intro drawn.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
@@ -136,56 +174,162 @@ export function uiIntroNavigation(context, reveal) {
|
||||
function selectedTownHall() {
|
||||
if (!isTownHallSelected()) return clickTownHall();
|
||||
|
||||
var hall = context.entity(hallId);
|
||||
var box = pointBox(hall.loc, context);
|
||||
var advance = function() { continueTo(inspectTownHall); };
|
||||
var entity = context.hasEntity(hallId);
|
||||
if (!entity) return clickTownHall();
|
||||
|
||||
reveal(box, t('intro.navigation.selected'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: advance }
|
||||
var box = pointBox(entity.loc, context);
|
||||
var onClick = function() { continueTo(editorTownHall); };
|
||||
|
||||
reveal(box, t('intro.navigation.selected_townhall'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
context.map().on('move.intro drawn.intro', function() {
|
||||
var box = pointBox(hall.loc, context);
|
||||
reveal(box, t('intro.navigation.selected'),
|
||||
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
|
||||
var entity = context.hasEntity(hallId);
|
||||
if (!entity) return;
|
||||
var box = pointBox(entity.loc, context);
|
||||
reveal(box, t('intro.navigation.selected_townhall'),
|
||||
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.map().on('move.intro drawn.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function inspectTownHall() {
|
||||
function editorTownHall() {
|
||||
if (!isTownHallSelected()) return clickTownHall();
|
||||
|
||||
var onClick = function() { continueTo(presetTownHall); };
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(streetSearch);
|
||||
continueTo(clickTownHall);
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
reveal('.entity-editor-pane',
|
||||
t('intro.navigation.pane', { button: icon('#icon-close', 'pre-text') })
|
||||
t('intro.navigation.editor_townhall'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function streetSearch() {
|
||||
function presetTownHall() {
|
||||
if (!isTownHallSelected()) return clickTownHall();
|
||||
|
||||
var onClick = function() { continueTo(fieldsTownHall); };
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(clickTownHall);
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
reveal('.inspector-body .preset-list-item.inspector-inner',
|
||||
t('intro.navigation.preset_townhall', { preset: townHallPreset.name() }),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function fieldsTownHall() {
|
||||
if (!isTownHallSelected()) return clickTownHall();
|
||||
|
||||
var onClick = function() { continueTo(closeTownHall); };
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(clickTownHall);
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
reveal('.inspector-body .inspector-preset',
|
||||
t('intro.navigation.fields_townhall'),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function closeTownHall() {
|
||||
if (!isTownHallSelected()) return clickTownHall();
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(searchStreet);
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(hallId)) {
|
||||
continueTo(clickTownHall);
|
||||
}
|
||||
});
|
||||
|
||||
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') })
|
||||
);
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function searchStreet() {
|
||||
context.enter(modeBrowse(context));
|
||||
context.history().reset('initial'); // ensure spring street exists
|
||||
|
||||
var msec = transitionTime(townHall, context.map().center());
|
||||
var msec = transitionTime(springStreet, context.map().center());
|
||||
if (msec) { reveal(null, null, { duration: 0 }); }
|
||||
context.map().zoom(19).centerEase(townHall, msec); // ..and user can see it
|
||||
context.map().zoom(19).centerEase(springStreet, msec); // ..and user can see it
|
||||
|
||||
timeout(function() {
|
||||
reveal('.search-header input',
|
||||
t('intro.navigation.search', { name: t('intro.graph.name.spring-street') })
|
||||
t('intro.navigation.search_street', { name: t('intro.graph.name.spring-street') })
|
||||
);
|
||||
|
||||
d3.select('.search-header input')
|
||||
@@ -201,7 +345,7 @@ export function uiIntroNavigation(context, reveal) {
|
||||
|
||||
if (!firstName.empty() && firstName.text() === name) {
|
||||
reveal(first.node(),
|
||||
t('intro.navigation.choose', { name: name }),
|
||||
t('intro.navigation.choose_street', { name: name }),
|
||||
{ duration: 300 }
|
||||
);
|
||||
|
||||
@@ -216,25 +360,75 @@ export function uiIntroNavigation(context, reveal) {
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
d3.select('.search-header input')
|
||||
.on('keydown.intro', null)
|
||||
.on('keyup.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function selectedStreet() {
|
||||
context.map().centerEase(springStreet);
|
||||
if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) {
|
||||
return searchStreet();
|
||||
}
|
||||
|
||||
timeout(function() {
|
||||
reveal('.entity-editor-pane',
|
||||
t('intro.navigation.chosen', {
|
||||
name: t('intro.graph.name.spring-street'),
|
||||
button: icon('#icon-close', 'pre-text')
|
||||
})
|
||||
var onClick = function() { continueTo(editorStreet); };
|
||||
var entity = context.entity(springStreetEndId);
|
||||
var box = pointBox(entity.loc, context);
|
||||
box.height = 500;
|
||||
|
||||
reveal(box,
|
||||
t('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
|
||||
{ buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
|
||||
context.map().on('move.intro drawn.intro', function() {
|
||||
var entity = context.hasEntity(springStreetEndId);
|
||||
if (!entity) return;
|
||||
var box = pointBox(entity.loc, context);
|
||||
box.height = 500;
|
||||
reveal(box,
|
||||
t('intro.navigation.selected_street', { name: t('intro.graph.name.spring-street') }),
|
||||
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
|
||||
);
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(play);
|
||||
});
|
||||
}, 400);
|
||||
});
|
||||
|
||||
context.on('enter.intro', function(mode) {
|
||||
if (mode.id !== 'select') {
|
||||
// keep Spring Street selected..
|
||||
context.enter(modeSelect(context, [springStreetId]));
|
||||
}
|
||||
});
|
||||
|
||||
context.history().on('change.intro', function() {
|
||||
if (!context.hasEntity(springStreetEndId) || !context.hasEntity(springStreetId)) {
|
||||
timeout(function() {
|
||||
continueTo(searchStreet);
|
||||
}, 300); // after any transition (e.g. if user deleted intersection)
|
||||
}
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.map().on('move.intro drawn.intro', null);
|
||||
context.on('enter.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function editorStreet() {
|
||||
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') })
|
||||
);
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
continueTo(play);
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.on('exit.intro', null);
|
||||
|
||||
Reference in New Issue
Block a user