https://www.artthema.com/lib/g/2.0/scripts/artlogic_modules/_ver_c…/pageload_load_more_pagination.js

1import pageload_plugin from '../plugins/pageload.js';
2import responsive from './responsive.js';
3import layout from './layout.js';
4
5var pageload_load_more_pagination = {
6            
7    // Dynamically loads in new items into a records_list, rather than traditional pagination
8
9    init: function() {
10        
11        var verbose_mode = false;
12        
13        if (($('body').hasClass('pageload-ajax-navigation-active')) && $('.page_stats').length && $('.ajax_load_more_pagination_enabled').length) {
14            
15            window.galleries.pageload_load_more_pagination.setup(verbose_mode);
16        }
17    },
18
19    setup: function (verbose_mode) {
20
21        $('.page_stats').each(function(i, element) {
22            
23            var $this = $(this),
24            
25                incoming_url = $this.find('.ps_next').attr('href');
26                var page_stats_id = $this.attr('id'),
27                corresponding_list_ref = $this.attr('id'),
28                $list = $('[data-pagestats-id="'+corresponding_list_ref+'"]')
29                var ajax_load_more_auto = $this.hasClass('pagination_type_ajax_load_more_auto');
30
31                if (!$list.length && verbose_mode){
32                    console.log("Can't find a corresponding list that relates to your pagination. Supply 'data-

32pagestats-id' to list that matches your page_stats_id.")
33                }
34                
35
36            if (typeof page_stats_id !== 'undefined' && $list.length){
37                
38                // Hide the original pagination 
39                $this.addClass('hidden'); 
40                $this.find('.list-ajax-load-more-wrapper').remove();
41                
42                if (typeof incoming_url !== 'undefined'){
43                    
44                    // Create our new dynamic button
45                    $this.after('<div class="list-ajax-load-more-wrapper ' + (ajax_load_more_auto ? 'list-ajax-load-more-auto': '') + ' clearwithin"><button class="list-ajax-load-more button button_compact" data-list="'+page_stats_id+'" data-url="'+incoming_url+'" aria-label="Load more items"><span class="list-ajax-load-more-label">Load more</span></button></div>');
46                    
47                    $this.next('.list-ajax-load-more-wrapper').find('.list-ajax-load-more')
48                        .on("click", function(e) { 
49                            e.preventDefault();
50                            var $button = $(this),
51                                incoming_url = $button.attr('data-url'); // URL detected at this level, later may be data-attr or any value
52                                corresponding_list_ref = $button.data('list'),
53                                $list = $('[data-pagestats-id="'+corresponding_list_ref+'"]')
54                            //Load the new records
55                            window.galleries.pageload_load_more_pagination.load_content($button, incoming_url, $list, verbose_mode);
56                        })
57                    ;
58                    window.galleries.layout.inview.init('.list-ajax-load-more-auto');
59                    $this.next('.list-ajax-load-more-wrapper')
60                        .on('inview.visible', function() {
61                            console.log($('.list-ajax-load-more', this));
62                            if (!$('.list-ajax-load-more', this).hasClass('loading')) {
63                                $('.list-ajax-load-more', this).trigger('click');
64                            }
65                        })
66                    ;
67                }
68                
69                // If this URL already has a skip value, prepend a load previous button
70                if (window.location.search && typeof window.location.search != 'undefined') {
71                    if (window.location.search.indexOf('skip=') != -1) {
72                        $list.before('<div class="list-ajax-load-previous-wrapper clearwithin"><button class="list-ajax-load-previous button button_compact" data-list="'+page_stats_id+'" aria-label="Load previous items"><span class="list-ajax-load-previous-label">Load previous items</span></button></div>');
73                            
74                        $('.list-ajax-load-previous').on("click", function(e) { 
75                            e.preventDefault();
76                            //Load the initial records list
77                            $.pageload.load(window.location.pathname, true, function() {
78                                
79                            });
80                        });
81                    }
82                }
83            }
84        });
85
86    },
87
88    load_content: function ($button, incoming_url, $list, verbose_mode) {
89        
90        $button.addClass('loading');
91        
92        var incoming_content_type = 'inner',
93            current_button_offset = $button.offset().top - ($(window).height() / 3),
94            corresponding_list_ref = $list.data('pagestats-id'),
95            inner_content_selector = '[data-pagestats-id="'+corresponding_list_ref+'"]';
96            
97        $.pageload.load(incoming_url, true, function(new_page_inner_content, href, new_page_main_content) {
98            
99            $button.removeClass('loading');
100            console.warn('var declaration changes here')
101            if (new_page_inner_content) {
102
103                var $new_page_inner_content = $(new_page_main_content);
104                
105                var updated_url = $new_page_inner_content.find('.page_stats#'+corresponding_list_ref).find('.ps_next').attr('href'),
106                    $new_list = $new_page_inner_content.find('[data-pagestats-id="'+corresponding_list_ref+'"]'),
107                    $new_list_items = $new_list.find('li').addClass('ajax-loaded-list-item');
108                    
109                if ($list.hasClass('tile_list')){
110                    $list.find('.tile_list_original ul').append($new_list_items);
111                } else if ($list.hasClass('flow_list')) {
112                    $list.find('.flow_list_original ul').append($new_list_items);
113                } else {
114                    $list.find('ul').append($new_list_items);
115                }
116                
117                if (updated_url){
118                    $button.attr('data-url', updated_url);
119                } else {
120                    $button.attr('data-url', '');
121                    $button.addClass('disabled');
122                    $button.closest('.list-ajax-load-more-wrapper').addClass('disabled');
123                }
124
125                //General resets
126                if ($list.hasClass('tile_list')){
127                    window.galleries.responsive.tile_list_append_refresh($list);
128                } else if ($list.hasClass('flow_list')) {
129                    window.galleries.responsive.flow_list_append_refresh($list);
130                }
131                window.galleries.layout.inview.init();
132                $(window).trigger('resize');
133                $(window).trigger('scroll');
134                
135                setTimeout(function() {
136                    if (!$list.hasClass('no_scroll_after_load')) {
137                        $('html,body').stop().animate({
138                            scrollTop: current_button_offset
139                        }, 800, 'easeInOutQuad', function() {
140                            //Refresh pageload only on the new list items
141                            $.pageload.refresh('.ajax-loaded-list-item:not(.pageload-refreshed)');
142                            $('.ajax-loaded-list-item').addClass('pageload-refreshed');
143                        });
144                    } else {
145                        //Refresh pageload only on the new list items
146                        $.pageload.refresh('.ajax-loaded-list-item:not(.pageload-refreshed)');
147                        $('.ajax-loaded-list-item').addClass('pageload-refreshed');
148                        $list.removeClass('no_scroll_after_load')
149                    }
150                }, 100);
151
152
153            }
154            
155        }, null, null, null, incoming_content_type, inner_content_selector);
156    }
157    }
158
159window.galleries = window.galleries || {};
160window.galleries.pageload_load_more_pagination = pageload_load_more_pagination;
161export default pageload_load_more_pagination;