MediaWiki:Common.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.
document.documentElement.classList.add('view-light');
/* ==== Reincarnated ==== */
/* Any JavaScript here will be loaded for all users on every page load. */
/* DRUID */
$(function () {
$(".druid-title-tab").off("click")
.on('click', function () {
var $parent = $(this).closest(".druid-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});
$(".druid-section-tab").off("click")
.on('click', function () {
var $parent = $(this).closest(".druid-section-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});
$(".druid-collapsible").off("click")
.on('click', function () {
var kind = $(this).attr("data-druid-section");
$(this).toggleClass("druid-collapsible-collapsed");
$(this)
.closest(".druid-container")
.find("[data-druid-section-row=" + kind + "]")
.toggleClass("druid-collapsed");
});
});
/* End DRUID */
/* [[Template:Spoiler]] */
$(function () {
$('.spoiler-content')
.off('click') // in case this code is loaded twice
.on('click', function(e){
$(this).toggleClass('show');
}).find('a').on('click', function(e){
e.stopPropagation();
});
});
/* End Template:Spoiler */
/* Link to imported modules from Lua code */
$(function() {
var config = mw.config.get([
'wgCanonicalNamespace',
'wgFormattedNamespaces'
]);
if (config.wgCanonicalNamespace !== 'Module') {
return;
}
var localizedNamespace = config.wgFormattedNamespaces[828];
$('.s1, .s2, .s').each(function() {
var $this = $(this);
var html = $this.html();
var quote = html[0];
var isLongStringQuote = quote === '[';
var quoteRE = new RegExp('^\\' + quote + '|\\' + quote + '$', 'g');
if (isLongStringQuote) {
quoteRE = /^\[\[|\]\]$/g;
}
var name = html.replace(quoteRE, '');
var isEnglishPrefix = name.startsWith('Module:');
var isLocalizedPrefix = name.startsWith(localizedNamespace + ':');
var isDevPrefix = name.startsWith('Dev:');
if (isEnglishPrefix || isLocalizedPrefix || isDevPrefix) {
var attrs = {
href: mw.util.getUrl(name)
};
if (isDevPrefix) {
attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', ''));
attrs.target = '_blank';
attrs.rel = 'noopener';
}
var link = mw.html.element('a', attrs, name);
var str = quote + link + quote;
if (isLongStringQuote) {
str = '[[' + link + ']]';
}
$this.html(str);
}
});
});
/* CharInserts */
$(function() {
$('.mw-charinsert-item').each(function() {
$(this).text($(this).closest('div').attr('data-ci-label'));
$(this).css('display', 'inline-block');
});
$('.ci-loading-text').css('display','none');
});
/**
* DiscordCompact.js
* ----------------------
* A very simple script to display a Discord widget.
* Version 0.0.2
* https://support.wiki.gg/wiki/DiscordCompact
* ----------------------
*/
$(function() {
var widget = $("#content #discord-compact-widget");
// Bail out if we didn't find a widget.
if (!widget.length) return;
var id = widget.attr("data-id");
// Ensure that the id is not blank.
if (id === "") throw new Error("DiscordCompact has a blank server id!");
// Ensure that the id consists only of numbers and is at least 17 characters long.
if (!new RegExp("^[0-9]{17}[0-9]+$").test(id)) throw new Error("DiscordCompact has an invalid server id!");
var apiBase = "https://discord.com/api/guilds/" + id;
// Get some information about the server, such as online member count and invite url.
// This also tells us if the server exists or has widgets disabled, so we look out for that too.
$.ajax(apiBase + "/widget.json").fail(function(req){
if (!req.responseJSON) throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.json (status: " + req.status);
switch (req.responseJSON.code) {
case 10004:
throw new Error("DiscordCompact has a valid server id, but no such server exists!");
case 50004:
throw new Error("DiscordCompact has a valid server id, but that server has widgets disabled!");
default:
throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.json (status: " + req.status + "; code: " + req.responseJSON.code + ")");
}
}).done(function(res){
const inviteURL = res.instant_invite;
// Warn if we can't get an invite URL.
if (inviteURL == null) console.warn("DiscordCompact cannot get an invite URL; does this server have an invite channel set in Widget settings?");
// Now get the widget image.
$.ajax({url: apiBase + "/widget.png?style=banner2", xhrFields: {responseType: "blob"}}).fail(function(req){
if (!req.responseJSON) throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.png! (status: " + req.status);
throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.png! (status: " + req.status + "; code: " + req.responseJSON.code + ")");
}).done(function(blob){
// Convert the image data into base64. This prevents us having to make the client request it a second time.
const imageReader = new FileReader();
imageReader.readAsDataURL(blob);
imageReader.onloadend = function() {
const b64Data = imageReader.result;
// Replace the widget with an <a> tag
widget.replaceWith(function() {
return $("<a>", {
id: widget.attr("id"),
class: widget.attr("class"),
style: widget.attr("style"),
alt: "Discord server widget",
href: inviteURL
});
});
// We need to grab the widget again to update it.
widget = $("#discord-compact-widget");
// Setup the CSS so that the image is displayed.
widget.css("display", "block");
widget.css("max-height", "76px");
widget.css("max-width", "320px");
// Create the image.
const widgetImage = document.createElement("img");
widgetImage.src = b64Data;
widgetImage.style.width = "100%";
widgetImage.style.height = "100%";
widgetImage.style.borderRadius = "5px";
widget.append(widgetImage);
// Prevent image dragging.
widget.on("dragstart", function(e) { e.preventDefault(); });
// We're done here.
console.log("DiscordCompact loaded successfully!");
}
});
});
});
/**
* based on https://dev.fandom.com/wiki/MediaWiki:DiscordIntegrator/code.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):
var clas = $(':root').attr('class');
var regex = /(^|\s)theme-(\w+)(\s|$)/;
var match = clas.match(regex);
if(match){
var wikiThemeName = match[2];
if(typeof(config) === 'object' && config !== null){ //with json theme config
if(config[wikiThemeName]){
return config[wikiThemeName];
}
}
if(wikiThemeName === 'light'){
return 'light';
}
if(wikiThemeName === 'dark'){
return 'dark';
}
}
// Otherwise, default to dark.
return 'dark';
},
/**
* 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',
allowtransparency: 'true',
frameborder: '0',
title: "Discord server widget"
});
}
};
DiscordIntegrator.init();
});
$(document).ready(function () {
$('.collapsible-header').click(function () {
$(this).next('.collapsible-content').slideToggle();
$(this).toggleClass('expanded');
});
});
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Magics/" dynamically
if (title.startsWith('Abilities/Magics/')) {
$link.text(title.replace('Abilities/Magics/', ''));
}
});
});
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Skills/" dynamically
if (title.startsWith('Abilities/Skills/')) {
$link.text(title.replace('Abilities/Skills/', ''));
}
});
});
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Battlewills/" dynamically
if (title.startsWith('Abilities/Battlewills/')) {
$link.text(title.replace('Abilities/Battlewills/', ''));
}
});
});
/**
* Pause animations on mouseover of a designated container (.animated-container and .mcui)
*
* This is so people have a chance to look at the image and click on pages they want to view.
*/
$( '#mw-content-text' ).on( 'mouseenter mouseleave', '.animated-container, .mcui', function( e ) {
$( this ).find( '.animated' ).toggleClass( 'animated-paused', e.type === 'mouseenter' );
} );
/**
* Element animator
*
* Cycles through a set of elements (or "frames") on a 2 second timer per frame
* Add the "animated" class to the frame containing the elements to animate.
* Optionally, add the "animated-active" class to the frame to display first.
* Optionally, add the "animated-subframe" class to a frame, and the
* "animated-active" class to a subframe within, in order to designate a set of
* subframes which will only be cycled every time the parent frame is displayed.
* Animations with the "animated-paused" class will be skipped each interval.
*/
( function() {
var $content = $( '#mw-content-text' );
// Helper function: advance the "animated-active" class to the next sibling
var advanceFrame = function( parentElem, parentSelector ) {
var curFrame = parentElem.querySelector( parentSelector + ' > .animated-active' );
$( curFrame ).removeClass( 'animated-active' );
var $nextFrame = $( curFrame && curFrame.nextElementSibling || parentElem.firstElementChild );
return $nextFrame.addClass( 'animated-active' );
};
// Check if the tab is hidden (stop animating if user is in another tab)
var hidden;
if ( typeof document.hidden !== 'undefined' ) {
hidden = 'hidden';
} else if ( typeof document.msHidden !== 'undefined' ) {
hidden = 'msHidden';
} else if ( typeof document.webkitHidden !== 'undefined' ) {
hidden = 'webkitHidden';
}
// Every 2 seconds, cycle through each .animated element
setInterval( function() {
// If the document is hidden, skip animating
if ( hidden && document[hidden] ) {
return;
}
// For each .animated container...
$content.find( '.animated' ).each( function() {
// Skip if .animated-paused is present
if ( $( this ).hasClass( 'animated-paused' ) ) {
return;
}
// Advance the main frame
var $nextFrame = advanceFrame( this, '.animated' );
// If the new active frame is itself a .animated-subframe, advance that too
if ( $nextFrame.hasClass( 'animated-subframe' ) ) {
advanceFrame( $nextFrame[0], '.animated-subframe' );
}
} );
}, 2000 );
}() );
/**
* Set minimum height for animations to prevent moving the page if the frames differ in height
*/
( function() {
// Mark them visible for a moment to measure
var $animated = $( '.animated' ).addClass( 'animated-visible' );
var animateds = [];
$animated.each( function() {
animateds.push( {
$: $( this ).find( '> .animated-subframe' ).addBack()
.find( '> *:not(.animated-subframe)' ),
} );
} );
// Find max height among sibling frames
$.each( animateds, function() {
var minHeight = 0, differentHeights;
this.$.each( function() {
var height = this.offsetHeight;
differentHeights = differentHeights || ( minHeight && height !== minHeight );
minHeight = Math.max( height, minHeight );
} );
if ( differentHeights ) {
this.height = minHeight;
}
} );
// Apply min-height, then hide them again
$animated.each( function( i ) {
$( this ).css( 'min-height', animateds[i].height );
} ).removeClass( 'animated-visible' );
// Optional lazy-loading for all frames once the animation is in view
var animatedObserver = new IntersectionObserver( function( entries ) {
entries.forEach( function( entry ) {
if ( entry.isIntersecting && !entry.target.classList.contains( 'animated-lazyloaded' ) ) {
$( entry.target ).find( 'img' ).attr( 'loading', 'eager' );
entry.target.classList.add( 'animated-lazyloaded' );
animatedObserver.unobserve( entry.target );
}
} );
} );
$animated.each( function() {
animatedObserver.observe( this );
} );
}() );
document.addEventListener("DOMContentLoaded", function() {
var hideTemplate = document.querySelector('.hide-content-template');
if (hideTemplate) {
// Hide all other content
var bodyChildren = document.body.children;
for (var i = 0; i < bodyChildren.length; i++) {
var child = bodyChildren[i];
if (!child.classList.contains('hide-content-template')) {
child.style.display = 'none';
}
}
// Optionally, style the template container
hideTemplate.style.position = 'relative';
hideTemplate.style.zIndex = '1000';
hideTemplate.style.background = 'white';
hideTemplate.style.padding = '20px';
hideTemplate.style.border = '2px solid #f00';
}
});
/**
* Creates Minecraft-style tooltips
*
* Replaces normal tooltips. Supports Minecraft [[formatting codes]] (except k), and a description with line breaks (/).
*/
( function() {
var escapeChars = { '\\&': '&', '<': '<', '>': '>' };
var escape = function( text ) {
// "\" must be escaped first
return text.replace( /\\\\/g, '\' )
.replace( /\\&|[<>]/g, function( char ) { return escapeChars[char]; } );
};
var $tooltip = $();
var $win = $( window ), winWidth, winHeight, width, height;
$( '#mw-content-text' ).on( {
'mouseenter.minetip': function( e ) {
$tooltip.remove();
var $elem = $( this ), title = $elem.attr( 'data-minetip-title' );
if ( title === undefined ) {
title = $elem.attr( 'title' );
if ( title !== undefined ) {
title = $.trim( title.replace( /&/g, '\\&' ) );
$elem.attr( 'data-minetip-title', title );
}
}
// No title or title only contains formatting codes
if ( title === undefined || title !== '' && title.replace( /&([0-9a-jl-qs-vyzr]|#[0-9a-fA-F]{6}|\$[0-9a-fA-F]{3})/g, '' ) === '' ) {
// Find deepest child title
var childElem = $elem[0], childTitle;
do {
if ( childElem.hasAttribute( 'title' ) ) {
childTitle = childElem.title;
}
childElem = childElem.firstChild;
} while( childElem && childElem.nodeType === 1 );
if ( childTitle === undefined ) {
return;
}
// Append child title as title may contain formatting codes
if ( !title ) {
title = '';
}
title += $.trim( childTitle.replace( /&/g, '\\&' ) );
// Set the retrieved title as data for future use
$elem.attr( 'data-minetip-title', title );
}
if ( !$elem.data( 'minetip-ready' ) ) {
// Remove title attributes so the native tooltip doesn't get in the way
$elem.find( '[title]' ).addBack().removeAttr( 'title' );
$elem.data( 'minetip-ready', true );
}
if ( title === '' ) {
return;
}
var content = '<span class="minetip-title">' + escape( title ) + '&r</span>';
var description = $.trim( $elem.attr( 'data-minetip-text' ) );
if ( description ) {
// Apply normal escaping plus "/"
description = escape( description ).replace( /\\\//g, '/' );
content += '<span class="minetip-description">' + description.replace( /\//g, '<br>' ) + '&r</span>';
}
// Add classes for Minecraft formatting codes
while ( content.search( /&(?:[0-9a-jl-qs-vyz]|#[0-9a-fA-F]{6}|\$[0-9a-fA-F]{3})/ ) > -1 ) {
content = content.replace( /&([0-9a-jl-qs-vyz])(.*?)(&r|$)/g, '<span class="format-$1">$2</span>&r' );
content = content.replace( /&(?:#([0-9a-fA-F]{6})|\$([0-9a-fA-F]{3}))(.*?)(&r|$)/g, '<span class="format-custom" style="color: #$1$2;">$3</span>&r' );
}
// Remove reset formatting
content = content.replace( /&r/g, '' );
$tooltip = $( '<div id="minetip-tooltip">' );
$tooltip.html( content ).appendTo( 'body' );
// Cache current window and tooltip size
winWidth = $win.width();
winHeight = $win.height();
width = $tooltip.outerWidth( true );
height = $tooltip.outerHeight( true );
// Trigger a mouse movement to position the tooltip
$elem.trigger( 'mousemove', e );
},
'mousemove.minetip': function( e, trigger ) {
if ( !$tooltip.length ) {
$( this ).trigger( 'mouseenter' );
return;
}
// Get event data from remote trigger
e = trigger || e;
// Get mouse position and add default offsets
var top = e.clientY - 34;
var left = e.clientX + 14;
// If going off the right of the screen, go to the left of the cursor
if ( left + width > winWidth ) {
left -= width + 36;
}
// If now going off to the left of the screen, resort to going above the cursor
if ( left < 0 ) {
left = 0;
top -= height - 22;
// Go below the cursor if too high
if ( top < 0 ) {
top += height + 47;
}
// Don't go off the top of the screen
} else if ( top < 0 ) {
top = 0;
// Don't go off the bottom of the screen
} else if ( top + height > winHeight ) {
top = winHeight - height;
}
// Apply the positions
$tooltip.css( { top: top, left: left } );
},
'mouseleave.minetip': function() {
if ( !$tooltip.length ) {
return;
}
$tooltip.remove();
$tooltip = $();
}
}, '.minetip, .invslot-item' );
}() );
/* ==== Mysticism ==== */
/* Any JavaScript here will be loaded for all users on every page load. */
/* DRUID */
$(function () {
$(".druid-title-tab").off("click")
.on('click', function () {
var $parent = $(this).closest(".druid-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});
$(".druid-section-tab").off("click")
.on('click', function () {
var $parent = $(this).closest(".druid-section-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});
$(".druid-collapsible").off("click")
.on('click', function () {
var kind = $(this).attr("data-druid-section");
$(this).toggleClass("druid-collapsible-collapsed");
$(this)
.closest(".druid-container")
.find("[data-druid-section-row=" + kind + "]")
.toggleClass("druid-collapsed");
});
});
/* End DRUID */
/* [[Template:Spoiler]] */
$(function () {
$('.spoiler-content')
.off('click') // in case this code is loaded twice
.on('click', function(e){
$(this).toggleClass('show');
}).find('a').on('click', function(e){
e.stopPropagation();
});
});
/* End Template:Spoiler */
/* Link to imported modules from Lua code */
$(function() {
var config = mw.config.get([
'wgCanonicalNamespace',
'wgFormattedNamespaces'
]);
if (config.wgCanonicalNamespace !== 'Module') {
return;
}
var localizedNamespace = config.wgFormattedNamespaces[828];
$('.s1, .s2, .s').each(function() {
var $this = $(this);
var html = $this.html();
var quote = html[0];
var isLongStringQuote = quote === '[';
var quoteRE = new RegExp('^\\' + quote + '|\\' + quote + '$', 'g');
if (isLongStringQuote) {
quoteRE = /^\[\[|\]\]$/g;
}
var name = html.replace(quoteRE, '');
var isEnglishPrefix = name.startsWith('Module:');
var isLocalizedPrefix = name.startsWith(localizedNamespace + ':');
var isDevPrefix = name.startsWith('Dev:');
if (isEnglishPrefix || isLocalizedPrefix || isDevPrefix) {
var attrs = {
href: mw.util.getUrl(name)
};
if (isDevPrefix) {
attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', ''));
attrs.target = '_blank';
attrs.rel = 'noopener';
}
var link = mw.html.element('a', attrs, name);
var str = quote + link + quote;
if (isLongStringQuote) {
str = '[[' + link + ']]';
}
$this.html(str);
}
});
});
/* CharInserts */
$(function() {
$('.mw-charinsert-item').each(function() {
$(this).text($(this).closest('div').attr('data-ci-label'));
$(this).css('display', 'inline-block');
});
$('.ci-loading-text').css('display','none');
});
/**
* DiscordCompact.js
* ----------------------
* A very simple script to display a Discord widget.
* Version 0.0.2
* https://support.wiki.gg/wiki/DiscordCompact
* ----------------------
*/
$(function() {
var widget = $("#content #discord-compact-widget");
// Bail out if we didn't find a widget.
if (!widget.length) return;
var id = widget.attr("data-id");
// Ensure that the id is not blank.
if (id === "") throw new Error("DiscordCompact has a blank server id!");
// Ensure that the id consists only of numbers and is at least 17 characters long.
if (!new RegExp("^[0-9]{17}[0-9]+$").test(id)) throw new Error("DiscordCompact has an invalid server id!");
var apiBase = "https://discord.com/api/guilds/" + id;
// Get some information about the server, such as online member count and invite url.
// This also tells us if the server exists or has widgets disabled, so we look out for that too.
$.ajax(apiBase + "/widget.json").fail(function(req){
if (!req.responseJSON) throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.json (status: " + req.status);
switch (req.responseJSON.code) {
case 10004:
throw new Error("DiscordCompact has a valid server id, but no such server exists!");
case 50004:
throw new Error("DiscordCompact has a valid server id, but that server has widgets disabled!");
default:
throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.json (status: " + req.status + "; code: " + req.responseJSON.code + ")");
}
}).done(function(res){
const inviteURL = res.instant_invite;
// Warn if we can't get an invite URL.
if (inviteURL == null) console.warn("DiscordCompact cannot get an invite URL; does this server have an invite channel set in Widget settings?");
// Now get the widget image.
$.ajax({url: apiBase + "/widget.png?style=banner2", xhrFields: {responseType: "blob"}}).fail(function(req){
if (!req.responseJSON) throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.png! (status: " + req.status);
throw new Error("DiscordCompact encountered an unknown error whilst fetching widget.png! (status: " + req.status + "; code: " + req.responseJSON.code + ")");
}).done(function(blob){
// Convert the image data into base64. This prevents us having to make the client request it a second time.
const imageReader = new FileReader();
imageReader.readAsDataURL(blob);
imageReader.onloadend = function() {
const b64Data = imageReader.result;
// Replace the widget with an <a> tag
widget.replaceWith(function() {
return $("<a>", {
id: widget.attr("id"),
class: widget.attr("class"),
style: widget.attr("style"),
alt: "Discord server widget",
href: inviteURL
});
});
// We need to grab the widget again to update it.
widget = $("#discord-compact-widget");
// Setup the CSS so that the image is displayed.
widget.css("display", "block");
widget.css("max-height", "76px");
widget.css("max-width", "320px");
// Create the image.
const widgetImage = document.createElement("img");
widgetImage.src = b64Data;
widgetImage.style.width = "100%";
widgetImage.style.height = "100%";
widgetImage.style.borderRadius = "5px";
widget.append(widgetImage);
// Prevent image dragging.
widget.on("dragstart", function(e) { e.preventDefault(); });
// We're done here.
console.log("DiscordCompact loaded successfully!");
}
});
});
});
/**
* based on https://dev.fandom.com/wiki/MediaWiki:DiscordIntegrator/code.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):
var clas = $(':root').attr('class');
var regex = /(^|\s)theme-(\w+)(\s|$)/;
var match = clas.match(regex);
if(match){
var wikiThemeName = match[2];
if(typeof(config) === 'object' && config !== null){ //with json theme config
if(config[wikiThemeName]){
return config[wikiThemeName];
}
}
if(wikiThemeName === 'light'){
return 'light';
}
if(wikiThemeName === 'dark'){
return 'dark';
}
}
// Otherwise, default to dark.
return 'dark';
},
/**
* 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',
allowtransparency: 'true',
frameborder: '0',
title: "Discord server widget"
});
}
};
DiscordIntegrator.init();
});
// Remove the Abilities/Whatever
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Magics/" dynamically
if (title.startsWith('Abilities/Magics/')) {
$link.text(title.replace('Abilities/Magics/', ''));
}
});
});
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Skills/" dynamically
if (title.startsWith('Abilities/Skills/')) {
$link.text(title.replace('Abilities/Skills/', ''));
}
});
});
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-category-group a').each(function() {
var $link = $(this);
var title = $link.text();
// Strip the prefix "Abilities/Battlewills/" dynamically
if (title.startsWith('Abilities/Battlewills/')) {
$link.text(title.replace('Abilities/Battlewills/', ''));
}
});
});
$(document).ready(function () {
$('.collapsible-header').click(function () {
$(this).next('.collapsible-content').slideToggle();
$(this).toggleClass('expanded');
});
});