szurubooru/client/js/views/manual_page_view.js

'use strict';

const router = require('../router.js');
const keyboard = require('../util/keyboard.js');
const views = require('../util/views.js');

const holderTemplate = views.getTemplate('manual-pager');
const navTemplate = views.getTemplate('manual-pager-nav');

function _removeConsecutiveDuplicates(a) {
    return a.filter((item, pos, ary) => {
        return !pos || item !== ary[pos - 1];
    });
}

function _getVisiblePageNumbers(currentPage, totalPages) {
    const threshold = 2;
    let pagesVisible = [];
    for (let i = 1; i <= threshold; i++) {
        pagesVisible.push(i);
    }
    for (let i = totalPages - threshold; i <= totalPages; i++) {
        pagesVisible.push(i);
    }
    for (let i = currentPage - threshold;
        i <= currentPage + threshold;
        i++) {
        pagesVisible.push(i);
    }
    pagesVisible = pagesVisible.filter((item, pos, ary) => {
        return item >= 1 && item <= totalPages;
    });
    pagesVisible = pagesVisible.sort((a, b) => {
        return a - b;
    });
    pagesVisible = _removeConsecutiveDuplicates(pagesVisible);
    return pagesVisible;
}

function _getPages(
    currentPage, pageNumbers, limit, defaultLimit, removedItems) {
    const pages = new Map();
    let prevPage = 0;
    for (let page of pageNumbers) {
        if (page !== prevPage + 1) {
            pages.set(page - 1, {ellipsis: true});
        }
        pages.set(page, {
            number: page,
            offset:
                ((page - 1) * limit) -
                (page > currentPage ? removedItems : 0),
            limit: limit === defaultLimit ? null : limit,
            active: currentPage === page,
        });
        prevPage = page;
    }
    return pages;
}

class ManualPageView {
    constructor(ctx) {
        this._hostNode = document.getElementById('content-holder');
        views.replaceContent(this._hostNode, holderTemplate());
    }

    run(ctx) {
        const offset = parseInt(ctx.parameters.offset || 0);
        const limit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
        this.clearMessages();
        views.emptyContent(this._pageNavNode);

        ctx.requestPage(offset, limit).then(response => {
            ctx.pageRenderer({
                parameters: ctx.parameters,
                response: response,
                hostNode: this._pageContentHolderNode,
            });

            keyboard.bind(['a', 'left'], () => {
                this._navigateToPrevNextPage('prev');
            });
            keyboard.bind(['d', 'right'], () => {
                this._navigateToPrevNextPage('next');
            });

            let removedItems = 0;
            if (response.total) {
                this._refreshNav(
                    offset, limit, response.total, removedItems, ctx);
            }

            if (!response.results.length) {
                this.showInfo('No data to show');
            }

            response.results.addEventListener('remove', e => {
                removedItems++;
                this._refreshNav(
                    offset, limit, response.total, removedItems, ctx);
            });

            views.syncScrollPosition();
        }, response => {
            this.showError(response.message);
        });
    }

    get pageHeaderHolderNode() {
        return this._hostNode.querySelector('.page-header-holder');
    }

    get _pageContentHolderNode() {
        return this._hostNode.querySelector('.page-content-holder');
    }

    get _pageNavNode() {
        return this._hostNode.querySelector('.page-nav');
    }

    clearMessages() {
        views.clearMessages(this._hostNode);
    }

    showSuccess(message) {
        views.showSuccess(this._hostNode, message);
    }

    showError(message) {
        views.showError(this._hostNode, message);
    }

    showInfo(message) {
        views.showInfo(this._hostNode, message);
    }

    _navigateToPrevNextPage(className) {
        const linkNode = this._hostNode.querySelector('a.' + className);
        if (linkNode.classList.contains('disabled')) {
            return;
        }
        router.show(linkNode.getAttribute('href'));
    }

    _refreshNav(offset, limit, total, removedItems, ctx) {
        const currentPage = Math.floor((offset + limit - 1) / limit) + 1;
        const totalPages = Math.ceil((total - removedItems) / limit);
        const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
        const pages = _getPages(
            currentPage, pageNumbers, limit, ctx.defaultLimit, removedItems);

        views.replaceContent(
            this._pageNavNode,
            navTemplate({
                getClientUrlForPage: ctx.getClientUrlForPage,
                prevPage: Math.min(totalPages, Math.max(1, currentPage - 1)),
                nextPage: Math.min(totalPages, Math.max(1, currentPage + 1)),
                currentPage: currentPage,
                totalPages: totalPages,
                pages: pages,
            }));
    }
}

module.exports = ManualPageView;