From ff5139fc58940d319bf36f8f6c65f3d69b68323f Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 14 Feb 2016 00:23:18 -0500 Subject: [PATCH] Position Mapillary thumbnail on opposite side of map from marker (closes #2775) --- css/app.css | 4 +-- js/id/renderer/mapillary_image_layer.js | 30 ++++++++++------- js/id/renderer/mapillary_sign_layer.js | 28 +++++++++------- js/id/services/mapillary.js | 43 +++++++++++++++---------- 4 files changed, 62 insertions(+), 43 deletions(-) diff --git a/css/app.css b/css/app.css index a83bb2847..2ddd3d96a 100644 --- a/css/app.css +++ b/css/app.css @@ -295,6 +295,8 @@ ul li { list-style: none;} .fl { float: left;} .fr { float: right;} +.al { left: 0; } +.ar { right: 0; } div.hide, form.hide, @@ -655,7 +657,6 @@ button.save.has-count .count::before { .mapillary-image { position: absolute; - right: 0; bottom: 30px; width: 330px; height: 250px; @@ -669,7 +670,6 @@ button.save.has-count .count::before { height: auto; background-color: rgba(0,0,0,.5); bottom: 0; - right: 0; padding: 5px 10px; } diff --git a/js/id/renderer/mapillary_image_layer.js b/js/id/renderer/mapillary_image_layer.js index 23ad84650..8e5fd288a 100644 --- a/js/id/renderer/mapillary_image_layer.js +++ b/js/id/renderer/mapillary_image_layer.js @@ -6,20 +6,25 @@ iD.MapillaryImageLayer = function(context) { layer; - function showThumbnail(imageKey) { - var thumb = mapillary.selectedThumbnail(); + function showThumbnail(image) { + var thumb = mapillary.selectedThumbnail(), + posX = context.projection(image.loc)[0], + width = layer.dimensions()[0], + position = (posX < width / 2) ? 'right' : 'left'; - d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') - .classed('selected', function(d) { return d.key === thumb; }); + 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(context.container(), imageKey); + mapillary.showThumbnail(image.key, position); } function hideThumbnail() { d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') .classed('selected', false); - mapillary.hideThumbnail(context.container()); + mapillary.hideThumbnail(); } function showLayer() { @@ -96,17 +101,18 @@ iD.MapillaryImageLayer = function(context) { .append('svg') .style('display', enabled ? 'block' : 'none') .on('click', function() { // deselect/select - var image = d3.event.target.__data__; - if (image.key === mapillary.selectedThumbnail()) { + var d = d3.event.target.__data__, + thumb = mapillary.selectedThumbnail(); + if (thumb && thumb.key === d.key) { hideThumbnail(); } else { - mapillary.selectedThumbnail(image.key); - context.map().centerEase(image.loc); - showThumbnail(image.key); + mapillary.selectedThumbnail(d); + context.map().centerEase(d.loc); + showThumbnail(d); } }) .on('mouseover', function() { - showThumbnail(d3.event.target.__data__.key); + showThumbnail(d3.event.target.__data__); }) .on('mouseout', function() { var thumb = mapillary.selectedThumbnail(); diff --git a/js/id/renderer/mapillary_sign_layer.js b/js/id/renderer/mapillary_sign_layer.js index 5dbf6fbab..818d66718 100644 --- a/js/id/renderer/mapillary_sign_layer.js +++ b/js/id/renderer/mapillary_sign_layer.js @@ -6,20 +6,25 @@ iD.MapillarySignLayer = function(context) { layer; - function showThumbnail(imageKey) { - var thumb = mapillary.selectedThumbnail(); + function showThumbnail(image) { + var thumb = mapillary.selectedThumbnail(), + posX = context.projection(image.loc)[0], + width = layer.dimensions()[0], + position = (posX < width / 2) ? 'right' : 'left'; - d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') - .classed('selected', function(d) { return d.key === thumb; }); + 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(context.container(), imageKey); + mapillary.showThumbnail(image.key, position); } function hideThumbnail() { d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign') .classed('selected', false); - mapillary.hideThumbnail(context.container()); + mapillary.hideThumbnail(); } function showLayer() { @@ -62,17 +67,16 @@ iD.MapillarySignLayer = function(context) { enter .on('click', function(d) { // deselect/select - if (d.key === mapillary.selectedThumbnail()) { + var thumb = mapillary.selectedThumbnail(); + if (thumb && thumb.key === d.key) { hideThumbnail(); } else { - mapillary.selectedThumbnail(d.key); + mapillary.selectedThumbnail(d); context.map().centerEase(d.loc); - showThumbnail(d.key); + showThumbnail(d); } }) - .on('mouseover', function(d) { - showThumbnail(d.key); - }) + .on('mouseover', showThumbnail) .on('mouseout', function() { var thumb = mapillary.selectedThumbnail(); if (thumb) { diff --git a/js/id/services/mapillary.js b/js/id/services/mapillary.js index 3313657db..c22b924b1 100644 --- a/js/id/services/mapillary.js +++ b/js/id/services/mapillary.js @@ -178,19 +178,24 @@ iD.services.mapillary = function() { return iD.services.mapillary.sign_defs[country][type]; }; - mapillary.showThumbnail = function(selection, imageKey) { - if (!imageKey) return; + mapillary.showThumbnail = function(imageKey, position) { + if (!imageKey) return - var thumbnail = selection.selectAll('.mapillary-image') + var positionClass = { + 'ar': (position !== 'left'), + 'al': (position === 'left') + }; + + var thumbnail = d3.select('#content').selectAll('.mapillary-image') .data([0]); // Enter var enter = thumbnail.enter().append('div') - .attr('class', 'mapillary-image'); + .attr('class', 'mapillary-image ar'); enter.append('button') .on('click', function () { - mapillary.hideThumbnail(selection); + mapillary.hideThumbnail(); }) .append('div') .call(iD.svg.Icon('#icon-close')); @@ -198,38 +203,42 @@ iD.services.mapillary = function() { enter.append('img'); enter.append('a') - .attr('class', 'link') + .attr('class', 'link ar') .attr('target', '_blank') .call(iD.svg.Icon('#icon-out-link', 'inline')) .append('span') .text(t('mapillary.view_on_mapillary')); // Update + thumbnail.selectAll('img') + .attr('src', urlThumb + imageKey + '/thumb-320.jpg'); + + var link = thumbnail.selectAll('a') + .attr('href', urlImage + imageKey); + + if (position) { + thumbnail.classed(positionClass); + link.classed(positionClass); + } + thumbnail .transition() .duration(200) .style('opacity', 1); - - thumbnail.selectAll('img') - .attr('src', urlThumb + imageKey + '/thumb-320.jpg'); - - thumbnail.selectAll('a') - .attr('href', urlImage + imageKey); - }; - mapillary.hideThumbnail = function(selection) { + mapillary.hideThumbnail = function() { iD.services.mapillary.thumb = null; - selection.selectAll('.mapillary-image') + d3.select('#content').selectAll('.mapillary-image') .transition() .duration(200) .style('opacity', 0) .remove(); }; - mapillary.selectedThumbnail = function(imageKey) { + mapillary.selectedThumbnail = function(d) { if (!arguments.length) return iD.services.mapillary.thumb; - iD.services.mapillary.thumb = imageKey; + iD.services.mapillary.thumb = d; }; mapillary.reset = function() {