Skip to content

Commit

Permalink
#269
Browse files Browse the repository at this point in the history 
code change to fetch species image only if user trigger popover icon
  • Loading branch information
@temi
temi committed Jan 20, 2025
1 parent b6223a4 commit 4e1f6d3
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 28 deletions.
79 changes: 58 additions & 21 deletions grails-app/assets/javascripts/knockout-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
};

Expand Down
12 changes: 7 additions & 5 deletions grails-app/assets/javascripts/speciesModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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";
Expand Down Expand Up @@ -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') {
Expand All @@ -350,7 +350,9 @@ 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";
Expand All @@ -360,6 +362,7 @@ var SpeciesViewModel = function(data, options, context) {
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">';
Expand All @@ -375,17 +378,16 @@ var SpeciesViewModel = function(data, options, context) {
self.transients.speciesInformation(profileInfo);
},
error: function (request, status, error) {
self.transients.speciesInformation("");
console.log(error);
}
});
}

}
else {
self.transients.speciesInformation("No profile information is available.");
}

};
}

self.focusLost = function(event) {
self.transients.editing(false);
Expand Down
2 changes: 1 addition & 1 deletion grails-app/views/output/_speciesTemplate.gsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion src/main/groovy/au/org/ala/ecodata/forms/EditModelWidgetRenderer.groovy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>"""
}
Expand Down

0 comments on commit 4e1f6d3

Please sign in to comment.