diff --git a/data/core.yaml b/data/core.yaml index 20ac2c286..4b64931b1 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -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.**" diff --git a/dist/locales/en.json b/dist/locales/en.json index 4425048e1..0c5eeecf1 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -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", diff --git a/modules/ui/intro/welcome.js b/modules/ui/intro/welcome.js index 892d517bb..841606d57 100644 --- a/modules/ui/intro/welcome.js +++ b/modules/ui/intro/welcome.js @@ -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'); -}