Fix highlighted and selected styles (_union needed array arguments)

css/60_photos.css

@@ -146,17 +146,6 @@
 .layer-streetside-images .viewfield-group * {
     fill: #00d8f5;
 }
-.layer-streetside-images .viewfield-group * {
-    fill: #00d8f5;
-}
-.layer-streetside-images .viewfield-group.selected * {
-    fill: #fffc64 !important;
-    fill-opacity: 1;
-}
-.layer-streetside-images .viewfield-group.hovered * {
-    fill: #fffc64 !important;
-    fill-opacity: .9;
-}
 .layer-streetside-images .sequence {
     stroke: #00d8f5;
 }

modules/services/streetside.js

@@ -293,6 +293,11 @@ export default {
     },
 
 
+    viewer: function() {
+        return _pannellumViewer;
+    },
+
+
     initViewer: function (context) {
         if (!window.pannellum) return;
         if (_pannellumViewer) return;
@@ -503,7 +508,7 @@ export default {
         var viewer = d3_select('#photoviewer');
         var selected = viewer.empty() ? undefined : viewer.datum();
         var selectedBubbleKey = selected && selected.key;
-        var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey);
+        var highlightedBubbleKeys = _union([hoveredBubbleKey], [selectedBubbleKey]);
 
         d3_selectAll('.layer-streetside-images .viewfield-group')
             .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; })

modules/svg/streetside.js

@@ -93,10 +93,18 @@ export function svgStreetside(projection, context, dispatch) {
         var service = getService();
         if (!service) return;
 
+        // reset bubble back to a circular field
+        layer.selectAll('.viewfield-group.selected .viewfield')
+            .attr('d', viewfieldPath);
+
         service
             .selectImage(d)
             .showViewer();
 
+        // show selected bubble with a viewfield
+        layer.selectAll('.viewfield-group.selected .viewfield')
+            .attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z');
+
         context.map().centerEase(d.loc);
     }
 
@@ -192,15 +200,6 @@ export function svgStreetside(projection, context, dispatch) {
             .attr('class', 'viewfield')
             .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
             .attr('d', viewfieldPath);
-
-        function viewfieldPath() {
-            var d = this.parentNode.__data__;
-            if (d.pano) {
-                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
-            } else {
-                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
-            }
-        }
     }
 
     /**
@@ -242,6 +241,16 @@ export function svgStreetside(projection, context, dispatch) {
         }
     }
 
+
+    function viewfieldPath() {
+        var d = this.parentNode.__data__;
+        if (d.pano) {
+            return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+        } else {
+            return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+        }
+    }
+
     /**
      * drawImages.enabled().
      */