1 // filterable.js shows/hides content when the user operates
2 // search/select widgets. For "infinite scroll" content, it passes the
3 // filters to the server and retrieves new content. For other content,
4 // it filters the existing DOM elements using jQuery show/hide.
8 // 1. Add the "filterable" class to each filterable content item.
9 // Typically, each item is a 'tr' or a 'div class="row"'.
12 // <div class="filterable row">First row</div>
13 // <div class="filterable row">Second row</div>
16 // 2. Add the "filterable-control" class to each search/select widget.
17 // Also add a data-filterable-target attribute with a jQuery selector
18 // for an ancestor of the filterable items, i.e., the container in
19 // which this widget should apply filtering.
21 // <input class="filterable-control" data-filterable-target="#results"
26 // <input type="text" ... />
28 // The input value is used as a regular expression. Rows with content
29 // matching the regular expression are shown.
31 // <select ... data-filterable-attribute="data-example-attr">
32 // <option value="foo">Foo</option>
33 // <option value="">Show all</option>
36 // When the user selects the "Foo" option, rows with
37 // data-example-attr="foo" are shown, and all others are hidden. When
38 // the user selects the "Show all" option, all rows are shown.
42 // When multiple filterable-control widgets operate on the same
43 // data-filterable-target, items must pass _all_ filters in order to
46 // If one data-filterable-target is the parent of another
47 // data-filterable-target, results are undefined. Don't do this.
49 // Combining "select" filterable-controls with infinite-scroll is not
53 on('paste keyup input', 'input[type=text].filterable-control', function() {
54 var $target = $($(this).attr('data-filterable-target'));
55 var currentquery = $target.data('filterable-query');
56 if (currentquery === undefined) currentquery = '';
57 if ($target.is('[data-infinite-scroller]')) {
58 // We already know how to load content dynamically, so we
59 // can do all filtering on the server side.
61 if ($target.data('infinite-cooloff-timer') > 0) {
62 // Clear a stale refresh-after-delay timer.
63 clearTimeout($target.data('infinite-cooloff-timer'));
65 // Stash the new query string in the filterable container.
66 $target.data('filterable-query-new', $(this).val());
67 if (currentquery == $(this).val()) {
68 // Don't mess with existing results or queries in
72 $target.data('infinite-cooloff-timer', setTimeout(function() {
73 // If the user doesn't do any query-changing actions
74 // in the next 1/4 second (like type or erase
75 // characters in the search box), hide the stale
76 // content and ask the server for new results.
77 var newquery = $target.data('filterable-query-new');
78 var params = $target.data('infinite-content-params-filterable') || {};
79 params.filters = [['any', 'ilike', '%' + newquery + '%']];
80 $target.data('infinite-content-params-filterable', params);
81 $target.data('filterable-query', newquery);
82 $target.trigger('refresh-content');
85 // Target does not have infinite-scroll capability. Just
86 // filter the rows in the browser using a RegExp.
88 addClass('filterable-container').
89 data('q', new RegExp($(this).val(), 'i')).
92 }).on('refresh', '.filterable-container', function() {
93 var $container = $(this);
94 var q = $(this).data('q');
95 var filters = $(this).data('filters');
96 $('.filterable', this).hide().filter(function() {
99 if (q && !$row.text().match(q))
102 $.each(filters, function(filterby, val) {
106 $.each(val.split(" "), function(i, e) {
107 if ($row.attr(filterby) == e)
115 // Show/hide each section heading depending on whether any
116 // content rows are visible in that section.
117 $('.row[data-section-heading]', this).each(function(){
118 $(this).toggle($('.row.filterable[data-section-name="' +
119 $(this).attr('data-section-name') +
120 '"]:visible').length > 0);
123 // Load more content if the last result is showing.
124 $('.infinite-scroller').add(window).trigger('scroll');
125 }).on('change', 'select.filterable-control', function() {
126 var val = $(this).val();
127 var filterby = $(this).attr('data-filterable-attribute');
128 var $target = $($(this).attr('data-filterable-target')).
129 addClass('filterable-container');
130 var filters = $target.data('filters') || {};
131 filters[filterby] = val;
133 data('filters', filters).
135 }).on('ajax:complete', function() {
136 $('.filterable-control').trigger('input');