59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import appSidebarLeft, { AppSidebarLeft } from "..";
|
|
import { InputFile } from "../../../layer";
|
|
import appChatsManager from "../../../lib/appManagers/appChatsManager";
|
|
import PopupAvatar from "../../popups/avatar";
|
|
import { SliderTab } from "../../slider";
|
|
|
|
export default class AppNewChannelTab implements SliderTab {
|
|
private container = document.querySelector('.new-channel-container') as HTMLDivElement;
|
|
private canvas = this.container.querySelector('.avatar-edit-canvas') as HTMLCanvasElement;
|
|
private channelNameInput = this.container.querySelector('.new-channel-name') as HTMLInputElement;
|
|
private channelDescriptionInput = this.container.querySelector('.new-channel-description') as HTMLInputElement;
|
|
private nextBtn = this.container.querySelector('.btn-corner') as HTMLButtonElement;
|
|
private backBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement;
|
|
private uploadAvatar: () => Promise<InputFile> = null;
|
|
|
|
constructor() {
|
|
this.container.querySelector('.avatar-edit').addEventListener('click', () => {
|
|
new PopupAvatar().open(this.canvas, (_upload) => {
|
|
this.uploadAvatar = _upload;
|
|
});
|
|
});
|
|
|
|
this.channelNameInput.addEventListener('input', () => {
|
|
let value = this.channelNameInput.value;
|
|
if(value.length) {
|
|
this.nextBtn.classList.add('is-visible');
|
|
} else {
|
|
this.nextBtn.classList.remove('is-visible');
|
|
}
|
|
});
|
|
|
|
this.nextBtn.addEventListener('click', () => {
|
|
let title = this.channelNameInput.value;
|
|
let about = this.channelDescriptionInput.value;
|
|
|
|
this.nextBtn.disabled = true;
|
|
appChatsManager.createChannel(title, about).then((channelId) => {
|
|
if(this.uploadAvatar) {
|
|
this.uploadAvatar().then((inputFile) => {
|
|
appChatsManager.editPhoto(channelId, inputFile);
|
|
});
|
|
}
|
|
|
|
appSidebarLeft.removeTabFromHistory(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
|
|
appSidebarLeft.addMembersTab.init(channelId, 'channel', true);
|
|
});
|
|
});
|
|
}
|
|
|
|
public onCloseAfterTimeout() {
|
|
let ctx = this.canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
this.uploadAvatar = null;
|
|
this.channelNameInput.value = '';
|
|
this.channelDescriptionInput.value = '';
|
|
this.nextBtn.disabled = false;
|
|
}
|
|
} |