MediaWiki:Common.js/CustomDiscordIntegrator.js

/** * Created by Soap Shadow * Version 1.2.0 * Modified by Dai ca superman * * This is a custom discord integrator widget for the MLP Wiki. * It allows the widget to show member roles as well as * displaying custom graphics and text. * * Thanks to Speedit for the rail onload event code. * * Reference: https://dev.wikia.com/wiki/MediaWiki:AddRailModule/code.js * Reference: https://mlp.wikia.com/wiki/MediaWiki%3ACommon.js * Reference: https://warframe.wikia.com/wiki/MediaWiki%3ACustomDiscordWidget.js * * Version History * v1.0.0 - Initial * v1.1.0 - Put the widget into a custom wikia rail module, which also adds a svg icon *         for the title and sub text about server guidelines. *       - Add bots role. * v1.2.0 - Add support for template substitution for pages which don't have the wikia rail *         i.e. the main page. */

$.getJSON("https://discordapp.com/api/guilds/213557352782233601/widget.json", function (json) {

function populateAdmins { /**        * Admins *         * This function populates an array with the * admin user ids and returns the array. *        * Dcsuper                  213186434193031168 * phẹt                    214430793022439424 * zobo                    213186434193031168 * Dark                    213186434193031168 * 5656/Mistykd            173697272595480577 */       return [ '213186434193031168',           '214430793022439424',            '108213540866756608',            '169203263265177602',            '173697272595480577'			        ];    }

function populateTrans { /**        * Translators *         * This function populates an array with the * Translators user ids and returns the array. *        * Holy                              214538034828279810 * Trứng huynh                         214565502385782784 * Yui-kun (Magika)   373443255628464128 */       return [ '214538034828279810',           '214565502385782784',            '373443255628464128',            '215325831013072898'        ];    }

function populateAngel { /**        * My Angel *         * This function populates an array with the * Angel user ids and returns the array. *        * Thiên Thần       298079596404801538 */       return [ '298079596404801538'       ];    }    function populateBots { /**        * Bots *         * This function populates an array with the * bot user ids and returns the array. *         * Eris Vú Voi   189702078958927872 * FredBoat♪♪   184405311681986560 * LewdBot      119482224713269248 * Mantaro      213466096718708737 * MEE6         159985870458322944 * Nadeko       116275390695079945 */       return [ '189702078958927872',           '184405311681986560',            '119482224713269248',            '213466096718708737',            '159985870458322944',            '116275390695079945'        ];    }

var $rail = $('#WikiaRail'); // Get the wikia rail.

var $widgetContainer; // Container to hold the widget. This replaces the iframe.

var membersOnline = json.members.length; // Number of members currently online.

// Create widget HTML code. // This is the same code generated by the widget iframe, however by manually creating it, // we can move things around and create custom elements, which will allow us to add // member roles to the widget and make other customisations.

// Create the container to hold the widget. This replaces the iframe. $widgetContainer = document.createElement("div"); $($widgetContainer) .attr("id", "discord-widget-container");

// Create discord widget. var $widgetDiscord = document.createElement("div"); $($widgetDiscord) .attr("id", "discord-widget") .appendTo($widgetContainer);

// Create light theme widget. var $widgetLightTheme = document.createElement("div"); $($widgetLightTheme) .addClass("widget widget-theme-light") .appendTo($widgetDiscord);

// Create header. var $widgetHeader = document.createElement("div"); $($widgetHeader) .addClass("widget-header") .appendTo($widgetLightTheme);

// Add discord logo to header. var $widgetHeaderDiscordLogo = document.createElement("a"); $($widgetHeaderDiscordLogo) .addClass("widget-logo") .attr("href", "https://discordapp.com/?utm_source=Discord%20Widget&utm_medium=Logo") .attr("target", "_blank") .appendTo($widgetHeader);

// Add members online to header. var $widgetHeaderMembersOnline = document.createElement("span"); $($widgetHeaderMembersOnline) .addClass("widget-header-count") .html(" " + membersOnline + " Giáo Dân Online") .appendTo($widgetHeader);

// Create main widget area. var $widgetBody = document.createElement("div"); $($widgetBody) .addClass("widget-body") .appendTo($widgetLightTheme);

// Create container for main widget area. var $widgetBodyContainer = document.createElement("div"); $($widgetBodyContainer) .appendTo($widgetBody);

// Create container to hold all users currently online. var $widgetBodyUsers = document.createElement("div"); $($widgetBodyUsers) .appendTo($widgetBodyContainer);

// Create container to hold admins which are online. var $adminsOnlineContainer = document.createElement("div"); $($adminsOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers);

// Add admins online title. var $adminsOnlineTitle = document.createElement("div"); $($adminsOnlineTitle) .addClass("widget-role-name-admins") .text("Giáo Chủ") .appendTo($adminsOnlineContainer);

// Create container to hold trans which are online. var $transOnlineContainer = document.createElement("div"); $($transOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers);

// Add translators online title. var $transOnlineTitle = document.createElement("div"); $($transOnlineTitle) .addClass("widget-role-name-trans") .text("Dịch Giả") .appendTo($transOnlineContainer);

// Create container to hold Angel which are online. var $angelOnlineContainer = document.createElement("div"); $($angelOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers);

// Add Angel online title. var $angelOnlineTitle = document.createElement("div"); $($angelOnlineTitle) .addClass("widget-role-name-angel") .text("Thiên Sứ Cánh Cam") .appendTo($angelOnlineContainer);

// Create container to hold bots which are online. var $botsOnlineContainer = document.createElement("div"); $($botsOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers);

// Add bots online title. var $botsOnlineTitle = document.createElement("div"); $($botsOnlineTitle) .addClass("widget-role-name-bots") .text("Nô Lệ") .appendTo($botsOnlineContainer);

// Create container to hold all other users which are online. var $usersOnlineContainer = document.createElement("div"); $($usersOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers);

// Add users online title. var $usersOnlineTitle = document.createElement("div"); $($usersOnlineTitle) .addClass("widget-role-name-users") .text("Con Dân Thiên Triều") .appendTo($usersOnlineContainer);

// Populate the staff and bot users. var admins = populateAdmins; var trans = populateTrans; var angel = populateAngel; var bots = populateBots;

// Run through the JSON and add users. for (var i = 0; i < membersOnline; i++) {

var member = json.members[i];

// Check whether the user is a staff member or a bot user. // If yes, add the user to the relevant role section, // else add the user to the users section. if (admins.includes(member.id)) {

$(createWidgetMember(member)) .appendTo($adminsOnlineContainer);

} else if (trans.includes(member.id)) {

$(createWidgetMember(member)) .appendTo($transOnlineContainer);

} else if (angel.includes(member.id)) {

$(createWidgetMember(member)) .appendTo($angelOnlineContainer); } else if (bots.includes(member.id)) {

$(createWidgetMember(member)) .appendTo($botsOnlineContainer);

} else {

$(createWidgetMember(member)) .appendTo($usersOnlineContainer);

}   }

