mirror of
https://github.com/FoggedLens/iD.git
synced 2026-03-31 01:09:22 +02:00
Convert photoviewer from id to class
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user