WIP: simplify code, attempt to preload viewer

js/id/services/mapillary.js

@@ -2,7 +2,6 @@ iD.services.mapillary = function() {
     var mapillary = {},
         dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
         apibase = 'https://a.mapillary.com/v2/',
-        urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
         clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
         maxResults = 1000,
         tileZoom = 14;
@@ -206,48 +205,73 @@ iD.services.mapillary = function() {
         return iD.services.mapillary.sign_defs[country][type];
     };
 
-    mapillary.showThumbnail = function(imageKey) {
-        if (!imageKey) return;
-
-        var thumbnail = d3.select('#content').selectAll('.mapillary-wrap')
+    mapillary.initViewer = function(imageKey) {
+        var hidden = !imageKey;
+        var wrap = d3.select('#content').selectAll('.mapillary-wrap')
             .data([0]);
 
         // Enter
-        var enter = thumbnail.enter().append('div')
-            .attr('class', 'mapillary-wrap al');   // 'al'=left,  'ar'=right
+        var enter = wrap.enter().append('div')
+            .attr('class', 'mapillary-wrap')
+            .classed('al', true)       // 'al'=left,  'ar'=right
+            .classed('hidden', hidden);
 
         enter.append('button')
             .attr('class', 'thumb-hide')
-            .on('click', function () { mapillary.hideThumbnail(); })
+            .on('click', function () { mapillary.hideViewer(); })
             .append('div')
             .call(iD.svg.Icon('#icon-close'));
 
         enter.append('div')
-            .attr('class', 'mly-wrapper active')
-            .attr('id', 'mly');
+            .attr('id', 'mly')
+            .attr('class', 'mly-wrapper')
+            .classed('active', !hidden);
+
+        // if (Mapillary && !iD.services.mapillary.viewer) {
+        //     iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
+        //         baseImageSize: 320,
+        //         imagePlane: false,
+        //         cover: false,
+        //         debug: false
+        //     });
+        // }
+
+        return mapillary;
+    };
+
+    mapillary.showViewer = function(imageKey) {
+        if (!imageKey) return;
+
+        var wrap = d3.select('#content').selectAll('.mapillary-wrap');
 
         // Update
-        thumbnail
+        wrap
             .classed('hidden', false)
             .selectAll('.mly-wrapper')
             .attr('class', 'active');
 
-        if (!iD.services.mapillary.viewer) {
-            iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
-                baseImageSize: 320,
-                imagePlane: false,
-                cover: false,
-                debug: false
-            });
+        if (iD.services.mapillary.viewer) {
+            iD.services.mapillary.viewer.moveToKey(imageKey);
+        } else {
+            mapillary.initViewer(imageKey);
+
+            if (Mapillary && !iD.services.mapillary.viewer) {
+                iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
+                    baseImageSize: 320,
+                    imagePlane: false,
+                    cover: false,
+                    debug: false
+                });
+            }
+
         }
 
-        iD.services.mapillary.viewer.moveToKey(imageKey);
-
+        return mapillary;
     };
 
