diff --git a/css/intro.css b/css/intro.css index 25bdb688d..d9b060aa6 100644 --- a/css/intro.css +++ b/css/intro.css @@ -1,3 +1,8 @@ +.curtain-darkness { + fill-opacity: 0.7; + fill: #222; +} + .intro-nav-wrap { position: absolute; left: 30px; diff --git a/js/id/ui/intro/area.js b/js/id/ui/intro/area.js index bf134b765..0eec35c54 100644 --- a/js/id/ui/intro/area.js +++ b/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); } diff --git a/js/id/ui/intro/line.js b/js/id/ui/intro/line.js index 3a28d80e8..adc02ec3a 100644 --- a/js/id/ui/intro/line.js +++ b/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); } diff --git a/js/id/ui/intro/navigation.js b/js/id/ui/intro/navigation.js index e31171074..9f11e6b46 100644 --- a/js/id/ui/intro/navigation.js +++ b/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); } diff --git a/js/id/ui/intro/point.js b/js/id/ui/intro/point.js index aeb346172..b2bf2e347 100644 --- a/js/id/ui/intro/point.js +++ b/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); } }; diff --git a/js/lib/d3.curtain.js b/js/lib/d3.curtain.js index df9a0a50d..ecbdf04bb 100644 --- a/js/lib/d3.curtain.js +++ b/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];