6a44ca350d
We were using the form and then showing it with JavaScript when advanced search terms were present. Now we hide it with JavaScript when no advanced search are present. This means users without JavaScript (including users with JavaScript enabled but bad internet connections preventing the JavaScript to load) can now access the form. The other main difference between the two versions is the way the form flashes while JavaScript is loading. Previously, the form would always be hidden when no terms had been introduced. However, when these terms were present, after submitting the form it would briefly be hidden and then shown again. Now the opposite happens. When advanced search terms are present, the form is shown at all times. However, when they aren't, the form is briefly shown before it disappears. Here the previous behavior is arguably better because most of the time these terms will not be present. So basically we're significantly improving the experience of some users at the cost of slightly worsen the experience of other users. We're also hiding the button to show the form when JavaScript is disabled, since in this scenario it's useless. We're using the `hidden` attribute so hidden buttons can be detected in CSS.
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
App.AdvancedSearch = {
|
|
advanced_search_terms: function() {
|
|
return $("#js-advanced-search").data("advanced-search-terms");
|
|
},
|
|
toggle_date_options: function() {
|
|
if ($("#js-advanced-search-date-min").val() === "custom") {
|
|
$("#js-custom-date").show();
|
|
$(".js-calendar").datepicker("option", "disabled", false);
|
|
} else {
|
|
$("#js-custom-date").hide();
|
|
$(".js-calendar").datepicker("option", "disabled", true);
|
|
}
|
|
},
|
|
initialize: function() {
|
|
var toggle_button = $("#js-advanced-search-title");
|
|
|
|
toggle_button.removeAttr("hidden");
|
|
|
|
if (App.AdvancedSearch.advanced_search_terms()) {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
} else {
|
|
$("#js-advanced-search").hide();
|
|
}
|
|
toggle_button.on({
|
|
click: function() {
|
|
$(this).attr("aria-expanded", !JSON.parse($(this).attr("aria-expanded")));
|
|
$("#js-advanced-search").slideToggle();
|
|
}
|
|
});
|
|
$("#js-advanced-search-date-min").on({
|
|
change: function() {
|
|
App.AdvancedSearch.toggle_date_options();
|
|
}
|
|
});
|
|
|
|
App.SDGSyncGoalAndTargetFilters.sync($("#advanced_search_form"));
|
|
}
|
|
};
|
|
}).call(this);
|