https://maxxcomgulf.com/js/main-filter.js

1jQuery(document).ready(function($){
2	//open/close lateral filter
3	$('.cd-filter-trigger').on('click', function(){
4		triggerFilter(true);
5	});
6	$('.cd-filter .cd-close').on('click', function(){
7		triggerFilter(false);
8	});
9
10	function triggerFilter($bool) {
11		var elementsToTrigger = $([$('.cd-filter-trigger'), $('.cd-filter'), $('.cd-tab-filter'), $('.cd-gallery')]);
12		elementsToTrigger.each(function(){
13			$(this).toggleClass('filter-is-visible', $bool);
14		});
15	}
16
17	//mobile version - detect click event on filters tab
18	var filter_tab_placeholder = $('.cd-tab-filter .placeholder a'),
19		filter_tab_placeholder_default_value = 'Select',
20		filter_tab_placeholder_text = filter_tab_placeholder.text();
21	
22	$('.cd-tab-filter li').on('click', function(event){
23		//detect which tab filter item was selected
24		var selected_filter = $(event.target).data('type');
25			
26		//check if user has clicked the placeholder item
27		if( $(event.target).is(filter_tab_placeholder) ) {
28			(filter_tab_placeholder_default_value == filter_tab_placeholder.text()) ? filter_tab_placeholder.text(filter_tab_placeholder_text) : filter_tab_placeholder.text(filter_tab_placeholder_default_value) ;
29			$('.cd-tab-filter').toggleClass('is-open');
30
31		//check if user has clicked a filter already selected 
32		} else if( filter_tab_placeholder.data('type') == selected_filter ) {
33			filter_tab_placeholder.text($(event.target).text());
34			$('.cd-tab-filter').removeClass('is-open');	
35
36		} else {
37			//close the dropdown and change placeholder text/data-type value
38			$('.cd-tab-filter').removeClass('is-open');
39			filter_tab_placeholder.text($(event.target).text()).data('type', selected_filter);
40			filter_tab_placeholder_text = $(event.target).text();
41			
42			//add class selected to the selected filter item
43			$('.cd-tab-filter .selected').removeClass('selected');
44			$(event.target).addClass('selected');
45		}
46	});
47	
48	//close filter dropdown inside lateral .cd-filter 
49	$('.cd-filter-block h4').on('click', function(){
50		$(this).toggleClass('closed').siblings('.cd-filter-content').slideToggle(300);
51	})
52
53	//fix lateral filter and gallery on scrolling
54	$(window).on('scroll', function(){
55		(!window.requestAnimationFrame) ? fixGallery() : window.requestAnimationFrame(fixGallery);
56	});
57
58	function fixGallery() {
59		var offsetTop = $('.cd-main-content').offset().top,
60			scrollTop = $(window).scrollTop();
61		( scrollTop >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
62	}
63
64	/************************************
65		MitItUp filter settings
66		More details: 
67		https://mixitup.kunkalabs.com/
68		or:
69		http://codepen.io/patrickkunka/
70	*************************************/
71
72	buttonFilter.init();
73	$('.cd-gallery ul').mixItUp({
74	    controls: {
75	    	enable: false
76	    },
77	    callbacks: {
78	    	onMixStart: function(){
79	    		$('.cd-fail-message').fadeOut(200);
80	    	},
81	      	onMixFail: function(){
82	      		$('.cd-fail-message').fadeIn(200);
83	    	}
84	    }
85	});
86
87	//search filtering
88	//credits http://codepen.io/edprats/pen/pzAdg
89	var inputText;
90	var $matching = $();
91
92	var delay = (function(){
93		var timer = 0;
94		return function(callback, ms){
95			clearTimeout (timer);
96		    timer = setTimeout(callback, ms);
97		};
98	})();
99
100	$(".cd-filter-content input[type='search']").keyup(function(){
101	  	// Delay function invoked to make sure user stopped typing
102	  	delay(function(){
103	    	inputText = $(".cd-filter-content input[type='search']").val().toLowerCase();
104	   		// Check to see if input field is empty
105	    	if ((inputText.length) > 0) {            
106	      		$('.mix').each(function() {
107		        	var $this = $(this);
108		        
109		        	// add item to be filtered out if input text matches items inside the title   
110		        	if($this.attr('class').toLowerCase().match(inputText)) {
111		          		$matching = $matching.add(this);
112		        	} else {
113		          		// removes any previously matched item
114		          		$matching = $matching.not(this);
115		        	}
116	      		});

117	      		$('.cd-gallery ul').mixItUp('filter', $matching);
118	    	} else {
119	      		// resets the filter to show all item if input is empty
120	      		$('.cd-gallery ul').mixItUp('filter', 'all');
121	    	}
122	  	}, 200 );
123	});
124});
125
126/*****************************************************
127	MixItUp - Define a single object literal 
128	to contain all filter custom functionality
129*****************************************************/
130var buttonFilter = {
131  	// Declare any variables we will need as properties of the object
132  	$filters: null,
133  	groups: [],
134  	outputArray: [],
135  	outputString: '',
136  
137  	// The "init" method will run on document ready and cache any jQuery objects we will need.
138  	init: function(){
139    	var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "buttonFilter" object so that we can share methods and properties between all parts of the object.
140    
141    	self.$filters = $('.cd-main-content');
142    	self.$container = $('.cd-gallery ul');
143    
144	    self.$filters.find('.cd-filters').each(function(){
145	      	var $this = $(this);
146	      
147		    self.groups.push({
148		        $inputs: $this.find('.filter'),
149		        active: '',
150		        tracker: false
151		    });
152	    });
153	    
154	    self.bindHandlers();
155  	},
156  
157  	// The "bindHandlers" method will listen for whenever a button is clicked. 
158  	bindHandlers: function(){
159    	var self = this;
160
161    	self.$filters.on('click', 'a', function(e){
162	      	self.parseFilters();
163    	});
164	    self.$filters.on('change', function(){
165	      self.parseFilters();           
166	    });
167  	},
168  
169  	parseFilters: function(){
170	    var self = this;
171	 
172	    // loop through each filter group and grap the active filter from each one.
173	    for(var i = 0, group; group = self.groups[i]; i++){
174	    	group.active = [];
175	    	group.$inputs.each(function(){
176	    		var $this = $(this);
177	    		if($this.is('input[type="radio"]') || $this.is('input[type="checkbox"]')) {
178	    			if($this.is(':checked') ) {
179	    				group.active.push($this.attr('data-filter'));
180	    			}
181	    		} else if($this.is('select')){
182	    			group.active.push($this.val());
183	    		} else if( $this.find('.selected').length > 0 ) {
184	    			group.active.push($this.attr('data-filter'));
185	    		}
186	    	});
187	    }
188	    self.concatenate();
189  	},
190  
191  	concatenate: function(){
192    	var self = this;
193    
194    	self.outputString = ''; // Reset output string
195    
196	    for(var i = 0, group; group = self.groups[i]; i++){
197	      	self.outputString += group.active;
198	    }
199    
200	    // If the output string is empty, show all rather than none:    
201	    !self.outputString.length && (self.outputString = 'all'); 
202	
203    	// Send the output string to MixItUp via the 'filter' method:    
204		if(self.$container.mixItUp('isLoaded')){
205	    	self.$container.mixItUp('filter', self.outputString);
206		}
207  	}
208};