js/app.js - master - yakovsmonarch/Blog

js/app.js
122 строки4 KB
yakovsmonarch
Добавил боковое меню с новым разделом.
29 июн 2026, 03:54
29 июн 2026, 03:5442f7726
class Blog {
    #appElement;
    #posts;

    constructor(containerId) {
        this.#appElement = document.getElementById(containerId);
    }

    async init() {
        try {
            await this.#loadPosts();
            this.#renderPosts();
        } catch (error) {
            console.error('Ошибка:', error);
            this.#showError('Ошибка загрузки записей. Проверьте файл');
        }
    }

    async #loadPosts() {
        const response = await fetch(this.getPostsPath());
        
        if (!response.ok) {
            throw new Error('Ошибка загрузки данных');
        }
        
        this.#posts = await response.json();
    }

    getPostsPath() {
        throw new Error('Метод должен быть переопределен в подклассе');
    }

    #renderPosts() {
        if (this.#posts.length === 0) {
            this.#appElement.innerHTML = '<div class="no-posts">Пока нет записей в блоге</div>';
            return;
        }
        
        const sortedPosts = this.#sortPosts(this.#posts);
        const postsHtml = sortedPosts.map(post => this.#renderPost(post)).join('');
        
        this.#appElement.innerHTML = `
            <div class="posts-list">
                ${postsHtml}
            </div>
        `;
    }

    #renderPost(post) {
        return `
            <article class="post">
                <div class="post-header">
                    <h2 class="post-title">${this.#escapeHtml(post.title)}</h2>
                    <div class="post-date">${this.#formatDate(post.date)}</div>
                </div>
                <div class="post-content">${this.#escapeHtml(post.content)}</div>
            </article>
        `;
    }

    #sortPosts(posts) {
        return posts.sort((a, b) => new Date(b.date) - new Date(a.date));
    }

    #escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    #formatDate(dateString) {
        const date = new Date(dateString);
        const options = { year: 'numeric', month: 'long', day: 'numeric' };
        return date.toLocaleDateString('ru-RU', options);
    }

    #showError(message) {
        this.#appElement.innerHTML = `<div class="no-posts">${message}</div>`;
    }
}

class MainBlog extends Blog {
    getPostsPath() {
        return 'data/posts.json';
    }
}

class ChallengeBlog extends Blog {
    getPostsPath() {
        return 'data/challenges/4am-up.json';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const mainBlog = new MainBlog('main-app');
    const challengeBlog = new ChallengeBlog('challenge-app');
    
    mainBlog.init();
    challengeBlog.init();
    
    // Обработка переключения меню
    document.querySelectorAll('.menu-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Убираем активный класс со всех ссылок
            document.querySelectorAll('.menu-link').forEach(l => l.classList.remove('active'));
            
            // Добавляем активный класс текущей ссылке
            this.classList.add('active');
            
            // Скрываем все секции
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // Показываем нужную секцию
            const sectionId = this.getAttribute('data-section');
            document.getElementById(sectionId).classList.add('active');
        });
    });
});