114 lines
4.7 KiB
TypeScript
114 lines
4.7 KiB
TypeScript
import * as electronRemote from '@electron/remote';
|
|
const electronConsole = electronRemote.getGlobal('console') as Console;
|
|
import Logger from '../../../logger/logger';
|
|
const LOG = Logger.create(__filename, electronConsole);
|
|
|
|
import BaseElements from './require/base-elements';
|
|
import ElementsUtil from './require/elements-util';
|
|
|
|
import { GuildMetadata } from '../data-types';
|
|
import Q from '../q-module';
|
|
import UI from '../ui';
|
|
import Actions from '../actions';
|
|
import createGuildContextMenu from './context-menu-guild';
|
|
import GuildsManager from '../guilds-manager';
|
|
import CombinedGuild from '../guild-combined';
|
|
|
|
export default function createGuildListGuild(document: Document, q: Q, ui: UI, guildsManager: GuildsManager, guild: CombinedGuild) {
|
|
let element = q.create({ class: 'guild', 'meta-id': guild.id, 'meta-name': guild.id, content: [
|
|
{ class: 'pill' },
|
|
{ tag: 'img', src: './img/loading.svg', alt: 'guild' }, // src is set later by script.js
|
|
] }) as HTMLElement;
|
|
|
|
// Hover over for name + connection info
|
|
(async () => {
|
|
let guildData: GuildMetadata;
|
|
try {
|
|
guildData = await guild.fetchMetadata();
|
|
if (!guildData.iconResourceId) throw new Error('guild icon not identified yet');
|
|
let guildIcon = await guild.fetchResource(guildData.iconResourceId);
|
|
let guildIconSrc = await ElementsUtil.getImageBufferSrc(guildIcon.data);
|
|
(q.$$$(element, 'img') as HTMLImageElement).src = guildIconSrc;
|
|
} catch (e) {
|
|
LOG.error('Error fetching guild icon', e);
|
|
(q.$$$(element, 'img') as HTMLImageElement).src = './img/error.png';
|
|
return;
|
|
}
|
|
|
|
element.setAttribute('meta-name', guildData.name);
|
|
|
|
let contextElement = q.create({ class: 'context', content: {
|
|
class: 'info', content: [
|
|
BaseElements.TAB_LEFT,
|
|
{ class: 'content guild' } // populated later
|
|
]
|
|
} }) as HTMLElement;
|
|
|
|
// TODO: future: update the status in real-time with the update-member event
|
|
|
|
element.addEventListener('mouseenter', async () => {
|
|
Q.clearChildren(q.$$$(contextElement, '.content'));
|
|
q.$$$(contextElement, '.content').appendChild(q.create({ class: 'name', content: element.getAttribute('meta-name') }));
|
|
document.body.appendChild(contextElement);
|
|
ElementsUtil.alignContextElement(contextElement, element, { left: 'right', centerY: 'centerY' });
|
|
(async () => {
|
|
let connection = await guild.fetchConnectionInfo();
|
|
let connectionElement = q.create({ class: 'connection ' + connection.status, content: [
|
|
{ class: 'status-circle' },
|
|
{ class: 'display-name', content: connection.displayName }
|
|
] });
|
|
q.$$$(contextElement, '.content').appendChild(connectionElement);
|
|
ElementsUtil.alignContextElement(contextElement, element, { left: 'right', centerY: 'centerY' });
|
|
})();
|
|
});
|
|
|
|
element.addEventListener('mouseleave', () => {
|
|
if (contextElement.parentElement) {
|
|
contextElement.parentElement.removeChild(contextElement);
|
|
}
|
|
});
|
|
})();
|
|
|
|
element.addEventListener('click', async () => {
|
|
if (element.classList.contains('active')) return;
|
|
|
|
ui.setActiveGuild(guild);
|
|
|
|
// Connection information
|
|
(async () => {
|
|
await Actions.fetchAndUpdateConnection(ui, guild);
|
|
})();
|
|
|
|
// Guild Channel Name
|
|
(async () => {
|
|
// Explicitly not using a withPotentialError to make this simpler
|
|
try {
|
|
let guildData = await guild.fetchMetadata();
|
|
ui.updateGuildName(guild, guildData.name);
|
|
} catch (e) {
|
|
LOG.error('Error fetching guild name', e);
|
|
ui.updateGuildName(guild, 'ERROR');
|
|
}
|
|
})();
|
|
|
|
// Guild Channel List
|
|
(async () => {
|
|
await Actions.fetchAndUpdateChannels(q, ui, guild);
|
|
})();
|
|
|
|
// Guild Members
|
|
(async () => {
|
|
await Actions.fetchAndUpdateMembers(q, ui, guild);
|
|
})();
|
|
});
|
|
|
|
element.addEventListener('contextmenu', (e) => {
|
|
let contextMenu = createGuildContextMenu(document, q, ui, guildsManager, guild);
|
|
document.body.appendChild(contextMenu);
|
|
let relativeTo = { x: e.pageX, y: e.pageY };
|
|
ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'centerX' });
|
|
});
|
|
|
|
return element;
|
|
}
|