From c893147e1554630f5ffa0b217f3e84856e4dd825 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 20 Mar 2020 13:53:17 -0700 Subject: [PATCH] Convert some element ids to classes to avoid collisions when embedding iD --- css/20_map.css | 4 ++-- css/55_cursors.css | 26 +++++++++++++------------- css/80_app.css | 2 +- modules/modes/drag_node.js | 2 +- modules/modes/drag_note.js | 2 +- modules/svg/geolocate.js | 4 ++-- modules/ui/init.js | 2 +- modules/ui/intro/intro.js | 6 +++--- test/spec/behavior/lasso.js | 2 +- test/spec/renderer/features.js | 2 +- test/spec/svg/areas.js | 2 +- test/spec/svg/data.js | 2 +- test/spec/svg/lines.js | 2 +- test/spec/svg/midpoints.js | 2 +- test/spec/svg/points.js | 2 +- test/spec/svg/vertices.js | 2 +- 16 files changed, 32 insertions(+), 32 deletions(-) diff --git a/css/20_map.css b/css/20_map.css index 230a8100a..018958bc5 100644 --- a/css/20_map.css +++ b/css/20_map.css @@ -38,7 +38,7 @@ pointer-events: none; } -.lasso #map { +.lasso .main-map { pointer-events: visibleStroke; } @@ -430,4 +430,4 @@ g.vertex.highlighted .shadow { .highlight-edited path.line.shadow.geometry-edited, .highlight-edited path.area.shadow.geometry-edited { stroke: rgb(255, 126, 46); -} \ No newline at end of file +} diff --git a/css/55_cursors.css b/css/55_cursors.css index d28e33e99..d7ff52e20 100644 --- a/css/55_cursors.css +++ b/css/55_cursors.css @@ -6,7 +6,7 @@ } .map-in-map, -#map { +.main-map { cursor: auto; /* Opera */ cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */ } @@ -54,13 +54,13 @@ cursor: url(img/cursor-select-remove.png), pointer; /* FF */ } -.mode-add-preset #map, -.mode-draw-line #map, -.mode-draw-area #map, -.mode-add-line #map, -.mode-add-area #map, -.mode-drag-node #map, -.mode-drag-note #map { +.mode-add-preset .main-map, +.mode-draw-line .main-map, +.mode-draw-area .main-map, +.mode-add-line .main-map, +.mode-add-area .main-map, +.mode-drag-node .main-map, +.mode-drag-note .main-map { cursor: crosshair; /* Opera */ cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */ } @@ -83,13 +83,13 @@ cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */ } -.mode-add-point #map, -.mode-add-note #map, -.mode-browse.lasso #map, +.mode-add-point .main-map, +.mode-add-note .main-map, +.mode-browse.lasso .main-map, .mode-browse.lasso .way, .mode-browse.lasso .vertex, .mode-browse.lasso .midpoint, -.mode-select.lasso #map, +.mode-select.lasso .main-map, .mode-select.lasso .way, .mode-select.lasso .vertex, .mode-select.lasso .midpoint { @@ -104,4 +104,4 @@ .turn rect, .turn circle { cursor: pointer; -} \ No newline at end of file +} diff --git a/css/80_app.css b/css/80_app.css index 0b91e3b6e..7dd5783b4 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3907,7 +3907,7 @@ img.tile-debug { /* Map ------------------------------------------------------- */ -#map { +.main-map { position: relative; overflow: hidden; height: 100%; diff --git a/modules/modes/drag_node.js b/modules/modes/drag_node.js index f2426aaad..ea424ada5 100644 --- a/modules/modes/drag_node.js +++ b/modules/modes/drag_node.js @@ -445,7 +445,7 @@ export function modeDragNode(context) { var drag = behaviorDrag() .selector('.layer-touch.points .target') - .surface(d3_select('#map').node()) + .surface(d3_select('.main-map').node()) .origin(origin) .on('start', start) .on('move', move) diff --git a/modules/modes/drag_note.js b/modules/modes/drag_note.js index 33389af6f..11a40d3fb 100644 --- a/modules/modes/drag_note.js +++ b/modules/modes/drag_note.js @@ -107,7 +107,7 @@ export function modeDragNote(context) { var drag = behaviorDrag() .selector('.layer-touch.markers .target.note.new') - .surface(d3_select('#map').node()) + .surface(d3_select('.main-map').node()) .origin(origin) .on('start', start) .on('move', move) diff --git a/modules/svg/geolocate.js b/modules/svg/geolocate.js index 9b025e586..51363c264 100644 --- a/modules/svg/geolocate.js +++ b/modules/svg/geolocate.js @@ -69,7 +69,7 @@ export function svgGeolocate(projection) { pointsEnter .append('circle') - .attr('id', 'geolocate-radius') + .attr('class', 'geolocate-radius') .attr('dx', '0') .attr('dy', '0') .attr('fill', 'rgb(15,128,225)') @@ -88,7 +88,7 @@ export function svgGeolocate(projection) { groups.merge(pointsEnter) .attr('transform', transform); - d3_select('#geolocate-radius').attr('r', accuracy(_position.coords.accuracy, geolocation.loc)); + layer.select('.geolocate-radius').attr('r', accuracy(_position.coords.accuracy, geolocation.loc)); } function drawLocation(selection) { diff --git a/modules/ui/init.js b/modules/ui/init.js index 2f1f76645..d9e19a56f 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -115,7 +115,7 @@ export function uiInit(context) { content .append('div') - .attr('id', 'map') + .attr('class', 'main-map') .attr('dir', 'ltr') .call(map); diff --git a/modules/ui/intro/intro.js b/modules/ui/intro/intro.js index ec17e9dce..d9e60fa14 100644 --- a/modules/ui/intro/intro.js +++ b/modules/ui/intro/intro.js @@ -72,7 +72,7 @@ export function uiIntro(context) { let zoom = context.map().zoom(); let background = context.background().baseLayerSource(); let overlays = context.background().overlayLayerSources(); - let opacity = d3_selectAll('#map .layer-background').style('opacity'); + let opacity = d3_selectAll('.main-map .layer-background').style('opacity'); let caches = osm && osm.caches(); let baseEntities = context.history().graph().base().entities; @@ -109,7 +109,7 @@ export function uiIntro(context) { }); - d3_selectAll('#map .layer-background').style('opacity', 1); + d3_selectAll('.main-map .layer-background').style('opacity', 1); let curtain = uiCurtain(); selection.call(curtain); @@ -156,7 +156,7 @@ export function uiIntro(context) { curtain.remove(); navwrap.remove(); - d3_selectAll('#map .layer-background').style('opacity', opacity); + d3_selectAll('.main-map .layer-background').style('opacity', opacity); d3_selectAll('button.sidebar-toggle').classed('disabled', false); if (osm) { osm.toggle(true).reset().caches(caches); } context.history().reset().merge(Object.values(baseEntities)); diff --git a/test/spec/behavior/lasso.js b/test/spec/behavior/lasso.js index 5a3847423..f342cec3c 100644 --- a/test/spec/behavior/lasso.js +++ b/test/spec/behavior/lasso.js @@ -4,7 +4,7 @@ describe('iD.behaviorLasso', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map()); lasso = iD.behaviorLasso(context); }); diff --git a/test/spec/renderer/features.js b/test/spec/renderer/features.js index 7476d141d..67b0605d3 100644 --- a/test/spec/renderer/features.js +++ b/test/spec/renderer/features.js @@ -5,7 +5,7 @@ describe('iD.rendererFeatures', function() { beforeEach(function() { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map()); context.map().zoom(16); features = iD.rendererFeatures(context); diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index d98a4d619..f4652ac62 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -12,7 +12,7 @@ describe('iD.svgAreas', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([0, 0], 17)); _surface = context.surface(); diff --git a/test/spec/svg/data.js b/test/spec/svg/data.js index 340a3a60f..6e1b2d759 100644 --- a/test/spec/svg/data.js +++ b/test/spec/svg/data.js @@ -83,7 +83,7 @@ describe('iD.svgData', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([-74.389286, 40.1502754], 17)); surface = context.surface(); diff --git a/test/spec/svg/lines.js b/test/spec/svg/lines.js index cd1224d89..3d22a35b1 100644 --- a/test/spec/svg/lines.js +++ b/test/spec/svg/lines.js @@ -11,7 +11,7 @@ describe('iD.svgLines', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([0, 0], 17)); surface = context.surface(); }); diff --git a/test/spec/svg/midpoints.js b/test/spec/svg/midpoints.js index 6339ee0ae..723771a26 100644 --- a/test/spec/svg/midpoints.js +++ b/test/spec/svg/midpoints.js @@ -18,7 +18,7 @@ describe('iD.svgMidpoints', function () { }); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([0, 0], 17)); surface = context.surface(); diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js index 9acea2758..a41e4cb1d 100644 --- a/test/spec/svg/points.js +++ b/test/spec/svg/points.js @@ -8,7 +8,7 @@ describe('iD.svgPoints', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([0, 0], 17)); surface = context.surface(); }); diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js index d6fa5d297..2e1846332 100644 --- a/test/spec/svg/vertices.js +++ b/test/spec/svg/vertices.js @@ -10,7 +10,7 @@ describe('iD.svgVertices', function () { beforeEach(function () { context = iD.coreContext().init(); d3.select(document.createElement('div')) - .attr('id', 'map') + .attr('class', 'main-map') .call(context.map().centerZoom([0, 0], 17)); surface = context.surface(); });