some intro cleanup

css/intro.css

@@ -1,3 +1,8 @@
+.curtain-darkness {
+    fill-opacity: 0.7;
+    fill: #222;
+}
+
 .intro-nav-wrap {
     position: absolute;
     left: 30px;

js/id/ui/intro/area.js

@@ -12,7 +12,7 @@ iD.ui.intro.area = function(context, curtain) {
         var playground = [-85.63552, 41.94159],
             corner = [-85.63565411045074, 41.9417715536927];
         context.map().centerZoom(playground, 19);
-        curtain.reveal('button.add-area', 'bottom', t('intro.areas.add'));
+        curtain.reveal('button.add-area', t('intro.areas.add'));
 
         context.on('enter.intro', addArea);
 
@@ -22,12 +22,12 @@ iD.ui.intro.area = function(context, curtain) {
 
             var padding = 120 * Math.pow(2, context.map().zoom() - 19);
             var pointBox = iD.ui.intro.pad(context.projection(corner), padding);
-            curtain.reveal(pointBox, 'right', t('intro.areas.corner'));
+            curtain.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);
-                curtain.reveal(pointBox, 'right', t('intro.areas.corner'), 0);
+                curtain.reveal(pointBox, t('intro.areas.corner'), 0);
             });
         }
 
@@ -37,12 +37,12 @@ iD.ui.intro.area = function(context, curtain) {
 
             var padding = 150 * Math.pow(2, context.map().zoom() - 19);
             var pointBox = iD.ui.intro.pad(context.projection(playground), padding);
-            curtain.reveal(pointBox, 'right', t('intro.areas.place'));
+            curtain.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);
-                curtain.reveal(pointBox, 'right', t('intro.areas.place'), 0);
+                curtain.reveal(pointBox, t('intro.areas.place'), 0);
             });
         }
 
@@ -52,7 +52,7 @@ iD.ui.intro.area = function(context, curtain) {
             context.on('enter.intro', null);
 
             setTimeout(function() {
-                curtain.reveal('.preset-grid-search', 'left', t('intro.areas.search'));
+                curtain.reveal('.preset-grid-search', t('intro.areas.search'));
                 d3.select('.preset-grid-search').on('keyup.intro', keySearch);
             }, 500);
         }
@@ -60,14 +60,14 @@ iD.ui.intro.area = function(context, curtain) {
         function keySearch() {
             var first = d3.select('.grid-button-wrap:first-child');
             if (first.datum().id === 'leisure/playground') {
-                curtain.reveal(first.select('.grid-entry').node(), 'left', t('intro.areas.choose'));
+                curtain.reveal(first.select('.grid-entry').node(), t('intro.areas.choose'));
                 d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
                 d3.select('.preset-grid-search').on('keyup.intro', null);
             }
         }
 
         function selectedPreset() {
-            curtain.reveal('.pane', 'left', 'Add a name and edit some details. Click x to exit');
+            curtain.reveal('.pane', 'Add a name and edit some details. Click x to exit');
             context.on('exit.intro', event.done);
         }
 

js/id/ui/intro/line.js

@@ -19,7 +19,7 @@ iD.ui.intro.line = function(context, curtain) {
 
         context.map().centerZoom(start, 19);
         console.log("here");
-        curtain.reveal('button.add-line', 'bottom', t('intro.lines.add'));
+        curtain.reveal('button.add-line', t('intro.lines.add'));
 
         context.on('enter.intro', addLine);
 
@@ -29,12 +29,12 @@ iD.ui.intro.line = function(context, curtain) {
 
             var padding = 150 * Math.pow(2, context.map().zoom() - 19);
             var pointBox = iD.ui.intro.pad(context.projection(start), padding);
-            curtain.reveal(pointBox, 'right', t('intro.lines.start'));
+            curtain.reveal(pointBox, t('intro.lines.start'));
 
             context.map().on('move.intro', function() {
                 padding = 150 * Math.pow(2, context.map().zoom() - 19);
                 pointBox = iD.ui.intro.pad(context.projection(start), padding);
-                curtain.reveal(pointBox, 'right', t('intro.lines.start'), 0);
+                curtain.reveal(pointBox, t('intro.lines.start'), 0);
             });
         }
         function drawLine (mode) {
@@ -44,12 +44,12 @@ iD.ui.intro.line = function(context, curtain) {
 
             var padding = 300 * Math.pow(2, context.map().zoom() - 19);
             var pointBox = iD.ui.intro.pad(context.projection(midpoint), padding);
-            curtain.reveal(pointBox, 'right', t('intro.lines.intersect'));
+            curtain.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);
-                curtain.reveal(pointBox, 'right', t('intro.lines.intersect'), 0);
+                curtain.reveal(pointBox, t('intro.lines.intersect'), 0);
             });
         }
 
