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

changing animation for map overlays.

Browse Source
This commit is contained in:
Saman Bemel-Benrud
2013-03-28 17:43:40 -04:00
parent 6c5be4f8f7
commit 2976abaffe
4 changed files with 117 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+1
View File
@@ -1539,6 +1539,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
+51 -33
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,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;
js/id/ui/geocoder.js
+63 -43
View File
@@ -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;
};
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)