https://www.boppelsen.ch/wp-content/plugins/mxm-custom-widgets/assets/js/mxm-posts-grid.js?ver=1

1jQuery(document).ready(function ($) {
2    getPosts();
3
4    $('#mxm-filterable-grid-wrapper .filter-bar li a').on('click', function (e) {
5        e.preventDefault();
6        if ($(this).hasClass('active')) {
7            return;
8        }
9        // Reset Pagination If year or cat filter changed.
10        $('#filter-values #filter-page').val(1);
11
12        $(this).parent().parent().find('a').removeClass('active').attr('disabled', false);
13        $(this).addClass('active').attr('disabled', 'disabled');
14
15        if ($(this).attr('data-search') == 'cat') {
16            $('#filter-values #filter-category').val($(this).attr('href'));
17        }
18        if ($('#list-opt-selected')) {
19            if ($(this).attr('data-search') == 'year') {
20                $('#filter-values #filter-year').val($(this).attr('href'));
21            }
22        }
23        // Axios Get
24        getPosts();
25
26    });
27    if ($('dropdown-opt-selected')) {
28        $('#dropdown-opt-selected').on('change', function (e) {
29            e.preventDefault();
30            $('#filter-values #filter-year').val($('#filter-year-select').val());
31            // Axios Get
32            getPosts();
33
34        })
35    }
36
37
38
39    function getPosts() {
40        $('#mxm-filterable-grid-wrapper .row.mxm-post-grid').addClass('loading');
41        var filterValues = {
42            'category': $('#filter-values #filter-category').val(),
43            'year': $('#filter-values #filter-year').val(),
44            'page': $('#filter-values #filter-page').val(),
45            'posts_per_page': $('#filter-values #filter-posts-per-page').val(),
46        };
47        let config = {
48            method: 'get',
49            url: '/wp-json/mxm/v1/posts',
50            params: filterValues
51        };
52        axios(config)
53            .then(function (response) {
54                // console.table(response)
55                let posts = response.data.post_data;
56                let total = response.data.total;
57                let pages = response.data.pages;
58                let currentPage = response.data.current_page;
59                let postsHtml = '';
60                if (posts == 'No posts found') {
61                    postsHtml = '<h2 style="text-align:center;">Keine Beiträge gefunden</h2>';
62                } else {
63                    const blogPosts = posts.map(post => {
64                        let postHtml = blogPostComponent(post.year, post.category, post.link, post.title, post.excerpt, post.date)
65
66                        return postHtml;
67                    });
68                    postsHtml = blogPosts.join('');
69                    // Check if pagination is needed
70                    if (pages > 1) {
71                        let paginationHtml = paginationComponent(pages, currentPage);
72                        $('#mxm-filterable-grid-wrapper .mxm-post-grid-pagination').html(paginationHtml);
73                    } else {
74                        $('#mxm-filterable-grid-wrapper .mxm-post-grid-pagination').html('');
75                    }
76                }
77                $('#mxm-filterable-grid-wrapper .row.mxm-post-grid').html(postsHtml);
78
79
80            })
81            .then(() => {
82                $('#mxm-filterable-grid-wrapper .row.mxm-post-grid').removeClass('loading');
83
84                $('#mxm-filterable-grid-wrapper .mxm-post-grid-pagination ul li .page-numbers').on('click', function (e) {
85                    e.preventDefault();
86                    if ($(this).hasClass('current')) {
87                        return;
88                    }
89                    $('#mxm-filterable-grid-wrapper .mxm-post-grid-pagination ul li .page-numbers').removeClass('current');
90                    $(this).addClass('current');
91
92                    $('#filter-values #filter-page').val($(this).text());
93                    // Axios Get
94                    getPosts();
95                    // Scroll to filter bar
96                    $('html, body').animate({
97                        scrollTop: $(".elementor-widget-MxM-Post-Grid").offset().top - $('header.sticky-header').outerHeight() - 100
98                    }, 500);
99
100                });
101            })
102
103            .catch(function (error) {
104                console.log(error);
105            });
106    }
107    function blogPostComponent(year, category, permalink, title, excerpt, theDate) {
108        return `<div class="mxm-post-grid-item ${year} ${category}">
109                    <div class="mxm-post-grid-item-inner">
110                        <div class="mxm-post-grid-item-content">
111                            <div class="mxm-post-grid-item-badge">
112                                ${category}
113                            </div>
114                            <h3 class="mxm-post-grid-item-title"><a href="${permalink}">${title}</a></h3>
115                            <div class="mxm-post-grid-item-excerpt">
116                                <p>${excerpt}</p>
117                            </div>
118                            <div class="mxm-post-grid-item-read-more">
119                                <a href="${permalink}">Mehr erfah­ren »</a>
120                            </div>
121                        </div>
122                    </div>
123                    <div class="mxm-post-grid-item-meta">
124                        <div class="mxm-post-grid-item-meta-item">

125                            <span>${theDate}</span>
126                        </div>
127                    </div>
128                </div>`;
129    }
130
131    function paginationComponent(pages, currentPage = 1) {
132
133        let paginationHtml = '<ul class="page-numbers">';
134        for (let i = 1; i <= pages; i++) {
135            if (i == currentPage) {
136                paginationHtml += `<li><span class="page-numbers current">${i}</span></li>`;
137            } else {
138                paginationHtml += `<li><a class="page-numbers" href="#">${i}</a></li>`;
139            }
140        }
141
142        paginationHtml += '</ul>';
143        return paginationHtml;
144    }
145    // Select2 init
146    $('#filter-year-select').select2({
147        containerCssClass: 'filter-year-select-custom',
148	
149    });
150});
151
152
153
154