MediaWiki:Common.js

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

document.addEventListener("DOMContentLoaded", function () {
    // Select the h2 > #Steps element
    const stepsHeader = document.querySelector("h2 > #Steps");
    console.log("Steps header:", stepsHeader); // Log the stepsHeader to check if it's found
    
    if (stepsHeader) {
        // Find the adjacent ordered list
        const orderedList = stepsHeader.parentElement.nextElementSibling;
        console.log("Adjacent ordered list:", orderedList); // Log the ordered list to ensure it's the right element

        // Ensure the next sibling is an <ol>
        if (orderedList && orderedList.tagName === "OL") {
            // Loop through each <li> in the <ol>
            orderedList.querySelectorAll("li").forEach((listItem, index) => {
                console.log(`Processing <li> ${index + 1}:`, listItem.textContent.trim()); // Log each <li> before modification
                
                // Split the text content into the first sentence and the rest
                const text = listItem.textContent.trim();
                const firstSentenceEnd = text.indexOf(".") + 1; // Find the end of the first sentence

                if (firstSentenceEnd > 0) {
                    // Extract the first sentence and the remaining content
                    const firstSentence = text.slice(0, firstSentenceEnd);
                    const restOfText = text.slice(firstSentenceEnd).trim();

                    // Replace the <li> content with the formatted version
                    listItem.innerHTML = `<strong>${firstSentence}</strong> ${restOfText}`;
                    console.log(`Updated <li> ${index + 1}:`, listItem.innerHTML); // Log the updated <li>
                } else {
                    console.log(`No sentence found in <li> ${index + 1}`); // Log if no period is found
                }
            });
        } else {
            console.log("No <ol> found as the adjacent sibling of #Steps"); // Log if no <ol> is found
        }
    } else {
        console.log("No h2 > #Steps element found"); // Log if the stepsHeader is not found
    }
});