63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
|
import { $, $$, $$$, $$$$ } from './require/q-module';
|
||
|
|
|
||
|
|
import Elements from '../elements';
|
||
|
|
|
||
|
|
import IState from './require/elements-state';
|
||
|
|
import ElementsUtil from './require/elements-util.js';
|
||
|
|
import BaseElements from './require/base-elements.js';
|
||
|
|
import ClientController from '../client-controller';
|
||
|
|
import { Channel } from '../data-types';
|
||
|
|
|
||
|
|
export default function createChannel(state: IState, server: ClientController, channel: Channel) {
|
||
|
|
const { document, ui, actions } = state;
|
||
|
|
|
||
|
|
$.setDocument(document);
|
||
|
|
|
||
|
|
let element = $.create({ class: 'channel text', 'meta-id': channel.id, 'meta-server-id': server.id, content: [
|
||
|
|
// Scraped directly from discord (#)
|
||
|
|
{ class: 'icon', content: BaseElements.TEXT_CHANNEL_ICON },
|
||
|
|
{ class: 'name', content: channel.name },
|
||
|
|
{ class: 'modify', content: BaseElements.COG }
|
||
|
|
] }) as HTMLElement;
|
||
|
|
|
||
|
|
element.addEventListener('click', async () => {
|
||
|
|
if (element.classList.contains('active')) return;
|
||
|
|
await ui.setActiveChannel(server, channel);
|
||
|
|
await actions.fetchAndUpdateMessagesRecent(server, channel);
|
||
|
|
$('#text-input').focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
let modifyContextElement = $.create({ class: 'context', content: {
|
||
|
|
class: 'above', content: [
|
||
|
|
{ class: 'content text', content: 'Modify Channel' },
|
||
|
|
{ class: 'tab', content: BaseElements.TAB_BELOW }
|
||
|
|
]
|
||
|
|
}}) as HTMLElement;
|
||
|
|
|
||
|
|
$$$(element, '.modify').addEventListener('click', async (e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
if (modifyContextElement.parentElement) {
|
||
|
|
modifyContextElement.parentElement.removeChild(modifyContextElement);
|
||
|
|
}
|
||
|
|
let modifyOverlay = Elements.createModifyChannelOverlay(server, channel);
|
||
|
|
document.body.appendChild(modifyOverlay);
|
||
|
|
$$$(modifyOverlay, '.text-input.channel-name').focus();
|
||
|
|
ElementsUtil.setCursorToEnd($$$(modifyOverlay, '.text-input.channel-name'));
|
||
|
|
});
|
||
|
|
|
||
|
|
$$$(element, '.modify').addEventListener('mouseenter', () => {
|
||
|
|
document.body.appendChild(modifyContextElement);
|
||
|
|
ElementsUtil.alignContextElement(modifyContextElement, $$$(element, '.modify'), { bottom: 'top', centerX: 'centerX' });
|
||
|
|
});
|
||
|
|
|
||
|
|
$$$(element, '.modify').addEventListener('mouseleave', () => {
|
||
|
|
if (modifyContextElement.parentElement) {
|
||
|
|
modifyContextElement.parentElement.removeChild(modifyContextElement);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return element;
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = createChannel;
|