From 5f627c858e4adceb8ceba930a650cc94003c363f Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 1 Apr 2017 21:43:40 -0400 Subject: [PATCH] Localize a few more walkthrough names, start buildings chapter --- data/core.yaml | 71 +++++++++++------ dist/locales/en.json | 4 + modules/ui/intro/building.js | 148 +++++++++++++++++++++++++++++++++++ modules/ui/intro/helper.js | 63 ++++++++------- modules/ui/intro/intro.js | 3 + modules/ui/intro/line.js | 4 +- 6 files changed, 238 insertions(+), 55 deletions(-) create mode 100644 modules/ui/intro/building.js diff --git a/data/core.yaml b/data/core.yaml index ffdd5deba..3c23227b3 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -780,34 +780,38 @@ en: done: done ok: OK graph: + azaleamum_drive: Azaleamum Drive city_hall: Three Rivers City Hall - fire_department: Three Rivers Fire Department - memory_isle_park: Memory Isle Park - riverwalk_trail: Riverwalk Trail - w_michigan_ave: West Michigan Avenue - e_michigan_ave: East Michigan Avenue - spring_st: Spring Street - scidmore_park: Scidmore Park - petting_zoo: Scidmore Park Petting Zoo - n_andrews_st: North Andrews Street - s_andrews_st: South Andrews Street - n_constantine_st: North Constantine Street - s_constantine_st: South Constantine Street - rocky_river: Rocky River - railroad_dr: Railroad Drive conrail_rr: Conrail Railroad - st_joseph_river: Saint Joseph River - n_main_st: North Main Street - s_main_st: South Main Street - water_st: Water Street - foster_st: Foster Street - portage_river: Portage River - flower_st: Flower Street - elm_st: Elm Street - walnut_st: Walnut Street - morris_ave: Morris Avenue + e_michigan_ave: East Michigan Avenue east_st: East Street + elm_st: Elm Street + fire_department: Three Rivers Fire Department + first_baptist_church: First Baptist Church + flower_st: Flower Street + foster_st: Foster Street + memory_isle_park: Memory Isle Park + millard_st: Millard Street + morris_ave: Morris Avenue + n_andrews_st: North Andrews Street + n_constantine_st: North Constantine Street + n_main_st: North Main Street + petting_zoo: Scidmore Park Petting Zoo portage_ave: Portage Avenue + portage_river: Portage River + railroad_dr: Railroad Drive + riverwalk_trail: Riverwalk Trail + rocky_river: Rocky River + s_andrews_st: South Andrews Street + s_constantine_st: South Constantine Street + s_main_st: South Main Street + scidmore_park: Scidmore Park + south_st: South Street + spring_st: Spring Street + st_joseph_river: Saint Joseph River + w_michigan_ave: West Michigan Avenue + walnut_st: Walnut Street + water_st: Water Street welcome: title: "Welcome" welcome: "Welcome! This walkthrough will teach you the basics of editing on OpenStreetMap." @@ -862,6 +866,25 @@ en: restart: "The road needs to intersect {name}. Let's try again!" wrong_preset: "You didn't select the Residential road type. **Click here to choose again**" play: "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**" + buildings: + title: "Buildings" + add_building: "OpenStreetMap is the world's largest database of buildings. You can help improve this database by tracing buildings that aren't already mapped. **Click the {button} Area button to add a new area.**" + start_building: "Let's add this house to the map by tracing its outline. Buildings should be traced around their footprint as accurately as possible. **Click or press spacebar to place a starting node on one of the corners of the building.**" + 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 shape by clicking on the starting node. **Continue tracing the building.**" + choose_building: "**Select Building from the list**" + choose_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 pick the generic Building preset. **Choose the House building type**" + close: "**Hit escape, return, or click the {button} button to close the feature editor**" + rightclick: "**Right-click to select the building you created.**" + square: "The house that you just added will look even better with perfectly square corners. **Click on the {button} button to square the building shape.**" + done_square: "See how the corners of the building moved into place? Let's learn another useful trick." + add_tank: "Let's trace this circular storage tank. **Click the {button} Area button to add a new area.**" + start_tank: "Don't worry, you won't need to draw a perfect circle. Just draw an area inside the tank that touches its edge. **Click or press spacebar to place a starting node on the edge of the tank.**" + continue_tank: "Add a few more points around the edge. After you've added at least three points, finish the area by clicking on the starting node. **Continue tracing the tank.**" + search_tank: "**Search for '{name}'**" + choose_tank: "**Choose {name} from the list.**" + rightclick: "**Right-click to select the storage tank you created.**" + circle: "**Click on the {button} button to make the tank a circle.**" + play: "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**" startediting: title: "Start Editing" help: "You can replay this walkthrough or view more documentation by clicking the {button} Help button." diff --git a/dist/locales/en.json b/dist/locales/en.json index 7fe5146b3..bff3ceebb 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -725,6 +725,10 @@ "wrong_preset": "You didn't select the Residential road type. **Click here to choose again**", "play": "You added a new road! Try drawing a few more lines, and see what other kinds of lines you can add to OpenStreetMap. **When you are ready to continue to the next chapter, click '{next}'.**" }, + "buildings": { + "title": "Buildings", + "play": "Great Job! Try tracing a few more buildings. **When you are ready to continue to the next chapter, click '{next}'.**" + }, "startediting": { "title": "Start Editing", "help": "You can replay this walkthrough or view more documentation by clicking the {button} Help button.", diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js new file mode 100644 index 000000000..d0f2b22c1 --- /dev/null +++ b/modules/ui/intro/building.js @@ -0,0 +1,148 @@ +import * as d3 from 'd3'; +import { t } from '../../util/locale'; +import { utilRebind } from '../../util/rebind'; +import { icon, pad } from './helper'; + + +export function uiIntroBuilding(context, reveal) { + var dispatch = d3.dispatch('done'), + house = [-85.62815, 41.95638], + tank = [-85.62732, 41.95347], + timeouts = []; + + + var chapter = { + title: 'intro.buildings.title' + }; + + + function timeout(f, t) { + timeouts.push(window.setTimeout(f, t)); + } + + + function eventCancel() { + d3.event.stopPropagation(); + d3.event.preventDefault(); + } + + + function addBuilding() { + var tooltip = reveal('button.add-area', + t('intro.buildings.add_building', { button: icon('#icon-area', 'pre-text') })); + + // tooltip.selectAll('.tooltip-inner') + // .insert('svg', 'span') + // .attr('class', 'tooltip-illustration') + // .append('use') + // .attr('xlink:href', '#landuse-images'); + + context.on('enter.intro', function(mode) { + if (mode.id !== 'add-area') return; + continueTo(startBuilding); + }); + + function continueTo(nextStep) { + context.on('enter.intro', null); + nextStep(); + } + } + + + function startBuilding() { + if (context.mode().id !== 'add-area') { + return chapter.restart(); + } + + var padding = 120 * Math.pow(2, context.map().zoom() - 19); + var box = pad(house, padding, context); + reveal(box, t('intro.buildings.start_building')); + + context.map().on('move.intro drawn.intro', function() { + padding = 120 * Math.pow(2, context.map().zoom() - 19); + box = pad(house, padding, context); + reveal(box, t('intro.buildings.start_building'), { duration: 0 }); + }); + + context.on('enter.intro', function(mode) { + if (mode.id !== 'draw-area') return chapter.restart(); + continueTo(drawBuilding); + }); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } + + + function drawBuilding() { + if (context.mode().id !== 'draw-area') { + return chapter.restart(); + } + + var padding = 150 * Math.pow(2, context.map().zoom() - 19); + var box = pad(house, padding, context); + reveal(box, t('intro.buildings.continue_building')); + + context.map().on('move.intro drawn.intro', function() { + padding = 150 * Math.pow(2, context.map().zoom() - 19); + box = pad(house, padding, context); + reveal(box, t('intro.buildings.continue_building'), {duration: 0}); + }); + + context.on('enter.intro', function(mode) { + if (mode.id === 'draw-area') + return; + else if (mode.id === 'select') + return continueTo(play); + else + return chapter.restart(); + }); + + function continueTo(nextStep) { + context.map().on('move.intro drawn.intro', null); + context.on('enter.intro', null); + nextStep(); + } + } + + + function play() { + dispatch.call('done'); + reveal('.intro-nav-wrap .chapter-startEditing', + t('intro.buildings.play', { next: t('intro.startediting.title') }), { + buttonText: t('intro.ok'), + buttonCallback: function() { reveal('#id-container'); } + } + ); + } + + + chapter.enter = function() { + context.history().reset('initial'); + context.map().zoom(19).centerEase(house); + addBuilding(); + }; + + + chapter.exit = function() { + timeouts.forEach(window.clearTimeout); + context.on('enter.intro', null); + context.on('exit.intro', null); + context.map().on('move.intro drawn.intro', null); + context.history().on('change.intro', null); + d3.select('.preset-search-input').on('keydown.intro keyup.intro', null); + d3.select('.more-fields .combobox-input').on('click.intro', null); + }; + + + chapter.restart = function() { + chapter.exit(); + chapter.enter(); + }; + + + return utilRebind(chapter, dispatch, 'on'); +} diff --git a/modules/ui/intro/helper.js b/modules/ui/intro/helper.js index 3e7c1fd4f..8a7496fa7 100644 --- a/modules/ui/intro/helper.js +++ b/modules/ui/intro/helper.js @@ -39,46 +39,51 @@ export function icon(name, svgklass) { export var localNames = { + w17967809: 'azaleamum_drive', n2140018997: 'city_hall', + w17965998: 'conrail_rr', + w134150845: 'conrail_rr', + w134150802: 'e_michigan_ave', + w134150836: 'e_michigan_ave', + w41074896: 'e_michigan_ave', + w17967444: 'east_st', + w17965502: 'elm_st', n367813436: 'fire_department', + n354031352: 'first_baptist_church', + w17965351: 'flower_st', + w17964996: 'foster_st', w203988286: 'memory_isle_park', + w17966942: 'millard_st', + w17964793: 'morris_ave', + w17967397: 'n_andrews_st', + w17967326: 'n_constantine_st', + w143497377: 'n_main_st', + w203049587: 'petting_zoo', + w17966984: 'portage_ave', + w170848330: 'portage_river', + w17967752: 'railroad_dr', w203972937: 'riverwalk_trail', w203972938: 'riverwalk_trail', w203972940: 'riverwalk_trail', + w170848823: 'rocky_river', + w170848824: 'rocky_river', + w170848331: 'rocky_river', + w17967315: 's_andrews_st', + w17966400: 's_constantine_st', + w17964497: 's_constantine_st', + w134150801: 's_main_st', + w134150830: 's_main_st', + w17966462: 's_main_st', + w203986457: 'scidmore_park', + w17966102: 'south_st', + w17965834: 'spring_st', + w170989131: 'st_joseph_river', w41785752: 'w_michigan_ave', w134150789: 'w_michigan_ave', w134150795: 'w_michigan_ave', w134150800: 'w_michigan_ave', w134150811: 'w_michigan_ave', - w134150802: 'e_michigan_ave', - w134150836: 'e_michigan_ave', - w41074896: 'e_michigan_ave', - w17965834: 'spring_st', - w203986457: 'scidmore_park', - w203049587: 'petting_zoo', - w17967397: 'n_andrews_st', - w17967315: 's_andrews_st', - w17967326: 'n_constantine_st', - w17966400: 's_constantine_st', - w170848823: 'rocky_river', - w170848824: 'rocky_river', - w170848331: 'rocky_river', - w17967752: 'railroad_dr', - w17965998: 'conrail_rr', - w134150845: 'conrail_rr', - w170989131: 'st_joseph_river', - w143497377: 'n_main_st', - w134150801: 's_main_st', - w134150830: 's_main_st', - w17966462: 's_main_st', - w17967734: 'water_st', - w17964996: 'foster_st', - w170848330: 'portage_river', - w17965351: 'flower_st', - w17965502: 'elm_st', w17965402: 'walnut_st', - w17964793: 'morris_ave', - w17967444: 'east_st', - w17966984: 'portage_ave' + w17967734: 'water_st' }; diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index 85b31c9c2..353a247ed 100644 --- a/modules/ui/intro/intro.js +++ b/modules/ui/intro/intro.js @@ -14,6 +14,7 @@ import { uiIntroNavigation } from './navigation'; import { uiIntroPoint } from './point'; import { uiIntroArea } from './area'; import { uiIntroLine } from './line'; +import { uiIntroBuilding } from './building'; import { uiIntroStartEditing } from './start_editing'; @@ -23,6 +24,7 @@ var chapterUi = { point: uiIntroPoint, area: uiIntroArea, line: uiIntroLine, + building: uiIntroBuilding, startEditing: uiIntroStartEditing }; @@ -32,6 +34,7 @@ var chapterFlow = [ 'point', 'area', 'line', + 'building', 'startEditing' ]; diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 7509f3e3d..6d633849b 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -285,8 +285,8 @@ export function uiIntroLine(context, reveal) { function play() { dispatch.call('done'); - reveal('.intro-nav-wrap .chapter-startEditing', - t('intro.lines.play', { next: t('intro.startediting.title') }), { + reveal('.intro-nav-wrap .chapter-buildings', + t('intro.lines.play', { next: t('intro.buildings.title') }), { buttonText: t('intro.ok'), buttonCallback: function() { reveal('#id-container'); } }