From 5fd25601fe17fd77b0bc7f4402ade96eaef9ba55 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Sat, 21 Mar 2020 13:41:06 -0700 Subject: [PATCH] Convert map surface and supersurface from ids to classes --- css/80_app.css | 4 ++-- modules/behavior/select.js | 2 +- modules/renderer/map.js | 5 ++--- modules/ui/intro/line.js | 4 ++-- modules/ui/intro/navigation.js | 20 ++++++++++---------- 5 files changed, 17 insertions(+), 18 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 6250d65a8..00fa702b3 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3918,7 +3918,7 @@ img.tile-debug { user-select: none; } -#supersurface { +.supersurface { transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; @@ -3926,7 +3926,7 @@ img.tile-debug { -o-transform-origin: 0 0; } -#supersurface, .layer { +.supersurface, .layer { position: absolute; top: 0; left: 0; diff --git a/modules/behavior/select.js b/modules/behavior/select.js index 955721284..7cf66ba4c 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -111,7 +111,7 @@ export function behaviorSelect(context) { if (dist > tolerance) return; var datum = d3_event.target.__data__ || (_lastMouse && _lastMouse.target.__data__); - var isMultiselect = d3_event.shiftKey || d3_select('#surface .lasso').node(); + var isMultiselect = d3_event.shiftKey || d3_select('.surface .lasso').node(); processClick(datum, isMultiselect); } diff --git a/modules/renderer/map.js b/modules/renderer/map.js index a0e481bcf..0b68192bf 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -158,7 +158,7 @@ export function rendererMap(context) { .on('dblclick.zoom', null); // override d3-zoom dblclick handling supersurface = selection.append('div') - .attr('id', 'supersurface') + .attr('class', 'supersurface') .call(utilSetTransform, 0, 0); // Need a wrapper div because Opera can't cope with an absolutely positioned @@ -169,8 +169,7 @@ export function rendererMap(context) { map.surface = surface = wrapper .call(drawLayers) - .selectAll('.surface') - .attr('id', 'surface'); + .selectAll('.surface'); surface .call(drawLabels.observe) diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 630349891..d46340fdf 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -217,7 +217,7 @@ export function uiIntroLine(context, reveal) { context.map().centerEase(tulipRoadIntersection, 500); - reveal('#surface', t('intro.lines.continue_line')); + reveal('.surface', t('intro.lines.continue_line')); context.on('enter.intro', function(mode) { if (mode.id === 'draw-line') @@ -362,7 +362,7 @@ export function uiIntroLine(context, reveal) { context.history().checkpoint('doneAddLine'); timeout(function() { - reveal('#surface', t('intro.lines.did_name_road'), { + reveal('.surface', t('intro.lines.did_name_road'), { buttonText: t('intro.ok'), buttonCallback: function() { continueTo(updateLine); } }); diff --git a/modules/ui/intro/navigation.js b/modules/ui/intro/navigation.js index 1beefcbde..dcf72cc1f 100644 --- a/modules/ui/intro/navigation.js +++ b/modules/ui/intro/navigation.js @@ -57,9 +57,9 @@ export function uiIntroNavigation(context, reveal) { timeout(function() { var centerStart = context.map().center(); - reveal('#surface', t('intro.navigation.drag')); + reveal('.surface', t('intro.navigation.drag')); context.map().on('drawn.intro', function() { - reveal('#surface', t('intro.navigation.drag'), { duration: 0 }); + reveal('.surface', t('intro.navigation.drag'), { duration: 0 }); }); context.map().on('move.intro', function() { @@ -82,7 +82,7 @@ export function uiIntroNavigation(context, reveal) { function zoomMap() { var zoomStart = context.map().zoom(); - reveal('#surface', + reveal('.surface', t('intro.navigation.zoom', { plus: icon('#iD-icon-plus', 'pre-text'), minus: icon('#iD-icon-minus', 'pre-text') @@ -90,7 +90,7 @@ export function uiIntroNavigation(context, reveal) { ); context.map().on('drawn.intro', function() { - reveal('#surface', + reveal('.surface', t('intro.navigation.zoom', { plus: icon('#iD-icon-plus', 'pre-text'), minus: icon('#iD-icon-minus', 'pre-text') @@ -115,12 +115,12 @@ export function uiIntroNavigation(context, reveal) { function features() { var onClick = function() { continueTo(pointsLinesAreas); }; - reveal('#surface', t('intro.navigation.features'), + reveal('.surface', t('intro.navigation.features'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal('#surface', t('intro.navigation.features'), + reveal('.surface', t('intro.navigation.features'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); }); @@ -134,12 +134,12 @@ export function uiIntroNavigation(context, reveal) { function pointsLinesAreas() { var onClick = function() { continueTo(nodesWays); }; - reveal('#surface', t('intro.navigation.points_lines_areas'), + reveal('.surface', t('intro.navigation.points_lines_areas'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal('#surface', t('intro.navigation.points_lines_areas'), + reveal('.surface', t('intro.navigation.points_lines_areas'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); }); @@ -153,12 +153,12 @@ export function uiIntroNavigation(context, reveal) { function nodesWays() { var onClick = function() { continueTo(clickTownHall); }; - reveal('#surface', t('intro.navigation.nodes_ways'), + reveal('.surface', t('intro.navigation.nodes_ways'), { buttonText: t('intro.ok'), buttonCallback: onClick } ); context.map().on('drawn.intro', function() { - reveal('#surface', t('intro.navigation.nodes_ways'), + reveal('.surface', t('intro.navigation.nodes_ways'), { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick } ); });