Extract iD.ui.Zoom, add tooltips with key hint

This commit is contained in:
John Firebaugh
2013-02-12 15:45:12 -08:00
parent f071e9cf18
commit dc2dbbe183
12 changed files with 86 additions and 42 deletions

View File

@@ -85,6 +85,8 @@ window.iD = function () {
context.projection = map.projection;
context.tail = map.tail;
context.redraw = map.redraw;
context.zoomIn = map.zoomIn;
context.zoomOut = map.zoomOut;
context.container = function(_) {
if (!arguments.length) return container;

View File

@@ -37,20 +37,9 @@ iD.ui = function(context) {
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
var zoom = container.append('div')
container.append('div')
.attr('class', 'zoombuttons map-control')
.selectAll('button')
.data([['zoom-in', '+', map.zoomIn, t('zoom-in')], ['zoom-out', '-', map.zoomOut, t('zoom-out')]])
.enter()
.append('button')
.attr('tabindex', -1)
.attr('class', function(d) { return d[0]; })
.attr('title', function(d) { return d[3]; })
.on('click.editor', function(d) { return d[2](); })
.append('span')
.attr('class', function(d) {
return d[0] + ' icon';
});
.call(iD.ui.Zoom(context));
if (navigator.geolocation) {
container.append('div')
@@ -139,11 +128,7 @@ iD.ui = function(context) {
.on('←', pan([pa, 0]))
.on('↑', pan([0, pa]))
.on('→', pan([-pa, 0]))
.on('↓', pan([0, -pa]))
.on('⇧=', function() { map.zoomIn(); })
.on('+', function() { map.zoomIn(); })
.on('-', function() { map.zoomOut(); })
.on('dash', function() { map.zoomOut(); });
.on('↓', pan([0, -pa]));
d3.select(document)
.call(keybinding);

40
js/id/ui/zoom.js Normal file
View File

@@ -0,0 +1,40 @@
iD.ui.Zoom = function(context) {
var zooms = [{
id: 'zoom-in',
title: t('zoom.in'),
action: context.zoomIn,
key: '+'
}, {
id: 'zoom-out',
title: t('zoom.out'),
action: context.zoomOut,
key: '-'
}];
return function(selection) {
var button = selection.selectAll('button')
.data(zooms)
.enter().append('button')
.attr('tabindex', -1)
.attr('class', function(d) { return d.id; })
.on('click.editor', function(d) { d.action(); })
.call(bootstrap.tooltip()
.placement('right')
.html(true)
.title(function(d) {
return iD.ui.tooltipHtml(d.title, d.key);
}));
button.append('span')
.attr('class', function(d) { return d.id + ' icon'; });
var keybinding = d3.keybinding('zoom')
.on('+', function() { context.zoomIn(); })
.on('-', function() { context.zoomOut(); })
.on('⇧=', function() { context.zoomIn(); })
.on('dash', function() { context.zoomOut(); });
d3.select(document)
.call(keybinding);
}
};