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

fix logic infinity

Browse Source
This commit is contained in:
Profile Profile
2026-03-13 19:32:50 +03:00
parent 48db849ba3
commit d3b8a0bb63
4 changed files with 758 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1616
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -9,7 +9,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^9.5.1", "@astrojs/node": "^10.0.1",
"astro": "^5.16.3" "astro": "^6.0.4"
} }
} }

12
src/components/ContentGrid.astro
View File

@@ -204,6 +204,7 @@ function shouldBeLarge(index: number, columns: number): boolean {
private endCursor: string | null = null; private endCursor: string | null = null;
private currentIndex: number; private currentIndex: number;
private gridColumns: 3 | 4 = 4; private gridColumns: 3 | 4 = 4;
private loadMoreConfig: any;
// Константы для разных сеток // Константы для разных сеток
private readonly CYCLE_LENGTH = { private readonly CYCLE_LENGTH = {
@@ -228,6 +229,12 @@ function shouldBeLarge(index: number, columns: number): boolean {
this.endCursor = this.sentinel.dataset.endCursor || null; this.endCursor = this.sentinel.dataset.endCursor || null;
this.currentIndex = parseInt(this.sentinel.dataset.currentIndex || '0'); this.currentIndex = parseInt(this.sentinel.dataset.currentIndex || '0');
this.gridColumns = parseInt(this.sentinel.dataset.gridColumns || '4') as 3 | 4; 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(); this.init();
} }
@@ -398,4 +405,9 @@ function shouldBeLarge(index: number, columns: number): boolean {
}, 200); }, 200);
} }
} }
// Очистка при навигации Astro
document.addEventListener('astro:before-swap', () => {
// Здесь можно добавить логику очистки если нужно
});
</script> </script>

240
src/components/ContentGrid_4.astro
View File

