MediaWiki:Common.js: Difference between revisions

Revision as of 02:06, 25 April 2025

/* JavaScript brought over from Wikipedia appears first. JS code written for our wiki comes second, under the heading CUSTOM ONI WIKI ADDITIONS. */

/* WIKIPEDIA CARRY-OVERS */
/* The original code on Wikipedia's Common.js page should be checked once in a while for updates to, or removal of, this code */

/** extract a URL parameter from the current URL **********
 * From [[en:User:Lupin/autoedit.js]]
 *
 * paramName  : the name of the parameter to extract
 */
function getURLParamValue(paramName, url) 
{
    if (typeof (url) == 'undefined' || url === null)
        url = document.location.href;
    var cmdRe = RegExp('[&?]' + paramName + '=([^&#]*)'); // Stop at hash
    var m = cmdRe.exec(url);
    if (m && m.length > 1)
        return decodeURIComponent(m[1]);
    return null;
}

/** &withJS= URL parameter *******
 * Allow to try custom scripts from MediaWiki space 
 * without editing [[Special:Mypage/monobook.js]]
 */
var extraJS = getURLParamValue("withJS");
if (extraJS && extraJS.match("^MediaWiki:[^&<>=%]*\.js$"))
{
    mw.loader.load('/w/index.php?title=' + extraJS + '&action=raw&ctype=text/javascript');
}

// TODO: Get this working again
/* If we're on the Search page, load the script that augments that page */
if (mw.config.get('wgPageName') === 'Special:Search')
{
    mw.loader.load('/w/index.php?title=MediaWiki:Common.js/search.js&action=raw&ctype=text/javascript');
}

/** Collapsible tables *********************************************************
 *
 *  Description: Allows tables to be collapsed, showing only the header. See
 *               [[Wikipedia:NavFrame]].
 *  Maintainers: [[User:R. Koot]]
 */

var autoCollapse = 2;
var collapseCaption = "hide";
var expandCaption = "show";

function collapseTable(tableIndex)
{
    var Button = document.getElementById("collapseButton" + tableIndex);
    var Table = document.getElementById("collapsibleTable" + tableIndex);

    if (!Table || !Button)
    {
        return false;
    }

    var Rows = Table.rows;

    if (Button.firstChild.data == collapseCaption)
    {
        for (var i = 1; i < Rows.length; i++)
        {
            Rows[i].style.display = "none";
        }
        Button.firstChild.data = expandCaption;
    }
    else
    {
        for (var i = 1; i < Rows.length; i++)
        {
            Rows[i].style.display = Rows[0].style.display;
        }
        Button.firstChild.data = collapseCaption;
    }
}
function createCollapseButtons()
{
    var tableIndex = 0;
    var NavigationBoxes = new Object();
    var Tables = document.getElementsByTagName("table");

    for (var i = 0; i < Tables.length; i++)
    {
        if ($(Tables[i]).hasClass("collapsible"))
        {
            /* only add button and increment count if there is a header row to work with */
            var HeaderRow = Tables[i].getElementsByTagName("tr")[0];
            if (!HeaderRow) continue;
            var Header = HeaderRow.getElementsByTagName("th")[0];
            if (!Header) continue;

            NavigationBoxes[tableIndex] = Tables[i];
            Tables[i].setAttribute("id", "collapsibleTable" + tableIndex);

            var Button     = document.createElement("span");
            var ButtonLink = document.createElement("a");
            var ButtonText = document.createTextNode(collapseCaption);

            Button.className = "collapseButton"; // styles are declared in Common.css

            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute("id", "collapseButton" + tableIndex);
            ButtonLink.setAttribute("href", "#");
            $(ButtonLink).click(new Function("evt", "collapseTable(" + tableIndex + " ); return killEvt(evt);"));
            ButtonLink.appendChild(ButtonText);

            Button.appendChild(document.createTextNode("["));
            Button.appendChild(ButtonLink);
            Button.appendChild(document.createTextNode("]"));

            Header.insertBefore(Button, Header.childNodes[0]);
            tableIndex++;
        }
    }

    for (var i = 0; i < tableIndex; i++)
    {
        if ($(NavigationBoxes[i]).hasClass("collapsed") || (tableIndex >= autoCollapse && $(NavigationBoxes[i]).hasClass("autocollapse")))
        {
            collapseTable(i);
        } 
        else if ($(NavigationBoxes[i]).hasClass("innercollapse"))
        {
            var element = NavigationBoxes[i];
            while (element = element.parentNode)
            {
                if ($(element).hasClass("outercollapse"))
                {
                    collapseTable(i);
                    break;
                }
            }
        }
    }
}
$(createCollapseButtons);

/* CUSTOM ONI WIKI ADDITIONS */

/* Focus us on the Search box if we're on the Main Page, so we can immediately start typing */
if (mw.config.get('wgIsMainPage'))
{
    $(function()
    {
        $('#searchInput').focus();
    });
}

