https://www.ssafa.org.uk/Scripts/pages/sub-pages.js

1var swf = swf || {};
2
3swf.subPages = {
4    page: 1,
5    pageSize: 12,
6    init: function () {
7        var that = this;
8        this.initPagination();
9        if (window.innerWidth < 415) {
10            this.pageSize = 8;
11        }
12        this.getResults(0);
13    },
14
15    initPagination: function () {
16        var that = this;
17        $('.subpages-load-more').click(function (e) {
18            e.preventDefault();
19            that.getResults(+1);
20        })
21    },
22
23    getResults: function (direction) {
24        console.log('calling get results');
25        this.getResultsForPage(this.page + direction);
26    },
27
28    getResultsForPage: function (page) {
29        console.log('calling get results for page');
30        var that = this;
31
32        this.page = page;
33        if (this.page < 1) this.page = 1;
34
35        var qs = 'id=' + $('#contentId').val() + '&page=' + this.page + '&pageSize=' + this.pageSize;
36        var url = '/umbraco/api/SubPagesApi/index?' + qs;
37
38        const article = (url, heading, description, imgAlt, imgUrl) => `
39 <article>
40                        <a href="${url}">
41                                <span class="imageThumbnail centeredThumbnail" style="background-image:url(${imgUrl})" alt="${imgAlt}"></span>
42                            <h3>${heading}</h3>
43
44                            <p>${description}</p>
45
46                            <div class="btns">
47                                <span class="more"><span>Read more</span></span>
48                            </div>
49                        </a>
50                    </article>
51`;
52
53        $.ajax({

54            'url': url
55        }).done(function (data) {
56            if (data.length < that.pageSize) {
57                console.log('pagesize: ' + that.pageSize)
58                $('.subpages-load-more').addClass('hidden');
59            }
60            $.each(data, function (index, element) {
61                $('.subPages > .articles').append(article(element.Url, element.Heading, element.Description, element.ImageAlt, element.ImageUrl));
62            });
63
64            if (window.innerWidth < 415) {
65                var $target = $('.subPages > .articles');
66                var top = $target.offset().top;
67
68                $('html, body').animate({
69                    'scrollTop': top - 20
70                }, 300, 'swing', function () {
71
72                });
73            }
74        });
75    }
76
77};
78swf.subPages.init();