BiG-CZ: Link Popup Active+Highlight States With Sidebar And Map

* Highlight the sidebar list item and map element
  when hovering a popup list

* This involved changing the way we add the "ring" highlight to
  the map when the shape is outside the viewport bounds for
  CINERGI
      - Before we were using jquery to add a "highlight" class
        to the map container. This caused additional mouseenter
        and mouseleave events to fire on the popup list element.
        The cursor and highlighting would flicker
      - Switch to adding a whole DOM element to show the "highlight"
        ring. This does not cause additional mouse events to fire.

src/mmw/js/src/core/views.js

@@ -800,7 +800,7 @@ var MapView = Marionette.ItemView.extend({
 
     _renderDataCatalogResult: function(result, featureGroup, className, style) {
         featureGroup.clearLayers();
-        this.$el.removeClass(className);
+        $("div.map-highlight").remove();
 
         // If nothing is selected, exit early
         if (!result) { return; }
@@ -811,7 +811,11 @@ var MapView = Marionette.ItemView.extend({
         if (geom) {
             if ((geom.type === 'MultiPolygon' || geom.type === 'Polygon') &&
                 drawUtils.shapeBoundingBox(geom).contains(mapBounds)) {
-                this.$el.addClass(className);
+
+                $(".map-container")
+                    .append('<div class="map-highlight ' +
+                            className +
+                            '"></div>');
             } else {
                 var layer = this.createDataCatalogShape(result);
                 layer.setStyle(style);

src/mmw/js/src/data_catalog/views.js

@@ -514,7 +514,9 @@ var ResultMapPopoverListItemView = Marionette.ItemView.extend({
     },
 
     events: {
-        'click @ui.selectButton': 'selectItem'
+        'click @ui.selectButton': 'selectItem',
+        'mouseover': 'highlightResult',
+        'mouseout': 'unHighlightResult'
     },
 
     templateHelpers: function() {
@@ -525,6 +527,16 @@ var ResultMapPopoverListItemView = Marionette.ItemView.extend({
 
     selectItem: function() {
         this.options.popoverModel.set('activeResult', this.model);
+    },
+
+    highlightResult: function() {
+        App.map.set('dataCatalogActiveResult', this.model);
+        this.model.set('active', true);
+    },
+
+    unHighlightResult: function() {
+        App.map.set('dataCatalogActiveResult', null);
+        this.model.set('active', false);
     }
 });
 
@@ -599,6 +611,8 @@ var ResultMapPopoverControllerView = Marionette.LayoutView.extend({
                 catalog: this.options.catalog
             }));
         } else {
+            App.map.set('dataCatalogActiveResult', null);
+            this.model.set('active', false);
             this.container.show(new ResultMapPopoverListView({
                 collection: this.collection,
                 popoverModel: this.model,

src/mmw/sass/base/_map.scss

@@ -40,22 +40,6 @@
   right: 0;
   left: 0;
   height: 100%;
-
-  &.bigcz-highlight-map:after {
-    content: "";
-    border: 3px solid gold;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-
-  &.bigcz-detail-map:after {
-    content: "";
-    border: 3px solid steelblue;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
 }
 
 #overlay-subclass-vector .disabled, #overlay-subclass-raster .disabled {
@@ -297,3 +281,20 @@ div.leaflet-popup-content-wrapper {
         margin: 0;
     }
 }
+
+.map-highlight.bigcz-highlight-map,
+.map-highlight.bigcz-detail-map {
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 100;
+}
+
+.map-highlight.bigcz-highlight-map {
+    border: 3px solid gold;
+}
+
+.map-highlight.bigcz-detail-map {
+    border: 3px solid steelblue;
+}