blog/themes/Ying/assets/js/modules/artalk.js

// Global Artalk Initialization Function (Supports PJAX)
window.initArtalk = function() {
    if (!document.querySelector("#Comments")) return;
    
    // Check if configuration exists
    if (!window.artalkConfig) {
        console.warn('window.artalkConfig is not defined. Skipping Artalk init.');
        return;
    }

    // Check if Artalk library is loaded
    if (typeof Artalk === 'undefined') {
        console.warn('Artalk library is not loaded yet. Waiting for bundle...');
        return;
    }
    
    try {
        var artalk = Artalk.init(window.artalkConfig);
        window.artalk = artalk; // Expose to window for other scripts

        // Handle list-loaded event for lazy loading avatars and animations
        artalk.on('list-loaded', function() {
            // Restore AI Comment if configured
            if (window.artalkConfig.aiComment) {
                var ai = window.artalkConfig.aiComment;
                var listBody = document.querySelector('.atk-list .atk-list-body');
                if (listBody && !listBody.querySelector('.atk-ai-comment')) {
                    var aiCommentHtml = `
                        <div class="atk-comment-wrap atk-comment atk-ai-comment" id="atk-comment-ai">
                            <div class="atk-avatar" uk-scrollspy="cls: uk-animation-scale-up; delay: 200">
                                <img src="${ai.avatar}" alt="${ai.name}">
                            </div>
                            <div class="atk-main" uk-scrollspy="cls: uk-animation-slide-right-small; delay: 300">
                                <div class="atk-header">
                                    <span class="atk-nick" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 350">${ai.name}</span>
                                    <span class="atk-badge">${window.artalkConfig.aiBadge || 'AI'}</span>
                                    <span class="atk-date">${ai.date}</span>
                                </div>
                                <div class="atk-body">
                                    <div class="atk-content">${ai.content}</div>
                                </div>
                            </div>
                        </div>
                    `;
                    listBody.insertAdjacentHTML('afterbegin', aiCommentHtml);
                    
                    // Hide "No Comment" placeholder if it exists
                    var noComment = document.querySelector('.atk-list-no-comment');
                    if (noComment) {
                        noComment.style.display = 'none';
                    }
                }
            }

            // Add staggered animation to the comment list
            var list = document.querySelector('.atk-list');
            if (list) {
                list.setAttribute('uk-scrollspy', 'target: > .atk-comment-wrap; cls: uk-animation-slide-bottom-small; delay: 50');
            }

            // Apply granular animations to inner elements
            document.querySelectorAll('.atk-comment-wrap:not(.atk-ai-comment)').forEach(function(wrap) {
                var avatar = wrap.querySelector('.atk-avatar');
                if (avatar) avatar.setAttribute('uk-scrollspy', 'cls: uk-animation-scale-up; delay: 200');
                
                var main = wrap.querySelector('.atk-main');
                if (main) main.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-right-small; delay: 300');
                
                var nick = wrap.querySelector('.atk-nick');
                if (nick) nick.setAttribute('uk-scrollspy', 'cls: uk-animation-slide-top-small; delay: 350');
            });

            // Find all avatars in the comment list
            // We let lazyload.js handle the avatars automatically by calling lazyLoadAgain()
            // which will find these new images, set the placeholder, and observe them.
            
            // Trigger lazy load update
            if (window.lazyLoadAgain) {
                window.lazyLoadAgain();
            }

            // Force hide "No Comment" if AI comment exists
            if (window.artalkConfig.aiComment) {
                var checkNoComment = setInterval(function() {
                    var noComment = document.querySelector('.atk-list-no-comment');
                    var aiComment = document.querySelector('.atk-ai-comment');
                    if (aiComment && noComment && noComment.style.display !== 'none') {
                        noComment.style.display = 'none';
                    }
                    if (!document.querySelector('#Comments')) {
                        clearInterval(checkNoComment);
                    }
                }, 500);
                
                // Clear interval after 10 seconds to save resources
                setTimeout(function() { clearInterval(checkNoComment); }, 10000);
            }
        });
        
    } catch (e) {
        console.error('Artalk init failed:', e);
    }
};