From 9ba2ea7c03635ee9dc662577a219f1328b1e8674 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Tue, 26 Mar 2013 11:43:03 -0400 Subject: [PATCH] add editing and deleting poi to intro --- data/intro.yaml | 8 +++--- data/locales.js | 16 +++++------ js/id/ui/intro/point.js | 60 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 71 insertions(+), 13 deletions(-) diff --git a/data/intro.yaml b/data/intro.yaml index eded67655..37d218531 100644 --- a/data/intro.yaml +++ b/data/intro.yaml @@ -13,10 +13,10 @@ en: choose: "**Choose Cafe from the grid.**" describe: "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**" close: "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**" - selectanother: "Often points will already exist, but have mistakes or be incomplete. We can edit exist points. **Select the point for *Someting**" - fixname: "Change the name to *Something Else* **" - selectthird: "We only want to have one representation of a feature. We can see that there are two points for *Some Place*. **Select one of the points.**" - delete: "There menu that shows around the point contains various operations, including delete. **Delete the point.**" + reselect: "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**" + fixname: "**Change the name and close the feature editor.**" + reselect_delete: "All features on the map can be deleted. **Reselect the point you created.**" + delete: "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**" areas: add: "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most features types points can be used for, and are often preferred. **Click the Area button to add a new area.**" corner: "Areas are drawn by placing nodes that mark the boundary of the area. **Place the starting node on one of the corners of the playground.**" diff --git a/data/locales.js b/data/locales.js index 7e8981c31..66020fedc 100644 --- a/data/locales.js +++ b/data/locales.js @@ -1450,10 +1450,10 @@ locale.en = { "choose": "**Choose Cafe from the grid.**", "describe": "The point is now marked as a cafe. Using the feature editor, we can add more information about the feature. **Add a name and address**", "close": "The feature editor can be closed by clicking on the close button, or anywhere on the map. **Close the feature editor**", - "selectanother": "Often points will already exist, but have mistakes or be incomplete. We can edit exist points. **Select the point for *Someting**", - "fixname": "Change the name to *Something Else* **", - "selectthird": "We only want to have one representation of a feature. We can see that there are two points for *Some Place*. **Select one of the points.**", - "delete": "There menu that shows around the point contains various operations, including delete. **Delete the point.**" + "reselect": "Often points will already exist, but have mistakes or be incomplete. We can edit existing points. **Select the point you just created.**", + "fixname": "**Change the name and close the feature editor.**", + "reselect_delete": "All features on the map can be deleted. **Reselect the point you created.**", + "delete": "The menu around the point contains operations that can be performed on it, including delete. **Delete the point.**" }, "areas": { "add": "Areas are a more detailed way to represent features. They provide information on the boundaries of the feature. Areas can be used for most features types points can be used for, and are often preferred. **Click the Area button to add a new area.**", @@ -1467,10 +1467,10 @@ locale.en = { "add": "Lines are used to represent features such as roads, railways and rivers. **Click the Line button to add a new line.**", "start": "**Start the line by clicking on the end of the road.**", "intersect": "Click to add more points to the line. You can drag the map while drawing if necessary. Roads, and many other types of lines, are part of a larger network. It is important for these lines to be connected properly in order for routing applications to work. **Click on Flower Street, to create an intersection connecting the two lines.**", - "finish": "Just like with areas, lines can be finished by clicking on the last point again. **Finish drawing the road.**", - "road": "**Select *Road* from the grid**", - "residential": "There are different types of roads, the most common of which is Residential. **Choose the *Residential* road type**", - "describe": "**Name the road**" + "finish": "Lines can be finished by clicking on the last point again. **Finish drawing the road.**", + "road": "**Select Road from the grid**", + "residential": "There are different types of roads, the most common of which is Residential. **Choose the Residential road type**", + "describe": "**Name the road and close the feature editor.**" } } }; diff --git a/js/id/ui/intro/point.js b/js/id/ui/intro/point.js index 9d2414045..8b3646a2f 100644 --- a/js/id/ui/intro/point.js +++ b/js/id/ui/intro/point.js @@ -57,13 +57,71 @@ iD.ui.intro.point = function(context, curtain) { function selectedPreset() { curtain.reveal('.grid-pane', t('intro.points.describe')); context.history().on('change.intro', closeEditor); - context.on('exit.intro', event.done); + context.on('exit.intro', selectPoint); } function closeEditor() { context.history().on('change.intro', null); curtain.reveal('.tag-pane', t('intro.points.close')); } + + function selectPoint() { + context.on('exit.intro', null); + context.history().on('change.intro', null); + context.on('enter.intro', enterReselect); + + var pointBox = iD.ui.intro.pad(context.projection(corner), 150); + curtain.reveal(pointBox, t('intro.points.reselect')); + + context.map().on('move.intro', function() { + pointBox = iD.ui.intro.pad(context.projection(corner), 150); + curtain.reveal(pointBox, t('intro.points.reselect'), 0); + }); + } + + function enterReselect(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro', null); + context.on('enter.intro', null); + + setTimeout(function() { + curtain.reveal('.tag-pane', t('intro.points.fixname')); + context.on('exit.intro', deletePoint); + }, 500); + } + + function deletePoint() { + context.on('exit.intro', null); + context.on('enter.intro', enterDelete); + + var pointBox = iD.ui.intro.pad(context.projection(corner), 150); + curtain.reveal(pointBox, t('intro.points.reselect_delete')); + + context.map().on('move.intro', function() { + pointBox = iD.ui.intro.pad(context.projection(corner), 150); + curtain.reveal(pointBox, t('intro.points.reselect_delete'), 0); + }); + } + + function enterDelete(mode) { + if (mode.id !== 'select') return; + context.map().on('move.intro', null); + context.on('enter.intro', null); + context.on('exit.intro', deletePoint); + context.map().on('move.intro', deletePoint); + context.history().on('change.intro', deleted); + + setTimeout(function() { + var node = d3.select('.radial-menu-item-delete').node(); + var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50); + curtain.reveal(pointBox, t('intro.points.delete')); + }, 300); + } + + function deleted(changed) { + if (changed.deleted().length) event.done(); + } + }; step.exit = function() {