https://howardcc.edu/media/howardcc/site-assets/js/koc-course-finder.js

1(function($) {
2    $(function() {
3       // make sure inputs are cleared
4       $('#koc-course-finder.finder-table input').removeAttr('checked');
5       $('#koc-course-finder.finder-table #search-courses').val('');
6   
7       var table = $('#finder-results');
8  
9       table.footable(
10        {
11          breakpoints: {
12            tablet: 665
13          }
14        }
15      ).bind(
16        {
17          'footable_filtered' : function(e) {
18            updateRows();
19          }
20        }
21      );
22  
23      // alphabetize
24      dataSort('#finder-results tbody', 'tr', 'data-name');
25  
26      // create "no results" block
27      $('<div class="no-results">No results found.</div>').insertAfter(table);
28  
29      var resultsCount = $('#finder-search .table-meta .row-count .count'),
30          resultsText = $('#finder-search .table-meta .row-count .text');
31  
32      // finds visible rows and marks them as active and even (if they are even)
33      var updateRows = function() {
34        var aClass = 'active',
35            eClass = 'even',
36            rows = table.find('tbody tr'),
37            visibleRows = rows.filter(':visible').not('.footable-row-detail'),
38            noResults = $('#koc-course-finder .no-results');
39  
40        rows.removeClass(aClass + ' ' + eClass);
41  
42        visibleRows.each(function(idx,itm) {
43          $(itm).addClass(aClass);
44          
45          // even class
46          if (idx%2 != 0) $(itm).addClass(eClass);
47  
48        });
49  
50        if (visibleRows.length == 0) {
51           noResults.show();
52           resultsCount.text('');
53           resultsText.text('No classes found');
54        }
55        else { 
56          noResults.hide();
57          resultsCount.text(visibleRows.length);
58  
59          if (visibleRows.length == 1) {
60            resultsText.text(' class found');
61          } else {
62            resultsText.text(' classes found');
63          }
64        }
65      }
66  
67      updateRows();
68  
69      $('#finder-search .table-controls .exp-all').on('click', function(e){
70        e.preventDefault();
71        $('#finder-results tbody tr').not('.footable-detail-show').find('td.td-class').click();
72      });
73  
74      $('#finder-search .table-controls .col-all').on('click', function(e){
75        e.preventDefault();
76        $('#finder-results tbody tr.footable-detail-show').find('td.td-class').click();
77      });
78  
79      var bindDynamicFilters = function(checks,dataAttr,fClass) {
80        $(checks).on('change', function() {
81          var allRows = $('#finder-results tbody tr'),
82              selected = $(checks+':checked'),
83              visibleRows = allRows.not('.footable-filtered, .no-results, .footable-row-detail'),
84              filterOn = [];
85  
86          if (selected.length != 0) {
87            // user has selected a filter
88            selected.each(function(idx,itm) {
89              // push to an array
90              filterOn.push(itm.value);
91            });
92  
93            visibleRows.each(function(idx,itm) {
94              var item = $(itm),
95                  itmData = item.attr(dataAttr);
96  
97              // add class that will be removed if found to be in results
98              item.addClass(fClass);
99  
100              // compare data on item to what is toggled in filters
101              $.each(itmData.split(','), function(idx,val) {
102                if($.inArray(val, filterOn) >= 0) {
103                  item.removeClass(fClass);
104                  return false;
105                }
106              });                      
107            });
108          }
109          else {
110            allRows.removeClass(fClass);
111          }
112  
113          updateRows();
114        });
115      }
116  
117      bindDynamicFilters('input[name="age-group"]','data-age','filtered-age');
118      bindDynamicFilters('input[name="course-week"]','data-week','filtered-week');
119      bindDynamicFilters('input[name="koc-topic"]','data-topic','filtered-topic');
120      bindDynamicFilters('input[name="course-session"]','data-session','filtered-week');
121  
122      $('#finder-search .reset-table-filters').on('click', function(e){

123        e.preventDefault();
124        $('#filters input[type="checkbox"]:checked').click();
125        $('#koc-course-finder.finder-table #search-courses').val('').trigger('keyup');
126  
127      });
128  
129      ////////// UI STUFF
130      var filters = $('#filters');
131  
132      var moves = [
133        {
134          min: 0,
135          max: 1199,
136          enter: function() {
137            filters.insertAfter($('#finder-search')).hide();
138            $('<div id="aside-title">Refine Search</div>').insertBefore(filters).on('click',function() {
139              $(this).toggleClass('active');
140              filters.slideToggle('fast');
141            })
142          },
143          exit: function() {
144            filters.appendTo($('#koc-course-finder .col1')).show();
145            $('#aside-title').remove();
146          }
147        }
148      ];
149  
150      breakdance(moves);
151  
152      var urlFilter = getURLParameter('filter');
153  
154      if (urlFilter.length) {
155        var filterArray = urlFilter.split(',');
156        var i;
157  
158        for(i=0; i < filterArray.length; i++) {
159          $('#toggle-'+filterArray[i]).click();
160        }
161      }
162  
163    })
164  })($JQ);