MediaWiki:DiscordIntegrator.js

/**
 * based on https://dev.fandom.com/wiki/MediaWiki:DiscordIntegrator/code.js
 * & https://commons.wiki.gg/wiki/MediaWiki:DiscordIntegrator.js
 * 
 * used by other wikis.
 */
(function() {
	'use strict';
	var mconfig = mw.config.get([
		'wgContentLanguage',
		'wgUserLanguage',
		'wgUserName'
	]);
	if (window.DiscordIntegratorLoaded) {
		return;
	}
	window.DiscordIntegratorLoaded = true;
	/**
	 * Main object
	 * @static
	 */
	var DiscordIntegrator = {

		/**
		 * Initializing
		 */
		init: function() {
			mw.hook('wikipage.content').add($.proxy(this.insertToContent, this));
		},
		/**
		 * Finding the designated places in content
		 * in which to place the widget and placing it
		 */
		insertToContent: function($content) {
			$content.find('.DiscordIntegrator:not(.loaded)').each($.proxy(function(cabbage, el) {
				el = $(el);
				el.html(this.generateContent(el.data())).addClass('loaded');
			}, this));
		},
		/**
		 * Determines the theme of the widget.
		 * @param {string} config Configured theme
		 * @return {string} 'light' or 'dark' depending on the wiki theme and configuration
		 */
		determineTheme: function(config) {
			// If explicitly configured to light or dark.
			if (config === 'dark') {
				return 'dark';
			}
			if (config === 'light') {
				return 'light';
			}
			/** If not configured **/
			// try to determine based on wiki theme (set by themeToggle):
			return $(':root').hasClass('view-dark') ? 'dark' : 'light';
		},
		/**
		 * Generating widget content from an object
		 * @return {string} Content of the widget
		 */
		generateContent: function(config) {
			if (!config.id || !String(config.id).match(/\d{17,19}/)) {
				return "Error: ID of the widget is malformed or not supplied, please see <a href='https://support.wiki.gg/wiki/DiscordWidget' title='the instructions'>the instructions</a> for how to find your server's ID. Please make sure you are not inserting <strong>the DiscordIntegrator template</strong> when asked for <strong>your widget ID</strong>.";
			}
			if (
				(
					config.loggedIn === true ||
					Boolean(config['logged-in']) === true &&
					config['logged-in'] !== 'false' &&
					config['logged-in'] !== '{{{loggedIn}}}'
				) && !mconfig.wgUserName
			) {
				return "Please <a href='/Special:UserLogin' title='log in'>log in</a> to see this widget.";
			}
			var username = config.username === '@disabled' ?
				'' :
				config.username === '@function' &&
				typeof window.DiscordIntegratorGetUsername === 'function' ?
					window.DiscordIntegratorGetUsername() :
					config.username || mconfig.wgUserName;
			return mw.html.element('iframe', {
				src: 'https://discord.com/widget?id=' + config.id +
					'&theme=' + this.determineTheme(config.theme) +
					'&username=' + encodeURIComponent(username),
				width: config.width || '100%',
				height: config.height || '400px',
				style: 'max-width:100%;',
				allowtransparency: 'true',
				frameborder: '0',
				title: "Discord server widget"
			});
		}
	};
	DiscordIntegrator.init();
})();