Refactor click tracking into Mapillary service, addl cleanups

js/id/services/mapillary.js

@@ -71,7 +71,20 @@ iD.services.mapillary = function() {
             .attr('src', viewerjs);
     }
 
-    function initViewer(imageKey) {
+    function initViewer(imageKey, context) {
+
+        function nodeChanged(d) {
+            var clicks = iD.services.mapillary.clicks;
+            var index = clicks.indexOf(d.key);
+            if (index > -1) {    // nodechange initiated from clicking on a marker..
+                clicks.splice(index, 1);
+            } else {             // nodechange initiated from the Mapillary viewer controls..
+                var loc = d.apiNavImIm ? [d.apiNavImIm.lon, d.apiNavImIm.lat] : [d.latLon.lon, d.latLon.lat];
+                context.map().centerEase(loc);
+                mapillary.setSelectedImage(d.key, false);
+            }
+        }
+
         if (Mapillary && imageKey) {
             var opts = {
                 baseImageSize: 320,
@@ -84,7 +97,8 @@ iD.services.mapillary = function() {
             };
 
             var viewer = new Mapillary.Viewer('mly', clientId, imageKey, opts);
-            viewer.on('loadingchanged', mapillary.viewerLoading);
+            viewer.on('nodechanged', nodeChanged);
+            viewer.on('loadingchanged', mapillary.setViewerLoading);
             iD.services.mapillary.viewer = viewer;
         }
     }
@@ -269,7 +283,6 @@ iD.services.mapillary = function() {
     };
 
     mapillary.showViewer = function() {
-        loadViewer();
         d3.select('#content')
             .selectAll('.mapillary-wrap')
             .classed('hidden', false)
@@ -294,7 +307,7 @@ iD.services.mapillary = function() {
         return mapillary;
     };
 
-    mapillary.viewerLoading = function(loading) {
+    mapillary.setViewerLoading = function(loading) {
         var cover = d3.select('#content')
             .selectAll('.mly-wrapper .Cover');
 
@@ -312,12 +325,16 @@ iD.services.mapillary = function() {
 
         button.exit()
             .remove();
+
+        return mapillary;
     };
 
-    mapillary.setViewerImage = function(imageKey) {
-        loadViewer();
+    mapillary.updateViewer = function(imageKey, context) {
+        if (!iD.services.mapillary) return;
+        if (!imageKey) return;
+
         if (!iD.services.mapillary.viewer) {
-            initViewer(imageKey);
+            initViewer(imageKey, context);
         } else {
             iD.services.mapillary.viewer.moveToKey(imageKey);
         }
@@ -330,13 +347,18 @@ iD.services.mapillary = function() {
         return iD.services.mapillary.image;
     };
 
-    mapillary.setSelectedImage = function(imageKey) {
+    mapillary.setSelectedImage = function(imageKey, fromClick) {
         if (!iD.services.mapillary) return null;
 
         iD.services.mapillary.image = imageKey;
+        if (fromClick) {
+            iD.services.mapillary.clicks.push(imageKey);
+        }
 
         d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', function(d) { return d.key === imageKey; });
+
+        return mapillary;
     };
 
     mapillary.reset = function() {
@@ -353,6 +375,7 @@ iD.services.mapillary = function() {
         };
 
         iD.services.mapillary.image = null;
+        iD.services.mapillary.clicks = [];
 
         return mapillary;
     };

js/id/svg/mapillary_images.js

@@ -2,8 +2,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
     var debouncedRedraw = _.debounce(function () { dispatch.change(); }, 1000),
         minZoom = 12,
         layer = d3.select(null),
-        _clicks = [],
-        _mapillary, _viewer;
+        _mapillary;
 
 
     function init() {
@@ -20,23 +19,14 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
             _mapillary = null;
         }
 
-        if (iD.services.mapillary && !_viewer) {
-            _viewer = iD.services.mapillary.viewer;
-            if (_viewer) {
-                _viewer.on('nodechanged', nodeChanged);
-            }
-        } else if (!iD.services.mapillary && _viewer) {
-            _viewer = null;
-        }
-
         return _mapillary;
     }
 
     function showLayer() {
         var mapillary = getMapillary();
         if (!mapillary) return;
-        mapillary.loadViewer();
 
+        mapillary.loadViewer();
         editOn();
 
         layer
@@ -76,24 +66,11 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
         if (!mapillary) return;
 
         context.map().centerEase(d.loc);
-        mapillary.setSelectedImage(d.key);
-        mapillary.setViewerImage(d.key);
-        mapillary.showViewer();
-        _clicks.push(d.key);
-    }
 
-    function nodeChanged(d) {
-        var mapillary = getMapillary();
-        if (!mapillary) return;
-
-        var index = _clicks.indexOf(d.key);
-        if (index > -1) {
-            _clicks.splice(index, 1);
-        } else {   // change initiated from the viewer controls..
-            var loc = d.apiNavImIm ? [d.apiNavImIm.lon, d.apiNavImIm.lat] : [d.latLon.lon, d.latLon.lat];
-            context.map().centerEase(loc);
-            mapillary.setSelectedImage(d.key);
-        }
+        mapillary
+            .setSelectedImage(d.key, true)
+            .updateViewer(d.key, context)
+            .showViewer();
     }
 
     function transform(d) {

js/id/svg/mapillary_signs.js

@@ -41,12 +41,14 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
 
     function click(d) {
         var mapillary = getMapillary();
-        if (mapillary) {
-            context.map().centerEase(d.loc);
-            mapillary.setSelectedImage(d.key);
-            mapillary.setViewerImage(d.key);
-            mapillary.showViewer();
-        }
+        if (!mapillary) return;
+
+        context.map().centerEase(d.loc);
+
+        mapillary
+            .setSelectedImage(d.key, true)
+            .updateViewer(d.key, context)
+            .showViewer();
     }
 
     function update() {