AtlasOfLivingAustralia · chrisala · Jan 21, 2025 · Jan 10, 2025 · Jan 10, 2025 · Jan 10, 2025
diff --git a/build.gradle b/build.gradle
@@ -17,7 +17,6 @@ plugins {
     id 'jacoco'
 }
 
-
 version "7.2-SNAPSHOT"
 group "org.grails.plugins"
 

diff --git a/grails-app/assets/javascripts/knockout-utils.js b/grails-app/assets/javascripts/knockout-utils.js
@@ -13,53 +13,90 @@
      */
     ko.bindingHandlers.popover = {
 
-        init: function (element, valueAccessor) {
+        init: function(element, valueAccessor) {
             ko.bindingHandlers.popover.initPopover(element, valueAccessor);
         },
-        update: function (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');
-                    $('body').on('click', function (e) {
-
+                    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: {
             placement: "right",
             animation: true,
             html: true,
-            trigger: "hover",
-            delay: {
-                show: 250
-            }
+            trigger: "hover"
         },
 
-        initPopover: function (element, valueAccessor) {
+        initPopover: function(element, 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");
+            });
+
+            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;
         }
     };
 

diff --git a/grails-app/assets/javascripts/speciesModel.js b/grails-app/assets/javascripts/speciesModel.js
@@ -222,7 +222,7 @@ var speciesSearchEngines = function() {
  * Allows species information to be searched for and displayed.
  */
 var SpeciesViewModel = function(data, options, context) {
-
+    var SPECIAL_GUIDS = ['A_GUID'];
     var self = this;
     ecodata.forms.DataModelItem.apply(self, [options.metadata || {}, context, options]);
 
@@ -232,6 +232,7 @@ var SpeciesViewModel = function(data, options, context) {
     var output = options.output || "";
     var dataFieldName = options.dataFieldName || "";
     var surveyName = options.surveyName || "";
+    var kvpInfo = "";
 
     self.guid = ko.observable();
     self.name = ko.observable();
@@ -252,7 +253,7 @@ var SpeciesViewModel = function(data, options, context) {
     self.transients.source = ko.observable(options.speciesSearchUrl +
         '&output=' + output+ '&dataFieldName=' + dataFieldName + '&surveyName=' + surveyName);
     self.transients.bieUrl = ko.observable();
-    self.transients.speciesInformation = ko.observable();
+    self.transients.speciesInformation = ko.observable('<i class="fa fa-spin fa-spinner"></i>');
     self.transients.speciesTitle = ko.observable();
     self.transients.matched = ko.computed(function() {
         return self.guid() && self.guid() != "A_GUID" && self.listId != "unmatched";
@@ -328,7 +329,6 @@ var SpeciesViewModel = function(data, options, context) {
         self.transients.textFieldValue(self.name());
 
         // Species Translation
-        var kvpInfo = "";
         var languages = ["Waramungu", "Warlpiri name"];
         var listsId = 'dr8016';
         if(self.listId() == listsId || output == 'CLC 2Ha Track Plot') {
@@ -350,38 +350,44 @@ var SpeciesViewModel = function(data, options, context) {
                 }
             });
         }
+    };
 
+    self.fetchSpeciesImage = function() {
         if (self.guid() && !options.printable) {
+            if (SPECIAL_GUIDS.indexOf(self.guid()) >= 0) {
+                var profileInfo = "No profile available";
+                self.transients.speciesInformation(profileInfo);
+            }
+            else {
+                var profileUrl = options.bieUrl + '/species/' + encodeURIComponent(self.guid());
+                $.ajax({
+                    url: options.speciesProfileUrl + '?id=' + encodeURIComponent(self.guid()),
+                    cache: true,
+                    dataType: 'json',
+                    success: function (data) {
+                        var profileInfo = '<a href="' + profileUrl + '" target="_blank">';
+                        var imageUrl = data.thumbnail || (data.taxonConcept && data.taxonConcept.smallImageUrl);
 
-            var profileUrl = options.bieUrl + '/species/' + encodeURIComponent(self.guid());
-            $.ajax({
-                url: options.speciesProfileUrl+'?id=' + encodeURIComponent(self.guid()),
-                dataType: 'json',
-                success: function (data) {
-                    var profileInfo = '<a href="'+profileUrl+'" target="_blank">';
-                    var imageUrl = data.thumbnail || (data.taxonConcept && data.taxonConcept.smallImageUrl);
-
-                    if (imageUrl) {
-                        profileInfo += "<img title='Click to show profile' class='taxon-image ui-corner-all' src='"+imageUrl+"'>";
-                    }
-                    else {
-                        profileInfo += "No profile image available";
+                        if (imageUrl) {
+                            profileInfo += "<img title='Click to show profile' class='taxon-image ui-corner-all' src='" + imageUrl + "'>";
+                        } else {
+                            profileInfo += "No profile image available";
+                        }
+                        profileInfo += "</a>";
+                        profileInfo += kvpInfo;
+                        self.transients.speciesInformation(profileInfo);
+                    },
+                    error: function (request, status, error) {
+                        self.transients.speciesInformation("");
+                        console.log(error);
                     }
-                    profileInfo += "</a>";
-                    profileInfo += kvpInfo;
-                    self.transients.speciesInformation(profileInfo);
-                },
-                error: function(request, status, error) {
-                    console.log(error);
-                }
-            });
-
+                });
+            }
         }
         else {
             self.transients.speciesInformation("No profile information is available.");
         }
-
-    };
+    }
 
     self.focusLost = function(event) {
         self.transients.editing(false);

diff --git a/grails-app/views/output/_imageDataTypeViewModelWithMetadataTemplate.gsp b/grails-app/views/output/_imageDataTypeViewModelWithMetadataTemplate.gsp
@@ -5,7 +5,7 @@
         <li>
         <div class="row">
             <div class="col-sm-4">
-                <div class="projectLogo" data-toggle="popover" data-trigger="hover" data-title="Photo metadata" data-bind="popover: {placement:'top', content: function(){ return $(this).find('.metadata').html()} }">
+                <div class="projectLogo" data-toggle="popover" data-trigger="hover" data-title="Photo metadata" data-bind="popover: {placement:'top', content: function(){ return $(this).parent().parent().find('.metadata').html()} }">
                 <a href=""
                    data-bind="attr:{href:getImageViewerUrl()}, fancybox: {nextEffect:'fade', preload:0, 'prevEffect':'fade', type: 'iframe', width: '80%', title: function(){ return $(this).next().find('.metadata').html()}}"
                    target="fancybox">

diff --git a/grails-app/views/output/_speciesTemplate.gsp b/grails-app/views/output/_speciesTemplate.gsp
@@ -11,7 +11,7 @@
     <input type="text" class="form-control form-control-sm speciesInputTemplates" data-bind="${databindAttrs}" ${validationAttrs}/>
     <div class="input-group-append">
         <span class="input-group-text" data-bind="visible: !transients.editing() && name()">
-            <a data-bind="popover: {title: name, content: transients.speciesInformation}"><i class="fa fa-info-circle"></i></a>
+            <a data-bind="popover: {title: name, content: transients.speciesInformation}, event: { 'shown.bs.popover': fetchSpeciesImage}"><i class="fa fa-info-circle"></i></a>
         </span>
     </div>
 

diff --git a/src/integration-test/groovy/au/org/ala/ecodata/forms/ImageTypeSpec.groovy b/src/integration-test/groovy/au/org/ala/ecodata/forms/ImageTypeSpec.groovy
@@ -22,7 +22,7 @@ class ImageTypeSpec extends GebReportingSpec {
 
         then: "A popover is displayed containing the photo metadata"
         waitFor 10, {
-            (!$('.popover').displayed)
+            $('.popover').displayed
         }
         and: "the photo metadata is displayed correctly"
         $(".popover span[data-bind*=name]").text() == null
@@ -31,7 +31,7 @@ class ImageTypeSpec extends GebReportingSpec {
 
     }
 
-    def "If the metadataAlwaysDisplayed displayOption is set, the metadata will be displayed next to the image in view mode"() {
+    def "If the metadataAlwaysVisible displayOption is set, the metadata will be displayed next to the image in view mode"() {
         when:
         to ([name:'images', mode:'view'], PreviewPage)
 

diff --git a/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy b/src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
@@ -372,7 +372,7 @@ public class EditModelWidgetRenderer implements ModelWidgetRenderer {
                                 <div data-bind="with:${context.source}" class="input-group"">
                                 <select class="form-control form-control-sm" data-bind="speciesSelect2:\$data" ${context.validationAttr}></select>
                                 <div class="input-group-append"">
-                                    <span class="input-group-text" data-bind="visible:name(), popover: {title: transients.speciesTitle, content: transients.speciesInformation}, css:{'bg-warning':!transients.matched()}"><i class="fa" data-bind="css:{'fa-info-circle':transients.matched(), 'fa-question-circle':!transients.matched()}"></i></span>
+                                    <span class="input-group-text" data-bind="visible:name(), popover: {title: transients.speciesTitle, content: transients.speciesInformation}, event: { 'shown.bs.popover': fetchSpeciesImage}, css:{'bg-warning':!transients.matched()}"><i class="fa" data-bind="css:{'fa-info-circle':transients.matched(), 'fa-question-circle':!transients.matched()}"></i></span>
                                 </div>
                              </div></div>"""
     }

diff --git a/src/main/groovy/au/org/ala/ecodata/forms/ViewModelWidgetRenderer.groovy b/src/main/groovy/au/org/ala/ecodata/forms/ViewModelWidgetRenderer.groovy
@@ -165,7 +165,7 @@ class ViewModelWidgetRenderer implements ModelWidgetRenderer {
     void renderFusedAutocomplete(WidgetRenderContext context) {
         context.databindAttrs.add 'text', 'name'
         context.writer << """<span data-bind="with: ${context.source}"><span${context.attributes.toString()} data-bind='${context.databindAttrs.toString()}'></span>
-            <a  target="_blank" data-bind="visible: guid, attr: {href: transients.bioProfileUrl}"><i class="icon-info-sign"></i></a>
+            <a  target="_blank" data-bind="visible: guid, attr: {href: transients.bioProfileUrl}"><i class="fas fa-info-circle"></i></i></a>
             </span>"""
     }
 
@@ -199,7 +199,7 @@ class ViewModelWidgetRenderer implements ModelWidgetRenderer {
     private void renderReadOnlySpecies(WidgetRenderContext context) {
         context.databindAttrs.add 'with', context.source
         context.writer << """<span data-bind='${context.databindAttrs.toString()}'><span${context.attributes.toString()} data-bind='text:name'></span>
-            <a href="#" data-bind="popover: {title: name, content: transients.speciesInformation}"><i class="icon-info-sign"></i></a>
+            <a href="#" data-bind="popover: {title: name, content: transients.speciesInformation}, event: { 'shown.bs.popover': fetchSpeciesImage}"><i class="fas fa-info-circle"></i></i></a>
             </span>"""
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ plugins { @@
         id 'jacoco'
     }
     version "7.2-SNAPSHOT"
     group "org.grails.plugins"
@@ Expand Down @@