diff --git a/modules/ui/background.js b/modules/ui/background.js index f8758ea2a..8a92c53cf 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -58,24 +58,26 @@ export function uiBackground(context) { function setTooltips(selection) { - selection.each(function(d) { - var item = d3.select(this); + selection.each(function(d, i, nodes) { + var item = d3.select(this), + placement = (i < nodes.length / 2) ? 'bottom' : 'top'; + if (d === previous) { item.call(tooltip() + .placement(placement) .html(true) .title(function() { var tip = '
' + t('background.switch') + '
'; return uiTooltipHtml(tip, uiCmd('⌘B')); }) - .placement('top') ); } else if (d.description) { item.call(tooltip() + .placement(placement) .title(d.description) - .placement('top') ); - } else { - item.call(tooltip().destroy); + // } else { + // item.call(tooltip().destroy); } }); } @@ -96,8 +98,8 @@ export function uiBackground(context) { function clickSetSource(d) { - previous = context.background().baseLayerSource(); d3.event.preventDefault(); + previous = context.background().baseLayerSource(); context.background().baseLayerSource(d); selectLayer(); document.activeElement.blur(); @@ -119,9 +121,10 @@ export function uiBackground(context) { function setCustom(template) { - context.background().baseLayerSource(rendererBackgroundSource.Custom(template)); - selectLayer(); context.storage('background-custom-template', template); + var d = rendererBackgroundSource.Custom(template); + content.selectAll('.custom_layer').datum(d); + clickSetSource(d); } @@ -141,6 +144,9 @@ export function uiBackground(context) { var layerLinks = layerList.selectAll('li.layer') .data(sources, function(d) { return d.name(); }); + layerLinks.exit() + .remove(); + var enter = layerLinks.enter() .insert('li', '.custom_layer') .attr('class', 'layer') @@ -155,20 +161,20 @@ export function uiBackground(context) { .append('span') .html('★'); - var label = enter.append('label'); + var label = enter + .append('label'); - label.append('input') + label + .append('input') .attr('type', type) .attr('name', 'layers') .on('change', change); - label.append('span') + label + .append('span') .text(function(d) { return d.name(); }); - layerLinks.exit() - .remove(); - layerList.selectAll('li.layer') .sort(sortSources) .style('display', layerList.selectAll('li.layer').data().length > 0 ? 'block' : 'none'); @@ -326,13 +332,15 @@ export function uiBackground(context) { selection.on('mousedown.background-inside', function() { d3.event.stopPropagation(); }); - content.style('display', 'block') + content + .style('display', 'block') .style('right', '-300px') .transition() .duration(200) .style('right', '0px'); } else { - content.style('display', 'block') + content + .style('display', 'block') .style('right', '0px') .transition() .duration(200) @@ -346,13 +354,15 @@ export function uiBackground(context) { } - var content = selection.append('div') + var content = selection + .append('div') .attr('class', 'fillL map-overlay col3 content hide'), tooltipBehavior = tooltip() .placement((textDirection === 'rtl') ? 'right' : 'left') .html(true) .title(uiTooltipHtml(t('background.description'), key)), - button = selection.append('button') + button = selection + .append('button') .attr('tabindex', -1) .on('click', toggle) .call(svgIcon('#icon-layers', 'light')) @@ -362,13 +372,16 @@ export function uiBackground(context) { /* opacity switcher */ - var opa = content.append('div') + var opawrap = content + .append('div') .attr('class', 'opacity-options-wrapper'); - opa.append('h4') + opawrap + .append('h4') .text(t('background.title')); - var opacityList = opa.append('ul') + var opacityList = opawrap + .append('ul') .attr('class', 'opacity-options'); opacityList.selectAll('div.opacity') @@ -389,15 +402,18 @@ export function uiBackground(context) { /* background switcher */ - var backgroundList = content.append('ul') + var backgroundList = content + .append('ul') .attr('class', 'layer-list') .attr('dir', 'auto'); - var custom = backgroundList.append('li') + var custom = backgroundList + .append('li') .attr('class', 'custom_layer') .datum(rendererBackgroundSource.Custom()); - custom.append('button') + custom + .append('button') .attr('class', 'layer-browse') .call(tooltip() .title(t('background.custom_button')) @@ -405,9 +421,11 @@ export function uiBackground(context) { .on('click', editCustom) .call(svgIcon('#icon-search')); - var label = custom.append('label'); + var label = custom + .append('label'); - label.append('input') + label + .append('input') .attr('type', 'radio') .attr('name', 'layers') .on('change', function () { @@ -418,10 +436,12 @@ export function uiBackground(context) { } }); - label.append('span') + label + .append('span') .text(t('background.custom')); - content.append('div') + content + .append('div') .attr('class', 'imagery-faq') .append('a') .attr('target', '_blank') @@ -431,10 +451,12 @@ export function uiBackground(context) { .append('span') .text(t('background.imagery_source_faq')); - var overlayList = content.append('ul') + var overlayList = content + .append('ul') .attr('class', 'layer-list'); - var controls = content.append('div') + var controls = content + .append('div') .attr('class', 'controls-list'); @@ -448,7 +470,8 @@ export function uiBackground(context) { .placement('top') ); - minimapLabel.classed('minimap-toggle', true) + minimapLabel + .classed('minimap-toggle', true) .append('input') .attr('type', 'checkbox') .on('change', function() { @@ -456,16 +479,19 @@ export function uiBackground(context) { d3.event.preventDefault(); }); - minimapLabel.append('span') + minimapLabel + .append('span') .text(t('background.minimap.description')); /* imagery offset controls */ - var adjustments = content.append('div') + var adjustments = content + .append('div') .attr('class', 'adjustments'); - adjustments.append('a') + adjustments + .append('a') .text(t('background.fix_misalignment')) .attr('href', '#') .classed('hide-toggle', true) @@ -478,19 +504,23 @@ export function uiBackground(context) { d3.event.preventDefault(); }); - var nudgeContainer = adjustments.append('div') + var nudgeContainer = adjustments + .append('div') .attr('class', 'nudge-container cf') .style('display', 'none'); - nudgeContainer.append('div') + nudgeContainer + .append('div') .attr('class', 'nudge-instructions') .text(t('background.offset')); - var nudgeRect = nudgeContainer.append('div') + var nudgeRect = nudgeContainer + .append('div') .attr('class', 'nudge-outer-rect') .on('mousedown', dragOffset); - nudgeRect.append('div') + nudgeRect + .append('div') .attr('class', 'nudge-inner-rect') .append('input') .on('change', inputOffset) @@ -499,7 +529,8 @@ export function uiBackground(context) { d3.event.stopPropagation(); }); - nudgeContainer.append('div') + nudgeContainer + .append('div') .selectAll('button') .data(directions).enter() .append('button') @@ -509,7 +540,8 @@ export function uiBackground(context) { buttonOffset(d[1]); }); - nudgeContainer.append('button') + nudgeContainer + .append('button') .attr('title', t('background.reset')) .attr('class', 'nudge-reset disabled') .on('click', resetOffset)