-    mapillary.hideThumbnail = function() {
+    mapillary.hideViewer = function() {
         if (iD.services.mapillary) {
-            iD.services.mapillary.thumb = null;
+            iD.services.mapillary.image = null;
         }
 
         d3.select('#content').selectAll('.mapillary-wrap')
@@ -258,21 +282,17 @@ iD.services.mapillary = function() {
 
         d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', false);
+
+        return mapillary;
     };
 
-    mapillary.killThumbnail = function() {
-        if (iD.services.mapillary) {
-            iD.services.mapillary.thumb = null;
-            iD.services.mapillary.viewer = null;
-        }
-        d3.select('#content').selectAll('.mapillary-wrap')
-            .remove();
-    };
-
-    mapillary.selectedThumbnail = function(d) {
+    mapillary.selectedImage = function(image) {
         if (!iD.services.mapillary) return null;
-        if (!arguments.length) return iD.services.mapillary.thumb;
-        iD.services.mapillary.thumb = d;
+        if (!arguments.length) return iD.services.mapillary.image;
+        iD.services.mapillary.image = image;
+
+        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
+            .classed('selected', function(d) { return d.key === image.key; });
     };
 
     mapillary.reset = function() {
@@ -288,7 +308,7 @@ iD.services.mapillary = function() {
             signs:  { inflight: {}, loaded: {}, rtree: rbush() }
         };
 
-        iD.services.mapillary.thumb = null;
+        iD.services.mapillary.image = null;
 
         return mapillary;
     };

js/id/svg/mapillary_images.js

@@ -28,50 +28,55 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
             .classed('loading', function(d) { return d.key === image.key; });
     }
 
-    function showThumbnail(image) {
+    function showViewer(image) {
         var mapillary = getMapillary();
         if (!mapillary) return;
 
-        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);
+        mapillary.showViewer(image.key);
 
         if (!_viewer) {
             _viewer = iD.services.mapillary.viewer;
             _viewer.on('nodechanged', viewerNavHandler);
 
-            // To avoid edge case, when network is too slow and  user clicks on multiple
-            // viewfield-groups.
+            // To avoid edge case, when network is too slow and user clicks on multiple viewfield-groups
             _viewer.on('loadingchanged', function(s) {
-                if (!s && pendingImg) {
-                    d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
-                        .classed('loading', function() { return false; });
-                    mapillary.selectedThumbnail(pendingImg);
-                    context.map().centerEase(pendingImg.loc);
-                    showThumbnail(pendingImg);
-                    pendingImg = null;
-                }
-                _mlyLoading = s;
+                // if (!s && pendingImg) {
+                //     d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
+                //         .classed('loading', function() { return false; });
+                //     mapillary.selectedImage(pendingImg);
+                //     context.map().centerEase(pendingImg.loc);
+                //     showViewer(pendingImg);
+                //     pendingImg = null;
+                // }
+                // _mlyLoading = s;
             });
         }
     }
 
-    function removeThumbnail(permanent) {
-        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
-            .classed('selected', false);
-
+    function hideViewer() {
         var mapillary = getMapillary();
         if (mapillary) {
-            if (permanent) return mapillary.killThumbnail();
-            return mapillary.hideThumbnail();
+            mapillary.hideViewer();
+        } else {
+            d3.select('#content').selectAll('.mapillary-wrap')
+                .remove();
         }
+
+        if (_viewer) {
+            _viewer.off('nodechanged');
+            _viewer.off('loadingchanged');
+            _viewer = null;
+        }
+
+        _mlyLoading = null;
+        pendingImg = null;
     }
 
     function showLayer() {
+        var mapillary = getMapillary();
+        if (!mapillary) return;
+        mapillary.initViewer();
+
         editOn();
         layer
             .style('opacity', 0)
@@ -83,15 +88,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
 
     function hideLayer() {
         debouncedRedraw.cancel();
-        removeThumbnail(true);
-        if (_viewer) {
-            _viewer.off('nodechanged');
-            _viewer.off('loadingchanged');
-        }
-        _mlyLoading = null;
-        pendingImg = null;
-        _viewer = null;
-
+        hideViewer();
         layer
             .transition()
             .duration(500)
@@ -108,6 +105,22 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
         layer.style('display', 'none');
     }
 
+    function click(d) {
+        var mapillary = getMapillary();
+        if (!mapillary) return;
+
+        var image = mapillary.selectedImage();
+        if (image && image.key === d.key) return;
+
+        if (_mlyLoading) {
+            showLoading(d);
+        } else {
+            mapillary.selectedImage(d);
+            context.map().centerEase(d.loc);
+            showViewer(d);
+        }
+    }
+
     function transform(d) {
         var t = iD.svg.PointTransform(projection)(d);
         if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
@@ -124,7 +137,8 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
         // Enter
         var enter = markers.enter()
             .append('g')
-            .attr('class', 'viewfield-group');
+            .attr('class', 'viewfield-group')
+            .on('click', click);
 
         enter.append('path')
             .attr('class', 'viewfield')
@@ -155,24 +169,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
         layer.enter()
             .append('g')
             .attr('class', 'layer-mapillary-images')
-            .style('display', enabled ? 'block' : 'none')
-            .on('click', function() {
-                var mapillary = getMapillary();
-                if (!mapillary) return;
-
-                var d = d3.event.target.__data__,
-                    thumb = mapillary.selectedThumbnail();
-
-                if (thumb && thumb.key === d.key) return;
-
-                if (_mlyLoading) {
-                    showLoading(d);
-                } else {
-                    mapillary.selectedThumbnail(d);
-                    context.map().centerEase(d.loc);
-                    showThumbnail(d);
-                }
-            });
+            .style('display', enabled ? 'block' : 'none');
 
         layer.exit()
             .remove();
@@ -192,13 +189,13 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
         var mapillary = getMapillary();
         if (!mapillary) return;
 
-        var thumb = mapillary.selectedThumbnail();
-        if (!thumb || thumb.key === node.key) return;
+        var image = mapillary.selectedImage();
+        if (!image || image.key === node.key) return;
 
         d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
             .classed('selected', function(d) {
                 if (d.key === node.key) {
-                    mapillary.selectedThumbnail(d);
+                    mapillary.selectedImage(d);
                     context.map().centerEase(d.loc);
                     return true;
                 }

js/id/svg/mapillary_signs.js

@@ -20,30 +20,6 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
         return _mapillary;
     }
 
-    function showThumbnail(image) {
-        var mapillary = getMapillary();
-        if (!mapillary) return;
-
-        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);
-    }
-
-    function hideThumbnail() {
-        d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
-            .classed('selected', false);
-
-        var mapillary = getMapillary();
-        if (mapillary) {
-            mapillary.hideThumbnail();
-        }
-    }
-
     function showLayer() {
         editOn();
         debouncedRedraw();
@@ -51,7 +27,6 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
 
     function hideLayer() {
         debouncedRedraw.cancel();
-        hideThumbnail();
         editOff();
     }
 
@@ -64,6 +39,18 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
         layer.style('display', 'none');
     }
 
+    function click(d) {
+        var mapillary = getMapillary();
+        if (!mapillary) return;
+
+        var image = mapillary.selectedImage();
+        if (image && image.key === d.key) return;
+
+        mapillary.selectedImage(d);
+        context.map().centerEase(d.loc);
+        mapillary.showViewer(d.key);
+    }
+
     function update() {
         var mapillary = getMapillary(),
             data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []);
@@ -76,25 +63,13 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
             .append('foreignObject')
             .attr('class', 'icon-sign')
             .attr('width', '32px')      // for Firefox
-            .attr('height', '32px');    // for Firefox
+            .attr('height', '32px')     // for Firefox
+            .on('click', click);
 
         enter
             .append('xhtml:body')
             .html(mapillary.signHTML);
 
-        enter
-            .on('click', function(d) {
-                var mapillary = getMapillary();
-                if (!mapillary) return;
-
-                var thumb = mapillary.selectedThumbnail();
-                if (thumb && thumb.key === d.key) return;
-
-                mapillary.selectedThumbnail(d);
-                context.map().centerEase(d.loc);
-                showThumbnail(d);
-            });
-
         // Exit
         signs.exit()
             .remove();

test/spec/services/mapillary.js

@@ -360,26 +360,26 @@ describe('iD.services.mapillary', function() {
         });
     });
 
-    describe('#selectedThumbnail', function() {
-        it('sets thumbnail image', function() {
-            mapillary.selectedThumbnail('foo');
-            expect(iD.services.mapillary.thumb).to.eql('foo');
+    describe('#selectedImage', function() {
+        it('sets selected image', function() {
+            mapillary.selectedImage('foo');
+            expect(iD.services.mapillary.image).to.eql('foo');
         });
 
-        it('gets thumbnail image', function() {
-            iD.services.mapillary.thumb = 'bar';
-            expect(mapillary.selectedThumbnail()).to.eql('bar');
+        it('gets selected image', function() {
+            iD.services.mapillary.image = 'bar';
+            expect(mapillary.selectedImage()).to.eql('bar');
         });
     });
 
     describe('#reset', function() {
-        it('resets cache and thumbnail image', function() {
+        it('resets cache and image', function() {
             iD.services.mapillary.cache.foo = 'bar';
-            iD.services.mapillary.thumb = 'bar';
+            iD.services.mapillary.image = 'bar';
 
             mapillary.reset();
             expect(iD.services.mapillary.cache).to.not.have.property('foo');
-            expect(iD.services.mapillary.thumb).to.be.null;
+            expect(iD.services.mapillary.image).to.be.null;
         });
     });