Wordpress-Plugin-Masonry-Blog/ohvo-blog-grid.js at master · hotali0106/Wordpress-Plugin-Masonry-Blog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
jQuery(document).ready(function (){ // use jQuery code inside this to avoid "$ is not defined" error
    let ppp             = 8;    // post per page
    let pageNumber      = 0;    // number of current page
    let filter          = -1;   //
    let category_name   = -1;   // name of category


    $viewAllButtons = jQuery('.ohvo-posts-grid .view-all');

    if ($viewAllButtons.length)
        loadPosts()

    // masonry grid
    $grid = jQuery('#ohvo-ajax-posts.grid').masonry({
        // options
        itemSelector:       '.grid-item',
        columnWidth:        '.grid-item',
        percentPosition:    true
    });

    jQuery(document).on('click', '.ohvo-posts-grid nav a.page-button', function(){
        $page_number = jQuery(this).attr('page-number');
        changeAjaxPagination($page_number);
    })

    function changeAjaxPagination(page_number = 1) {
        if (pageNumber == page_number) {
            return;
        }
        pageNumber = page_number;
        $grid.masonry('remove', jQuery('.ohvo-posts-grid article.post')).masonry('layout');
        loadPosts();
    }

    /** Load Posts using wp ajax
     *
     * @param number pageNumber     number of current page
     * @param number ppp            size of page
     * @param string category_name  name of current category. If -1 then, show all categories.
     */
    function loadPosts() {

        let q = '&post_type=post' + '&paged=' + pageNumber + '&posts_per_page=' + ppp + '&column_size=3' + '&category_name=' + category_name + '&action=more_post_ajax';

        jQuery('.ohvo-posts-grid .loading').css('display', 'block');

        jQuery.ajax({
            type: "POST",
            dataType: 'html',
            url: ajax_posts.ajaxurl,
            data: q,
            success: function(data) {
                let $data = jQuery(data);

                jQuery('#ohvo-pagination-wrap').html($data.slice(0, 1));
                if($data.length) {
                    const $items = $data.slice(1, $data.length - 1);
                    $grid.append($items).masonry('appended', $items).masonry('layout');
                }
                jQuery('.ohvo-posts-grid .loading').css('display', 'none');
            },
            error: function() {
                console.error('error while loading posts');
            }
        })
    }

    jQuery(document).on('click', '.ohvo-posts-grid .view-all', function(){
        pageNumber = 0;
        ppp = -1;
        category_name = -1;
        $grid.masonry('remove', jQuery('.ohvo-posts-grid article.post')).masonry('layout');
        loadPosts();
    })

    jQuery(document).on('click', '.ohvo-posts-grid .category-name', function(){
        pageNumber = 0;
        ppp = 8;
        category_name = jQuery(this).text();
        $grid.masonry('remove', jQuery('.ohvo-posts-grid article.post')).masonry('layout');
        loadPosts();
    })

});