From 2976abaffe1186db1257cefe028ee2013cc1449a Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 28 Mar 2013 17:43:40 -0400 Subject: [PATCH] changing animation for map overlays. --- css/app.css | 1 + js/id/ui/background.js | 84 +++++++++++++++++++------------- js/id/ui/geocoder.js | 106 ++++++++++++++++++++++++----------------- js/id/ui/toggle.js | 3 +- 4 files changed, 117 insertions(+), 77 deletions(-) diff --git a/css/app.css b/css/app.css index c3cb2bd88..26a3b226c 100644 --- a/css/app.css +++ b/css/app.css @@ -1539,6 +1539,7 @@ img.wiki-image { max-height: 300px; overflow-y: auto; padding: 0; + margin-top: 40px; } .geocode-control div.map-overlay span { diff --git a/js/id/ui/background.js b/js/id/ui/background.js index b00a6066e..bcd17eee3 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -18,28 +18,6 @@ iD.ui.Background = function(context) { function background(selection) { - function toggle() { - tooltip.hide(button); - setVisible(content.classed('hide')); - content.selectAll('.toggle-list li:first-child a').node().focus(); - } - - function setVisible(show) { - if (show !== shown) { - button.classed('active', show); - content.call(iD.ui.Toggle(show)); - shown = show; - - if (show) { - selection.on('mousedown.background-inside', function() { - return d3.event.stopPropagation(); - }); - } else { - selection.on('mousedown.background-inside', null); - } - } - } - function setOpacity(d) { context.map().layersurface.selectAll('.layer-layer') .filter(function(d) { return d == context.map().layers[0]; }) @@ -152,10 +130,54 @@ iD.ui.Background = function(context) { tooltip = bootstrap.tooltip() .placement('right') .html(true) - .title(iD.ui.tooltipHtml(t('background.description'), key)), - button = selection.append('button') + .title(iD.ui.tooltipHtml(t('background.description'), key)); + + function hide() { setVisible(false); } + function toggle() { + if (d3.event) d3.event.preventDefault(); + tooltip.hide(button); + setVisible(!button.classed('active')); + content.selectAll('.toggle-list li:first-child a').node().focus(); + } + + function blockClick() { + selection.on('mousedown.help-inside', function() { + return d3.event.stopPropagation(); + }); + selection.on('mousedown.help-inside', function() { + return d3.event.stopPropagation(); + }); + } + + function setVisible(show) { + if (show !== shown) { + button.classed('active', show); + shown = show; + + if (show) { + content.style('display', 'block') + .style('left', '-500px') + .transition() + .duration(200) + .style('left', '30px') + .each('end', blockClick); + } else { + content.style('display', 'block') + .style('left', '30px') + .transition() + .duration(200) + .style('left', '-500px') + .each('end', function() { + d3.select(this).style('display', 'none'); + }); + selection.on('mousedown.background-inside', null); + } + } + } + + var button = selection.append('button') .attr('tabindex', -1) - .on('click.background-toggle', toggle) + .on('click', toggle) .call(tooltip), opa = content .append('div') @@ -168,14 +190,6 @@ iD.ui.Background = function(context) { opa.append('h4') .text(t('background.title')); - context.surface().on('mousedown.background-outside', function() { - setVisible(false); - }); - - context.container().on('mousedown.background-outside', function() { - setVisible(false); - }); - var opacityList = opa.append('ul') .attr('class', 'opacity-options'); @@ -276,6 +290,10 @@ iD.ui.Background = function(context) { d3.select(document) .call(keybinding); + + context.surface().on('mousedown.background-outside', hide); + context.container().on('mousedown.background-outside', hide); + } return background; diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js index 42689c0d3..066698798 100644 --- a/js/id/ui/geocoder.js +++ b/js/id/ui/geocoder.js @@ -69,50 +69,11 @@ iD.ui.Geocoder = function(context) { if (map.zoom() > 19) map.zoom(19); } - function hide() { setVisible(false); } - function toggle() { - if (d3.event) d3.event.preventDefault(); - tooltip.hide(button); - setVisible(gcForm.classed('hide')); - } - - function setVisible(show) { - if (show !== shown) { - button.classed('active', show); - gcForm.call(iD.ui.Toggle(show)); - if (!show && !resultsList.classed('hide')) { - resultsList.call(iD.ui.Toggle(show)); - // remove results so that they lose focus. if the user has - // tabbed into the list, then they will have focus still, - // even if they're hidden. - resultsList.selectAll('span').remove(); - } - if (show) inputNode.node().focus(); - else inputNode.node().blur(); - shown = show; - - if (show) { - selection.on('mousedown.geocoder-inside', function() { - return d3.event.stopPropagation(); - }); - } else { - selection.on('mousedown.geocoder-inside', null); - } - } - } var tooltip = bootstrap.tooltip() .placement('right') .html(true) .title(iD.ui.tooltipHtml(t('geocoder.title'), key)); - var button = selection.append('button') - .attr('tabindex', -1) - .on('click', toggle) - .call(tooltip); - - button.append('span') - .attr('class', 'icon geocode light'); - var gcForm = selection.append('form'); var inputNode = gcForm.attr('class', 'fillL map-overlay content hide') @@ -124,16 +85,75 @@ iD.ui.Geocoder = function(context) { var resultsList = selection.append('div') .attr('class', 'fillL map-overlay hide'); - context.surface().on('mousedown.geocoder-outside', hide); - context.container().on('mousedown.b.geocoder-outside', hide); - var keybinding = d3.keybinding('geocoder'); + function hide() { setVisible(false); } + function toggle() { + if (d3.event) d3.event.preventDefault(); + tooltip.hide(button); + setVisible(!button.classed('active')); + } + + function blockClick() { + selection.on('mousedown.help-inside', function() { + return d3.event.stopPropagation(); + }); + selection.on('mousedown.help-inside', function() { + return d3.event.stopPropagation(); + }); + } + + function setVisible(show) { + if (show !== shown) { + button.classed('active', show); + shown = show; + + if (!show && !resultsList.classed('hide')) { + resultsList.call(iD.ui.Toggle(show)); + // remove results so that they lose focus. if the user has + // tabbed into the list, then they will have focus still, + // even if they're hidden. + resultsList.selectAll('span').remove(); + } + + if (show) { + gcForm.style('display', 'block') + .style('left', '-500px') + .transition() + .duration(200) + .style('left', '30px') + .each('end', blockClick); + inputNode.node().focus(); + } else { + gcForm.style('display', 'block') + .style('left', '30px') + .transition() + .duration(200) + .style('left', '-500px') + .each('end', function() { + d3.select(this).style('display', 'none'); + }); + selection.on('mousedown.background-inside', null); + inputNode.node().blur(); + } + } + } + var button = selection.append('button') + .attr('tabindex', -1) + .on('click', toggle) + .call(tooltip); + + button.append('span') + .attr('class', 'icon geocode light'); + keybinding.on(key, toggle); d3.select(document) .call(keybinding); - } + context.surface().on('mousedown.geocoder-outside', hide); + context.container().on('mousedown.b.geocoder-outside', hide); + + } return geocoder; }; diff --git a/js/id/ui/toggle.js b/js/id/ui/toggle.js index c3c299905..59e6c5870 100644 --- a/js/id/ui/toggle.js +++ b/js/id/ui/toggle.js @@ -4,7 +4,8 @@ // value actually changes between calls. iD.ui.Toggle = function(show, callback) { return function(selection) { - selection.style('opacity', show ? 0 : 1) + selection + .style('opacity', show ? 0 : 1) .classed('hide', false) .transition() .style('opacity', show ? 1 : 0)