User:Polygnotus/Scripts/NewCommentsNavigator.js

// Wikipedia Highlighted Comments Navigator
// Add to your common.js to navigate through unread highlighted comments

$(document).ready(function() {
    // Wait a bit for the page to fully load and highlights to be applied
    setTimeout(function() {
        initCommentNavigator();
    }, 1000);
});

function initCommentNavigator() {
    const highlights = $('.ext-discussiontools-init-highlight');
    
    // Only show navigator if there are more than 1 highlighted comment
    if (highlights.length <= 1) {
        return;
    }
    
    let currentIndex = 0;
    
    // Create navigation controls
    const navHtml = `
        <div id="comment-navigator" style="
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #f8f9fa;
            border-top: 2px solid #a2a9b1;
            padding: 8px 20px;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        ">
            <button id="prev-comment" type="button" style="
                background: #0645ad;
                color: white;
                border: none;
                border-radius: 3px;
                padding: 6px 12px;
                cursor: pointer;
                font-size: 14px;
                min-width: 60px;
            ">←</button>
            
            <span style="
                font-weight: bold;
                color: #222;
                font-size: 16px;
                min-width: 80px;
                text-align: center;
            "><span id="comment-counter">1</span> / ${highlights.length}</span>
            
            <button id="next-comment" type="button" style="
                background: #0645ad;
                color: white;
                border: none;
                border-radius: 3px;
                padding: 6px 12px;
                cursor: pointer;
                font-size: 14px;
                min-width: 60px;
            ">→</button>
            
            <button id="close-navigator" type="button" style="
                background: #a2a9b1;
                color: #222;
                border: none;
                border-radius: 3px;
                padding: 4px 8px;
                cursor: pointer;
                font-size: 12px;
                margin-left: 20px;
            ">✕</button>
        </div>
    `;
    
    $('body').append(navHtml);
    
    // Function to update the current comment selection
    function updateSelection(index) {
        // Remove outline from all highlights
        highlights.css('outline', '');
        
        // Add outline to current highlight
        const currentHighlight = highlights.eq(index);
        currentHighlight.css('outline', '3px solid #0645ad');
        
        // Scroll to the current highlight
        $('html, body').animate({
            scrollTop: currentHighlight.offset().top - 100
        }, 300);
        
        // Update counter
        $('#comment-counter').text(index + 1);
        
        // Update button states
        $('#prev-comment').prop('disabled', index === 0);
        $('#next-comment').prop('disabled', index === highlights.length - 1);
    }
    
    // Initialize with first comment
    updateSelection(currentIndex);
    
    // Event handlers
    $('#prev-comment').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (currentIndex > 0) {
            currentIndex--;
            updateSelection(currentIndex);
        }
        return false;
    });
    
    $('#next-comment').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        if (currentIndex < highlights.length - 1) {
            currentIndex++;
            updateSelection(currentIndex);
        }
        return false;
    });
    
    $('#close-navigator').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        // Remove outlines and hide navigator
        highlights.css('outline', '');
        $('#comment-navigator').remove();
        return false;
    });
    
    // Keyboard shortcuts
    $(document).keydown(function(e) {
        // Only work if navigator is visible and not typing in an input
        if ($('#comment-navigator').is(':visible') && !$(e.target).is('input, textarea')) {
            if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
                e.preventDefault();
                $('#prev-comment').click();
            } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                e.preventDefault();
                $('#next-comment').click();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                $('#close-navigator').click();
            }
        }
    });
    
    // Auto-hide after 30 seconds of inactivity
    let hideTimer = setTimeout(function() {
        $('#comment-navigator').fadeOut();
    }, 30000);
    
    // Reset timer on interaction
    $('#comment-navigator').on('mouseenter click', function() {
        clearTimeout(hideTimer);
        $(this).fadeIn();
        hideTimer = setTimeout(function() {
            $('#comment-navigator').fadeOut();
        }, 30000);
    });
    
    console.log('Comment navigator initialized with ' + highlights.length + ' highlighted comments');
}