From 371bac0aa262a55f8ae95439ac381c5696bc30e8 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Fri, 20 Mar 2020 14:07:09 -0700 Subject: [PATCH] Convert photoviewer from id to class --- css/60_photos.css | 16 ++++++++-------- modules/services/mapillary.js | 8 ++++---- modules/services/openstreetcam.js | 16 ++++++++-------- modules/services/streetside.js | 14 +++++++------- modules/svg/openstreetcam_images.js | 2 +- modules/svg/streetside.js | 2 +- modules/ui/init.js | 2 +- modules/ui/photoviewer.js | 2 +- 8 files changed, 31 insertions(+), 31 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 4b6ceadd2..54910f366 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -1,5 +1,5 @@ /* photo viewer div */ -#photoviewer { +.photoviewer { position: relative; flex-shrink: 0; margin-bottom: 10px; @@ -8,23 +8,23 @@ padding: 5px; background-color: #fff; } -[dir='ltr'] #photoviewer { +[dir='ltr'] .photoviewer { margin-left: 10px; margin-right: 2px; } -[dir='rtl'] #photoviewer { +[dir='rtl'] .photoviewer { margin-right: 10px; margin-left: 2px; } @media screen and (min-width: 1600px) { - #photoviewer { + .photoviewer { width: 490px; height: 370px; } } -#photoviewer button.thumb-hide { +.photoviewer button.thumb-hide { border-radius: 0; padding: 5px; position: absolute; @@ -33,7 +33,7 @@ z-index: 50; } -#photoviewer button.resize-handle-xy { +.photoviewer button.resize-handle-xy { border-radius: 0; position: absolute; top: 0; @@ -44,7 +44,7 @@ width: 25px; } -#photoviewer button.resize-handle-x { +.photoviewer button.resize-handle-x { border-radius: 0; position: absolute; top: 0; @@ -56,7 +56,7 @@ width: 6px; } -#photoviewer button.resize-handle-y { +.photoviewer button.resize-handle-y { border-radius: 0; position: absolute; top: 0; diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index b3d7428e2..8060f3081 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -379,7 +379,7 @@ export default { loadViewer: function(context) { // add mly-wrapper - var wrap = d3_select('#photoviewer').selectAll('.mly-wrapper') + var wrap = d3_select('.photoviewer').selectAll('.mly-wrapper') .data([0]); wrap.enter() @@ -419,7 +419,7 @@ export default { showViewer: function() { - var wrap = d3_select('#photoviewer') + var wrap = d3_select('.photoviewer') .classed('hide', false); var isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size(); @@ -447,7 +447,7 @@ export default { _mlyViewer.getComponent('sequence').stop(); } - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -562,7 +562,7 @@ export default { // There just might be a delay before user sees detections, captured_at, etc. var d = _mlyCache.images.forImageKey[imageKey]; - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(d); imageKey = (d && d.key) || imageKey; diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 17689ef15..29219c486 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -173,7 +173,7 @@ function searchLimited(limit, projection, rtree) { function zoomPan() { var t = d3_event.transform; - d3_select('#photoviewer .osc-image-wrap') + d3_select('.photoviewer .osc-image-wrap') .call(utilSetTransform, t.x, t.y, t.k); } @@ -247,7 +247,7 @@ export default { var that = this; // add osc-wrapper - var wrap = d3_select('#photoviewer').selectAll('.osc-wrapper') + var wrap = d3_select('.photoviewer').selectAll('.osc-wrapper') .data([0]); var wrapEnter = wrap.enter() @@ -316,7 +316,7 @@ export default { if (r < -180) r += 360; sequence.rotation = r; - var wrap = d3_select('#photoviewer .osc-wrapper'); + var wrap = d3_select('.photoviewer .osc-wrapper'); wrap .transition() @@ -352,7 +352,7 @@ export default { showViewer: function() { - var viewer = d3_select('#photoviewer') + var viewer = d3_select('.photoviewer') .classed('hide', false); var isHidden = viewer.selectAll('.photo-wrapper.osc-wrapper.hide').size(); @@ -374,7 +374,7 @@ export default { hideViewer: function() { _oscSelectedImage = null; - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -390,7 +390,7 @@ export default { updateViewer: function(d) { - var wrap = d3_select('#photoviewer .osc-wrapper'); + var wrap = d3_select('.photoviewer .osc-wrapper'); var imageWrap = wrap.selectAll('.osc-image-wrap'); var attribution = wrap.selectAll('.photo-attribution').html(''); @@ -461,7 +461,7 @@ export default { selectImage: function(d) { _oscSelectedImage = d; - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(d); this.setStyles(null, true); @@ -503,7 +503,7 @@ export default { var hoveredSequence = hoveredSequenceKey && _oscCache.sequences[hoveredSequenceKey]; var hoveredImageKeys = (hoveredSequence && hoveredSequence.images.map(function (d) { return d.key; })) || []; - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var selectedImageKey = selected && selected.key; var selectedSequenceKey = this.getSequenceKeyForImage(selected); diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 8c390dd31..b92ff31ae 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -500,7 +500,7 @@ export default { let that = this; // create ms-wrapper, a photo wrapper class - let wrap = d3_select('#photoviewer').selectAll('.ms-wrapper') + let wrap = d3_select('.photoviewer').selectAll('.ms-wrapper') .data([0]); // inject ms-wrapper into the photoviewer div @@ -568,7 +568,7 @@ export default { function step(stepBy) { return () => { - let viewer = d3_select('#photoviewer'); + let viewer = d3_select('.photoviewer'); let selected = viewer.empty() ? undefined : viewer.datum(); if (!selected) return; @@ -670,7 +670,7 @@ export default { } } - let wrap = d3_select('#photoviewer') + let wrap = d3_select('.photoviewer') .classed('hide', false); let isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size(); @@ -693,7 +693,7 @@ export default { * hideViewer() */ hideViewer: function () { - let viewer = d3_select('#photoviewer'); + let viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(null); viewer @@ -713,12 +713,12 @@ export default { */ selectImage: function (d) { let that = this; - let viewer = d3_select('#photoviewer'); + let viewer = d3_select('.photoviewer'); if (!viewer.empty()) viewer.datum(d); this.setStyles(null, true); - let wrap = d3_select('#photoviewer .ms-wrapper'); + let wrap = d3_select('.photoviewer .ms-wrapper'); let attribution = wrap.selectAll('.photo-attribution').html(''); wrap.selectAll('.pnlm-load-box') // display "loading.." @@ -894,7 +894,7 @@ export default { let hoveredSequence = hoveredSequenceKey && _ssCache.sequences[hoveredSequenceKey]; let hoveredBubbleKeys = (hoveredSequence && hoveredSequence.bubbles.map(d => d.key)) || []; - let viewer = d3_select('#photoviewer'); + let viewer = d3_select('.photoviewer'); let selected = viewer.empty() ? undefined : viewer.datum(); let selectedBubbleKey = selected && selected.key; let selectedSequenceKey = this.getSequenceKeyForBubble(selected); diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index d5781e7e1..2ce63e4c4 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -106,7 +106,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { context.photos().on('change.openstreetcam_images', update); function update() { - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 60bc3de21..1101f32e1 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -163,7 +163,7 @@ export function svgStreetside(projection, context, dispatch) { * update(). */ function update() { - var viewer = d3_select('#photoviewer'); + var viewer = d3_select('.photoviewer'); var selected = viewer.empty() ? undefined : viewer.datum(); var z = ~~context.map().zoom(); var showMarkers = (z >= minMarkerZoom); diff --git a/modules/ui/init.js b/modules/ui/init.js index d9e19a56f..05b4fff39 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -285,7 +285,7 @@ export function uiInit(context) { overMap .append('div') - .attr('id', 'photoviewer') + .attr('class', 'photoviewer') .classed('al', true) // 'al'=left, 'ar'=right .classed('hide', true) .call(ui.photoviewer); diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index 708292704..72d43ff08 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -104,7 +104,7 @@ export function uiPhotoviewer(context) { } photoviewer.onMapResize = function() { - var photoviewer = d3_select('#photoviewer'); + var photoviewer = d3_select('.photoviewer'); var content = d3_select('#content'); var mapDimensions = utilGetDimensions(content, true); // shrink photo viewer if it is too big