https://edtechbooks.org/js/etb/browse.js

1// Rendering Functions
2async function RenderBrowse(context = 'menu', contextb = null, rebuild = false) {
3    console.log('Browsing by ' + context);
4    $('#main').empty();
5    $('#main').parent().scrollTop(0);
6    ResetProgressBar();
7    $('#main-upper').empty().hide();
8    HideBookNav();
9    $('#mobile-links').hide();
10    site.RenderHeaderLinks(rebuild);
11    site.RenderFooterLinks(rebuild);
12    let b = $('#breadcrumb-wrapper');
13    b.empty();
14    $('<a></a>').addClass('breadcrumb-item px-2').attr('data-i18n','').addClass('bi-logo-etb-simple').attr('href', '/').appendTo(b);
15    $('<a></a>').addClass('breadcrumb-item text-nowrap text-truncate').attr('data-i18n','').html('Library').attr('href', '/browse').appendTo(b);
16    $('#breadcrumb').show();
17    let d;
18    switch (context) {
19        case 'menu':
20            $('#main').append(await RenderTemplate('browse-ribbon'));
21            $('#main').find('[href="/browse"]').addClass('active');
22            //$('#main').append(await RenderTemplate('browse-menu'));
23            d = $('<div></div>').attr('id', 'cover-list').addClass('row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-6 my-4 container mx-auto gy-3');
24            d.attr('data-offset',0).attr('data-limit',12);
25            $('#main').append($('<h1>Publications</h1>').addClass('bi-book icon-text-link container-xl mx-auto')).append(d);
26            d.append(await RenderTemplate('browse-loader'));
27            $(window).off('scroll', DoBrowseLoader).on('scroll', DoBrowseLoader);
28            DoBrowseLoader();
29            break;
30        case 'featured':
31            $('#main').append(await RenderTemplate('browse-ribbon'));
32            $('#main').find('[href="/browse/featured"]').addClass('active');
33            //$('#main').append(await RenderTemplate('browse-menu'));
34            $('<a></a>').addClass('breadcrumb-item text-nowrap text-truncate').html('Featured').attr('data-i18n','').attr('href', '/browse/featured').appendTo(b);
35            d = $('<div></div>').attr('id', 'cover-list').addClass('row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-6 my-4 container mx-auto gy-3');
36            $('#main').append($('<h1>Featured</h1>').addClass('bi-check-square icon-text-link container-xl mx-auto')).append(d);
37            for (let link of await GetSiteFeaturedBooks()) {
38                d.append(await RenderTemplate('thumbnail-link', link));
39            }
40            break;
41        case 'badges':
42            $('<a></a>').addClass('breadcrumb-item text-nowrap text-truncate').attr('data-i18n','').html('Badges').attr('href', '/browse/badges').appendTo(b);
43            if (contextb == null) {
44                $('#main').append(await RenderTemplate('browse-ribbon'));
45                $('#main').find('[href="/browse/badges"]').addClass('active');
46                d = $('<div></div>').attr('id', 'badge-list').addClass('row row-cols-6 g-3 my-4 container-xl mx-auto');
47                $('#main').append($('<h1>Badges</h1>').addClass('bi-patch-check icon-text-link container-xl mx-auto')).append(d);
48                for (let badge of await ListBadges('book')) {
49                    d.append(await RenderTemplate('badge-info', badge));
50                }
51            } else {
52                let badge = await GetBadge(contextb);
53                if (badge.badge_id !== undefined) {
54                    console.log(badge);
55                    $('<a></a>').addClass('breadcrumb-item text-nowrap text-truncate').attr('data-i18n','').html(badge.name).attr('href', '/browse/badges/' + badge.badge_id).appendTo(b);
56                    $('#main').append(await RenderTemplate('badge-full', badge));
57                    if (badge.entity_type == 'book') {
58                        for (let book_link of await GetBookLinksForBadge(badge.badge_id)) {
59                            $('#badged-books').append(await RenderTemplate('thumbnail-link', book_link));
60                        }
61                    } else {
62                        $('#main #awardees').remove();
63                    }
64                } else {
65                    Render404();
66                }
67            }
68            break;
69        case 'collections':
70            $('<a></a>').addClass('breadcrumb-item text-nowrap text-truncate').html('Collections').attr('href', '/browse/collections').attr('data-i18n','').appendTo(b);
71            if (contextb == null) {
72                $('#main').append(await RenderTemplate('browse-ribbon'));
73                $('#main').find('[href="/browse/collections"]').addClass('active');
74                d = $('<div></div>').attr('id', 'collection-list').addClass('row row-cols-6 g-3 my-4 container-xl mx-auto');
75                $('#main').append($('<h1>Collections</h1>').addClass('bi-collection icon-text-link container-xl mx-auto')).append(d);
76                for (let collection of await ListCollections()) {
77                    d.append(await RenderTemplate('collection-info', collection));
78                }
79            } else {
80                let collection = await GetCollection(contextb);
81                if (collection.collection_id !== undefined) {
82                    collection.Render();
83                } else {
84                    Render404();
85                }
86            }
87            break;
88        default:
89            Render404();
90    }
91    TranslateUI($('#main')[0]);
92    TranslateUI(b[0]);
93}
94
95let checkingBrowseLoader = false;

96
97async function DoBrowseLoader() {
98    console.log('Checking browse loader');
99    let e = $('#browse-loader')[0];
100    if(e===undefined) return;
101    if(IsElementInView(e) && !checkingBrowseLoader) {
102        console.log('Loading more ...');
103        checkingBrowseLoader = true;
104        let offset = parseInt($(e).parent().attr('data-offset'));
105        let limit = parseInt($(e).parent().attr('data-limit'));
106        let bookLinks = await GetSiteBookLinks(offset, limit);
107        console.log(bookLinks);
108        for (let link of bookLinks) {
109            $(await RenderTemplate('thumbnail-link', link)).insertBefore(e);
110        }
111        if (bookLinks.length < limit) {
112            $(e).remove();
113            $(window).off('scroll', DoBrowseLoader);
114        }
115        $(e).parent().attr('data-offset', offset + limit);
116        checkingBrowseLoader = false;
117
118        if (bookLinks.length > 0 && $(window).height() > $('body').height() - 200) {
119            let retries = 0;
120            while (retries < 3 && $(window).height() > $('body').height() - 200) {
121                retries += 1;
122                DoBrowseLoader();
123            }
124        }
125    }
126}