MediaWiki:Common.js

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

// adds the dovedale-theme-light/dovedale-theme-dark classes automatically to
// the body element, depending on the currently used colour scheme

var lastTheme = "";
const matchColorScheme = window.matchMedia("(prefers-color-scheme: dark)");

/**
 * Attempts to detect the currently set theme.
 * @returns either 'light' or 'dark'
 */
function detectTheme() {
    var documentClasses = document.documentElement.classList;
    if (documentClasses.contains("skin-citizen-dark")) {
        return "dark";
    }
    if (documentClasses.contains("skin-citizen-light")) {
        return "light";
    }
    return matchColorScheme.matches ? "dark" : "light";
}

/**
 * Handles a theme update and sets the classes accordingly.
 * @param theme The theme that is now applied.
 */
function handleThemeUpdate(theme) {
    document.body.classList.remove("dovedale-theme-dark");
    document.body.classList.remove("dovedale-theme-light");
    document.body.classList.add("dovedale-theme-" + theme);
}

handleThemeUpdate(detectTheme());

/* Analytics */
mw.loader.load('//check.dovedale.wiki/latest.js');

/* Tally form embed */
mw.hook('wikipage.content').add(function($content) {
    if (!$content) {
        return;
    }
    $content.find('.tallyforms').each(function() {
        var $this = $(this),
            id = $this.attr('data-forms-id'),
            css = {
                width: 'inherit',
                height: 'inherit',
                border: 0
            };
        $this.html(
            $('<iframe>', {
                src: 'https://tally.so/embed/' + id ,
                css: css
            })
        );
    });
});

/* PDF Functionality */
var pdfs = document.querySelectorAll(".mw-parser-output .pdf");
pdfs.forEach(function(e) {
    const src = e.dataset.src;
   
    // attempt to create a URL based on the the data-src attribute
    // uses the current url to transfer a relative into a full URL
    const url = new URL(src, window.location.href);
    // only allow http or https
    if (url.protocol === 'http:' || url.protocol === 'https:') {
        var embed = document.createElement("embed");
        embed.src = e.dataset.src;
        embed.type = "application/pdf";
        embed.style.cssText = e.style.cssText;
        e.replaceWith(embed);
    } else {
        // optional: log the error in case the URL could not be parsed
        console.error("Invalid URL: " + src);
    }
});

/* Google Forms embed for forms without the /e attr. */
mw.hook('wikipage.content').add(function($content) {
    if (!$content) {
        return;
    }
    $content.find('.googleforms-alt').each(function() {
        var $this = $(this),
            id = $this.attr('data-forms-id'),
            widget = $this.attr('data-widget') || true;
            css = {
                width: 'inherit',
                height: 'inherit',
                border: 0
            };
        $this.html(
            $('<iframe>', {
                src: 'https://docs.google.com/forms/d/' + id + '/viewform?embedded=true&hl=' + mw.config.get('wgUserLanguage'),
                css: css
            })
        );
    });
});

// other theme script stuff (executed at the end of the script for performance)

// Re-detect theme if the document classes have changed
new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type !== "attributes" || mutation.attributeName !== "class") {
            return;
        }
        const newTheme = detectTheme();
        if (newTheme !== lastTheme) {
            handleThemeUpdate(newTheme);
        }
        lastTheme = newTheme;
    });
}).observe(document.documentElement, {attributes: true});

// Re-detect theme if the browser colour scheme has changed
matchColorScheme.addListener(function(event) {
    handleThemeUpdate(detectTheme());
});