136 lines
3.9 KiB
TypeScript
136 lines
3.9 KiB
TypeScript
/**
|
|
* For the full copyright and license information, please view the
|
|
* docs/licenses/LICENSE.txt file that was distributed with this source code.
|
|
*/
|
|
import MultiPagination from './multi-pagination';
|
|
|
|
export default function (): void {
|
|
const $headerToolbar = $('.header-toolbar');
|
|
const $mainHeader = $('.header-toolbar');
|
|
|
|
const fixedOffset = $headerToolbar && $mainHeader
|
|
? <number>$headerToolbar.height() + <number>$mainHeader.height()
|
|
: 0;
|
|
const MAX_PAGINATION = 20;
|
|
|
|
const addPageLinksToNavigationBar = (nav: HTMLElement) => {
|
|
const pageTemplate = $(nav).find('.tpl');
|
|
pageTemplate.removeClass('tpl');
|
|
|
|
const pageLinkTemplate = pageTemplate.clone();
|
|
pageTemplate.remove();
|
|
pageLinkTemplate.removeClass('hide');
|
|
|
|
let pageIndex;
|
|
let pageLink;
|
|
let pageLinkAnchor;
|
|
const totalPages = $(nav)
|
|
.parents('.translation-domains')
|
|
.find('.page').length;
|
|
|
|
if (totalPages === 1) {
|
|
return $('.pagination').addClass('hide');
|
|
}
|
|
|
|
$('.pagination').removeClass('hide');
|
|
|
|
let i;
|
|
|
|
for (i = 1; i < totalPages; i += 1) {
|
|
pageIndex = i + 1;
|
|
pageLink = pageLinkTemplate.clone();
|
|
pageLink.attr('data-page-index', pageIndex);
|
|
pageLinkAnchor = pageLink.find('a');
|
|
pageLinkAnchor.html(<string>(<unknown>pageIndex));
|
|
|
|
$(nav)
|
|
.find('.pagination')
|
|
.append(pageLink);
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
// Fix internal navigation to anchors
|
|
// by adding offset of fixed header height
|
|
// @See also http://stackoverflow.com/a/13067009/282073
|
|
const scrollToPreviousPaginationBar = (paginationBar: HTMLElement) => {
|
|
const paginationBarTop = paginationBar.getBoundingClientRect().top;
|
|
window.scrollTo(
|
|
window.pageXOffset,
|
|
window.pageYOffset + paginationBarTop - fixedOffset,
|
|
);
|
|
};
|
|
|
|
$('.translation-domain .go-to-pagination-bar').on('click', (event) => {
|
|
const paginationBar = $(event.target)
|
|
.parents('.translation-domain')
|
|
.find('.pagination')[0];
|
|
scrollToPreviousPaginationBar(paginationBar);
|
|
|
|
return false;
|
|
});
|
|
|
|
$('.translation-domains nav').each((navIndex, nav) => {
|
|
addPageLinksToNavigationBar(nav);
|
|
|
|
const hideActivePageInDomain = (domain: JQuery) => {
|
|
const page = domain.find('.page[data-status=active]');
|
|
$(page).addClass('hide');
|
|
$(page).attr('data-status', 'inactive');
|
|
};
|
|
|
|
const showPageInDomain = (pageIndex: string, domain: JQuery) => {
|
|
const targetPage = domain.find(`.page[data-page-index=${pageIndex}]`);
|
|
$(targetPage).removeClass('hide');
|
|
$(targetPage).attr('data-status', 'active');
|
|
};
|
|
|
|
$(nav)
|
|
.find('.page-link')
|
|
.on('click', (event) => {
|
|
const paginationBar = $(event.target).parents('.pagination')[0];
|
|
scrollToPreviousPaginationBar(paginationBar);
|
|
});
|
|
|
|
$(nav)
|
|
.find('.page-item')
|
|
.on('click', (event) => {
|
|
const pageLink = $(event.target);
|
|
const domain = pageLink
|
|
.parents('.translation-domains')
|
|
.find('.translation-forms');
|
|
const pageItem = pageLink.parent();
|
|
const pageIndex = pageItem.data('page-index');
|
|
|
|
$(`[data-page-index=${pageIndex}]`).addClass('active');
|
|
$(`[data-page-index=${pageIndex}]`)
|
|
.siblings()
|
|
.removeClass('active');
|
|
|
|
pageItem
|
|
.parent()
|
|
.find('.active')
|
|
.removeClass('active');
|
|
pageItem.addClass('active');
|
|
|
|
hideActivePageInDomain(domain);
|
|
showPageInDomain(pageIndex, domain);
|
|
|
|
return false;
|
|
});
|
|
});
|
|
|
|
if ($('.translation-domains').find('.page').length > MAX_PAGINATION) {
|
|
$('.page-item.hide').removeClass('hide');
|
|
$('.pagination').each((index, pagination) => {
|
|
const lastItem = $(pagination).find('.page-item:last-child');
|
|
$(pagination)
|
|
.find('.js-next-arrow')
|
|
.insertAfter(lastItem)
|
|
.removeClass('hide');
|
|
MultiPagination($(pagination));
|
|
});
|
|
}
|
|
}
|