From 76d9f0293ee1189fc4e05566b5b0a53c3ea6285a Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 5 May 2017 15:49:05 -0400 Subject: [PATCH] Teach +/- buttons during the zoom step, and don't cover them with curtain (closes #4014) --- data/core.yaml | 2 +- dist/locales/en.json | 2 +- modules/ui/intro/navigation.js | 44 +++++++++++++++++----------------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index e586b29a2..b22f7855c 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -916,7 +916,7 @@ en: navigation: 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!**" + 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!**" 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*." diff --git a/dist/locales/en.json b/dist/locales/en.json index dcf8d95f9..8eae9ecab 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -776,7 +776,7 @@ "navigation": { "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!**", + "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!**", "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*.", diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 095751919..4a113bd0c 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -1,5 +1,5 @@ import * as d3 from 'd3'; -import { t, textDirection } from '../../util/locale'; +import { t } from '../../util/locale'; import { modeBrowse, modeSelect } from '../../modes'; import { utilRebind } from '../../util/rebind'; import { icon, pointBox, transitionTime } from './helper'; @@ -39,17 +39,6 @@ export function uiIntroNavigation(context, reveal) { } - function trimmedMap() { - var rect = d3.select('#map').node().getBoundingClientRect(); - return { - left: rect.left + (textDirection === 'rtl' ? 60 : 10), - top: rect.top + 70, - width: rect.width - 60, - height: rect.height - 170 - }; - } - - function dragMap() { context.enter(modeBrowse(context)); context.history().reset('initial'); @@ -61,9 +50,9 @@ export function uiIntroNavigation(context, reveal) { timeout(function() { var centerStart = context.map().center(); - reveal(trimmedMap(), t('intro.navigation.drag')); + reveal('#surface', t('intro.navigation.drag')); context.map().on('drawn.intro', function() { - reveal(trimmedMap(), t('intro.navigation.drag'), { duration: 0 }); + reveal('#surface', t('intro.navigation.drag'), { duration: 0 }); }); context.map().on('move.intro', function() { @@ -86,9 +75,20 @@ export function uiIntroNavigation(context, reveal) { function zoomMap() { var zoomStart = context.map().zoom(); - reveal(trimmedMap(), t('intro.navigation.zoom')); + reveal('#surface', + t('intro.navigation.zoom', { + plus: icon('#icon-plus', 'pre-text'), + minus: icon('#icon-minus', 'pre-text') + }) + ); + context.map().on('drawn.intro', function() { - reveal(trimmedMap(), t('intro.navigation.zoom'), { duration: 0 }); + reveal('#surface', + t('intro.navigation.zoom', { + plus: icon('#icon-plus', 'pre-text'), + minus: icon('#icon-minus', 'pre-text') + }), { duration: 0 } + ); }); context.map().on('move.intro', function() { @@ -108,12 +108,12 @@ export function uiIntroNavigation(context, reveal) { function features() { var onClick = function() { continueTo(pointsLinesAreas); }; - reveal(trimmedMap(), t('intro.navigation.features'), + reveal('#surface', t('intro.navigation.features'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal(trimmedMap(), t('intro.navigation.features'), + reveal('#surface', t('intro.navigation.features'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); }); @@ -127,12 +127,12 @@ export function uiIntroNavigation(context, reveal) { function pointsLinesAreas() { var onClick = function() { continueTo(nodesWays); }; - reveal(trimmedMap(), t('intro.navigation.points_lines_areas'), + reveal('#surface', t('intro.navigation.points_lines_areas'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal(trimmedMap(), t('intro.navigation.points_lines_areas'), + reveal('#surface', t('intro.navigation.points_lines_areas'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); }); @@ -146,12 +146,12 @@ export function uiIntroNavigation(context, reveal) { function nodesWays() { var onClick = function() { continueTo(clickTownHall); }; - reveal(trimmedMap(), t('intro.navigation.nodes_ways'), + reveal('#surface', t('intro.navigation.nodes_ways'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal(trimmedMap(), t('intro.navigation.nodes_ways'), + reveal('#surface', t('intro.navigation.nodes_ways'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); });