X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/c7bf82b621dae10a68a74b95439fa8f4ae3c502f..854af8067c6486193eb00917e2515f81ba776770:/apps/workbench/app/assets/javascripts/filterable.js
diff --git a/apps/workbench/app/assets/javascripts/filterable.js b/apps/workbench/app/assets/javascripts/filterable.js
index 7da461ec44..8ac195383b 100644
--- a/apps/workbench/app/assets/javascripts/filterable.js
+++ b/apps/workbench/app/assets/javascripts/filterable.js
@@ -1,10 +1,94 @@
+// filterable.js shows/hides content when the user operates
+// search/select widgets. For "infinite scroll" content, it passes the
+// filters to the server and retrieves new content. For other content,
+// it filters the existing DOM elements using jQuery show/hide.
+//
+// Usage:
+//
+// 1. Add the "filterable" class to each filterable content item.
+// Typically, each item is a 'tr' or a 'div class="row"'.
+//
+//
+//
First row
+//
Second row
+//
+//
+// 2. Add the "filterable-control" class to each search/select widget.
+// Also add a data-filterable-target attribute with a jQuery selector
+// for an ancestor of the filterable items, i.e., the container in
+// which this widget should apply filtering.
+//
+//
+//
+// Supported widgets:
+//
+//
+//
+// The input value is used as a regular expression. Rows with content
+// matching the regular expression are shown.
+//
+//
+//
+// When the user selects the "Foo" option, rows with
+// data-example-attr="foo" are shown, and all others are hidden. When
+// the user selects the "Show all" option, all rows are shown.
+//
+// Notes:
+//
+// When multiple filterable-control widgets operate on the same
+// data-filterable-target, items must pass _all_ filters in order to
+// be shown.
+//
+// If one data-filterable-target is the parent of another
+// data-filterable-target, results are undefined. Don't do this.
+//
+// Combining "select" filterable-controls with infinite-scroll is not
+// yet supported.
+
$(document).
on('paste keyup input', 'input[type=text].filterable-control', function() {
- var q = new RegExp($(this).val(), 'i');
- $($(this).attr('data-filterable-target')).
- addClass('filterable-container').
- data('q', q).
- trigger('refresh');
+ var $target = $($(this).attr('data-filterable-target'));
+ var currentquery = $target.data('filterable-query');
+ if (currentquery === undefined) currentquery = '';
+ if ($target.is('[data-infinite-scroller]')) {
+ // We already know how to load content dynamically, so we
+ // can do all filtering on the server side.
+
+ if ($target.data('infinite-cooloff-timer') > 0) {
+ // Clear a stale refresh-after-delay timer.
+ clearTimeout($target.data('infinite-cooloff-timer'));
+ }
+ // Stash the new query string in the filterable container.
+ $target.data('filterable-query-new', $(this).val());
+ if (currentquery == $(this).val()) {
+ // Don't mess with existing results or queries in
+ // progress.
+ return;
+ }
+ $target.data('infinite-cooloff-timer', setTimeout(function() {
+ // If the user doesn't do any query-changing actions
+ // in the next 1/4 second (like type or erase
+ // characters in the search box), hide the stale
+ // content and ask the server for new results.
+ var newquery = $target.data('filterable-query-new');
+ var params = $target.data('infinite-content-params-filterable') || {};
+ params.filters = [['any', 'ilike', '%' + newquery + '%']];
+ $target.data('infinite-content-params-filterable', params);
+ $target.data('filterable-query', newquery);
+ $target.trigger('refresh-content');
+ }, 250));
+ } else {
+ // Target does not have infinite-scroll capability. Just
+ // filter the rows in the browser using a RegExp.
+ $target.
+ addClass('filterable-container').
+ data('q', new RegExp($(this).val(), 'i')).
+ trigger('refresh');
+ }
}).on('refresh', '.filterable-container', function() {
var $container = $(this);
var q = $(this).data('q');