DiscordModule

```
(function () {

var counter = 0;
var loader = setInterval(function () {
 if ( $('.ChatModule').length ) {
 clearInterval(loader);
 initDiscordModule();
 } else if (counter == 10) {
 clearInterval(loader);
 console.log('Could not find place for module');
 return;
 }
 counter++;
}, 100);

function initDiscordModule() {
 console.log("Getting data...");
 var discordJSON = "https://discordapp.com/api/servers/268121885743644673/embed.json";
 var request = new XMLHttpRequest();
 request.onreadystatechange = function() {
 if (request.readyState == 4 && request.status == 200) {
 var data = JSON.parse(request.responseText);
 setupModule(data);
 }
 };
 request.open("GET", discordJSON, true);
 request.send();
}

function setupModule(data) {
 console.log("Building module...");
 var $module =
 $('<section class="ChatModule module">' +
 '<table>' +
 '<tbody>' +
 '<tr>' +
 '<td style="vertical-align:middle; width:100%;">' +
 '<p class="chat-name">' +
 '<a href="https://discordapp.com/" target="\_blank">Discord</a> – бесплатное приложение для публичного общения вне Фэндома. <a href="https://ru.wikipedia.org/wiki/Discord" target="\_blank">Подробнее в Википедии</a>' +
 '</p>' +
 '</td>' +
 '<td style="vertical-align:middle; width:90px;">' +
 '<center>' +
 '<img alt="Discord" src="https://discordapp.com/assets/f8389ca1a741a115313bede9ac02e2c0.svg" class="discord-icon">' +
 '<span>В сети: <span id="discord-counter">?</span></span>' +
 '<button class="discord-joined">Войти в чат</button>' +
 '</center>' +
 '</td>' +
 '</tr>' +
 '<tr>' +
 '<td colspan="2">' +
 '<hr/>' +
 '<h4>Пользователи онлайн <div class="discord-chevron" style="float: right"></div></h4>' +
 '</td>' +
 '</tr>' +
 '<tr>' +
 '<td colspan="2">' +
 '<ul class="discord-list"></ul>' +
 '</td>' +
 '</tr>' +
 '</tbody>' +
 '</table>' +
 '</section>');

 $module.find('.discord-joined').attr('onclick', "window.open('" + data.instant\_invite + "','\_blank')");
 $module.find('#discord-counter').text(data.members.length);

 data.members.forEach(function (v) {
 var $member = $('<li class="discord-member">' +
 '<div class="discord-avatar">' +
 '<img />' +
 '</div>' +
 '</li>');
 $member.append(v.username);
 $member.find('.discord-avatar').addClass("discord-" + v.status);
 $member.find('img').attr("src", v.avatar\_url);

 $module.find(".discord-list").append($member);
 });

 var toggle = $module.find('.discord-chevron'),
 collapsible = $module.find('.discord-list');

 collapsible.hide();
 toggle.click(function() {
 if ( !toggle.hasClass('opened') ) {
 collapsible.slideDown();
 toggle.addClass('opened');
 } else {
 collapsible.slideUp();
 toggle.removeClass('opened');
 }
 });

 $('.ChatModule').after($module);
 console.log("Discord module has currently loaded");
}

})();

```

```
.discord-list {
 list-style-type: none;
 display: flex;
 flex-direction: column;
 margin-left: 15px;
}

.discord-member {
 vertical-align: middle;
 width: 100%;
 line-height: 23px;
 display: flex;
 align-items: center;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.discord-avatar {
 display: inline-flex;
}

.discord-avatar:after {
 display: block;
 background-color: #43b581;
 width: 6px;
 height: 6px;
 content: " ";
 border-radius: 100%;
 position: relative;
 top: 14px;
 right: 7px;
}

.discord-avatar.discord-idle:after {
 background-color: rgb(250, 166, 26);
}

.discord-avatar.discord-dnd:after {
 background-color: rgb(240, 71, 71);
}

.discord-avatar img {
 border-radius: 100%;
 margin-right: 4px;
 width: 20px;
 height: 20px;
}

.discord-chevron {
 border-color: transparent;
 border-top-color: black;
 border-style: solid;
 border-width: 7px;
 width: 0;
 vertical-align: middle;
 margin-top: 2px;
 cursor: pointer;
}

.discord-chevron.opened {
 border-top-color: transparent;
 border-bottom-color: black;
}

.discord-joined {
 border-color: rgb(114, 137, 218);
 background: rgb(114, 137, 218);
 color: white;
 border-radius: 4px;
 font-size: 12px;
 margin-top: 5px;
}

#discord-counter {
 display: inline;
 background-color: rgb(114, 137, 218);
 border-radius: 15px;
 color: white;
 padding: 1px 4px;
 font-size: 12px;
 line-height: 14px;
}

.discord-icon {
 width: 40px;
 height: 40px;
 display: block;
 border-radius: 40px;
}

```