@@ -11,7 +11,8 @@ export interface Props {
hasNextPage: boolean; hasNextPage: boolean;
endCursor: string | null; endCursor: string | null;
}; };
perLoad?: number; perLoad?: number; // Больше не используется, но оставляем для обратной совместимости
gridColumns?: 3 | 4;
} }
const { const {
@@ -20,13 +21,15 @@ const {
type = 'latest', type = 'latest',
slug = '', slug = '',
pageInfo = { hasNextPage: false, endCursor: null }, pageInfo = { hasNextPage: false, endCursor: null },
perLoad = 11 perLoad = 11, // Игнорируется
gridColumns = 4
} = Astro.props; } = Astro.props;
// Конфиг без perLoad, так как будем вычислять на клиенте
const loadMoreConfig = { const loadMoreConfig = {
type, type,
slug, slug,
perLoad gridColumns
}; };
function getCoauthorsNames(coauthors: any[]): string { function getCoauthorsNames(coauthors: any[]): string {
@@ -35,37 +38,46 @@ function getCoauthorsNames(coauthors: any[]): string {
return coauthors return coauthors
.map((coauthor: any) => { .map((coauthor: any) => {
const name = coauthor?.node?.name || coauthor?.name; const name = coauthor?.node?.name || coauthor?.name;
const nickname = coauthor?.node?.nickname || coauthor?.nickname; return name;
return name; // Возвращаем только имя, ссылки будут в шаблоне
}) })
.filter(Boolean) .filter(Boolean)
.join(', '); .join(', ');
} }
function shouldBeLarge(index: number): boolean { function shouldBeLarge(index: number, columns: number): boolean {
if (index < 8) return false; if (columns === 4) {
return (index - 8) % 11 === 0; // Паттерн для 4 колонок: большие на позициях 8, 19, 30, 41...
if (index < 8) return false;
return (index - 8) % 11 === 0;
} else {
// Паттерн для 3 колонок: большие на позициях 6, 14, 22, 30...
if (index < 6) return false;
return (index - 6) % 8 === 0;
}
} }
--- ---
<section class="posts-section" id="posts-section"> <section class="posts-section" id="posts-section">
<h2>
{showCount && items.length > 0 && (
<span id="posts-count"> ({items.length})</span>
)}
</h2>
<div id="posts-grid" class="posts-grid"> {showCount && items.length > 0 && (
<h2> <span id="posts-count"> ({items.length})</span></h2>
)}
<div
id="posts-grid"
class="posts-grid"
data-grid-columns={gridColumns}
class:list={[`posts-grid-${gridColumns}`]}
>
{items.map((item, index) => { {items.map((item, index) => {
const postUrl = item.uri || `/blog/${item.databaseId}`; const postUrl = item.uri || `/blog/${item.databaseId}`;
const postDate = new Date(item.date); const postDate = new Date(item.date);
const isLarge = shouldBeLarge(index); const isLarge = shouldBeLarge(index, gridColumns);
return ( return (
<article <article
class={`post-card ${isLarge ? 'post-card-large' : ''}`} class={`post-card ${isLarge ? 'post-card-large' : ''}`}
data-large-position={isLarge ? 'first' : ''} data-large={isLarge}
data-index={index} data-index={index}
itemscope itemscope
itemtype="https://schema.org/BlogPosting" itemtype="https://schema.org/BlogPosting"
@@ -85,15 +97,14 @@ function shouldBeLarge(index: number): boolean {
<div class="post-image-placeholder"></div> <div class="post-image-placeholder"></div>
)} )}
{item.categories?.nodes?.[0] && (
{item.categories?.nodes?.[0] && ( <CategoryBadge
<CategoryBadge name={item.categories.nodes[0].name}
name={item.categories.nodes[0].name} color={item.categories.nodes[0].color}
color={item.categories.nodes[0].color} href={`/${item.categories.nodes[0].slug}`}
href={`/${item.categories.nodes[0].slug}`} isNews={item.__typename === "ANew"}
isNews={item.__typename === "ANew"} />
/> )}
)}
<div class="post-content-overlay"> <div class="post-content-overlay">
<div class="post-meta-overlay"> <div class="post-meta-overlay">
@@ -121,7 +132,6 @@ function shouldBeLarge(index: number): boolean {
{item.coauthors.map((coauthor: any, i: number) => { {item.coauthors.map((coauthor: any, i: number) => {
const name = coauthor?.node?.name || coauthor?.name; const name = coauthor?.node?.name || coauthor?.name;
const nickname = coauthor?.node?.nickname || coauthor?.nickname; const nickname = coauthor?.node?.nickname || coauthor?.nickname;
console.log(nickname);
return ( return (
<span class="author-name" key={nickname || name}> <span class="author-name" key={nickname || name}>
@@ -161,40 +171,27 @@ function shouldBeLarge(index: number): boolean {
})} })}
</div> </div>
<!-- Индикатор загрузки -->
<div id="loading-indicator" class="loading-indicator" style="display: none;"> <div id="loading-indicator" class="loading-indicator" style="display: none;">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
<p>Загрузка...</p> <p>Загрузка...</p>
</div> </div>
<!-- Сообщение об окончании -->
<div id="no-more-posts" class="no-more-posts" style="display: none;"> <div id="no-more-posts" class="no-more-posts" style="display: none;">
Все статьи загружены Все статьи загружены
</div> </div>
<!-- Sentinel для Intersection Observer -->
{pageInfo.hasNextPage && ( {pageInfo.hasNextPage && (
<div <div
id="infinity-scroll-sentinel" id="infinity-scroll-sentinel"
data-end-cursor={pageInfo.endCursor} data-end-cursor={pageInfo.endCursor}
data-load-config={JSON.stringify(loadMoreConfig)} data-load-config={JSON.stringify(loadMoreConfig)}
data-current-index={items.length} data-current-index={items.length}
data-grid-columns={gridColumns}
></div> ></div>
)} )}
</section> </section>
<script> <script>
interface PageInfo {
hasNextPage: boolean;
endCursor: string | null;
}
interface LoadMoreConfig {
type: 'latest' | 'category' | 'author' | 'tag';
slug?: string;
perLoad: number; // Только perLoad, никакого first
}
class InfinityScroll { class InfinityScroll {
private grid: HTMLElement | null; private grid: HTMLElement | null;
private sentinel: HTMLElement | null; private sentinel: HTMLElement | null;
@@ -206,7 +203,19 @@ function shouldBeLarge(index: number): boolean {
private hasMore = true; private hasMore = true;
private endCursor: string | null = null; private endCursor: string | null = null;
private currentIndex: number; private currentIndex: number;
private loadMoreConfig: LoadMoreConfig; 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() { constructor() {
this.grid = document.getElementById('posts-grid'); this.grid = document.getElementById('posts-grid');
@@ -215,31 +224,16 @@ function shouldBeLarge(index: number): boolean {
this.noMorePosts = document.getElementById('no-more-posts'); this.noMorePosts = document.getElementById('no-more-posts');
this.postsCount = document.getElementById('posts-count'); this.postsCount = document.getElementById('posts-count');
// Дефолтный конфиг только с perLoad if (!this.sentinel) return;
const defaultConfig: LoadMoreConfig = {
type: 'latest', this.endCursor = this.sentinel.dataset.endCursor || null;
perLoad: 11 this.currentIndex = parseInt(this.sentinel.dataset.currentIndex || '0');
}; this.gridColumns = parseInt(this.sentinel.dataset.gridColumns || '4') as 3 | 4;
if (this.sentinel) { try {
this.endCursor = this.sentinel.dataset.endCursor || null; this.loadMoreConfig = JSON.parse(this.sentinel.dataset.loadConfig || '{}');
this.currentIndex = parseInt(this.sentinel.dataset.currentIndex || '0'); } catch {
this.loadMoreConfig = { type: 'latest', slug: '', gridColumns: this.gridColumns };
try {
// Парсим конфиг из data-атрибута
const parsedConfig = JSON.parse(this.sentinel.dataset.loadConfig || '{}');
this.loadMoreConfig = {
...defaultConfig,
...parsedConfig,
// Убеждаемся, что perLoad определен
perLoad: parsedConfig.perLoad || defaultConfig.perLoad
};
} catch {
this.loadMoreConfig = defaultConfig;
}
} else {
this.loadMoreConfig = defaultConfig;
this.currentIndex = 0;
} }
this.init(); this.init();
@@ -265,6 +259,29 @@ function shouldBeLarge(index: number): boolean {
this.observer.observe(this.sentinel); 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() { private async loadMorePosts() {
if (this.isLoading || !this.hasMore) return; if (this.isLoading || !this.hasMore) return;
@@ -272,64 +289,61 @@ function shouldBeLarge(index: number): boolean {
this.showLoading(); this.showLoading();
try { try {
// Отправляем только perLoad (никакого first) const loadCount = this.getOptimalLoadCount();
const response = await fetch('/load-more-posts', { const response = await fetch('/load-more-posts', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
perLoad: this.loadMoreConfig.perLoad, perLoad: loadCount, // Используем оптимальное число
after: this.endCursor, after: this.endCursor,
type: this.loadMoreConfig.type, type: this.loadMoreConfig?.type || 'latest',
slug: this.loadMoreConfig.slug, slug: this.loadMoreConfig?.slug || '',
startIndex: this.currentIndex startIndex: this.currentIndex,
gridColumns: this.gridColumns
}) })
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`Ошибка загрузки постов: ${response.status}`); throw new Error(`Ошибка загрузки: ${response.status}`);
} }
const html = await response.text(); const html = await response.text();
const temp = document.createElement('div'); const temp = document.createElement('div');
temp.innerHTML = html; temp.innerHTML = html;
const newSentinel = temp.querySelector('#infinity-scroll-sentinel'); const newSentinel = temp.querySelector('#infinity-scroll-sentinel');
let newEndCursor = null; const hasNextPage = !!newSentinel;
let hasNextPage = false; const newEndCursor = newSentinel?.dataset.endCursor || null;
if (newSentinel) {
newEndCursor = newSentinel.dataset.endCursor || null;
hasNextPage = true;
}
const articles = temp.querySelectorAll('article'); const articles = temp.querySelectorAll('article');
const fragment = document.createDocumentFragment();
articles.forEach(article => { if (articles.length > 0) {
fragment.appendChild(article.cloneNode(true)); const fragment = document.createDocumentFragment();
}); articles.forEach(article => fragment.appendChild(article.cloneNode(true)));
this.grid?.appendChild(fragment);
this.grid?.appendChild(fragment);
// Используем perLoad для увеличения индекса
this.currentIndex += this.loadMoreConfig.perLoad;
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.currentIndex += articles.length;
this.showNoMorePosts(); 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) { } catch (error) {
console.error('Ошибка загрузки:', error); console.error('Ошибка загрузки:', error);
@@ -379,19 +393,21 @@ function shouldBeLarge(index: number): boolean {
} }
} }
let infinityScroll: InfinityScroll | null = null; // Инициализация
if (document.getElementById('infinity-scroll-sentinel')) {
if ('requestIdleCallback' in window) { if ('requestIdleCallback' in window) {
requestIdleCallback(() => { requestIdleCallback(() => {
infinityScroll = new InfinityScroll(); new InfinityScroll();
}, { timeout: 2000 }); }, { timeout: 2000 });
} else { } else {
setTimeout(() => { setTimeout(() => {
infinityScroll = new InfinityScroll(); new InfinityScroll();
}, 200); }, 200);
}
} }
// Очистка при навигации Astro
document.addEventListener('astro:before-swap', () => { document.addEventListener('astro:before-swap', () => {
infinityScroll?.destroy(); // Здесь можно добавить логику очистки если нужно
}); });
</script> </script>