https://redcross.or.ke/wp-content/themes/jackcerra/elements/widgets/js/grid.js?ver=1.0.1

1( function( $ ) {
2    $.sep_grid_refresh = function (){
3        $('.pxl-grid-masonry').each(function () {
4            var iso = new Isotope(this, {
5                itemSelector: '.pxl-grid-item',
6                percentPosition: true,
7                masonry: {
8                    columnWidth: '.grid-sizer',
9                },
10                containerStyle: null,
11                stagger: 30,
12                sortBy : 'name',
13            });
14
15            var filtersElem = $(this).parent().find('.pxl-grid-filter');
16            filtersElem.on('click', function (event) {
17                var filterValue = event.target.getAttribute('data-filter');
18                iso.arrange({filter: filterValue});
19            });
20
21            var filterItem = $(this).parent().find('.filter-item');
22            filterItem.on('click', function (e) {
23                filterItem.removeClass('active');
24                $(this).addClass('active');
25            });
26
27            var filtersSelect = $(this).parent().find('.pxl-grid-filter');
28            filtersSelect.change(function() {
29                var filters = $(this).val();
30                iso.arrange({filter: filters});
31            });
32
33            var orderSelect = $(this).parent().find('.pxl-grid-filter');
34            orderSelect.change(function() {
35                var e_order = $(this).val();
36                if(e_order == 'asc') {
37                    iso.arrange({sortAscending: false});
38                }
39                if(e_order == 'des') {
40                    iso.arrange({sortAscending: true});
41                }
42            });
43
44            $('.pxl-service-grid1').each(function () {
45                $(this).find('.pxl-grid-item-inner').hover(function () {
46                    $(this).parents('.elementor-element').find('.pxl-grid-item-inner').removeClass('active');
47                    $(this).addClass('active');
48                });
49            });
50
51        });
52    }
53    
54    
55    var widget_post_masonry_handler = function( $scope, $ ) {
56        $('.pxl-grid-masonry').imagesLoaded(function(){
57            $.sep_grid_refresh();
58        });
59    };
60
61    $(document).ajaxComplete(function(event, xhr, settings){  
62        "use strict";
63        $(document).on('click', '.pxl-grid-filter .filter-item', function (e) {
64            $(this).siblings('.filter-item').removeClass('active');
65            $(this).addClass('active');
66        });
67    });
68
69    $(document).on('click', '.pxl-load-more', function(){
70        var loadmore    = $(this).data('loadmore');
71        var perpage     = loadmore.perpage;
72        var _this       = $(this).parents(".pxl-grid");
73        var layout_type = _this.data('layout');
74        var loading_text = $(this).data('loading-text');
75        var loadmore_text = $(this).data('loadmore-text');  
76        loadmore.paged  = parseInt(_this.data('start-page')) +1;
77        $(this).addClass('loading');
78        $(this).find('.pxl-btn-icon').addClass('loading');
79        $(this).find('.pxl-btn-text').text(loading_text);
80
81        if(loadmore.filter == 'true'){
82            $.ajax({
83                url: main_data.ajax_url,
84                type: 'POST',
85                beforeSend: function () {
86
87                },
88                data: {
89                    action: 'jackcerra_get_filter_html',
90                    settings: loadmore,
91                    loadmore_filter: 1
92                }
93            }).done(function (res) { 
94                if(res.status == true){
95                    _this.find(".pxl-grid-filter .pxl--filter-inner").html(res.data.html); 
96                }
97                else if(res.status == false){
98                }
99            }).fail(function (res) {
100                return false;
101            }).always(function () {
102                return false;
103            });
104        }
105
106        $.ajax({
107            url: main_data.ajax_url,
108            type: 'POST',
109            beforeSend: function () {
110
111            },
112            data: {
113                action: 'jackcerra_load_more_post_grid',
114                settings: loadmore
115            }
116        })
117        .done(function (res) {   
118            if(res.status == true) {
119                _this.find('.pxl-load-more').removeClass('loading');
120                _this.find('.pxl-grid-inner').append(res.data.html);
121                _this.data('start-page', res.data.paged);
122                $.sep_grid_refresh();
123                if(res.data.paged >= res.data.max){
124                    _this.find('.pxl-load-more').hide();
125                }
126
127                /* Direction Effect */
128                    function PXLgetDirection(ev, obj) {
129                    var w = $(obj).width(),
130                        h = $(obj).height(),
131                        x = (ev.pageX - $(obj).offset().left - (w / 2)) * (w > h ? (h / w) : 1),
132                        y = (ev.pageY - $(obj).offset().top - (h / 2)) * (h > w ? (w / h) : 1),
133                        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
134                    return d;
135                }
136                function PXLaddClass( ev, obj, state ) {
137                    var direction = PXLgetDirection( ev, obj ),
138                    class_suffix = null;
139                    $(obj).removeAttr('class');
140                    switch ( direction ) {
141                        case 0 : class_suffix = '--top';    break;
142                        case 1 : class_suffix = '--right';  break;
143                        case 2 : class_suffix = '--bottom'; break;
144                        case 3 : class_suffix = '--left';   break;
145                    }
146                    $(obj).addClass( state + class_suffix );
147                }
148                $.fn.PXLDeriction = function () {
149                    this.each(function () {
150                        $(this).on('mouseenter',function(ev){
151                            PXLaddClass( ev, this, 'pxl-in' );
152                        });
153                        $(this).on('mouseleave',function(ev){
154                            PXLaddClass( ev, this, 'pxl-out' );
155                        });
156                    });
157                }
158                $('.pxl-effect--3d .pxl-effect--direction').PXLDeriction();
159                /* End Direction Effect */
160            } 
161
162        })
163        .fail(function (res) {
164            _this.find('.btn').hide();
165            return false;

166        })
167        .always(function () {
168            return false;
169        });
170    });
171
172    $(document).on('click', '.pxl-grid-pagination .ajax a.page-numbers', function(){
173        var _this = $(this).parents(".pxl-grid");
174        var loadmore = _this.find(".pxl-grid-pagination").data('loadmore');
175        var query_vars = _this.find(".pxl-grid-pagination").data('query');
176
177        var layout_type = _this.data('layout');
178        var paged = $(this).attr('href');
179        paged = paged.replace('#', '');
180        loadmore.paged = parseInt(paged);
181        query_vars.paged = parseInt(paged); 
182
183        var _class = loadmore.pagin_align_cls;
184
185        $('html,body').animate({scrollTop: _this.offset().top - 100}, 750);
186
187        // reload filter
188        if(loadmore.filter == 'true'){
189            $.ajax({
190                url: main_data.ajax_url,
191                type: 'POST',
192                beforeSend: function () {
193
194                },
195                data: {
196                    action: 'jackcerra_get_filter_html',
197                    settings: loadmore
198                }
199            }).done(function (res) { 
200                if(res.status == true){
201                    _this.find(".pxl-grid-filter .pxl--filter-inner").html(res.data.html);
202                }
203                else if(res.status == false){
204                }
205            }).fail(function (res) {
206                return false;
207            }).always(function () {
208                return false;
209            });
210        }
211
212        // reload pagination
213        $.ajax({
214            url: main_data.ajax_url,
215            type: 'POST',
216            beforeSend: function () {
217
218            },
219            data: {
220                action: 'jackcerra_get_pagination_html',
221                query_vars: query_vars,
222                cls: _class 
223            }
224        }).done(function (res) {
225            if(res.status == true){
226                _this.find(".pxl-grid-pagination").html(res.data.html);
227            }
228            else if(res.status == false){
229            }
230        }).fail(function (res) {
231            return false;
232        }).always(function () {
233            return false;
234        });
235
236        // load post
237        $.ajax({
238            url: main_data.ajax_url,
239            type: 'POST',
240            beforeSend: function () {
241
242            },
243            data: {
244                action: 'jackcerra_load_more_post_grid',
245                settings: loadmore
246            }
247        }).done(function (res) { //console.log(res); return false;
248            if(res.status == true){
249                _this.find('.pxl-grid-inner .pxl-grid-item').remove();
250                _this.find('.pxl-grid-inner').append(res.data.html);
251                _this.data('start-page', res.data.paged);
252                if(layout_type == 'masonry'){  
253                    
254                    /* Direction Effect */
255                    function PXLgetDirection(ev, obj) {
256                        var w = $(obj).width(),
257                            h = $(obj).height(),
258                            x = (ev.pageX - $(obj).offset().left - (w / 2)) * (w > h ? (h / w) : 1),
259                            y = (ev.pageY - $(obj).offset().top - (h / 2)) * (h > w ? (w / h) : 1),
260                            d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
261                        return d;
262                    }
263                    function PXLaddClass( ev, obj, state ) {
264                        var direction = PXLgetDirection( ev, obj ),
265                        class_suffix = null;
266                        $(obj).removeAttr('class');
267                        switch ( direction ) {
268                            case 0 : class_suffix = '--top';    break;
269                            case 1 : class_suffix = '--right';  break;
270                            case 2 : class_suffix = '--bottom'; break;
271                            case 3 : class_suffix = '--left';   break;
272                        }
273                        $(obj).addClass( state + class_suffix );
274                    }
275                    $.fn.PXLDeriction = function () {
276                        this.each(function () {
277                            $(this).on('mouseenter',function(ev){
278                                PXLaddClass( ev, this, 'pxl-in' );
279                            });
280                            $(this).on('mouseleave',function(ev){
281                                PXLaddClass( ev, this, 'pxl-out' );
282                            });
283                        });
284                    }
285                    $('.pxl-effect--3d .pxl-effect--direction').PXLDeriction();
286                    /* End Direction Effect */
287
288                    $.sep_grid_refresh();
289                }
290                 
291            }
292            else if(res.status == false){
293            }
294        }).fail(function (res) {
295            return false;

296        }).always(function () {
297            return false;
298        });
299        return false;
300    });
301
302    // Make sure you run this code under Elementor.
303    $( window ).on( 'elementor/frontend/init', function() {
304        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_post_grid.default', widget_post_masonry_handler );
305        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_showcase_grid.default', widget_post_masonry_handler );
306        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_testimonial_grid.default', widget_post_masonry_handler );
307        elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_team_grid.default', widget_post_masonry_handler );
308    } );
309} )( jQuery );