/** Hover tables *********************************************************
 *
 *  Description: Allows tables to use mouse-over to provide explanation of
 *               the pointed-to content.
 *  Maintainers: [[User:Iritscen]]
 */
function showDescrip(typeID, show_or_not)
{
    var DescripPanel = document.getElementsByClassName("hovertable_descrip")[0]; /* only get 1st one on page to keep things simple */
    var Descrips = DescripPanel.getElementsByTagName("span");

    if (!DescripPanel || !Descrips)
        return false;

    for (var i = 0; i < Descrips.length; i++)
    {
        if (Descrips[i].id == typeID)
        {
            if (show_or_not)
                Descrips[i].style.display = "block";
            else
                Descrips[i].style.display = "none";
        }
    }
}
function initHoverTables()
{
    var Tables = document.getElementsByClassName("hovertable");
    if (!Tables)
        return false;

    for (var i = 0; i < Tables.length; i++)
    {
        var Cells = Tables[i].getElementsByTagName("td");
        if (!Cells) continue;

        for (var j = 0; j < Cells.length; j++)
        {
            if ($(Cells[j]).hasClass("hovercell"))
            {
                $(Cells[j]).mouseover(new Function("evt", "showDescrip(this.id, true);"));
                $(Cells[j]).mouseout(new Function("evt", "showDescrip(this.id, false);"));
            }
        }
    }
}
$(initHoverTables);

/** Hover GIFs *********************************************************
 *
 *  Description: Allows GIFs to only animate upon mouse-over.
 *  
 *  Maintainers: [[User:Iritscen]]
 */
function swapImage(gifID, show_gif)
{
    var gif_span = document.getElementById(gifID);
    var gif_image = gif_span.getElementsByClassName("image")[0];
    var gif_img = gif_image.getElementsByTagName("img")[0];
    var gif_src = gif_img.src;

    if (!gif_img)
        return false;

    if (show_gif)
        gif_img.src = gif_src.replace('.jpg', '.gif');
    else
        gif_img.src = gif_src.replace('.gif', '.jpg');
}
function initHoverGIFs()
{
    var gifs = document.getElementsByClassName("hovergif");

    if (!gifs)
        return false;

    for (var i = 0; i < gifs.length; i++)
    {
        $(gifs[i]).mouseover(swapImage(this.id, true));
        $(gifs[i]).mouseout(swapImage(this.id, false));
    }
}
$(initHoverGIFs);

/***** autosort_sortable ********
 * Auto-sorts sortable tables by a given column (why is this not built-in?!)
 * You must opt into this feature by placing "autosort" in the list of
 * the table's classes along with "sortable"
 *
 *  Maintainers: [[User:Iritscen]]
 */
// For some reason, the arrow buttons and headerSort classes are not attached to sortable tables immediately upon the "load" event, and we need those, so we wait a bit before trying to sort
function sortTimer()
{
    setTimeout(function()
    {
        sortSortableTables();
    }, (1 * 1000));
}
function sortSortableTables()
{
    console.log("Sorting the autosort tables.");
    // Iterate over all <div> elements
    var divs = document.getElementsByTagName("div");
    if (!divs) return;
    for (var i = 0; i < divs.length; i++)
    {
        var theDiv = divs[i];
        var tables = theDiv.getElementsByTagName("table");
        if (!tables) continue;
        for (var j = 0; j < tables.length; j++)
        {
            var theTable = tables[j];
            // If we found a sortable table that is asking for autosort...
            if ($(theTable).hasClass("sortable") && $(theTable).hasClass("autosort"))
            {
                var sortColumnNum = 1, curColumnNum = 0;

                // First check if there is any by-column-x class at all, then take the time to figure out the value of x
                var patt = /by-column/;
                if (patt.test(theTable.className))
                {
                    for (var col = 1; col < 10; col++)
                    {
                        var colOption = "by-column-" + col;
                        if ($(theTable).hasClass(colOption))
                        {
                            //console.log("Table " + j + " wants to sort by column " + col);
                            sortColumnNum = col;

                            // Now look for sort button and click it
                            var allTHs = theTable.getElementsByTagName("th");
                            if (!allTHs)
                            {
                                console.log("Failed to get 'th' elements!");
                                continue;
                            }
                            for (var k = 0; k < allTHs.length; k++)
                            {
                                //console.log("Class names for 'th' # " + k + " are " + allTHs[k].className);
                                if ($(allTHs[k]).hasClass("headerSort"))
                                {
                                    curColumnNum++;
                                    if (curColumnNum == sortColumnNum)
                                    {
                                        console.log("Clicking sort button (ID " + k + ") for column " + sortColumnNum);
                                        $(allTHs[k]).trigger("click"); // use jQuery's trigger() to send click event to this arrow
                                        return;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
$(sortTimer);