User:Diegodlh/search-wpl.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.
// Add a link next to the search bar to search in The Wikipedia Library
// This work is released under the terms of GPL-3.0 or any later version.
// mw.loader.using( 'mediawiki.config', function () {
    $( document ).ready( function () {

        const searchButton = createButton("searchform");
    
        updateUI(document.getElementById("searchform"), searchButton);

        // Vector 2022
        if (mw.config.get("skin") === "vector-2022") {
            // Monitor changes to search form and update UI again when needed
            const observer = new MutationObserver((mutationList, observer) => {
                for (const mutation of mutationList) {
                    if (mutation.type === "childList") {
                        if (mutation.addedNodes.length > 0) {
                            const addedNode = mutation.addedNodes[0];
                            if (
                                addedNode.nodeName === "DIV" &&
                                addedNode.classList.contains("cdx-typeahead-search")
                            ) {
                                observer.disconnect();
                                updateUI(document.getElementById("searchform"), searchButton);
                            }
                        }
                    }
                }
            });
            observer.observe(
                document.getElementById("p-search"),
                { childList: true, subtree: true }
            );
        }

        // Special:Search
        if (mw.config.get("wgCanonicalSpecialPageName") === "Search") {
            const specialSearchButton = createButton("search");
            updateUI(
                document.getElementById("mw-search-top-table").firstChild,
                specialSearchButton
            );            ;
        };
    } );
// });

const titles = {
    "en": "Search in The Wikipedia Library",
    "es": "Buscar en La Bibioteca de Wikipedia",
    "de": "Suche in The Wikipedia Library",
    "fr": "Recherche dans La Bibliothèque Wikipédia",
    "pt": "Pesquisar em A Biblioteca da Wikipédia",
};

function createButton(searchFormElementID) {
    const a = document.createElement("a");
    a.href = "#";
    a.title = titles[mw.config.get("wgContentLanguage")] ?? titles["en"];
    $(a).css("margin-left", "10px")
    $(a).css("display", "flex")
    $(a).css("align-items", "center")
    
    const img = document.createElement("img");
    img.src = "https://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia_Library_owl.svg"
    $(img).css("height", "25px")
    a.append(img);

    $(a).click(function(event) {
        event.preventDefault();
        doSearch(searchFormElementID);
    });
    return a;
}

function updateUI(searchFormElement, searchButton) {
    const container = searchFormElement.parentElement;
    $(container).append(searchButton);
    $(container).css("display", "flex");
    $(searchform).css("flex-grow", 1)
    // Vector Legacy
    if (searchFormElement.classList.contains("vector-search-box-form")) {
        $(searchButton).css("margin-top", "0.5em")
    }
};

function doSearch(searchFormElementID) {
    var query = $( `#${searchFormElementID} [name=search]` )[0].value;
    window.open(
        'https://wikipedialibrary.wmflabs.org/search/?q=' + encodeURIComponent(query),
        '_blank'
    )
};

/*
Known issues:
- No accessibility.
- No left-to-right languages support.
- No mobile support.
- In Vector 2022, if window is too narrow button must be clicked twice.
*/