Convert photoviewer from id to class

This commit is contained in:
Quincy Morgan
2020-03-20 14:07:09 -07:00
parent c893147e15
commit 371bac0aa2
8 changed files with 31 additions and 31 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);

View File

@@ -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);

View File

@@ -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();

View File

@@ -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);

View File

@@ -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);

View File

@@ -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