From 73f0eff662075d0c429f290b097f9e8b8979db7f Mon Sep 17 00:00:00 2001
From: Terence Tuhinanshu <ttuhinanshu@azavea.com>
Date: Fri, 15 Sep 2017 10:44:02 -0400
Subject: [PATCH] Make popover text selectable

Previously, with 'focus', the popover would disappear after a
click. With 'click', it stays around until explicitly closed,
either by the close button within the popover, or by re-clicking
the info icon that opened it. This allows the user to select
text in the popover, and in the case of URLs, paste them into
new tabs to visit the relevant sites.
---
 src/mmw/js/src/app.js                                        | 5 +++++
 .../js/src/data_catalog/templates/resultDetailsCuahsi.html   | 2 +-
 src/mmw/js/src/data_catalog/views.js                         | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/mmw/js/src/app.js b/src/mmw/js/src/app.js
index 05df828b4..d3c20da76 100644
--- a/src/mmw/js/src/app.js
+++ b/src/mmw/js/src/app.js
@@ -64,6 +64,11 @@ var App = new Marionette.Application({
 
         // Enable screenshot functionality
         initializeShutterbug();
+
+        // Enabling hiding popovers from within them
+        window.closePopover = function() {
+            $('[data-toggle="popover"]').popover('hide');
+        };
     },
 
     load: function(data) {
diff --git a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html
index 9aa0170eb..baa09da4f 100644
--- a/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html
+++ b/src/mmw/js/src/data_catalog/templates/resultDetailsCuahsi.html
@@ -11,7 +11,7 @@ <h2>
             <a data-toggle="popover" tabindex="0"
                data-html="true" data-container="body" role="button"
                data-content="{{ description }}"
-               data-template="<div class='popover'><div class='pull-right' id='popover-close-button'><i class='fa fa-times' /></div><div class='popover-content'></div><div class='arrow'></div></div>">
+               data-template="<div class='popover'><div class='pull-right' id='popover-close-button' onclick='closePopover()'><i class='fa fa-times' /></div><div class='popover-content'></div><div class='arrow'></div></div>">
                 <i class="fa fa-info-circle black"></i>
             </a>
         </p>
diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js
index fa6ae6d71..c3f84191c 100644
--- a/src/mmw/js/src/data_catalog/views.js
+++ b/src/mmw/js/src/data_catalog/views.js
@@ -470,7 +470,7 @@ var ResultDetailsView = Marionette.ItemView.extend({
     onAttach: function() {
         this.$('[data-toggle="popover"]').popover({
             placement: 'right',
-            trigger: 'focus',
+            trigger: 'click',
         });
         this.$('[data-toggle="table"]').bootstrapTable();
     },