CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-23 08:39:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1185 from systemed/left-animate-overlays

Browse Source 
Change animation for map overlays.
This commit is contained in:
Tom MacWright
2013-03-29 10:00:15 -07:00
parent e75cb7b482 1439b30049
commit 60d3333873
4 changed files with 106 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+3
View File
@@ -1333,6 +1333,7 @@ img.wiki-image {
/* Map Controls */
.map-control {
z-index: 100;
left:0px;
position:absolute;
}
@@ -1352,6 +1353,7 @@ img.wiki-image {
}
.map-overlay {
z-index: -1;
right: 75%;
max-width: 260px;
min-width: 210px;
@@ -1549,6 +1551,7 @@ img.wiki-image {
max-height: 300px;
overflow-y: auto;
padding: 0;
margin-top: 40px;
}
.geocode-control div.map-overlay span {
js/id/ui/background.js
+45 -34
View File
@@ -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,47 @@ 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 setVisible(show) {
if (show !== shown) {
button.classed('active', show);
shown = show;
if (show) {
selection.on('mousedown.background-inside', function() {
return d3.event.stopPropagation();
});
content.style('display', 'block')
.style('left', '-500px')
.transition()
.duration(200)
.style('left', '30px');
} 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 +183,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');
@@ -213,7 +220,7 @@ iD.ui.Background = function(context) {
gpxLayerItem.call(bootstrap.tooltip()
.title(t('gpx.drag_drop'))
.placement('right'))
.placement('right'));
gpxLayerItem.append('span')
.text(t('gpx.local_layer'));
@@ -281,6 +288,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;
js/id/ui/geocoder.js
+56 -43
View File
@@ -70,50 +70,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')
@@ -125,16 +86,68 @@ 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 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) {
selection.on('mousedown.geocoder-inside', function() {
return d3.event.stopPropagation();
});
gcForm.style('display', 'block')
.style('left', '-500px')
.transition()
.duration(200)
.style('left', '30px');
inputNode.node().focus();
} else {
selection.on('mousedown.geocoder-inside', null);
gcForm.style('display', 'block')
.style('left', '30px')
.transition()
.duration(200)
.style('left', '-500px')
.each('end', function() {
d3.select(this).style('display', 'none');
});
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;
};
js/id/ui/toggle.js
+2 -1
View File
@@ -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)