https://www.bookscumbria.com/wp-content/themes/website-theme/inc/woo_slideout_filters/woo-filter-slideout.js

1jQuery(document).ready(function($) {
2
3    /* ** Open the slide out filters ** */
4        openFilterSlideout();
5
6        function openFilterSlideout(){
7        
8            var filterSlideTriggers = ".filter-toggle, .filters-mask, .filter-slideout-close",
9                filterSlideTrackers = "body, " + filterSlideTriggers,
10                activeFilterSlide = 'filter-open';
11        
12            /* slide menu right */
13            $(filterSlideTriggers).click(function(){
14                if( $(this).hasClass(activeFilterSlide) ) {
15                    $(filterSlideTrackers).removeClass(activeFilterSlide);
16                    $('.filters-mask').fadeOut();
17                    filterCheck();    
18                    $dir = "move-in";                        
19                } else {
20                    $(filterSlideTrackers).addClass(activeFilterSlide);
21                    $('.filters-mask').fadeIn();
22                    $dir = "move-out";
23                }
24
25                if( $('#filters-list-area:has(.filters-list-loading)').length > 0 ) {
26                    ajaxFiltersList();
27                };
28
29                filtersSlideCookieYes($dir);
30            });
31
32        } 
33
34
35    /* Ajax in Filters List */
36        function ajaxFiltersList() {
37            
38            $.ajax({

39                url: "/wp-admin/admin-ajax.php",
40                type: "post",
41                data: {
42                    action: 'get_slideout_filters_list', 
43                    slug: $('#bfi-filters-for-slug').val()
44                },
45                success: function (response) {
46
47                    $('#filters-list-area').html( response );
48                    filterCheck();
49                    filterRadioCheck();
50
51                },
52                error: function (response) {
53
54                    $('#filters-list-area').html( "An error has occurred, please refresh the page and try again." );
55
56                },
57                timeout : 50000 // Timeout of the ajax call
58            }); 
59        }
60
61
62    /* Filter Operations */
63
64        $cat_url = $('#bfi-filters-for-slug-base-url').val();
65        //$base_url = window.location.origin+window.location.pathname;
66        if( $cat_url.startsWith(window.location.origin) ) {
67			$base_url = $cat_url;
68		} else {
69			$base_url = window.location.origin + $cat_url;
70		}
71
72        // Clear individual filters or all filters
73        $('.filters-slideout').on('click', '.clear-filter', function(){
74            $radio = $(this).data("clear");
75            if($radio != null){
76                console.log($radio);
77
78                //$("input[name=" + $radio + "]").prop("checked", false);
79                $("input[name=" + $radio + "]:checked").click();
80            } else {
81                $(".filter-end-buttons").addClass("disabled");
82                $(".filter-end-buttons button").prop("disabled", true);
83                $(".filter-spinner").show();
84
85                $(".filters-area input.filter-tick-box").prop("checked", false);
86
87                // Reload the page with no filters
88                window.location.href = $base_url;
89            }
90        });
91
92        // Add to search filters array
93        function add_search_filter($filters, $query_name, $filter_option) {
94            // For multiple choices for one filter, add to the array value if it exists
95            if($query_name in $filters){
96                $filters[ $query_name ] = $filters[ $query_name ] + "|" + $filter_option;
97            } else {
98                $filters[ $query_name ] = $filter_option;
99            }
100            return $filters;
101        }
102
103        // Apply filters
104        $(".submit-filter").on("click", function(){
105            $(".filter-end-buttons").addClass("disabled");
106            $(".filter-end-buttons button").prop("disabled", true);
107            $(".filter-spinner").show();
108
109            let $filters = {};
110            $(".filters-area input.filter-tick-box:checked").each(function() {
111                $query_name = $(this).data("query");
112                $filter_option = $(this).data("filter");
113
114                // Update active filters array
115                $filters = add_search_filter($filters, $query_name, $filter_option);
116
117            });
118
119            if ($filters.length != 0) {
120                // Build the parameters
121                $url = "?";
122                $x = 0;
123                $.each($filters, function(key, value) {
124                    if($x != 0) {
125                        $url += "&";
126                    }
127                    $url += key + "=" + value;
128                    $x++;
129                });
130                
131                // Reload the page with filters
132                window.location.href = $base_url + $url;
133            };
134        });
135
136        function filterCheck() {
137            var urlParams = new URLSearchParams(window.location.search);
138
139            $(".filter-button input[data-query]").prop("checked", false);
140            $(".filter-accordion").removeClass('filter-has-checked');
141
142            if(urlParams != "") {
143                var value_array = new Array();
144
145                urlParams.forEach((value, key) => {
146                    value_array = value.split("|");
147                    var query = key;
148
149                    value_array.forEach((filter, temp) => {
150                        $filter = $("input[data-query=" + query + "][data-filter=" + filter + "]");
151                        $filter.prop("checked", true);
152                        $filter.closest(".filter-accordion").addClass('filter-has-checked');
153                    });
154                });
155                jQuery("button.filter-toggle").addClass('has-filters');
156            };
157        }
158        filterCheck();
159
160        // Filter accordion
161        $('#filters-list-area').on('click', '.filter-accordion-heading', function(){
162            $accordion = $(this).siblings('.filter-accordion-filters');
163            if( $(this).hasClass('open-sesame') ){
164                $(this).removeClass('open-sesame');

165                $accordion.slideUp();
166            } else {
167                $(this).addClass('open-sesame');
168                $accordion.slideDown();
169            };
170        });
171
172        /** Load in filter button */
173        $('.cat-filter-area').removeClass('filter-toggle-loading');
174
175
176        // Sort and check radios - to enable unchecking on a radio filter
177        function filterRadioCheck() {
178            var radios = $("input.filter-tick-box[type='radio']:checked");
179
180            // Build existing array of checked radios
181            var filter_radios = {};
182            for(var i = 0; i < radios.length; i++){
183                $query = $(radios[i]).data("query");
184                $query_filter = $(radios[i]).data("filter");
185                $query_name = $(radios[i]).attr("name");
186
187                // Price works differently, so adjust to work
188                if($query_name == "filter-price"){
189                    $query_filter = $query + "-" + $query_filter;
190                    $query = $query_name;
191                }
192
193                // Add to the array
194                filter_radios[$query] = $query_filter;
195            }
196
197            console.log(filter_radios);
198
199            // When a radio is clicked after filters have been loaded in
200            $('#filters-list-area').on('click', "input.filter-tick-box[type='radio']", function(){
201                $query = $(this).data("query");
202                $query_filter = $(this).data("filter");
203                $query_name = $(this).attr("name");
204
205                // Price works differently, so adjust to work
206                if($query_name == "filter-price"){
207                    $query_filter = $query + "-" + $query_filter;
208                    $query = $query_name;
209                }
210
211                $to_add = false;
212                // If query is a key in the array
213                if($query in filter_radios){
214                    // If value for that key matches the selected radio, uncheck it
215                    if(filter_radios[$query] == $query_filter){
216                        $(this).prop('checked', false);
217                        $(this).blur();
218                        delete filter_radios[$query];
219                    } else {
220                        $to_add = true;
221                    }
222                } else {
223                    $to_add = true;
224                }
225                // If not in the existing radio array, add it in
226                if($to_add){
227                    filter_radios[$query] = $query_filter;
228                }
229
230                console.log(filter_radios);
231            });
232        }
233
234});
235
236// Controls the cookie yes icon when a filter slideout is opened 
237function filtersSlideCookieYes($dir = false) {
238    $cookie = jQuery('.cky-btn-revisit-wrapper');
239    if( $cookie.hasClass('cookie-go-hidden') || $dir == "move-in" ){
240        $cookie.removeClass('cookie-go-hidden');
241        setTimeout(function() {
242            $cookie.removeClass('cookie-go-transition');
243        }, 300);
244    } else if( !$cookie.hasClass('cookie-go-hidden') || $dir == "move-out" ){
245        $cookie.addClass('cookie-go-transition cookie-go-hidden');
246    }
247}