diff --git a/css/app.css b/css/app.css index 94aedfc28..521fcdf54 100644 --- a/css/app.css +++ b/css/app.css @@ -660,7 +660,7 @@ button.save.has-count .count::before { bottom: 0; } -.mapillary-image { +.mapillary-wrap { position: absolute; bottom: 30px; width: 330px; @@ -669,29 +669,19 @@ button.save.has-count .count::before { background-color: #fff; } -.mapillary-image img { - width: 100%; - height: auto; - display: none; -} - -.mapillary-image img.active { - display: block; -} - -.mapillary-image.hidden { +.mapillary-wrap.hidden { visibility: hidden; } -.mapillary-image.temp button { +.mapillary-wrap.temp button { display: none; } -.mapillary-image .uil-ripple-css { +.mapillary-wrap .uil-ripple-css { top: -22px; left: -16px; } -.mapillary-image button.thumb-hide { +.mapillary-wrap button.thumb-hide { border-radius: 0; padding: 5px; position: absolute; @@ -708,6 +698,7 @@ button.save.has-count .count::before { visibility: visible; } + .feature-list-pane .inspector-body { top: 120px; } diff --git a/js/id/services/mapillary.js b/js/id/services/mapillary.js index f236626c0..bce953e09 100644 --- a/js/id/services/mapillary.js +++ b/js/id/services/mapillary.js @@ -202,65 +202,47 @@ iD.services.mapillary = function() { var detectionPackage = d.signs[0].package, type = d.signs[0].type, country = detectionPackage.split('_')[1]; + return iD.services.mapillary.sign_defs[country][type]; }; - mapillary.showThumbnail = function(imageKey, position, interactive) { + mapillary.showThumbnail = function(imageKey) { if (!imageKey) return; - var positionClass = { - 'ar': (position !== 'left'), - 'al': (position === 'left') - }; - - var thumbnail = d3.select('#content').selectAll('.mapillary-image') + var thumbnail = d3.select('#content').selectAll('.mapillary-wrap') .data([0]); // Enter var enter = thumbnail.enter().append('div') - .attr('class', 'mapillary-image ar'); + .attr('class', 'mapillary-wrap al'); // 'al'=left, 'ar'=right enter.append('button') .attr('class', 'thumb-hide') - .on('click', function () { - mapillary.hideThumbnail(); - }) + .on('click', function () { mapillary.hideThumbnail(); }) .append('div') .call(iD.svg.Icon('#icon-close')); - enter.append('img'); - enter.append('div') - .attr('class', 'mly-wrapper inactive') + .attr('class', 'mly-wrapper active') .attr('id', 'mly'); - // Update - thumbnail.selectAll('img') - .attr('src', urlThumb + imageKey + '/thumb-320.jpg') - .classed('active', !interactive); + thumbnail + .classed('hidden', false) + .selectAll('.mly-wrapper') + .attr('class', 'active'); - thumbnail.selectAll('.mly-wrapper') - .classed('active', interactive); - - if (position) { - thumbnail.classed(positionClass); - } - - if(!iD.services.mapillary.viewer) { + if (!iD.services.mapillary.viewer) { iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, { - 'imagePlane': false, - 'image': true, - 'cover': false, - 'debug': false + baseImageSize: 320, + imagePlane: false, + cover: false, + debug: false }); } - if (interactive) { - iD.services.mapillary.viewer.moveToKey(imageKey); - } - thumbnail - .classed('hidden', false); + iD.services.mapillary.viewer.moveToKey(imageKey); + }; mapillary.hideThumbnail = function() { @@ -268,7 +250,7 @@ iD.services.mapillary = function() { iD.services.mapillary.thumb = null; } - d3.select('#content').selectAll('.mapillary-image') + d3.select('#content').selectAll('.mapillary-wrap') .classed('hidden', true); d3.select('#content').selectAll('.mly-wrapper') @@ -283,7 +265,7 @@ iD.services.mapillary = function() { iD.services.mapillary.thumb = null; iD.services.mapillary.viewer = null; } - d3.select('#content').selectAll('.mapillary-image') + d3.select('#content').selectAll('.mapillary-wrap') .remove(); }; diff --git a/js/id/svg/mapillary_images.js b/js/id/svg/mapillary_images.js index 8e484fb0b..4522aa18a 100644 --- a/js/id/svg/mapillary_images.js +++ b/js/id/svg/mapillary_images.js @@ -28,21 +28,19 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) { .classed('loading', function(d) { return d.key === image.key; }); } - function showThumbnail(image, interactive) { + function showThumbnail(image) { var mapillary = getMapillary(); if (!mapillary) return; - var thumb = mapillary.selectedThumbnail(), - position = 'left'; // or 'right' - + var thumb = mapillary.selectedThumbnail(); if (thumb) { d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') .classed('selected', function(d) { return d.key === thumb.key; }); } - mapillary.showThumbnail(image.key, position, interactive); + mapillary.showThumbnail(image.key); - if (!_viewer && interactive) { + if (!_viewer) { _viewer = iD.services.mapillary.viewer; _viewer.on('nodechanged', viewerNavHandler); @@ -54,7 +52,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) { .classed('loading', function() { return false; }); mapillary.selectedThumbnail(pendingImg); context.map().centerEase(pendingImg.loc); - showThumbnail(pendingImg, true); + showThumbnail(pendingImg); pendingImg = null; } _mlyLoading = s; @@ -172,7 +170,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) { } else { mapillary.selectedThumbnail(d); context.map().centerEase(d.loc); - showThumbnail(d, true); + showThumbnail(d); } }); diff --git a/js/id/svg/mapillary_signs.js b/js/id/svg/mapillary_signs.js index a5de4efb8..eb43a70bf 100644 --- a/js/id/svg/mapillary_signs.js +++ b/js/id/svg/mapillary_signs.js @@ -20,19 +20,18 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) { return _mapillary; } - function showThumbnail(image, interactive) { + function showThumbnail(image) { var mapillary = getMapillary(); if (!mapillary) return; - var thumb = mapillary.selectedThumbnail(), - position = 'left'; // or 'right' + var thumb = mapillary.selectedThumbnail(); if (thumb) { d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') .classed('selected', function(d) { return d.key === thumb.key; }); } - mapillary.showThumbnail(image.key, position, interactive); + mapillary.showThumbnail(image.key); } function hideThumbnail() { @@ -93,7 +92,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) { mapillary.selectedThumbnail(d); context.map().centerEase(d.loc); - showThumbnail(d, true); + showThumbnail(d); }); // Exit