Update walkthrough for left-hand sidebar

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 {

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});
             });
         }

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});
                 });
             }

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});
             });
         }

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);
         }