add templates
This commit is contained in:
Profile Profile
385
src/components/Pagination.astro
Normal file
385
src/components/Pagination.astro
Normal file
@@ -0,0 +1,385 @@
|
||||
---
|
||||
|
||||
export interface Props {
|
||||
/** Текущая страница */
|
||||
currentPage: number;
|
||||
/** Всего страниц */
|
||||
totalPages: number;
|
||||
/** URL для навигации */
|
||||
baseUrl: string;
|
||||
/** Показывать кнопки "Назад/Вперед" */
|
||||
showPrevNext?: boolean;
|
||||
/** Показывать кнопки "Первая/Последняя" */
|
||||
showFirstLast?: boolean;
|
||||
/** Максимум видимых номеров страниц */
|
||||
maxVisible?: number;
|
||||
/** Текст для кнопки "Назад" */
|
||||
prevText?: string;
|
||||
/** Текст для кнопки "Вперед" */
|
||||
nextText?: string;
|
||||
/** Текст для кнопки "Первая" */
|
||||
firstText?: string;
|
||||
/** Текст для кнопки "Последняя" */
|
||||
lastText?: string;
|
||||
/** CSS класс для контейнера */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
currentPage = 1,
|
||||
totalPages = 1,
|
||||
baseUrl = '/',
|
||||
showPrevNext = true,
|
||||
showFirstLast = true,
|
||||
maxVisible = 7,
|
||||
prevText = '‹ Назад',
|
||||
nextText = 'Вперед ›',
|
||||
firstText = '««',
|
||||
lastText = '»»',
|
||||
className = ''
|
||||
} = Astro.props;
|
||||
|
||||
// Проверка валидности данных
|
||||
if (currentPage < 1 || totalPages < 1 || currentPage > totalPages) {
|
||||
console.warn('Invalid pagination data:', { currentPage, totalPages });
|
||||
}
|
||||
|
||||
// Функция для генерации массива видимых страниц
|
||||
function getVisiblePages(current, total, max) {
|
||||
if (total <= max) {
|
||||
return Array.from({ length: total }, (_, i) => i + 1);
|
||||
}
|
||||
|
||||
const half = Math.floor(max / 2);
|
||||
let start = current - half;
|
||||
let end = current + half;
|
||||
|
||||
if (start < 1) {
|
||||
start = 1;
|
||||
end = max;
|
||||
}
|
||||
|
||||
if (end > total) {
|
||||
end = total;
|
||||
start = total - max + 1;
|
||||
}
|
||||
|
||||
const pages = [];
|
||||
|
||||
// Добавляем первую страницу и многоточие если нужно
|
||||
if (start > 1) {
|
||||
pages.push(1);
|
||||
if (start > 2) pages.push('...');
|
||||
}
|
||||
|
||||
// Основные страницы
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
// Добавляем многоточие и последнюю страницу если нужно
|
||||
if (end < total) {
|
||||
if (end < total - 1) pages.push('...');
|
||||
pages.push(total);
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
// Функция для построения URL страницы
|
||||
function getPageUrl(page) {
|
||||
if (page === 1) {
|
||||
return baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
|
||||
}
|
||||
|
||||
// Если baseUrl уже содержит /page/, заменяем номер
|
||||
if (baseUrl.includes('/page/')) {
|
||||
return baseUrl.replace(/\/page\/\d+\/?$/, `/page/${page}/`);
|
||||
}
|
||||
|
||||
// Добавляем /page/ перед номером
|
||||
return `${baseUrl.replace(/\/$/, '')}/page/${page}/`;
|
||||
}
|
||||
|
||||
const visiblePages = getVisiblePages(currentPage, totalPages, maxVisible);
|
||||
const hasPrev = currentPage > 1;
|
||||
const hasNext = currentPage < totalPages;
|
||||
---
|
||||
|
||||
<nav class={`simple-pagination ${className}`} aria-label="Навигация по страницам">
|
||||
{totalPages > 1 ? (
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
Страница <strong>{currentPage}</strong> из <strong>{totalPages}</strong>
|
||||
</div>
|
||||
|
||||
<ul class="pagination-list">
|
||||
<!-- Первая страница -->
|
||||
{showFirstLast && hasPrev && currentPage > 2 && (
|
||||
<li class="pagination-item">
|
||||
<a
|
||||
href={getPageUrl(1)}
|
||||
class="pagination-link pagination-first"
|
||||
aria-label="Первая страница"
|
||||
title="Первая страница"
|
||||
>
|
||||
{firstText}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<!-- Предыдущая страница -->
|
||||
{showPrevNext && hasPrev && (
|
||||
<li class="pagination-item">
|
||||
<a
|
||||
href={getPageUrl(currentPage - 1)}
|
||||
class="pagination-link pagination-prev"
|
||||
aria-label="Предыдущая страница"
|
||||
title="Предыдущая страница"
|
||||
>
|
||||
{prevText}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<!-- Номера страниц -->
|
||||
{visiblePages.map((page, index) => (
|
||||
<li class="pagination-item" key={index}>
|
||||
{page === '...' ? (
|
||||
<span class="pagination-ellipsis" aria-hidden="true">…</span>
|
||||
) : page === currentPage ? (
|
||||
<span
|
||||
class="pagination-link pagination-current"
|
||||
aria-current="page"
|
||||
aria-label={`Страница ${page}`}
|
||||
>
|
||||
{page}
|
||||
</span>
|
||||
) : (
|
||||
<a
|
||||
href={getPageUrl(page)}
|
||||
class="pagination-link"
|
||||
aria-label={`Страница ${page}`}
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
<!-- Следующая страница -->
|
||||
{showPrevNext && hasNext && (
|
||||
<li class="pagination-item">
|
||||
<a
|
||||
href={getPageUrl(currentPage + 1)}
|
||||
class="pagination-link pagination-next"
|
||||
aria-label="Следующая страница"
|
||||
title="Следующая страница"
|
||||
>
|
||||
{nextText}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
|
||||
<!-- Последняя страница -->
|
||||
{showFirstLast && hasNext && currentPage < totalPages - 1 && (
|
||||
<li class="pagination-item">
|
||||
<a
|
||||
href={getPageUrl(totalPages)}
|
||||
class="pagination-link pagination-last"
|
||||
aria-label="Последняя страница"
|
||||
title="Последняя страница"
|
||||
>
|
||||
{lastText}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div class="pagination-single">
|
||||
<span class="single-page-info">Всего 1 страница</span>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.simple-pagination {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-current,
|
||||
.pagination-ellipsis {
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
min-width: 2.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination-link {
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.pagination-link:hover {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border-color: #0066cc;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.pagination-current {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border: 1px solid #0066cc;
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: default;
|
||||
min-width: auto;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
.pagination-first,
|
||||
.pagination-last,
|
||||
.pagination-prev,
|
||||
.pagination-next {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-prev {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-next {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-single {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Темная тема */
|
||||
.simple-pagination.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.simple-pagination.dark .pagination-link {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.simple-pagination.dark .pagination-link:hover {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple-pagination.dark .pagination-current {
|
||||
background: #0066cc;
|
||||
}
|
||||
|
||||
.simple-pagination.dark .pagination-info {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Компактный вариант */
|
||||
.simple-pagination.compact .pagination-link,
|
||||
.simple-pagination.compact .pagination-current,
|
||||
.simple-pagination.compact .pagination-ellipsis {
|
||||
padding: 0.25rem 0.75rem;
|
||||
min-width: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Мобильная адаптация */
|
||||
@media (max-width: 768px) {
|
||||
.pagination-list {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-current,
|
||||
.pagination-ellipsis {
|
||||
padding: 0.4rem 0.8rem;
|
||||
min-width: 2rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.pagination-first,
|
||||
.pagination-last {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.pagination-link,
|
||||
.pagination-current {
|
||||
padding: 0.3rem 0.6rem;
|
||||
min-width: 1.75rem;
|
||||
}
|
||||
|
||||
.pagination-prev,
|
||||
.pagination-next {
|
||||
font-size: 0;
|
||||
position: relative;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem;
|
||||
}
|
||||
|
||||
.pagination-prev::before {
|
||||
content: '‹';
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pagination-next::before {
|
||||
content: '›';
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user