Use standard hover-highlighting mechanism for feature links in Q/A inspectors

This commit is contained in:
Quincy Morgan
2020-02-13 10:07:18 -08:00
parent 204cb2300a
commit 614ee3f68e
3 changed files with 18 additions and 15 deletions
+6 -5
View File
@@ -6,7 +6,7 @@ import {
import { dataEn } from '../../data';
import { modeSelect } from '../modes/select';
import { t } from '../util/locale';
import { utilDisplayName, utilEntityOrMemberSelector, utilEntityRoot } from '../util';
import { utilDisplayName, utilHighlightEntities, utilEntityRoot } from '../util';
export function uiImproveOsmDetails(context) {
let _qaItem;
@@ -76,15 +76,16 @@ export function uiImproveOsmDetails(context) {
// Add click handler
link
.on('mouseenter', () => {
context.surface().selectAll(utilEntityOrMemberSelector([entityID], context.graph()))
.classed('hover', true);
utilHighlightEntities([entityID], true, context);
})
.on('mouseleave', () => {
context.surface().selectAll('.hover')
.classed('hover', false);
utilHighlightEntities([entityID], false, context);
})
.on('click', () => {
d3_event.preventDefault();
utilHighlightEntities([entityID], false, context);
const osmlayer = context.layers().layer('osm');
if (!osmlayer.enabled()) {
osmlayer.enabled(true);
+6 -5
View File
@@ -6,7 +6,7 @@ import {
import { dataEn } from '../../data';
import { modeSelect } from '../modes/select';
import { t } from '../util/locale';
import { utilDisplayName, utilEntityOrMemberSelector, utilEntityRoot } from '../util';
import { utilDisplayName, utilHighlightEntities, utilEntityRoot } from '../util';
export function uiKeepRightDetails(context) {
let _qaItem;
@@ -75,15 +75,16 @@ export function uiKeepRightDetails(context) {
// Add click handler
link
.on('mouseenter', () => {
context.surface().selectAll(utilEntityOrMemberSelector([entityID], context.graph()))
.classed('hover', true);
utilHighlightEntities([entityID], true, context);
})
.on('mouseleave', () => {
context.surface().selectAll('.hover')
.classed('hover', false);
utilHighlightEntities([entityID], false, context);
})
.on('click', () => {
d3_event.preventDefault();
utilHighlightEntities([entityID], false, context);
const osmlayer = context.layers().layer('osm');
if (!osmlayer.enabled()) {
osmlayer.enabled(true);
+6 -5
View File
@@ -7,7 +7,7 @@ import {
import { modeSelect } from '../modes/select';
import { t } from '../util/locale';
import { services } from '../services';
import { utilDisplayName, utilEntityOrMemberSelector } from '../util';
import { utilDisplayName, utilHighlightEntities } from '../util';
export function uiOsmoseDetails(context) {
@@ -151,15 +151,16 @@ export function uiOsmoseDetails(context) {
// Add click handler
link
.on('mouseenter', () => {
context.surface().selectAll(utilEntityOrMemberSelector([entityID], context.graph()))
.classed('hover', true);
utilHighlightEntities([entityID], true, context);
})
.on('mouseleave', () => {
context.surface().selectAll('.hover')
.classed('hover', false);
utilHighlightEntities([entityID], false, context);
})
.on('click', () => {
d3_event.preventDefault();
utilHighlightEntities([entityID], false, context);
const osmlayer = context.layers().layer('osm');
if (!osmlayer.enabled()) {
osmlayer.enabled(true);