cosmopet-architecture/wp-content/themes/cosmopet/static/js/comments.js

// comment
let answerbtns = document.querySelectorAll('.answer-btn');
let answerbtnicons = document.querySelectorAll('.answer-btn svg');

// При загрузке страницы проверяем активные кнопки
document.addEventListener('DOMContentLoaded', function() {
    // Для каждой кнопки ответов
    answerbtns.forEach((answerbtn) => {
        // Находим родительский контейнер, чтобы искать ответы только для этого комментария
        const buttonParent = answerbtn.parentElement;
        
        // Находим все блоки ответов для этого комментария (после текущей кнопки)
        const answerBlocks = getRelatedAnswerBlocks(answerbtn);
        if (answerBlocks.length === 0) return;

        // Проверяем, должны ли быть ответы развернуты (если у кнопки или любого ответа есть класс active)
        const shouldBeActive = answerbtn.querySelector('svg').classList.contains('active') || 
                              Array.from(answerBlocks).some(block => block.classList.contains('active'));
        
        if (shouldBeActive) {
            // Активируем все ответы только для этого комментария
            answerBlocks.forEach(block => {
                block.classList.add('active');
            });
            
            // Обновляем состояние кнопки
            answerbtn.querySelector('svg').classList.add('active');
            
            // Обновляем текст кнопки
            let buttonText = answerbtn.querySelector('span');
            if (buttonText) {
                buttonText.textContent = 'Свернуть';
            }
        } else {
            // Скрываем все ответы
            answerBlocks.forEach(block => {
                block.classList.remove('active');
            });
            
            // Обновляем состояние кнопки
            answerbtn.querySelector('svg').classList.remove('active');
            
            // Обновляем текст кнопки в зависимости от количества ответов
            let buttonText = answerbtn.querySelector('span');
            if (buttonText) {
                const count = answerBlocks.length;
                buttonText.textContent = count === 1 ? 'ответ' : 'ответа';
            }
        }
    });
});

// Функция для получения блоков ответов, связанных с данной кнопкой
function getRelatedAnswerBlocks(answerBtn) {
    // Получаем следующий блок комментариев (если он есть)
    let currentElement = answerBtn;
    let answerBlocks = [];
    
    // Собираем все блоки ответов до следующего основного комментария или кнопки ответов
    while ((currentElement = currentElement.nextElementSibling) !== null) {
        if (currentElement.classList.contains('comment-block') && !currentElement.classList.contains('answer-block')) {
            // Достигли следующего основного комментария, прерываем сбор
            break;
        } else if (currentElement.classList.contains('answer-btn')) {
            // Достигли следующей кнопки ответов, прерываем сбор
            break;
        } else if (currentElement.classList.contains('answer-block')) {
            // Это блок ответа, добавляем в коллекцию
            answerBlocks.push(currentElement);
        }
    }
    
    return answerBlocks;
}

// Обработчики нажатия на кнопки ответов
answerbtns.forEach((answerbtn) => {
    answerbtn.addEventListener('click', () => {
        // Получаем все блоки ответов для этого комментария 
        const answerBlocks = getRelatedAnswerBlocks(answerbtn);
        if (answerBlocks.length === 0) return;
        
        // Определяем, развернуты ли ответы сейчас
        const isCurrentlyActive = answerbtn.querySelector('svg').classList.contains('active');
        
        // Переключаем состояние
        if (isCurrentlyActive) {
            // Скрываем все ответы
            answerBlocks.forEach(block => {
                block.classList.remove('active');
            });
            
            // Обновляем состояние кнопки
            answerbtn.querySelector('svg').classList.remove('active');
            
            // Обновляем текст кнопки
            let buttonText = answerbtn.querySelector('span');
            if (buttonText) {
                const count = answerBlocks.length;
                buttonText.textContent = count === 1 ? 'ответ' : 'ответа';
            }
        } else {
            // Показываем все ответы
            answerBlocks.forEach(block => {
                block.classList.add('active');
            });
            
            // Обновляем состояние кнопки
            answerbtn.querySelector('svg').classList.add('active');
            
            // Обновляем текст кнопки
            let buttonText = answerbtn.querySelector('span');
            if (buttonText) {
                buttonText.textContent = 'Свернуть';
            }
        }
    });
});

// Обработка нажатия на кнопку "Ответить" на комментарий
document.addEventListener('DOMContentLoaded', function() {
    // Получаем все кнопки "Ответить" на странице
    const replyButtons = document.querySelectorAll('.reply-to-comment');
    
    // Добавляем обработчик на каждую кнопку
    replyButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Получаем ID комментария, на который отвечаем
            const commentId = this.getAttribute('data-comment-id');
            const postId = this.getAttribute('data-post-id');
            const replyToName = this.getAttribute('data-reply-to');
            
            // Получаем контейнер для формы ответа 
            const replyFormContainer = document.getElementById('reply-form-' + commentId);
            
            // Если форма уже открыта, скрываем её
            if (replyFormContainer.style.display !== 'none') {
                replyFormContainer.style.display = 'none';
                return;
            }
            
            // Скрываем все открытые формы ответов
            document.querySelectorAll('.reply-form-container').forEach(container => {
                container.style.display = 'none';
            });
            
            // Клонируем основную форму комментариев
            const originalForm = document.getElementById('commentform');
            if (originalForm) {
                const clonedForm = originalForm.cloneNode(true);
                
                // Изменяем атрибуты формы для ответа
                clonedForm.id = 'commentform-reply-' + commentId;
                
                // Добавляем скрытое поле с ID родительского комментария
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'comment_parent';
                hiddenInput.value = commentId;
                clonedForm.appendChild(hiddenInput);
                
                // Изменяем заголовок формы
                const formTitle = clonedForm.querySelector('.comment-reply-title');
                if (formTitle) {
                    formTitle.textContent = 'Ответить ' + replyToName;
                }
                
                // Добавляем кнопку отмены
                const cancelButton = document.createElement('button');
                cancelButton.type = 'button';
                cancelButton.className = 'cancel-reply-btn';
                cancelButton.textContent = 'Отменить';
                cancelButton.addEventListener('click', function() {
                    replyFormContainer.style.display = 'none';
                });
                
                // Добавляем кнопку отмены в форму
                const submitContainer = clonedForm.querySelector('.form-submit');
                if (submitContainer) {
                    submitContainer.appendChild(cancelButton);
                }
                
                // Очищаем контейнер и добавляем клонированную форму
                replyFormContainer.innerHTML = '';
                replyFormContainer.appendChild(clonedForm);
                
                // Показываем форму
                replyFormContainer.style.display = 'block';
                
                // Фокусируемся на текстовой области
                const textarea = clonedForm.querySelector('textarea');
                if (textarea) {
                    textarea.focus();
                }
            }
        });
    });
});