delf/profile-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add emmed

Browse Source
This commit is contained in:
Profile Profile
2026-03-14 18:01:30 +03:00
parent 684a7bffbf
commit f66c3baf8d
10 changed files with 338 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/components/ContentGrid.astro
View File

@@ -1,6 +1,6 @@
---
import CategoryBadge from './CategoryBadge.astro';
import Author from '@components/AuthorDisplay.astro';
export interface Props {
items: any[];
@@ -11,7 +11,6 @@ export interface Props {
hasNextPage: boolean;
endCursor: string | null;
};
perLoad?: number; // Больше не используется, но оставляем для обратной совместимости
gridColumns?: 3 | 4;
}
@@ -21,11 +20,10 @@ const {
type = 'latest',
slug = '',
pageInfo = { hasNextPage: false, endCursor: null },
perLoad = 11, // Игнорируется
gridColumns = 4
} = Astro.props;
// Конфиг без perLoad, так как будем вычислять на клиенте
// Конфиг для клиентского скрипта
const loadMoreConfig = {
type,
slug,
@@ -59,9 +57,9 @@ function shouldBeLarge(index: number, columns: number): boolean {
<section class="posts-section" id="posts-section">
{showCount && items.length > 0 && (
<h2> <span id="posts-count"> ({items.length})</span></h2>
)}
{showCount && items.length > 0 && (
<h2>Все статьи <span id="posts-count">({items.length})</span></h2>
)}
<div
id="posts-grid"
@@ -189,225 +187,4 @@ function shouldBeLarge(index: number, columns: number): boolean {
data-grid-columns={gridColumns}
></div>
)}
</section>
<script>
class InfinityScroll {
private grid: HTMLElement | null;
private sentinel: HTMLElement | null;
private loadingIndicator: HTMLElement | null;
private noMorePosts: HTMLElement | null;
private postsCount: HTMLElement | null;
private observer: IntersectionObserver | null = null;
private isLoading = false;
private hasMore = true;
private endCursor: string | null = null;
private currentIndex: number;
private gridColumns: 3 | 4 = 4;
private loadMoreConfig: any;
// Константы для разных сеток
private readonly CYCLE_LENGTH = {
3: 14, // Полный цикл для 3 колонок: 6 обычных + 1 большая + 6 обычных + 1 большая
4: 19 // Полный цикл для 4 колонок: 8 обычных + 1 большая + 9 обычных + 1 большая
};
private readonly OPTIMAL_LOADS = {
3: [9, 12, 15], // 3, 4, 5 полных рядов
4: [12, 16, 20] // 3, 4, 5 полных рядов
};
constructor() {
this.grid = document.getElementById('posts-grid');
this.sentinel = document.getElementById('infinity-scroll-sentinel');
this.loadingIndicator = document.getElementById('loading-indicator');
this.noMorePosts = document.getElementById('no-more-posts');
this.postsCount = document.getElementById('posts-count');
if (!this.sentinel) return;
this.endCursor = this.sentinel.dataset.endCursor || null;
this.currentIndex = parseInt(this.sentinel.dataset.currentIndex || '0');
this.gridColumns = parseInt(this.sentinel.dataset.gridColumns || '4') as 3 | 4;
try {
this.loadMoreConfig = JSON.parse(this.sentinel.dataset.loadConfig || '{}');
} catch {
this.loadMoreConfig = { type: 'latest', slug: '', gridColumns: this.gridColumns };
}
this.init();
}
private init() {
if (!this.sentinel || !this.grid) return;
this.observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !this.isLoading && this.hasMore) {
this.loadMorePosts();
}
});
},
{
rootMargin: '200px',
threshold: 0.1
}
);
this.observer.observe(this.sentinel);
}
/**
* Главная функция: определяет оптимальное количество постов для загрузки
* Гарантирует, что после загрузки не будет "дырок" в сетке
*/
private getOptimalLoadCount(): number {
const columns = this.gridColumns;
const cycleLength = this.CYCLE_LENGTH[columns];
const position = this.currentIndex % cycleLength;
const options = this.OPTIMAL_LOADS[columns];
// Выбираем оптимальное число в зависимости от позиции в цикле
if (position < columns) {
// Мы в начале цикла - можно загрузить 3 полных ряда
return options[0];
} else if (position < columns * 2) {
// Мы в середине цикла - лучше загрузить 4 полных ряда
return options[1];
} else {
// Мы ближе к концу цикла - загружаем 5 полных рядов
return options[2];
}
}
private async loadMorePosts() {
if (this.isLoading || !this.hasMore) return;
this.isLoading = true;
this.showLoading();
try {
const loadCount = this.getOptimalLoadCount();
const response = await fetch('/load-more-posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
perLoad: loadCount, // Используем оптимальное число
after: this.endCursor,
type: this.loadMoreConfig?.type || 'latest',
slug: this.loadMoreConfig?.slug || '',
startIndex: this.currentIndex,
gridColumns: this.gridColumns
})
});
if (!response.ok) {
throw new Error(`Ошибка загрузки: ${response.status}`);
}
const html = await response.text();
const temp = document.createElement('div');
temp.innerHTML = html;
const newSentinel = temp.querySelector('#infinity-scroll-sentinel');
const hasNextPage = !!newSentinel;
const newEndCursor = newSentinel?.dataset.endCursor || null;
const articles = temp.querySelectorAll('article');
if (articles.length > 0) {
const fragment = document.createDocumentFragment();
articles.forEach(article => fragment.appendChild(article.cloneNode(true)));
this.grid?.appendChild(fragment);
this.currentIndex += articles.length;
this.endCursor = newEndCursor;
this.hasMore = hasNextPage;
if (this.postsCount) {
this.postsCount.textContent = ` (${this.currentIndex})`;
}
if (this.sentinel) {
this.sentinel.dataset.currentIndex = String(this.currentIndex);
this.sentinel.dataset.endCursor = newEndCursor || '';
if (!hasNextPage) {
this.showNoMorePosts();
}
}
} else {
this.hasMore = false;
this.showNoMorePosts();
}
} catch (error) {
console.error('Ошибка загрузки:', error);
this.hasMore = false;
this.showError();
} finally {
this.isLoading = false;
this.hideLoading();
}
}
private showLoading() {
if (this.loadingIndicator) {
this.loadingIndicator.style.display = 'block';
}
}
private hideLoading() {
if (this.loadingIndicator) {
this.loadingIndicator.style.display = 'none';
}
}
private showNoMorePosts() {
if (this.sentinel && this.observer) {
this.observer.unobserve(this.sentinel);
this.sentinel.style.display = 'none';
}
if (this.noMorePosts) {
this.noMorePosts.style.display = 'block';
}
}
private showError() {
if (this.noMorePosts) {
this.noMorePosts.textContent = 'Ошибка загрузки. Попробуйте обновить страницу.';
this.noMorePosts.style.display = 'block';
}
}
public destroy() {
if (this.observer && this.sentinel) {
this.observer.unobserve(this.sentinel);
}
this.observer?.disconnect();
}
}
// Инициализация
if (document.getElementById('infinity-scroll-sentinel')) {
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
new InfinityScroll();
}, { timeout: 2000 });
} else {
setTimeout(() => {
new InfinityScroll();
}, 200);
}
}
// Очистка при навигации Astro
document.addEventListener('astro:before-swap', () => {
// Здесь можно добавить логику очистки если нужно
});
</script>
</section>