// Create widget footer. var $widgetFooter = document.createElement("div"); $($widgetFooter) .addClass("widget-footer") .appendTo($widgetLightTheme);

// Add widget footer text. var $widgetFooterText = document.createElement("span"); $($widgetFooterText) .addClass("widget-footer-info") .append("Nơi truyền đạo giữa các bằng hữu Sonako, các con dân miễn chưa chuyển sang giai đoạn AIDS đều được chào đón") .appendTo($widgetFooter);

// Add connect button. var $widgetFooterButton = document.createElement("a"); $($widgetFooterButton) .addClass("widget-btn-connect") .attr("href", json.instant_invite + "?utm_source=Discord%20Widget&utm_medium=Connect") .attr("target", "_blank") .text("Gia Nhập") .appendTo($widgetFooter);

function createWidgetMember(member) {

/**        * Create widget member. *         * This function creates the element for a user * and returns the element. */

// Create widget member. var $widgetMember = document.createElement("div"); $($widgetMember) .addClass("widget-member");

// Create widget member avatar container. var $widgetMemberAvatarContainer = document.createElement("div"); $($widgetMemberAvatarContainer) .addClass("widget-member-avatar") .appendTo($widgetMember);

// Add user avatar. var $userAvatar = document.createElement("img"); $($userAvatar) .attr("src", member.avatar_url) .appendTo($widgetMemberAvatarContainer);

// Add user status. var $userStatus = document.createElement("span"); switch (member.status) { case "online": $($userStatus) .addClass("widget-member-status widget-member-status-online"); break; case "idle": $($userStatus) .addClass("widget-member-status widget-member-status-idle"); break; case "dnd": $($userStatus) .addClass("widget-member-status widget-member-status-dnd"); break; }       $($userStatus) .appendTo($widgetMemberAvatarContainer);

// Add username. // Check if the user has a nick set. // If yes, add nick, else add username. var $username = document.createElement("span"); if (member.hasOwnProperty("nick")) { $($username) .text(member.nick); } else { $($username) .text(member.username); }       $($username) .addClass("widget-member-name") .appendTo($widgetMember);

return $widgetMember; }

