User:K599/Discord.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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/*
Author: K599 / Kelvs599

Code based on https://dev.fandom.com/wiki/MediaWiki:YoutubePlayer/code.js

Loading this JavaScript allows Discord widgets to be embedded. Go to your MediaWiki:Common.js, or wherever you're loading your JS, and either copy this page's code or insert the following line:
mw.loader.load('https://meta.miraheze.org/w/index.php?title=User:K599/Discord.js&action=raw&ctype=text/javascript');

You embed by inserting the following code:
<div class="discord" data-id=""></div>
The full list of parameters is as follows:
<div class="discord" data-id="" data-width="" data-height="" data-theme=""></div>
data-id: The server ID of your Discord server, found in server settings under the widget tab.
data-theme: The theme of the widget, can be either "dark" (default) or "light".
Default width and height is 350x500.
*/

mw.hook('wikipage.content').add(function($content) {
    $content.find('.discord:not(.loaded)').each(function() {
        var $this = $(this),
            data = $this.data(),
            uri = new mw.Uri('https://discord.com/widget/'),
            width = typeof data.width === 'number' ? data.width + 'px' : String(data.width || '').trim(),
            height = typeof data.height === 'number' ? data.height + 'px' : String(data.height || '').trim();

        uri.query = {
            id: String(data.id || '').trim(),
            theme: String(data.theme || '').trim()
        };

        $this.html(
            $('<iframe>', {
                src: uri.toString(),
                style: 'width: ' + (width ? width : height ? 'calc(' + height + ' * 7 / 10)' : '350px') + '; height: ' + (height ? height : width ? 'calc(' + width + ' * 10 / 7)' : '500px') + '; border: none;',
                allowtransparency: 'true'
            })
        ).addClass('loaded');
    });
});