MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

/* Automatically convert all H2 headings into tap-to-expand accordions */
$(document).ready(function() {
    // Only run this on standard content pages
    if (mw.config.get('wgIsArticle') && mw.config.get('wgAction') === 'view') {
        
        // Find every H2 heading on the page
        $('h2').each(function() {
            var $heading = $(this);
            
            // Skip the main page title or references header if needed
            if ($heading.find('#mw-toc-heading').length > 0) return;

            // Give the heading an arrow indicator and style it to look clickable
            $heading.css({ 'cursor': 'pointer', 'user-select': 'none' });
            $heading.prepend('<span class="mw-accordion-arrow" style="display:inline-block; margin-right:10px; transition: transform 0.2s;">▶</span>');

            // Gather all content between this H2 and the next H2
            var $contentElements = $heading.nextUntil('h2');

            // Wrap all that content inside a collapsible container that starts hidden
            var $container = $('<div class="mw-automated-accordion-content"></div>');
            $contentElements.wrapAll($container);
            $heading.next('.mw-automated-accordion-content').hide();

            // When someone clicks the heading, toggle the visibility of the content
            $heading.on('click', function() {
                var $content = $(this).next('.mw-automated-accordion-content');
                var $arrow = $(this).find('.mw-accordion-arrow');
                
                $content.slideToggle(200);
                
                // Rotate the arrow indicator down when open
                if ($content.is(':visible')) {
                    $arrow.css('transform', 'rotate(90deg)');
                } else {
                    $arrow.css('transform', 'rotate(0deg)');
                }
            });
        });
    }
});

/* Securely render Cloudflare R2 links into responsive browser audio elements */
mw.hook('wikipage.content').add(function($content) {
    $content.find('.cloud-audio-player').each(function() {
        var $element = $(this);
        var audioUrl = $element.attr('data-url');
        
        if (audioUrl) {
            $element.html(
                '<audio controls style="width: 100%; margin-top: 8px; display: block;">' +
                '<source src="' + encodeURI(audioUrl) + '" type="audio/mpeg">' +
                'Your browser does not support the audio element.' +
                '</audio>'
            );
        }
    });
});