80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
|
$j(document).ready(function() {
|
||
|
|
setupFilterToggles();
|
||
|
|
showFilters();
|
||
|
|
setupNarrowScreenFilters();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Make tag filter section names into buttons for toggling the sections
|
||
|
|
// e.g. Fandoms dt should have a button to toggle dd with Fandom tags
|
||
|
|
// (actual toggling done with setupAccordion in application.js)
|
||
|
|
function setupFilterToggles() {
|
||
|
|
var filter_option = $j('.filters').find('dt.filter-toggle');
|
||
|
|
|
||
|
|
filter_option.each(function() {
|
||
|
|
var option_list_id = $j(this).next().attr("id");
|
||
|
|
|
||
|
|
$j(this).wrapInner('<button type="button" class="expander" aria-expanded="false" aria-controls="' + option_list_id + '"></button>');
|
||
|
|
});
|
||
|
|
|
||
|
|
// change toggle button's aria-expanded value on click
|
||
|
|
$j('dt.tags button').on( "click", function() {
|
||
|
|
if ($j(this).attr('aria-expanded') == 'false') {
|
||
|
|
$j(this).attr('aria-expanded', 'true');
|
||
|
|
} else {
|
||
|
|
$j(this).attr('aria-expanded', 'false');
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Expand a filter section if it's in use, e.g. if I filtered for F/F, Include
|
||
|
|
// Categories section is expanded; if I filter by Word Count, Word Count section
|
||
|
|
// is expanded
|
||
|
|
function showFilters() {
|
||
|
|
var filters = $j('.filters').find('dd.expandable');
|
||
|
|
|
||
|
|
filters.each(function(index, filter) {
|
||
|
|
// This should only apply to filter sections where the selected item is not
|
||
|
|
// the default (i.e. don't expand Crossover if Include crossovers is
|
||
|
|
// selected), so we only want to look at inputs with an existing value
|
||
|
|
// attribute that is not blank
|
||
|
|
// https://stackoverflow.com/questions/17248915/
|
||
|
|
var inputs = $j(filter).find('input').filter('[value]:not([value=""])');
|
||
|
|
var option_list_id = $j(filter).attr('id');
|
||
|
|
var toggle_container = $j('#toggle_' + option_list_id);
|
||
|
|
var toggle_button = $j('[aria-controls="' + option_list_id + '"]');
|
||
|
|
|
||
|
|
inputs.each(function(index, input) {
|
||
|
|
// We've already excluded inputs with blank values, so any
|
||
|
|
// text fields in this array will be non-blank and therefore need to be
|
||
|
|
//expanded
|
||
|
|
if ($j(input).is(':checked, [type="text"]')) {
|
||
|
|
$j(filter).removeClass('hidden');
|
||
|
|
$j(toggle_container).removeClass('collapsed').addClass('expanded');
|
||
|
|
$j(toggle_button).attr('aria-expanded', 'true');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setupNarrowScreenFilters() {
|
||
|
|
var filters = $j('form.filters');
|
||
|
|
var outer = $j('#outer');
|
||
|
|
var show_link = $j('#go_to_filters');
|
||
|
|
var hide_link = $j('#leave_filters');
|
||
|
|
|
||
|
|
show_link.click(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
filters.removeClass('narrow-hidden');
|
||
|
|
outer.addClass('filtering');
|
||
|
|
filters.find(':focusable').first().focus();
|
||
|
|
filters.trap();
|
||
|
|
});
|
||
|
|
|
||
|
|
hide_link.click(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
outer.removeClass('filtering');
|
||
|
|
filters.addClass('narrow-hidden');
|
||
|
|
show_link.focus();
|
||
|
|
});
|
||
|
|
}
|