https://buntlegalsearch.com/assets/mixitup/jquery.mixitup.init.js

1function imgLoaded(img){	
2	$(img).parent().addClass('loaded');
3};
4
5// ON DOCUMENT READY:
6
7$(function(){
8	
9	// INSTANTIATE MIXITUP
10	
11	$('#Parks').mixitup({
12		layoutMode: 'list', // Start in list mode (display: block) by default
13		listClass: 'list', // Container class for when in list mode
14		gridClass: 'grid', // Container class for when in grid mode
15		effects: ['fade','blur'], // List of effects 
16		listEffects: ['fade','rotateX'] // List of effects ONLY for list mode
17	});
18	
19	// HANDLE LAYOUT CHANGES
20	
21	// Bind layout buttons to toList and toGrid methods:
22	
23	$('#ToList').on('click',function(){
24		$('.button').removeClass('active');
25		$(this).addClass('active');
26		$('#Parks').mixitup('toList');
27	});
28
29	$('#ToGrid').on('click',function(){
30		$('.button').removeClass('active');
31		$(this).addClass('active');
32		$('#Parks').mixitup('toGrid');
33	});
34	
35	// HANDLE MULTI-DIMENSIONAL CHECKBOX FILTERING
36	
37	/* 	
38	*	The desired behaviour of multi-dimensional filtering can differ greatly 
39	*	from project to project. MixItUp's built in filter button handlers are best
40	*	suited to simple filter operations, so we will need to build our own handlers
41	*	for this demo to achieve the precise behaviour we need.
42	*/
43	
44	var $filters = $('#Filters').find('li'),
45		dimensions = {
46			region: 'all', // Create string for first dimension
47			recreation: 'all' // Create string for second dimension
48		};
49		
50	// Bind checkbox click handlers:
51	
52	$filters.on('click',function(){
53		var $t = $(this),
54			dimension = $t.attr('data-dimension'),
55			filter = $t.attr('data-filter'),
56			filterString = dimensions[dimension];
57			
58		if(filter == 'all'){
59			// If "all"
60			if(!$t.hasClass('active')){
61				// if unchecked, check "all" and uncheck all other active filters
62				$t.addClass('active').siblings().removeClass('active');
63				// Replace entire string with "all"
64				filterString = 'all';	
65			} else {
66				// Uncheck
67				$t.removeClass('active');
68				// Emtpy string
69				filterString = '';
70			}
71		} else {
72			// Else, uncheck "all"
73			$t.siblings('[data-filter="all"]').removeClass('active');
74			// Remove "all" from string
75			filterString = filterString.replace('all','');
76			if(!$t.hasClass('active')){
77				// Check checkbox
78				$t.addClass('active');
79				// Append filter to string

80				filterString = filterString == '' ? filter : filterString+' '+filter;
81			} else {
82				// Uncheck
83				$t.removeClass('active');
84				// Remove filter and preceeding space from string with RegEx
85				var re = new RegExp('(\\s|^)'+filter);
86				filterString = filterString.replace(re,'');
87			};
88		};
89		
90		// Set demension with filterString
91		dimensions[dimension] = filterString;
92		
93		// We now have two strings containing the filter arguments for each dimension:	
94		console.info('dimension 1: '+dimensions.region);
95		console.info('dimension 2: '+dimensions.recreation);
96		
97		/*
98		*	We then send these strings to MixItUp using the filter method. We can send as
99		*	many dimensions to MixitUp as we need using an array as the second argument
100		*	of the "filter" method. Each dimension must be a space seperated string.
101		*
102		*	In this case, MixItUp will show elements using OR logic within each dimension and
103		*	AND logic between dimensions. At least one dimension must pass for the element to show.
104		*/
105		
106		$('#Parks').mixitup('filter',[dimensions.region, dimensions.recreation])			
107	});
108
109});