apps/workbench/app/assets/javascripts/filterable.js

   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.
   5 //
   6 // Usage:
   7 //
   8 // 1. Add the "filterable" class to each filterable content item.
   9 // Typically, each item is a 'tr' or a 'div class="row"'.
  10 //
  11 // <div id="results">
  12 //   <div class="filterable row">First row</div>
  13 //   <div class="filterable row">Second row</div>
  14 // </div>
  15 //
  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.
  20 //
  21 // <input class="filterable-control" data-filterable-target="#results"
  22 //        type="text" />
  23 //
  24 // Supported widgets:
  25 //
  26 // <input type="text" ... />
  27 //
  28 // The input value is used as a regular expression. Rows with content
  29 // matching the regular expression are shown.
  30 //
  31 // <select ... data-filterable-attribute="data-example-attr">
  32 //  <option value="foo">Foo</option>
  33 //  <option value="">Show all</option>
  34 // </select>
  35 //
  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.
  39 //
  40 // Notes:
  41 //
  42 // When multiple filterable-control widgets operate on the same
  43 // data-filterable-target, items must pass _all_ filters in order to
  44 // be shown.
  45 //
  46 // If one data-filterable-target is the parent of another
  47 // data-filterable-target, results are undefined. Don't do this.
  48 //
  49 // Combining "select" filterable-controls with infinite-scroll is not
  50 // yet supported.
  51
  52 function updateFilterableQueryNow($target) {
  53     var newquery = $target.data('filterable-query-new');
  54     var params = $target.data('infinite-content-params-filterable') || {};
  55     params.filters = [['any', 'ilike', '%' + newquery + '%']];
  56     $target.data('infinite-content-params-filterable', params);
  57     $target.data('filterable-query', newquery);
  58 }
  59
  60 $(document).
  61     on('ready ajax:success', function() {
  62         // Copy any initial input values into
  63         // data-filterable-query[-new].
  64         $('input[type=text].filterable-control').each(function() {
  65             var $this = $(this);
  66             var $target = $($this.attr('data-filterable-target'));
  67             if ($target.data('filterable-query-new') === undefined) {
  68                 $target.data('filterable-query', $this.val());
  69                 $target.data('filterable-query-new', $this.val());
  70                 updateFilterableQueryNow($target);
  71             }
  72         });
  73         $('[data-infinite-scroller]').on('refresh-content', '[data-filterable-query]', function(e) {
  74             // If some other event causes a refresh-content event while there
  75             // is a new query waiting to cooloff, we should use the new query
  76             // right away -- otherwise we'd launch an extra ajax request that
  77             // would have to be reloaded as soon as the cooloff period ends.
  78             if (this != e.target)
  79                 return;
  80             if ($(this).data('filterable-query') == $(this).data('filterable-query-new'))
  81                 return;
  82             updateFilterableQueryNow($(this));
  83         });
  84     }).
  85     on('paste keyup input', 'input[type=text].filterable-control', function(e) {
  86         if (this != e.target) return;
  87         var $target = $($(this).attr('data-filterable-target'));
  88         var currentquery = $target.data('filterable-query');
  89         if (currentquery === undefined) currentquery = '';
  90         if ($target.is('[data-infinite-scroller]')) {
  91             // We already know how to load content dynamically, so we
  92             // can do all filtering on the server side.
  93
  94             if ($target.data('infinite-cooloff-timer') > 0) {
  95                 // Clear a stale refresh-after-delay timer.
  96                 clearTimeout($target.data('infinite-cooloff-timer'));
  97             }
  98             // Stash the new query string in the filterable container.
  99             $target.data('filterable-query-new', $(this).val());
 100             if (currentquery == $(this).val()) {
 101                 // Don't mess with existing results or queries in
 102                 // progress.
 103                 return;
 104             }
 105             $target.data('infinite-cooloff-timer', setTimeout(function() {
 106                 // If the user doesn't do any query-changing actions
 107                 // in the next 1/4 second (like type or erase
 108                 // characters in the search box), hide the stale
 109                 // content and ask the server for new results.
 110                 updateFilterableQueryNow($target);
 111                 $target.trigger('refresh-content');
 112             }, 250));
 113         } else {
 114             // Target does not have infinite-scroll capability. Just
 115             // filter the rows in the browser using a RegExp.
 116             $target.
 117                 addClass('filterable-container').
 118                 data('q', new RegExp($(this).val(), 'i')).
 119                 trigger('refresh');
 120         }
 121     }).on('refresh', '.filterable-container', function() {
 122         var $container = $(this);
 123         var q = $(this).data('q');
 124         var filters = $(this).data('filters');
 125         $('.filterable', this).hide().filter(function() {
 126             var $row = $(this);
 127             var pass = true;
 128             if (q && !$row.text().match(q))
 129                 return false;
 130             if (filters) {
 131                 $.each(filters, function(filterby, val) {
 132                     if (!val) return;
 133                     if (!pass) return;
 134                     pass = false;
 135                     $.each(val.split(" "), function(i, e) {
 136                         if ($row.attr(filterby) == e)
 137                             pass = true;
 138                     });
 139                 });
 140             }
 141             return pass;
 142         }).show();
 143
 144         // Show/hide each section heading depending on whether any
 145         // content rows are visible in that section.
 146         $('.row[data-section-heading]', this).each(function(){
 147             $(this).toggle($('.row.filterable[data-section-name="' +
 148                              $(this).attr('data-section-name') +
 149                              '"]:visible').length > 0);
 150         });
 151
 152         // Load more content if the last result is showing.
 153         $('.infinite-scroller').add(window).trigger('scroll');
 154     }).on('change', 'select.filterable-control', function() {
 155         var val = $(this).val();
 156         var filterby = $(this).attr('data-filterable-attribute');
 157         var $target = $($(this).attr('data-filterable-target')).
 158             addClass('filterable-container');
 159         var filters = $target.data('filters') || {};
 160         filters[filterby] = val;
 161         $target.
 162             data('filters', filters).
 163             trigger('refresh');
 164     }).on('ajax:complete', function() {
 165         $('.filterable-control').trigger('input');
 166     });