This commit is contained in:
John Firebaugh
2013-03-05 12:05:22 -08:00
parent 05279c3954
commit b53014e50f

View File

@@ -14,14 +14,14 @@ iD.ui.Background = function(context) {
function background(selection) {
var content = selection
.append('div').attr('class', 'content fillD map-overlay hide'),
var content = selection.append('div')
.attr('class', 'content fillD map-overlay hide'),
shown = false;
var tooltip = bootstrap.tooltip().placement('right');
var tooltip = bootstrap.tooltip()
.placement('right');
var button = selection
.append('button')
var button = selection.append('button')
.attr('tabindex', -1)
.attr('class', 'fillD')
.attr('title', t('background.description'))
@@ -31,8 +31,10 @@ iD.ui.Background = function(context) {
button.append('span')
.attr('class', 'layers icon');
function hide() { setVisible(false); }
function toggle() { tooltip.hide(button); setVisible(content.classed('hide')); }
function toggle() {
tooltip.hide(button);
setVisible(content.classed('hide'));
}
function setVisible(show) {
if (show !== shown) {
@@ -42,18 +44,20 @@ iD.ui.Background = function(context) {
}
}
function clickoutside(selection) {
selection.on('click.background-inside', function() {
return d3.event.stopPropagation();
});
context.container().on('click.background-outside', hide);
}
selection.on('click.background-inside', function() {
return d3.event.stopPropagation();
});
context.container().on('click.background-outside', function() {
setVisible(false);
});
var opa = content
.append('div')
.attr('class', 'opacity-options-wrapper');
opa.append('h4').text(t('background.title'));
opa.append('h4')
.text(t('background.title'));
var opacityList = opa.append('ul')
.attr('class', 'opacity-options');
@@ -73,18 +77,20 @@ iD.ui.Background = function(context) {
.data(opacities)
.enter()
.append('li')
.attr('data-original-title', function(d) {
return t('background.percent_brightness', { opacity: (d * 100) });
})
.on('click.set-opacity', setOpacity)
.html("<div class='select-box'></div>")
.call(bootstrap.tooltip().placement('top'))
.append('div')
.attr('class', 'opacity')
.style('opacity', String);
.attr('data-original-title', function(d) {
return t('background.percent_brightness', { opacity: (d * 100) });
})
.on('click.set-opacity', setOpacity)
.html("<div class='select-box'></div>")
.call(bootstrap.tooltip()
.placement('top'))
.append('div')
.attr('class', 'opacity')
.style('opacity', String);
// Make sure there is an active selection by default
opa.select('.opacity-options li:nth-child(2)').classed('selected', true);
opa.select('.opacity-options li:nth-child(2)')
.classed('selected', true);
function selectLayer(d) {
@@ -137,27 +143,33 @@ iD.ui.Background = function(context) {
.data(getSources(), function(d) {
return d.data.name;
});
layerLinks.exit().remove();
var LayerInner = layerLinks.enter()
var layerInner = layerLinks.enter()
.append('li')
.append('a')
.attr('data-original-title', function(d) {
return d.data.description || '';
})
.attr('href', '#')
.attr('class', 'layer')
.each(function(d) {
// only set tooltips for layers with tooltips
if (d.data.description) {
d3.select(this).call(bootstrap.tooltip().placement('right'));
}
})
.on('click.set-source', clickSetSource);
LayerInner.insert('span')
.attr('class','icon toggle');
LayerInner.insert('span').text(function(d) {
return d.data.name;
});
.append('a');
layerInner
.attr('href', '#')
.attr('class', 'layer')
.on('click.set-source', clickSetSource);
// only set tooltips for layers with tooltips
layerInner
.filter(function(d) { return d.data.description; })
.call(bootstrap.tooltip()
.title(function(d) { return d.data.description; })
.placement('right')
);
layerInner.insert('span')
.attr('class', 'icon toggle');
layerInner.insert('span').text(function(d) {
return d.data.name;
});
layerLinks.exit()
.remove();
selectLayer(context.background().source());
}
@@ -176,11 +188,6 @@ iD.ui.Background = function(context) {
['right', [1, 0]],
['bottom', [0, 1]]];
function nudge(d) {
context.background().nudge(d[1], context.map().zoom());
context.redraw();
}
adjustments.append('a')
.text(t('background.fix_misalignment'))
.attr('href', '#')
@@ -188,11 +195,7 @@ iD.ui.Background = function(context) {
.classed('expanded', false)
.on('click', function() {
var exp = d3.select(this).classed('expanded');
if (!exp) {
nudge_container.style('display', 'block');
} else {
nudge_container.style('display', 'none');
}
nudge_container.style('display', exp ? 'none' : 'block');
d3.select(this).classed('expanded', !exp);
d3.event.preventDefault();
});
@@ -207,7 +210,10 @@ iD.ui.Background = function(context) {
.append('button')
.attr('class', function(d) { return d[0] + ' nudge'; })
.text(function(d) { return d[0]; })
.on('click', nudge);
.on('click', function(d) {
context.background().nudge(d[1], context.map().zoom());
context.redraw();
});
nudge_container.append('button')
.text(t('background.reset'))
@@ -216,8 +222,6 @@ iD.ui.Background = function(context) {
context.background().offset([0, 0]);
context.redraw();
});
selection.call(clickoutside);
}
return d3.rebind(background, event, 'on');