From 95eb64584b7e36cb26aa2eb7566802b4d064ef9a Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Mon, 22 Jul 2013 10:22:17 -0700 Subject: [PATCH] Update walkthrough for left-hand sidebar --- js/id/ui/intro.js | 16 ++++++++++------ js/id/ui/intro/area.js | 8 ++++---- js/id/ui/intro/line.js | 14 +++++++------- js/id/ui/intro/navigation.js | 25 +++++++++++++------------ js/id/ui/intro/point.js | 14 +++++++------- 5 files changed, 41 insertions(+), 36 deletions(-) diff --git a/js/id/ui/intro.js b/js/id/ui/intro.js index 2bc39a5e4..7ef4e6723 100644 --- a/js/id/ui/intro.js +++ b/js/id/ui/intro.js @@ -98,20 +98,24 @@ iD.ui.intro = function(context) { return intro; }; -iD.ui.intro.pointBox = function(point) { +iD.ui.intro.pointBox = function(point, context) { + var rect = context.surface().node().getBoundingClientRect(); + point = context.projection(point); return { - left: point[0] - 30, - top: point[1] - 50, + left: point[0] + rect.left - 30, + top: point[1] + rect.top - 50, width: 60, height: 70 }; }; -iD.ui.intro.pad = function(box, padding) { +iD.ui.intro.pad = function(box, padding, context) { if (box instanceof Array) { + var rect = context.surface().node().getBoundingClientRect(); + box = context.projection(box); box = { - left: box[0], - top: box[1] + left: box[0] + rect.left, + top: box[1] + rect.top }; } return { diff --git a/js/id/ui/intro/area.js b/js/id/ui/intro/area.js index ee05e15f2..cf26a9356 100644 --- a/js/id/ui/intro/area.js +++ b/js/id/ui/intro/area.js @@ -21,12 +21,12 @@ iD.ui.intro.area = function(context, reveal) { context.on('enter.intro', drawArea); var padding = 120 * Math.pow(2, context.map().zoom() - 19); - var pointBox = iD.ui.intro.pad(context.projection(corner), padding); + var pointBox = iD.ui.intro.pad(corner, padding, context); reveal(pointBox, t('intro.areas.corner')); context.map().on('move.intro', function() { padding = 120 * Math.pow(2, context.map().zoom() - 19); - pointBox = iD.ui.intro.pad(context.projection(corner), padding); + pointBox = iD.ui.intro.pad(corner, padding, context); reveal(pointBox, t('intro.areas.corner'), {duration: 0}); }); } @@ -36,12 +36,12 @@ iD.ui.intro.area = function(context, reveal) { context.on('enter.intro', enterSelect); var padding = 150 * Math.pow(2, context.map().zoom() - 19); - var pointBox = iD.ui.intro.pad(context.projection(playground), padding); + var pointBox = iD.ui.intro.pad(playground, padding, context); reveal(pointBox, t('intro.areas.place')); context.map().on('move.intro', function() { padding = 150 * Math.pow(2, context.map().zoom() - 19); - pointBox = iD.ui.intro.pad(context.projection(playground), padding); + pointBox = iD.ui.intro.pad(playground, padding, context); reveal(pointBox, t('intro.areas.place'), {duration: 0}); }); } diff --git a/js/id/ui/intro/line.js b/js/id/ui/intro/line.js index 7f7547d07..0e552111b 100644 --- a/js/id/ui/intro/line.js +++ b/js/id/ui/intro/line.js @@ -32,12 +32,12 @@ iD.ui.intro.line = function(context, reveal) { context.on('enter.intro', drawLine); var padding = 150 * Math.pow(2, context.map().zoom() - 18); - var pointBox = iD.ui.intro.pad(context.projection(start), padding); + var pointBox = iD.ui.intro.pad(start, padding, context); reveal(pointBox, t('intro.lines.start')); context.map().on('move.intro', function() { padding = 150 * Math.pow(2, context.map().zoom() - 18); - pointBox = iD.ui.intro.pad(context.projection(start), padding); + pointBox = iD.ui.intro.pad(start, padding, context); reveal(pointBox, t('intro.lines.start'), {duration: 0}); }); } @@ -48,12 +48,12 @@ iD.ui.intro.line = function(context, reveal) { context.on('enter.intro', retry); var padding = 300 * Math.pow(2, context.map().zoom() - 19); - var pointBox = iD.ui.intro.pad(context.projection(midpoint), padding); + var pointBox = iD.ui.intro.pad(midpoint, padding, context); reveal(pointBox, t('intro.lines.intersect')); context.map().on('move.intro', function() { padding = 300 * Math.pow(2, context.map().zoom() - 19); - pointBox = iD.ui.intro.pad(context.projection(midpoint), padding); + pointBox = iD.ui.intro.pad(midpoint, padding, context); reveal(pointBox, t('intro.lines.intersect'), {duration: 0}); }); } @@ -61,7 +61,7 @@ iD.ui.intro.line = function(context, reveal) { // ended line before creating intersection function retry(mode) { if (mode.id !== 'select') return; - var pointBox = iD.ui.intro.pad(context.projection(intersection), 30); + var pointBox = iD.ui.intro.pad(intersection, 30); reveal(pointBox, t('intro.lines.restart')); timeout(function() { context.replace(iD.actions.DeleteMultiple(mode.selectedIDs())); @@ -78,12 +78,12 @@ iD.ui.intro.line = function(context, reveal) { context.on('enter.intro', enterSelect); var padding = 900 * Math.pow(2, context.map().zoom() - 19); - var pointBox = iD.ui.intro.pad(context.projection(centroid), padding); + var pointBox = iD.ui.intro.pad(centroid, padding, context); reveal(pointBox, t('intro.lines.finish')); context.map().on('move.intro', function() { padding = 900 * Math.pow(2, context.map().zoom() - 19); - pointBox = iD.ui.intro.pad(context.projection(centroid), padding); + pointBox = iD.ui.intro.pad(centroid, padding, context); reveal(pointBox, t('intro.lines.finish'), {duration: 0}); }); } diff --git a/js/id/ui/intro/navigation.js b/js/id/ui/intro/navigation.js index 032faa4ea..7a045b5b2 100644 --- a/js/id/ui/intro/navigation.js +++ b/js/id/ui/intro/navigation.js @@ -23,12 +23,13 @@ iD.ui.intro.navigation = function(context, reveal) { step.enter = function() { - var map = { - left: 30, - top: 60, - width: context.map().dimensions()[0] - 60, - height: context.map().dimensions()[1] - 200 - }; + var rect = context.surface().node().getBoundingClientRect(), + map = { + left: rect.left + 10, + top: rect.top + 70, + width: rect.width - 70, + height: rect.height - 170 + }; context.map().centerZoom([-85.63591, 41.94285], 19); @@ -42,18 +43,18 @@ iD.ui.intro.navigation = function(context, reveal) { function townhall() { var hall = [-85.63645945147184, 41.942986488012565]; - var point = context.projection(hall); - if (point[0] < 0 || point[0] > window.innerWidth - 200 || - point[1] < 0 || point[1] > window.innerHeight) { + var point = context.projection(hall); + if (point[0] < 0 || point[0] > rect.width || + point[1] < 0 || point[1] > rect.height) { context.map().center(hall); - point = context.projection(hall); } - var box = iD.ui.intro.pointBox(point); + + var box = iD.ui.intro.pointBox(hall, context); reveal(box, t('intro.navigation.select')); context.map().on('move.intro', function() { - var box = iD.ui.intro.pointBox(context.projection(hall)); + var box = iD.ui.intro.pointBox(hall, context); reveal(box, t('intro.navigation.select'), {duration: 0}); }); } diff --git a/js/id/ui/intro/point.js b/js/id/ui/intro/point.js index a2b50ffb7..6404e3a4a 100644 --- a/js/id/ui/intro/point.js +++ b/js/id/ui/intro/point.js @@ -24,11 +24,11 @@ iD.ui.intro.point = function(context, reveal) { if (mode.id !== 'add-point') return; context.on('enter.intro', enterSelect); - var pointBox = iD.ui.intro.pad(context.projection(corner), 150); + var pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.place')); context.map().on('move.intro', function() { - pointBox = iD.ui.intro.pad(context.projection(corner), 150); + pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.place'), {duration: 0}); }); @@ -78,11 +78,11 @@ iD.ui.intro.point = function(context, reveal) { context.history().on('change.intro', null); context.on('enter.intro', enterReselect); - var pointBox = iD.ui.intro.pad(context.projection(corner), 150); + var pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect')); context.map().on('move.intro', function() { - pointBox = iD.ui.intro.pad(context.projection(corner), 150); + pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect'), {duration: 0}); }); } @@ -102,11 +102,11 @@ iD.ui.intro.point = function(context, reveal) { context.on('exit.intro', null); context.on('enter.intro', enterDelete); - var pointBox = iD.ui.intro.pad(context.projection(corner), 150); + var pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect_delete')); context.map().on('move.intro', function() { - pointBox = iD.ui.intro.pad(context.projection(corner), 150); + pointBox = iD.ui.intro.pad(corner, 150, context); reveal(pointBox, t('intro.points.reselect_delete'), {duration: 0}); }); } @@ -121,7 +121,7 @@ iD.ui.intro.point = function(context, reveal) { setTimeout(function() { var node = d3.select('.radial-menu-item-delete').node(); - var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50); + var pointBox = iD.ui.intro.pad(node.getBoundingClientRect(), 50, context); reveal(pointBox, t('intro.points.delete')); }, 300); }