MediaWiki:Custom Discord Widget.js

//do not submit for review! wip

/***** ————————————————————————————————————————————————————————————————————————  # Custom Discord Widget # Creates a custom Discord widget/iframe at the right rail # Original Authors: Soap Shadow and Speedit. Changes made by Wither # Based on a script from the My Little Pony Wiki —————————————————————————————————————————————————————————————————————————

importStylesheet("MediaWiki:Custom Discord Widget.js/Style.css"); $.getJSON("https://discordapp.com/api/guilds/403110929031757836/widget.json", function(json) {   //Get IDs of the Staff and Bots and mark them as such in the widget    /*we'll mark Awesomeclash as Moderator rather than Head of Defence and     Ancient One as Admin rather than his custom The Ancient One role. Same goes     for other users with custom roles. */    function getOwner {return ["403106266458619905"];}    function getCo_Owners {return ["405632100994121728", "390183834685276162"];}    function getAdmins {return ["404209913481396225", "490444452502962177",    "419809623516643329"];}    function getMods {return ["407946926412005379", "405712757867020308",    "405342325846441984"];}    function getBots {return [//We have a lot of bots, so this'll be a long one        "356065937318871041", //Aki        "118578193278959616", //Anth        "177735619668213760", //ArrayBot        "185476724627210241", //Ayana "413728456942288896", //BoxBot "247852652019318795", //Dad Bot "270904126974590976", //Dank Memer "170915625722576896", //DiscordRPG "155149108183695360", //Dyno "184405311681986560", //FredBoat♪♪ "424606447867789312", //IdleRPG "195244363339530240", //KawaiiBot "159985870458322944", //MEE6 "160105994217586689", //Miki "116275390695079945", //Nadeko "439205512425504771", //NotSoBot "305177429612298242", //RPGBot "172002275412279296", //Tatsumaki "247283454440374274" //Yggdrasil ]}   //Make some variables 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. //=======================================================   // Start creating the widget //=======================================================   /* 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 dark theme widget. var $widgetDarkTheme = document.createElement("div"); $($widgetDarkTheme).addClass("widget widget-theme-dark").appendTo ($widgetDiscord); // Create header. var $widgetHeader = document.createElement("div"); $($widgetHeader).addClass("widget-header").appendTo($widgetDarkTheme); // 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 +        " Writers and Readers Online") .appendTo($widgetHeader); // Create main widget area. var $widgetBody = document.createElement("div"); $($widgetBody).addClass("widget-body").appendTo($widgetDarkTheme); // 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); var $adminsOnlineContainer = document.createElement("div"); $($adminsOnlineContainer).addClass("widget-role-container") .appendTo($widgetBodyUsers); // Create container for the server owners var $OwnerContainer = document.createElement("div"); $($OwnerContainer).addClass("widget-role-container").appendTo ($widgetBodyUsers); var $OwnerTitle = document.createElement("div"); $($OwnerTitle) .addClass("widget-role-name-owner") .text("Owner") .appendTo($adminsOnlineContainer); var $CoOwnersOnlineContainer = document.createElement("div"); $($CoOwnersOnlineContainer).addClass("widget-role-container"). appendTo($widgetBodyUsers); var $CoOwnersOnlineTitle = document.createElement("div"); $($CoOwnersOnlineTitle) .addClass("widget-role-name-co-owners") .text("Co-Owners") .appendTo($adminsOnlineContainer); // Add admins online title. var $adminsOnlineTitle = document.createElement("div"); $($adminsOnlineTitle) .addClass("widget-role-name-admins") .text("Admins") .appendTo($adminsOnlineContainer); // Do the same thing, but for mods and bots var $moderatorsOnlineContainer = document.createElement("div"); $($moderatorsOnlineContainer).addClass("widget-role-container") .appendTo($widgetBodyUsers); var $moderatorsOnlineTitle = document.createElement("div"); $($moderatorsOnlineTitle) .addClass("widget-role-name-mods") .text("Moderators") .appendTo($moderatorsOnlineContainer); var $botsContainer = document.createElement("div"); $($botsContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers); var $botsTitle = document.createElement("div"); $($botsTitle) .addClass("widget-role-name-bots") .text("Bots") .appendTo($botsContainer); // Now for all other users var $usersOnlineContainer = document.createElement("div"); $($usersOnlineContainer) .addClass("widget-role-container") .appendTo($widgetBodyUsers); var $usersOnlineTitle = document.createElement("div"); $($usersOnlineTitle) .addClass("widget-role-name-member") .text("Members") .appendTo($usersOnlineContainer); // Populate the staff and bots. var owner = getOwner; var co_owners = getCo_Owners; var admins = getAdmins; var mods = getMods; var bots = getBots; // 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. // If yes, add the user to the relevant role section, // else add the user to the users section. if (owner.includes(member.id)) {$(createWidgetMember(member)) .appendTo($OwnerContainer);} else if (co_owners.includes(member.id)) {$(createWidgetMember(member)) .appendTo($CoOwnersOnlineContainer);} else if (mods.includes(member.id)) {$(createWidgetMember(member)) .appendTo($moderatorsOnlineContainer);} else if (bots.includes(member.id)) {$(createWidgetMember(member)) .appendTo($botsContainer);} else {$(createWidgetMember(member)).appendTo($usersOnlineContainer);}} // Further design the widget var $widgetFooter = document.createElement("div"); $($widgetFooter) .addClass("widget-footer") .appendTo($widgetDarkTheme); // Add widget footer text. var $widgetFooterText = document.createElement("span"); $($widgetFooterText) .addClass("widget-footer-info") .append("You are expected and required to follow the " +        "" +        " wiki policies.") .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("Join the Chat") .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;} //******************************************       // Finally add the widget //******************************************       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 = "crimson"; 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("Fanficages Wiki Discord Server"); // 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("Fanficages Wiki Discord Server"); // Add the widget to the container $($container).append($widgetContainer);}); });