@@ -62,12 +62,12 @@ iD.ui.intro.line = function(context, curtain) {
 
                 var padding = 900 * Math.pow(2, context.map().zoom() - 19);
                 var pointBox = iD.ui.intro.pad(context.projection(centroid), padding);
-                curtain.reveal(pointBox, 'right', t('intro.lines.finish'));
+                curtain.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);
-                    curtain.reveal(pointBox, 'right', t('intro.lines.finish'), 0);
+                    curtain.reveal(pointBox, t('intro.lines.finish'), 0);
                 });
             }
         }
@@ -81,7 +81,7 @@ iD.ui.intro.line = function(context, curtain) {
                 var road = d3.select('.preset-grid .grid-entry').filter(function(d) {
                     return d.id === 'Road';
                 });
-                curtain.reveal(road.node(), 'left', t('intro.lines.road'));
+                curtain.reveal(road.node(), t('intro.lines.road'));
                 road.one('click.intro', roadCategory);
             }, 500);
         }
@@ -89,7 +89,7 @@ iD.ui.intro.line = function(context, curtain) {
         function roadCategory() {
             window.setTimeout(function() {
                 var grid = d3.select('.subgrid');
-                curtain.reveal(grid.node(), '', t('intro.lines.residential'));
+                curtain.reveal(grid.node(),  t('intro.lines.residential'));
                 grid.selectAll('.grid-entry').filter(function(d) {
                     return d.id === 'highway/residential';
                 }).one('click.intro', roadDetails);
@@ -97,7 +97,7 @@ iD.ui.intro.line = function(context, curtain) {
         }
 
         function roadDetails() {
-            curtain.reveal('.pane', '', t('intro.lines.describe'));
+            curtain.reveal('.pane', t('intro.lines.describe'));
             context.on('exit.intro', event.done);
         }
 

js/id/ui/intro/navigation.js

@@ -32,7 +32,7 @@ iD.ui.intro.navigation = function(context, curtain) {
 
         context.map().centerZoom([-85.63591, 41.94285], 19);
 
-        curtain.reveal(map, 'right', t('intro.navigation.drag'));
+        curtain.reveal(map, t('intro.navigation.drag'));
 
         context.map().on('move.intro', _.debounce(function() {
             context.map().on('move.intro', null);
@@ -43,17 +43,17 @@ iD.ui.intro.navigation = function(context, curtain) {
         function townhall() {
             var hall = d3.select('.node.tag-amenity-townhall');
             var box = iD.ui.intro.pointBox(context.projection(hall.datum().loc));
-            curtain.reveal(box, 'right', t('intro.navigation.select'));
+            curtain.reveal(box, t('intro.navigation.select'));
 
             context.map().on('move.intro', function() {
                 var hall = d3.select('.node.tag-amenity-townhall');
                 var box = iD.ui.intro.pointBox(context.projection(hall.datum().loc));
-                curtain.reveal(box, 'right', t('intro.navigation.select'), 0);
+                curtain.reveal(box, t('intro.navigation.select'), 0);
             });
         }
 
         function primaryRoad() {
-            curtain.reveal('.tag-highway-primary', 'right', t('intro.navigation.selectstreet'));
+            curtain.reveal('.tag-highway-primary', t('intro.navigation.selectstreet'));
             context.on('enter.intro', inspectRoad);
         }
 
@@ -61,15 +61,15 @@ iD.ui.intro.navigation = function(context, curtain) {
             if (mode.id !== 'select') return;
             context.on('enter.intro', null);
             context.map().on('move.intro', null);
-            set(curtain.getReveal('.header', 'left', t('intro.navigation.header')), 700);
-            set(curtain.getReveal('.tag-wrap', 'left', t('intro.navigation.pane')), 4000);
+            set(function() { curtain.reveal('.header', t('intro.navigation.header')); }, 700);
+            set(function() { curtain.reveal('.tag-wrap', t('intro.navigation.pane')); }, 4000);
             set(primaryRoad, 7001);
         }
 
         function inspectRoad(mode) {
             if (mode.id !== 'select') return;
             context.on('enter.intro', null);
-            set(curtain.getReveal('.header', 'left', t('intro.navigation.headerstreet')), 700);
+            set(function() { curtain.reveal('.header', t('intro.navigation.headerstreet')); }, 700);
             set(event.done, 4000);
         }
 

js/id/ui/intro/point.js

@@ -14,7 +14,7 @@ iD.ui.intro.point = function(context, curtain) {
     step.enter = function() {
 
         context.map().centerZoom([-85.63279, 41.94394], 19);
-        curtain.reveal('button.add-point', 'bottom', t('intro.points.add'));
+        curtain.reveal('button.add-point', t('intro.points.add'));
 
         var corner = [-85.632481,41.944094];
 
@@ -25,11 +25,11 @@ iD.ui.intro.point = function(context, curtain) {
             context.on('enter.intro', enterSelect);
 
             var pointBox = iD.ui.intro.pad(context.projection(corner), 150);
-            curtain.reveal(pointBox, 'right', t('intro.points.place'));
+            curtain.reveal(pointBox, t('intro.points.place'));
 
             context.map().on('move.intro', function() {
                 pointBox = iD.ui.intro.pad(context.projection(corner), 150);
-                curtain.reveal(pointBox, 'right', t('intro.points.place'), 0);
+                curtain.reveal(pointBox, t('intro.points.place'), 0);
             });
 
         }
@@ -40,18 +40,18 @@ iD.ui.intro.point = function(context, curtain) {
             context.on('enter.intro', null);
 
             setTimeout(function() {
-                curtain.reveal('.preset-grid-search', 'left', t('intro.points.search'));
+                curtain.reveal('.preset-grid-search', t('intro.points.search'));
                 d3.select('.preset-grid-search').one('keydown.intro', keySearch);
             }, 500);
         }
 
         function keySearch() {
-            curtain.reveal('button.grid-entry', 'left', t('intro.points.choose'));
+            curtain.reveal('button.grid-entry', t('intro.points.choose'));
             d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
         }
 
         function selectedPreset() {
-            curtain.reveal('.pane', 'left', 'Add a name and edit some details. Click x to exit');
+            curtain.reveal('.pane', 'Add a name and edit some details. Click x to exit');
             context.on('exit.intro', event.done);
         }
     };

js/lib/d3.curtain.js

@@ -18,6 +18,16 @@ d3.curtain = function() {
                 'bottom': 0
             });
 
+        var darkness = surface.append('rect')
+            .attr({
+                x: 0,
+                y: 0,
+                width: window.innerWidth,
+                height: window.innerHeight,
+                'class': 'curtain-darkness',
+                'mask': 'url(#mask)'
+            });
+
         tooltip = selection.append('div')
             .attr('class', 'tooltip')
             .style('z-index', 1002);
@@ -25,20 +35,16 @@ d3.curtain = function() {
         tooltip.append('div').attr('class', 'tooltip-arrow');
         tooltip.append('div').attr('class', 'tooltip-inner');
 
-        var defs = surface.append('defs');
-
-        mask = defs.append('mask')
-            .attr('id', 'mask');
+        mask = surface.append('defs')
+            .append('mask').attr('id', 'mask');
 
         mask.append('rect')
+            .style('fill', 'white')
             .attr({
                 x: 0,
                 y: 0,
                 width: window.innerWidth,
                 height: window.innerHeight
-            })
-            .style({
-                'fill': 'white'
             });
 
         d3.select(window).on('resize.curtain', function() {
@@ -48,54 +54,33 @@ d3.curtain = function() {
             };
             mask.attr(size);
             darkness.attr(size);
-
         });
 
-        var darkness = surface.append('rect')
-            .attr({
-                x: 0,
-                y: 0,
-                width: window.innerWidth,
-                height: window.innerHeight,
-                'mask': "url(#mask)"
-            })
-            .style({
-                'fill-opacity': 0.7,
-                'fill': '#222'
-            });
-
     }
 
-    function elementRect(elem) {
-        var ret = elem.getBoundingClientRect();
-        return ret;
-    }
-
-    curtain.getReveal = function(box, side, text) {
-        return function() {
-            curtain.reveal(box, side, text);
-        };
-    };
-
     curtain.hide = function() {
         curtain.cut();
         tooltip.classed('in', false);
     };
 
-    curtain.reveal = function(box, side, text, duration) {
-        if (typeof box === 'string') box = elementRect(d3.select(box).node());
-        if (box.getBoundingClientRect) box = elementRect(box);
-
-        var pos;
+    curtain.reveal = function(box, text, duration) {
+        if (typeof box === 'string') box = d3.select(box).node();
+        if (box.getBoundingClientRect) box = box.getBoundingClientRect();
 
         curtain.cut(box, duration);
 
-        if (box.top + box.height < Math.min(200, box.width + box.left)) {
+        var pos;
+
+        var w = window.innerWidth,
+            h = window.innerHeight,
+            twidth = 200;
+
+        if (box.top + box.height < Math.min(100, box.width + box.left)) {
             side = 'bottom';
-            pos = [box.left, box.top + box.height];
+            pos = [box.left + box.width / 2 - twidth / 2, box.top + box.height];
         } else if (box.left + box.width + 300 < window.innerWidth) {
             side = 'right';
-            pos = [box.left + box.width, Math.max(box.top, 10)];
+            pos = [box.left + box.width, box.top, 10];
         } else if (box.left > 300) {
             side = 'left';
             pos = [box.left - 200, Math.max(box.top, 10)];
@@ -104,6 +89,11 @@ d3.curtain = function() {
             pos = [box.left, box.top + box.height];
         }
 
+        pos = [
+            Math.min(Math.max(10, pos[0]), w - twidth - 10),
+            Math.min(Math.max(10, pos[1]), h - 100 - 10)
+        ];
+
         // pseudo markdown bold text hack
         var parts = text.split('**');
         var html = parts[0];