function addToRail {

// Get widget container. var $widgetContainerRail = $widgetContainer;

// Create rail module section. var $railModuleSection = document.createElement("section"); $($railModuleSection) .addClass("rail-module");

// Add rail module title. var $railModuleTitle = document.createElement("h2"); $($railModuleTitle) .addClass("has-icon") .appendTo($railModuleSection);

// Add rail module title icon svg. // Use standard JS as jQuery doesn't fully support SVG DOM. var railModuleTitleIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); railModuleTitleIcon.setAttribute("viewBox", "0 0 1000 800"); railModuleTitleIcon.setAttribute("height", "18"); railModuleTitleIcon.setAttribute("width", "18"); $railModuleTitle.appendChild(railModuleTitleIcon);

// Add rail module title icon svg path. var railModuleTitleIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); railModuleTitleIconPath.style.fill = "#883e97"; railModuleTitleIconPath.setAttribute("d", "M 361.9857,0.00138389 C 348.73055,0.05478389 239.07459,3.1670339 123.39327,89.124664 123.39327,89.124664 0,311.06297 0,584.4136 c 0,0 71.978249,123.39208 261.35281,129.39038 0,0 31.70511,-37.7037 57.41206,-70.26582 C 209.93876,610.97599 168.80785,543.28361 168.80785,543.28361 c 0,0 8.5708,5.99726 23.99498,14.56626 0.85689,0 1.71122,0.85558 3.42502,1.7125 2.57069,1.71377 5.1422,2.57081 7.7129,4.28459 21.42246,11.99658 42.84423,21.42368 62.5529,29.13581 35.13283,14.56729 77.12215,27.41951 125.96536,36.84541 64.26736,11.9966 139.67306,16.28044 221.93532,0.85625 40.27424,-7.71208 81.40794,-18.85053 124.25286,-36.84541 29.99142,-11.13969 63.40925,-27.41914 98.54205,-50.55541 0,0 -42.84417,69.40888 -155.09786,101.11413 25.70697,31.70521 56.55581,68.54998 56.55581,68.54998 C 928.02173,706.94949 1000,583.55668 1000,584.4136 1000,311.06297 876.60671,89.124664 876.60671,89.124664 754.07028,-2.5634661 636.67349,0.00803389 636.67349,0.00803389 L 624.67932,13.718014 C 770.35209,57.419834 838.04548,121.6888 838.04548,121.6888 748.92802,73.702484 661.52634,49.707644 580.121,40.281764 c -61.69669,-6.85519 -120.82499,-5.13937 -173.09576,1.71581 -5.14137,0 -9.42484,0.85563 -14.56623,1.7125 -29.99144,3.42762 -102.82721,13.70953 -194.51535,53.98375 -31.70523,13.710366 -50.55871,23.994976 -50.55871,23.994976 0,0 70.26568,-67.697276 224.50739,-111.399106 L 363.32318,0.00803389 c 0,0 -0.4538,-0.0102 -1.33748,-0.007 z M 340.18778,316.20414 c 48.8432,0 88.26098,41.98669 87.40413,94.25746 0,52.27084 -38.56093,94.2608 -87.40413,94.2608 -47.98632,0 -87.40413,-41.98996 -87.40413,-94.2608 0,-52.27077 38.56091,-94.25746 87.40413,-94.25746 z m 312.76778,0 c 47.98631,0 87.40413,41.98669 87.40413,94.25746 0,52.27084 -38.56089,94.2608 -87.40413,94.2608 -47.9863,0 -87.40413,-41.98996 -87.40413,-94.2608 0,-52.27077 38.56091,-94.25746 87.40413,-94.25746 z"); railModuleTitleIcon.appendChild(railModuleTitleIconPath);

// Add rail module title text. $($railModuleTitle) .append("Thiên Triều Giáo Hội Quán");

// Add widget container to the rail module section. $($widgetContainerRail) .appendTo($railModuleSection);

// Get ads section. var $ads = $('#top-right-boxad-wrapper, #NATIVE_TABOOLA_RAIL').last;

// Check if there are ads in the rail. // If yes, then add the module after the ads. // Else, prepend to the rail. if ($ads.exists) { $railModuleSection.insertAfter($ads); } else { $rail.prepend($railModuleSection); }   }

// Check if the wikia rail has loaded. // If yes, then add the widget, else add the widget on load. if (!$rail.hasClass("loaded")) { $rail.on("afterLoad.rail", addToRail); } else { addToRail; }

// Substitute any CustomDiscordIntegrator templates with the widget. $('.CustomDiscordIntegrator').each(function {

// Get the template container. var $container = $(this);

// Add container title section. var $containerTitleSection = document.createElement("div"); $($containerTitleSection) .attr("id", "title") .appendTo($container);

// Add container title. var $containerTitle = document.createElement("h2"); $($containerTitle) .addClass("title has-icon") .appendTo($containerTitleSection);

// Add container title icon svg. // Use standard JS as jQuery doesn't fully support SVG DOM. var containerTitleIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); containerTitleIcon.setAttribute("viewBox", "0 0 1000 800"); containerTitleIcon.setAttribute("height", "18"); containerTitleIcon.setAttribute("width", "18"); $containerTitle.appendChild(containerTitleIcon);

// Add container title icon svg path. var containerTitleIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path"); containerTitleIconPath.setAttribute("d", "M 361.9857,0.00138389 C 348.73055,0.05478389 239.07459,3.1670339 123.39327,89.124664 123.39327,89.124664 0,311.06297 0,584.4136 c 0,0 71.978249,123.39208 261.35281,129.39038 0,0 31.70511,-37.7037 57.41206,-70.26582 C 209.93876,610.97599 168.80785,543.28361 168.80785,543.28361 c 0,0 8.5708,5.99726 23.99498,14.56626 0.85689,0 1.71122,0.85558 3.42502,1.7125 2.57069,1.71377 5.1422,2.57081 7.7129,4.28459 21.42246,11.99658 42.84423,21.42368 62.5529,29.13581 35.13283,14.56729 77.12215,27.41951 125.96536,36.84541 64.26736,11.9966 139.67306,16.28044 221.93532,0.85625 40.27424,-7.71208 81.40794,-18.85053 124.25286,-36.84541 29.99142,-11.13969 63.40925,-27.41914 98.54205,-50.55541 0,0 -42.84417,69.40888 -155.09786,101.11413 25.70697,31.70521 56.55581,68.54998 56.55581,68.54998 C 928.02173,706.94949 1000,583.55668 1000,584.4136 1000,311.06297 876.60671,89.124664 876.60671,89.124664 754.07028,-2.5634661 636.67349,0.00803389 636.67349,0.00803389 L 624.67932,13.718014 C 770.35209,57.419834 838.04548,121.6888 838.04548,121.6888 748.92802,73.702484 661.52634,49.707644 580.121,40.281764 c -61.69669,-6.85519 -120.82499,-5.13937 -173.09576,1.71581 -5.14137,0 -9.42484,0.85563 -14.56623,1.7125 -29.99144,3.42762 -102.82721,13.70953 -194.51535,53.98375 -31.70523,13.710366 -50.55871,23.994976 -50.55871,23.994976 0,0 70.26568,-67.697276 224.50739,-111.399106 L 363.32318,0.00803389 c 0,0 -0.4538,-0.0102 -1.33748,-0.007 z M 340.18778,316.20414 c 48.8432,0 88.26098,41.98669 87.40413,94.25746 0,52.27084 -38.56093,94.2608 -87.40413,94.2608 -47.98632,0 -87.40413,-41.98996 -87.40413,-94.2608 0,-52.27077 38.56091,-94.25746 87.40413,-94.25746 z m 312.76778,0 c 47.98631,0 87.40413,41.98669 87.40413,94.25746 0,52.27084 -38.56089,94.2608 -87.40413,94.2608 -47.9863,0 -87.40413,-41.98996 -87.40413,-94.2608 0,-52.27077 38.56091,-94.25746 87.40413,-94.25746 z"); containerTitleIcon.appendChild(containerTitleIconPath);

// Add container title text. $($containerTitle) .append("Thiên Triều Giáo Hội Quán");

// Add the widget to the container $($container) .append($widgetContainer); });

});