Position Mapillary thumbnail on opposite side of map from marker

(closes #2775)

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

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

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) {

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() {