Merge pull request #3412 from AtlasOfLivingAustralia/feature/issue269

AtlasOfLivingAustralia/ecodata-client-plugin#269

Author: chrisala

grails-app/assets/javascripts/knockout-custom-bindings.js

@@ -12,23 +12,41 @@ ko.bindingHandlers.popover = {
     ko.bindingHandlers.popover.initPopover(element, valueAccessor);
   },
   update: function(element, valueAccessor) {
+    var $element = $(element),
+        instance = $element.data('bs.popover'),
+        popOptions = ko.bindingHandlers.popover.getOptions(valueAccessor),
+        combinedOptions = popOptions.combinedOptions,
+        options = popOptions.options;
+
+    if (!instance) {
+      ko.bindingHandlers.popover.initPopover(element, valueAccessor);
+      instance = $element.data('bs.popover');
+    }
+
+    if (!instance)
+      return;
+
+    // if view model has changed, update the popover
+    instance.config.title = combinedOptions.title || "";
+    instance.config.content = combinedOptions.content;
 
-    var $element = $(element);
-    $element.popover('dispose');
-    var options = ko.bindingHandlers.popover.initPopover(element, valueAccessor);
     if (options.autoShow) {
       if ($element.data('firstPopover') === false) {
-        $element.popover('show');
+        instance.show();
         $('body').on('click', function(e) {
-
           if (e.target != element && $element.find(e.target).length == 0) {
-            $element.popover('dispose');
+            instance.hide();
           }
         });
       }
+
       $element.data('firstPopover', false);
     }
 
+    // refresh popover content
+    if(ko.bindingHandlers.popover.isPopoverShown(element)) {
+      instance.show();
+    }
   },
 
   defaultOptions: {
@@ -39,23 +57,41 @@ ko.bindingHandlers.popover = {
   },
 
   initPopover: function(element, valueAccessor) {
-    var options = ko.utils.unwrapObservable(valueAccessor());
+    var popOptions = ko.bindingHandlers.popover.getOptions(valueAccessor),
+        options = popOptions.options,
+        combinedOptions = popOptions.combinedOptions;
+    $(element).popover(combinedOptions);
+    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+      $(element).popover("dispose");
+    });
 
-    if (typeof(options.content) === "undefined"){
+    return options;
+  },
+  /**
+   * constructs the options object from valueAccessor
+   * @param valueAccessor
+   * @returns {{combinedOptions: any, options: any}}
+   */
+  getOptions: function(valueAccessor) {
+    var options = ko.utils.unwrapObservable(valueAccessor());
+    if (typeof(options.content) === "undefined") {
       options.content = ""
     }
 
     var combinedOptions = ko.utils.extend({}, ko.bindingHandlers.popover.defaultOptions);
     var content = ko.utils.unwrapObservable(options.content);
     ko.utils.extend(combinedOptions, options);
     combinedOptions.description = content;
-
-    $(element).popover(combinedOptions);
-
-    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
-      $(element).popover("dispose");
-    });
-    return options;
+    return {combinedOptions: combinedOptions, options: options};
+  },
+  /**
+   * id of the popover is stored in the element's aria-describedby attribute
+   * @param element
+   * @returns {boolean}
+   */
+  isPopoverShown: function isPopoverShown(element) {
+    const popoverId = $(element).attr("aria-describedby");
+    return $("#" + popoverId).length > 0;
   }
 };
 

grails-app/views/shared/_speciesSelect.gsp

@@ -1,6 +1,6 @@
 <div data-bind="with:${bindingProperty}" class="input-group species-select">
     <select class="form-control form-control-sm" data-bind="speciesSelect2:$data"></select>
     <div class="input-group-append">
-        <span class="input-group-text" data-bind="visible:name(), popover: {title: transients.speciesTitle, content: transients.speciesInformation}"><i class="fa fa-info-circle"></i></span>
+        <span class="input-group-text" data-bind="visible:name(), popover: {title: transients.speciesTitle, content: transients.speciesInformation}, event: { 'shown.bs.popover': fetchSpeciesImage}"><i class="fa fa-info-circle"></i></span>
     </div>
 </div>