From 70aaa0fa3a81242e4989e41510a3be1e529178b9 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 12 Jun 2020 13:55:05 -0400 Subject: [PATCH] Add disabled message to tooltip when Zoom To Selection button is disabled --- data/core.yaml | 1 + dist/locales/en.json | 3 ++- modules/ui/zoom.js | 2 +- modules/ui/zoom_to_selection.js | 46 +++++++++++++++++++++------------ 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index f0706b4a0..bc276b22f 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -599,6 +599,7 @@ en: zoom_to: key: Z title: Zoom To Selection + no_selection: Nothing to zoom to. show_more: Show More view_on_osm: View on openstreetmap.org view_on_osmose: View on osmose.openstreetmap.fr diff --git a/dist/locales/en.json b/dist/locales/en.json index 2be35f64c..5b9a8d48e 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -759,7 +759,8 @@ "inspector": { "zoom_to": { "key": "Z", - "title": "Zoom To Selection" + "title": "Zoom To Selection", + "no_selection": "Nothing to zoom to." }, "show_more": "Show More", "view_on_osm": "View on openstreetmap.org", diff --git a/modules/ui/zoom.js b/modules/ui/zoom.js index 855357d3f..c630a8730 100644 --- a/modules/ui/zoom.js +++ b/modules/ui/zoom.js @@ -72,7 +72,7 @@ export function uiZoom(context) { .append('button') .attr('class', function(d) { return d.id; }) .on('click.editor', function(d) { - if (!d3_select(this).classed('disabled')) { + if (!d.disabled()) { d.action(); } }) diff --git a/modules/ui/zoom_to_selection.js b/modules/ui/zoom_to_selection.js index cde518448..880919e48 100644 --- a/modules/ui/zoom_to_selection.js +++ b/modules/ui/zoom_to_selection.js @@ -1,4 +1,4 @@ -import { select as d3_select } from 'd3-selection'; +import { event as d3_event } from 'd3-selection'; import { t, localizer } from '../core/localizer'; import { uiTooltip } from './tooltip'; @@ -6,10 +6,15 @@ import { svgIcon } from '../svg/icon'; export function uiZoomToSelection(context) { - var _button = d3_select(null); + function isDisabled() { + var mode = context.mode(); + return !mode || !mode.zoomToSelected; + } function click() { - if (d3_select(this).classed('disabled')) return; + d3_event.preventDefault(); + + if (isDisabled()) return; var mode = context.mode(); if (mode && mode.zoomToSelected) { @@ -17,25 +22,32 @@ export function uiZoomToSelection(context) { } } - function setEnabledState() { - var mode = context.mode(); - var isEnabled = mode && !!mode.zoomToSelected; - _button.classed('disabled', !isEnabled); - } - - context.on('enter.uiZoomToSelection', setEnabledState); - return function(selection) { - _button = selection + var tooltipBehavior = uiTooltip() + .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') + .title(function() { + if (isDisabled()) { + return t('inspector.zoom_to.no_selection'); + } + return t('inspector.zoom_to.title'); + }) + .keys([t('inspector.zoom_to.key')]); + + var button = selection .append('button') .on('click', click) .call(svgIcon('#iD-icon-framed-dot', 'light')) - .call(uiTooltip() - .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left') - .title(t('inspector.zoom_to.title')) - .keys([t('inspector.zoom_to.key')]) - ); + .call(tooltipBehavior); + + function setEnabledState() { + button.classed('disabled', isDisabled()); + if (!button.select('.tooltip.in').empty()) { + button.call(tooltipBehavior.updateContent); + } + } + + context.on('enter.uiZoomToSelection', setEnabledState); setEnabledState(); };