From 7e1cf64d0eeb940d368fbd9b57aa0d871d0ff10f Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Tue, 24 Mar 2020 13:43:54 -0700 Subject: [PATCH] Namespace DOM ids used in photo viewer (re: #7445) --- css/60_photos.css | 4 ++-- modules/services/mapillary.js | 12 ++++++------ modules/services/streetside.js | 32 +++++++++++++++++--------------- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 07d8020c5..f882debeb 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -280,14 +280,14 @@ label.streetside-hires { /* Mapillary viewer */ -#mly .domRenderer .TagSymbol { +#ideditor-mly .domRenderer .TagSymbol { font-size: 10px; background-color: rgba(0,0,0,0.4); padding: 0 4px; border-radius: 4px; top: -25px; } -#mly .domRenderer .Attribution { +#ideditor-mly .domRenderer .Attribution { /* we will roll our own to avoid async update issues like #4526 */ display: none; } diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 22996d7c6..bc800b9c1 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -385,25 +385,25 @@ export default { wrap.enter() .append('div') - .attr('id', 'mly') + .attr('id', 'ideditor-mly') .attr('class', 'photo-wrapper mly-wrapper') .classed('hide', true); // load mapillary-viewercss - d3_select('head').selectAll('#mapillary-viewercss') + d3_select('head').selectAll('#ideditor-mapillary-viewercss') .data([0]) .enter() .append('link') - .attr('id', 'mapillary-viewercss') + .attr('id', 'ideditor-mapillary-viewercss') .attr('rel', 'stylesheet') .attr('href', context.asset(viewercss)); // load mapillary-viewerjs - d3_select('head').selectAll('#mapillary-viewerjs') + d3_select('head').selectAll('#ideditor-mapillary-viewerjs') .data([0]) .enter() .append('script') - .attr('id', 'mapillary-viewerjs') + .attr('id', 'ideditor-mapillary-viewerjs') .attr('src', context.asset(viewerjs)); // load mapillary signs sprite @@ -508,7 +508,7 @@ export default { }; } - _mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts); + _mlyViewer = new Mapillary.Viewer('ideditor-mly', clientId, null, opts); _mlyViewer.on('nodechanged', nodeChanged); _mlyViewer.on('bearingchanged', bearingChanged); _mlyViewer.moveToKey(imageKey) diff --git a/modules/services/streetside.js b/modules/services/streetside.js index b613c4c95..794f3f08b 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -17,7 +17,7 @@ import { } from '../geo'; import { utilDetect } from '../util/detect'; -import { utilArrayUnion, utilQsString, utilRebind, utilTiler } from '../util'; +import { utilArrayUnion, utilQsString, utilRebind, utilTiler, utilUniqueDomId } from '../util'; const bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?'; @@ -252,7 +252,7 @@ function loadImage(imgInfo) { return new Promise(resolve => { let img = new Image(); img.onload = () => { - let canvas = document.getElementById('canvas' + imgInfo.face); + let canvas = document.getElementById('ideditor-canvas' + imgInfo.face); let ctx = canvas.getContext('2d'); ctx.drawImage(img, imgInfo.x, imgInfo.y); resolve({ imgInfo: imgInfo, status: 'ok' }); @@ -272,7 +272,7 @@ function loadImage(imgInfo) { function loadCanvas(imageGroup) { return Promise.all(imageGroup.map(loadImage)) .then((data) => { - let canvas = document.getElementById('canvas' + data[0].imgInfo.face); + let canvas = document.getElementById('ideditor-canvas' + data[0].imgInfo.face); const which = { '01': 0, '02': 1, '03': 2, '10': 3, '11': 4, '12': 5 }; let face = data[0].imgInfo.face; _dataUrlArray[which[face]] = canvas.toDataURL('image/jpeg', 1.0); @@ -292,23 +292,23 @@ function loadFaces(faceGroup) { function setupCanvas(selection, reset) { if (reset) { - selection.selectAll('#divForCanvasWork') + selection.selectAll('#ideditor-stitcher-canvases') .remove(); } // Add the Streetside working canvases. These are used for 'stitching', or combining, // multiple images for each of the six faces, before passing to the Pannellum control as DataUrls - selection.selectAll('#divForCanvasWork') + selection.selectAll('#ideditor-stitcher-canvases') .data([0]) .enter() .append('div') - .attr('id', 'divForCanvasWork') + .attr('id', 'ideditor-stitcher-canvases') .attr('display', 'none') .selectAll('canvas') .data(['canvas01', 'canvas02', 'canvas03', 'canvas10', 'canvas11', 'canvas12']) .enter() .append('canvas') - .attr('id', d => d) + .attr('id', d => 'ideditor-' + d) .attr('width', _resolution) .attr('height', _resolution); } @@ -471,7 +471,7 @@ export default { }; options.scenes[sceneID] = _sceneOptions; - _pannellumViewer = window.pannellum.viewer('viewer-streetside', options); + _pannellumViewer = window.pannellum.viewer('ideditor-viewer-streetside', options); _pannellumViewer .on('mousedown', () => { @@ -507,14 +507,13 @@ export default { // (used by all to house each custom photo viewer) let wrapEnter = wrap.enter() .append('div') - .attr('id', 'ms') .attr('class', 'photo-wrapper ms-wrapper') .classed('hide', true); // inject div to support streetside viewer (pannellum) and attribution line wrapEnter .append('div') - .attr('id', 'viewer-streetside') + .attr('id', 'ideditor-viewer-streetside') .append('div') .attr('class', 'photo-attribution fillD'); @@ -541,20 +540,20 @@ export default { .call(setupCanvas, true); // load streetside pannellum viewer css - d3_select('head').selectAll('#streetside-viewercss') + d3_select('head').selectAll('#ideditor-streetside-viewercss') .data([0]) .enter() .append('link') - .attr('id', 'streetside-viewercss') + .attr('id', 'ideditor-streetside-viewercss') .attr('rel', 'stylesheet') .attr('href', context.asset(pannellumViewerCSS)); // load streetside pannellum viewer js - d3_select('head').selectAll('#streetside-viewerjs') + d3_select('head').selectAll('#ideditor-streetside-viewerjs') .data([0]) .enter() .append('script') - .attr('id', 'streetside-viewerjs') + .attr('id', 'ideditor-streetside-viewerjs') .attr('src', context.asset(pannellumViewerJS)); @@ -732,15 +731,18 @@ export default { .append('div') .attr('class', 'attribution-row'); + const hiresDomId = utilUniqueDomId('streetside-hires'); + // Add hires checkbox let label = line1 .append('label') + .attr('for', hiresDomId) .attr('class', 'streetside-hires'); label .append('input') .attr('type', 'checkbox') - .attr('id', 'streetside-hires-input') + .attr('id', hiresDomId) .property('checked', _hires) .on('click', () => { d3_event.stopPropagation();