MediaWiki:Common.js: Difference between revisions

Revision as of 19:42, 5 January 2026

$(document).ready(function () {
// COLLAPSIBLE HEADERS
    $(".collapsible-wrapper").each(function () {
        var wrapper = $(this);
        var titleContent = wrapper.find(".collapsible-title-content");
        var bodyContent = wrapper.find(".collapsible-body-content");
        if (titleContent.length === 0 || bodyContent.length === 0) return;
        var startsOpen = wrapper.data("state") === "open";
        var titleHTML = titleContent.html();
        var bodyHTML = bodyContent.html();
        var header = $('<div class="collapsible-header"></div>');
        var content = $('<div class="collapsible-content"></div>');
        if (startsOpen) header.addClass("open");
        var arrow = startsOpen ? "▲" : "▼";
        header.append(titleHTML);
        header.append('<span class="collapse-toggle" aria-hidden="true">' + arrow + '</span>');
        content.html(bodyHTML);
        if (!startsOpen) content.hide();
        wrapper.replaceWith(header.add(content));
        
        // Inicializar elementos mw-collapsible dentro del contenido
        content.find('.mw-collapsible').each(function() {
            if (typeof mw !== 'undefined' && mw.hook) {
                mw.hook('wikipage.content').fire($(this));
            }
        });
        
        header.on("click", function () {
            content.slideToggle(150);
            header.toggleClass("open");
            var icon = header.hasClass("open") ? "▲" : "▼";
            header.find(".collapse-toggle").text(icon);
        });
    });




// COLLAPSIBLE NOTES SECTION
    // Find the Notes header div (the one with background-color:#0e98ba)
    // It contains "Notes" text and "BACK TO TOP" link
    // Try multiple selectors to find it
    var notesHeader = $('div[style*="background-color:#0e98ba"]').filter(function() {
        var text = $(this).text();
        return text.indexOf('Notes') !== -1 && text.indexOf('BACK TO TOP') !== -1;
    });
    
    // Alternative: look for div that comes before mwcollapsible and contains Notes
    if (notesHeader.length === 0) {
        $('div.mwcollapsible').each(function() {
            var prev = $(this).prev('div');
            if (prev.length > 0 && prev.text().indexOf('Notes') !== -1) {
                notesHeader = prev;
                return false; // break
            }
        });
    }
    
    if (notesHeader.length === 0) return;
    
    // Add class for CSS targeting
    notesHeader.addClass('notes-header-wrapper');
    
    // The references container is the next div with class mwcollapsible
    var notesContent = notesHeader.next('div.mwcollapsible');
    
    if (notesContent.length === 0) return;
    
    // Add collapse toggle icon to the header
    var leftDiv = notesHeader.find('div').first();
    if (leftDiv.length > 0) {
        // Add the toggle icon before "Notes"
        var toggleIcon = $('<span class="notes-collapse-toggle">▼</span>');
        leftDiv.prepend(toggleIcon);
    }
    
    // Make the header clickable
    notesHeader.css({
        'cursor': 'pointer',
        'user-select': 'none',
        '-webkit-user-select': 'none',
        '-moz-user-select': 'none',
        '-ms-user-select': 'none'
    });
    
    // Initial state: collapsed
    notesContent.hide();
    var isOpen = false;
    
    // Update the icon based on the state
    function updateIcon() {
        var icon = isOpen ? "▲" : "▼";
        notesHeader.find('.notes-collapse-toggle').text(icon);
    }
    
    updateIcon();
    
    // Handle clicks on the header
    notesHeader.on('click', function(e) {
        // Check if the click was on the "BACK TO TOP" link or any of its children
        var target = $(e.target);
        var backToTopLink = notesHeader.find('a[href="#top"]');
        
        // If clicking on the link or any element inside it (including font tags), allow normal link behavior
        if (target.is('a[href="#top"]') || 
            target.closest('a[href="#top"]').length > 0 ||
            (backToTopLink.length > 0 && backToTopLink.has(target).length > 0)) {
            // Don't prevent default - let the link work
            return;
        }
        
        // Prevent default behavior for other clicks
        e.preventDefault();
        e.stopPropagation();
        
        // Toggle the content
        notesContent.slideToggle(150);
        isOpen = !isOpen;
        updateIcon();
    });
});