From 39d5a39b1a587625d3acfe7b4584d57f454e5641 Mon Sep 17 00:00:00 2001
From: Brook Elgie <specialbrew@gmail.com>
Date: Tue, 25 Apr 2017 12:04:36 +0100
Subject: [PATCH] [#1050] Update popover script.

It fell out of sync with the one used by the mock up.
---
 census/static/scripts/site/table.js | 59 ++++++++++++-----------------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/census/static/scripts/site/table.js b/census/static/scripts/site/table.js
index ab5c0ca0..f51a39db 100644
--- a/census/static/scripts/site/table.js
+++ b/census/static/scripts/site/table.js
@@ -6,12 +6,7 @@ define(['jquery', 'bootstrap', 'chroma', 'tablesorter', 'stickykit'],
       naString = 'n/a',
       $dataTable = $('.data-table'),
       $scoreDisplay = $('.score'),
-      popover = $('#popover'),
-      popoverProps = {
-        title: popover.find('.popover-title'),
-        content: popover.find('.popover-content'),
-        visible: null
-      },
+      popover_tmpl = '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
       tablesorterPlaceOptions = {
         sortList: [[1, 0]],
         headers: {
@@ -136,42 +131,36 @@ define(['jquery', 'bootstrap', 'chroma', 'tablesorter', 'stickykit'],
 
     function setInteractions() {
 
-      var popovers = $('[data-toggle="popover"]');
       $("[data-toggle='tooltip']").tooltip({html: true});
+      $('[data-toggle="popover"]').popover({
+          trigger: 'click',
+          'placement': 'bottom',
+          'html': true,
+          'show': true,
+          'template': popover_tmpl
+      });
 
-      popovers.on('click', function(e) {
-
-        var target = $(e.target.parentNode),
-          offset;
-
-        // in case popover already visible, it will propagate event to body
-        // and hide this element
-        if (popoverProps.visible && popoverProps.visible.is(target)) {
-          return true;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
+      $('[data-toggle="popover"]').on('click', function() {
+          $('[data-toggle="popover"]').not(this).popover('hide');
+      });
 
-        popoverProps.visible = target;
+      $('body').on('click', 'td.showpopover', function() {
+          var $this = $(this);
 
-        offset = target.offset();
+          // check if the one clicked is now shown
+          if ($this.data('popover').tip().hasClass('in')) {
 
-        popoverProps.title.html(target.attr('title'));
-        popoverProps.content.html(target.data('content'));
+              // if another was showing, hide it
+              if ($visiblePopover) {
+                  $visiblePopover.popover('hide');
+              }
 
-        popover.css({
-          top: offset.top + target.height(),
-          left: offset.left + target.width() / 2 - popover.width() / 2,
-          display: 'block'
-        });
-
-        return false;
-      });
+              // then store reference to current popover
+              $visiblePopover = $this;
 
-      $('body').on('click', function() {
-        popoverProps.visible = null;
-        popover.hide();
+          } else { // if it was hidden, then nothing must be showing
+              $visiblePopover = '';
+          }
       });
 
       $('.filter-table').on('keyup', function() {