CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 19:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update the first two chapters of the walkthrough for non-mouse interaction

Browse Source
This commit is contained in:
Quincy Morgan
2020-05-10 12:02:36 -07:00
parent e6fc7e221a
commit 20fadf0b1a
3 changed files with 11 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/core.yaml
+5 -8
View File
@@ -1836,18 +1836,15 @@ en:
welcome: "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap."
practice: "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved."
words: "This walkthrough will introduce some new words and concepts. When we introduce a new word, we'll use *italics*."
mouse: "You can use any input device to edit the map, but this walkthrough assumes you have a mouse with left and right buttons. **If you want to attach a mouse, do so now, then click OK.**"
leftclick: "When this tutorial asks you to click or double-click, we mean with the left button. On a trackpad it might be a single-click or single-finger tap. **Left-click {num} times.**"
rightclick: "Sometimes we'll also ask you to right-click. This might be the same as control-click, or two-finger tap on a trackpad. Your keyboard might even have a 'menu' key that works like right-click. **Right-click {num} times.**"
chapters: "So far, so good! You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
chapters: "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Press '{next}' to continue.**"
navigation:
title: "Navigation"
drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can drag the map by pressing and holding the left mouse button while moving the mouse around. You can also use the arrow keys on your keyboard. **Drag the map!**"
zoom: "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by clicking the {plus} / {minus} buttons. **Zoom the map!**"
drag: "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag or tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**"
zoom: "You can zoom in or out by scrolling with a mouse wheel, pinching on a touchscreen, or pressing the {plus} / {minus} buttons. **Zoom the map!**"
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."
points_lines_areas: "Map features are represented using *points, lines, or areas.*"
nodes_ways: "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*."
click_townhall: "All features on the map can be selected by clicking on them. **Click on the point to select it.**"
click_townhall: "All features on the map can be selected by clicking or tapping on them. **Select the point.**"
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}."
@@ -1857,7 +1854,7 @@ en:
choose_street: "**Choose {name} from the list to select it.**"
selected_street: "Great! {name} is now selected."
editor_street: "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows 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}'.**"
play: "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
points:
title: "Points"
add_point: "*Points* can be used to represent features such as shops, restaurants, and monuments.{br}They mark a specific location, and describe what's there. **Click the {button} Point button to add a new point.**"
dist/locales/en.json
Vendored
+5 -8
View File
@@ -2284,19 +2284,16 @@
"welcome": "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap.",
"practice": "All of the data in this walkthrough is just for practicing, and any edits that you make in the walkthrough will not be saved.",
"words": "This walkthrough will introduce some new words and concepts. When we introduce a new word, we'll use *italics*.",
"mouse": "You can use any input device to edit the map, but this walkthrough assumes you have a mouse with left and right buttons. **If you want to attach a mouse, do so now, then click OK.**",
"leftclick": "When this tutorial asks you to click or double-click, we mean with the left button. On a trackpad it might be a single-click or single-finger tap. **Left-click {num} times.**",
"rightclick": "Sometimes we'll also ask you to right-click. This might be the same as control-click, or two-finger tap on a trackpad. Your keyboard might even have a 'menu' key that works like right-click. **Right-click {num} times.**",
"chapters": "So far, so good! You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Click '{next}' to continue.**"
"chapters": "You can use the buttons below to skip chapters at any time or to restart a chapter if you get stuck. Let's begin! **Press '{next}' to continue.**"
},
"navigation": {
"title": "Navigation",
"drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can drag the map by pressing and holding the left mouse button while moving the mouse around. You can also use the arrow keys on your keyboard. **Drag the map!**",
"zoom": "You can zoom in or out by scrolling with the mouse wheel or trackpad, or by clicking the {plus} / {minus} buttons. **Zoom the map!**",
"drag": "The main map area shows OpenStreetMap data on top of a background.{br}You can click-and-drag or tap-and-drag the map to move it around. You can also use the arrow keys on a keyboard. **Drag the map!**",
"zoom": "You can zoom in or out by scrolling with a mouse wheel, pinching on a touchscreen, or pressing the {plus} / {minus} buttons. **Zoom the map!**",
"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.",
"points_lines_areas": "Map features are represented using *points, lines, or areas.*",
"nodes_ways": "In OpenStreetMap, points are sometimes called *nodes*, and lines and areas are sometimes called *ways*.",
"click_townhall": "All features on the map can be selected by clicking on them. **Click on the point to select it.**",
"click_townhall": "All features on the map can be selected by clicking or tapping on them. **Select the point.**",
"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}.",
@@ -2306,7 +2303,7 @@
"choose_street": "**Choose {name} from the list to select it.**",
"selected_street": "Great! {name} is now selected.",
"editor_street": "The fields shown for a street are different than the fields that were shown for the town hall.{br}For this selected street, the feature editor shows 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}'.**"
"play": "Try exploring the map and selecting some other features to see what kinds of things can be added to OpenStreetMap. **When you are ready to continue to the next chapter, press '{next}'.**"
},
"points": {
"title": "Points",
modules/ui/intro/welcome.js
+1 -223
View File
@@ -1,8 +1,4 @@
import { dispatch as d3_dispatch } from 'd3-dispatch';
import {
event as d3_event,
select as d3_select
} from 'd3-selection';
import { t } from '../../core/localizer';
import { utilRebind } from '../../util/rebind';
@@ -10,7 +6,6 @@ import { utilRebind } from '../../util/rebind';
export function uiIntroWelcome(context, reveal) {
var dispatch = d3_dispatch('done');
var listener = clickListener();
var chapter = {
title: 'intro.welcome.title'
@@ -35,101 +30,11 @@ export function uiIntroWelcome(context, reveal) {
function words() {
reveal('.intro-nav-wrap .chapter-welcome',
t('intro.welcome.words'),
{ buttonText: t('intro.ok'), buttonCallback: mouse }
{ buttonText: t('intro.ok'), buttonCallback: chapters }
);
}
function mouse() {
reveal('.intro-nav-wrap .chapter-welcome',
t('intro.welcome.mouse'),
{ buttonText: t('intro.ok'), buttonCallback: leftClick }
);
}
function leftClick() {
var counter = 0;
var times = 5;
var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
t('intro.welcome.leftclick', { num: times }),
{ tooltipClass: 'intro-mouse' }
);
tooltip.selectAll('.popover-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#iD-walkthrough-mouse');
tooltip
.append('div')
.attr('class', 'counter');
tooltip.call(listener);
listener.on('click', function(which) {
if (which === 'left') {
context.container().select('.curtain-tooltip.intro-mouse .counter')
.text(String(++counter));
if (counter === times) {
window.setTimeout(function() { continueTo(rightClick); }, 1000);
}
}
});
function continueTo(nextStep) {
listener.on('click', null);
tooltip.call(listener.off);
tooltip.select('.counter').remove();
nextStep();
}
}
function rightClick() {
var counter = 0;
var times = 5;
var tooltip = reveal('.intro-nav-wrap .chapter-welcome',
t('intro.welcome.rightclick', { num: times }),
{ tooltipClass: 'intro-mouse' }
);
tooltip.selectAll('.popover-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#iD-walkthrough-mouse');
tooltip
.append('div')
.attr('class', 'counter');
tooltip.call(listener);
listener.on('click', function(which) {
if (which === 'right') {
context.container().select('.curtain-tooltip.intro-mouse .counter')
.text(String(++counter));
if (counter === times) {
window.setTimeout(function() { continueTo(chapters); }, 1000);
}
}
});
function continueTo(nextStep) {
listener.on('click', null);
tooltip.call(listener.off);
tooltip.select('.counter').remove();
nextStep();
}
}
function chapters() {
dispatch.call('done');
reveal('.intro-nav-wrap .chapter-navigation',
@@ -144,7 +49,6 @@ export function uiIntroWelcome(context, reveal) {
chapter.exit = function() {
listener.off();
context.container().select('.curtain-tooltip.intro-mouse')
.selectAll('.counter')
.remove();
@@ -159,129 +63,3 @@ export function uiIntroWelcome(context, reveal) {
return utilRebind(chapter, dispatch, 'on');
}
function clickListener() {
var dispatch = d3_dispatch('click');
var minTime = 120;
var tooltip = d3_select(null);
var down = {};
var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
// `down` keeps track of which buttons/keys are down.
// Setting a property in `down` happens immediately.
// Unsetting a property in `down` is delayed because
// on Windows a contextmenu event happens after keyup/mouseup
function keydown() {
if (d3_event.keyCode === 93) { // context menu
d3_event.preventDefault();
d3_event.stopPropagation();
down.menu = d3_event.timeStamp;
tooltip.classed('rightclick', true);
}
}
function keyup() {
if (d3_event.keyCode === 93) { // context menu
d3_event.preventDefault();
d3_event.stopPropagation();
var endTime = d3_event.timeStamp;
var startTime = down.menu || endTime;
var delay = (endTime - startTime < minTime) ? minTime : 0;
window.setTimeout(function() {
tooltip.classed('rightclick', false);
down.menu = undefined; // delayed, for Windows
}, delay);
dispatch.call('click', this, 'right');
}
}
function pointerdown() {
var button = d3_event.button;
if (button === 0 && !d3_event.ctrlKey) {
tooltip.classed('leftclick', true);
} else if (button === 2) {
tooltip.classed('rightclick', true);
}
down[button] = d3_event.timeStamp;
}
function pointerup() {
var button = d3_event.button;
var endTime = d3_event.timeStamp;
var startTime = down[button] || endTime;
var delay = (endTime - startTime < minTime) ? minTime : 0;
if (button === 0 && !d3_event.ctrlKey) {
window.setTimeout(function() {
tooltip.classed('leftclick', false);
down[button] = undefined; // delayed, for Windows
}, delay);
dispatch.call('click', this, 'left');
} else if (button === 2) {
window.setTimeout(function() {
tooltip.classed('rightclick', false);
down[button] = undefined; // delayed, for Windows
}, delay);
dispatch.call('click', this, 'right');
} else {
window.setTimeout(function() {
down[button] = undefined; // delayed, for Windows
}, delay);
}
}
function contextmenu() {
d3_event.preventDefault();
d3_event.stopPropagation();
if (!down[2] && !down.menu) {
tooltip.classed('rightclick', true);
window.setTimeout(function() {
tooltip.classed('rightclick', false);
}, minTime);
dispatch.call('click', this, 'right');
}
}
var behavior = function(selection) {
tooltip = selection;
down = {};
d3_select(window)
.on('keydown.intro', keydown)
.on('keyup.intro', keyup)
.on(_pointerPrefix + 'down.intro', pointerdown)
.on(_pointerPrefix + 'up.intro', pointerup)
.on('contextmenu.intro', contextmenu);
};
behavior.off = function() {
d3_select(window)
.on('keydown.intro', null)
.on('keyup.intro', null)
.on(_pointerPrefix + 'down.intro', null)
.on(_pointerPrefix + 'up.intro', null)
.on('contextmenu.intro', null);
tooltip
.classed('leftclick', false)
.classed('rightclick', false);
};
return utilRebind(behavior, dispatch, 'on');
}