367 lines
13 KiB
TypeScript
Raw Normal View History

//import { logger } from "../polyfill";
import { formatNumber } from "../../helpers/number";
import appChatsManager from "../../lib/appManagers/appChatsManager";
import appDialogsManager from "../../lib/appManagers/appDialogsManager";
import appImManager from "../../lib/appManagers/appImManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import appStateManager from "../../lib/appManagers/appStateManager";
import appUsersManager from "../../lib/appManagers/appUsersManager";
import { MOUNT_CLASS_TO } from "../../lib/mtproto/mtproto_config";
2020-11-15 05:33:47 +02:00
import rootScope from "../../lib/rootScope";
2020-12-12 18:30:01 +02:00
import { attachClickEvent, findUpClassName, findUpTag } from "../../helpers/dom";
import AppSearch, { SearchGroup } from "../appSearch";
import "../avatar";
import { parseMenuButtonsTo } from "../misc";
import { ScrollableX } from "../scrollable";
import SearchInput from "../searchInput";
import SidebarSlider from "../slider";
import { TransitionSlider } from "../transition";
import AppAddMembersTab from "./tabs/addMembers";
import AppArchivedTab from "./tabs/archivedTab";
import AppChatFoldersTab from "./tabs/chatFolders";
import AppContactsTab from "./tabs/contacts";
import AppEditFolderTab from "./tabs/editFolder";
import AppEditProfileTab from "./tabs/editProfile";
import AppIncludedChatsTab from "./tabs/includedChats";
import AppNewChannelTab from "./tabs/newChannel";
import AppNewGroupTab from "./tabs/newGroup";
import AppSettingsTab from "./tabs/settings";
import appMessagesManager from "../../lib/appManagers/appMessagesManager";
import apiManagerProxy from "../../lib/mtproto/mtprotoworker";
const newChannelTab = new AppNewChannelTab();
const addMembersTab = new AppAddMembersTab();
const contactsTab = new AppContactsTab();
const newGroupTab = new AppNewGroupTab();
const settingsTab = new AppSettingsTab();
const editProfileTab = new AppEditProfileTab();
2020-06-19 14:49:55 +03:00
const editFolderTab = new AppEditFolderTab();
const includedChatsTab = new AppIncludedChatsTab();
const archivedTab = new AppArchivedTab();
/* const Transition = (container: HTMLElement, duration: number, from: HTMLElement, to: HTMLElement) => {
if(to.classList.contains('active')) return Promise.resolve();
container.classList.add('animating');
const backwards = whichChild(to) < whichChild(from);
if(backwards) {
container.classList.add('backwards');
}
from.classList.add('from');
to.classList.add('to');
return new Promise((resolve) => {
setTimeout(() => {
from.classList.remove('from', 'active');
container.classList.remove('animating', 'backwards');
to.classList.replace('to', 'active');
resolve();
}, duration);
});
}; */
export class AppSidebarLeft extends SidebarSlider {
public static SLIDERITEMSIDS = {
archived: 1,
contacts: 2,
newChannel: 3,
addMembers: 4,
newGroup: 5,
settings: 6,
editProfile: 7,
2020-06-19 14:49:55 +03:00
chatFolders: 8,
editFolder: 9,
includedChats: 10,
};
private toolsBtn: HTMLButtonElement;
private backBtn: HTMLButtonElement;
private searchContainer: HTMLDivElement;
//private searchInput = document.getElementById('global-search') as HTMLInputElement;
private searchInput: SearchInput;
2020-02-08 18:58:22 +07:00
private menuEl: HTMLElement;
private buttons: {
newGroup: HTMLButtonElement,
contacts: HTMLButtonElement,
archived: HTMLButtonElement,
saved: HTMLButtonElement,
settings: HTMLButtonElement,
help: HTMLButtonElement
} = {} as any;
public archivedCount: HTMLSpanElement;
private newBtnMenu: HTMLElement;
private newButtons: {
channel: HTMLButtonElement,
group: HTMLButtonElement,
privateChat: HTMLButtonElement,
} = {} as any;
2020-06-19 14:49:55 +03:00
public archivedTab: AppArchivedTab;
public newChannelTab: AppNewChannelTab;
public addMembersTab: AppAddMembersTab;
public contactsTab: AppContactsTab;
public newGroupTab: AppNewGroupTab;
public settingsTab: AppSettingsTab;
public editProfileTab: AppEditProfileTab;
2020-06-19 14:49:55 +03:00
public chatFoldersTab: AppChatFoldersTab;
public editFolderTab: AppEditFolderTab;
public includedChatsTab: AppIncludedChatsTab;
2020-05-09 15:02:07 +03:00
//private log = logger('SL');
private searchGroups: {[k in 'contacts' | 'globalContacts' | 'messages' | 'people' | 'recent']: SearchGroup} = {} as any;
private globalSearch: AppSearch;
2020-02-21 15:25:19 +07:00
// peerIds
2020-06-20 04:11:24 +03:00
private recentSearch: number[] = [];
private recentSearchLoaded = false;
private recentSearchClearBtn: HTMLElement;
2020-02-06 22:43:07 +07:00
constructor() {
super(document.getElementById('column-left') as HTMLDivElement);
Object.assign(this.tabs, {
2020-06-19 14:49:55 +03:00
[AppSidebarLeft.SLIDERITEMSIDS.archived]: archivedTab,
[AppSidebarLeft.SLIDERITEMSIDS.newChannel]: newChannelTab,
[AppSidebarLeft.SLIDERITEMSIDS.contacts]: contactsTab,
[AppSidebarLeft.SLIDERITEMSIDS.addMembers]: addMembersTab,
[AppSidebarLeft.SLIDERITEMSIDS.newGroup]: newGroupTab,
[AppSidebarLeft.SLIDERITEMSIDS.settings]: settingsTab,
[AppSidebarLeft.SLIDERITEMSIDS.editProfile]: editProfileTab,
2020-11-15 05:33:47 +02:00
[AppSidebarLeft.SLIDERITEMSIDS.chatFolders]: this.chatFoldersTab = new AppChatFoldersTab(appMessagesManager, appPeersManager, this, apiManagerProxy, rootScope),
2020-06-19 14:49:55 +03:00
[AppSidebarLeft.SLIDERITEMSIDS.editFolder]: editFolderTab,
[AppSidebarLeft.SLIDERITEMSIDS.includedChats]: includedChatsTab,
});
//this._selectTab(0); // make first tab as default
this.searchInput = new SearchInput('Telegram Search');
2020-11-15 05:33:47 +02:00
const sidebarHeader = this.sidebarEl.querySelector('.item-main .sidebar-header');
sidebarHeader.append(this.searchInput.container);
this.toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
this.backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
this.searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
2020-06-19 14:49:55 +03:00
this.archivedTab = archivedTab;
this.newChannelTab = newChannelTab;
this.addMembersTab = addMembersTab;
this.contactsTab = contactsTab;
this.newGroupTab = newGroupTab;
this.settingsTab = settingsTab;
this.editProfileTab = editProfileTab;
2020-06-19 14:49:55 +03:00
this.editFolderTab = editFolderTab;
this.includedChatsTab = includedChatsTab;
this.menuEl = this.toolsBtn.querySelector('.btn-menu');
this.newBtnMenu = this.sidebarEl.querySelector('#new-menu');
this.searchInput.input.addEventListener('focus', () => {
this.searchGroups = {
//saved: new SearchGroup('', 'contacts'),
contacts: new SearchGroup('Chats', 'contacts'),
globalContacts: new SearchGroup('Global Search', 'contacts'),
messages: new SearchGroup('Global Search', 'messages'),
people: new SearchGroup('People', 'contacts', false, 'search-group-people'),
recent: new SearchGroup('Recent', 'contacts', false, 'search-group-recent')
};
this.globalSearch = new AppSearch(this.searchContainer, this.searchInput, this.searchGroups, (count) => {
if(!count && !this.searchInput.value.trim()) {
this.globalSearch.reset();
this.searchGroups.people.toggle();
this.renderRecentSearch();
}
});
this.searchContainer.addEventListener('click', (e) => {
const target = findUpTag(e.target, 'LI') as HTMLElement;
if(!target) {
return;
2020-06-20 04:11:24 +03:00
}
const searchGroup = findUpClassName(target, 'search-group');
if(!searchGroup || searchGroup.classList.contains('search-group-recent') || searchGroup.classList.contains('search-group-people')) {
return;
}
const peerId = +target.getAttribute('data-peerId');
if(this.recentSearch[0] != peerId) {
this.recentSearch.findAndSplice(p => p == peerId);
this.recentSearch.unshift(peerId);
if(this.recentSearch.length > 20) {
this.recentSearch.length = 20;
}
this.renderRecentSearch();
appStateManager.pushToState('recentSearch', this.recentSearch);
for(const peerId of this.recentSearch) {
appStateManager.setPeer(peerId, appPeersManager.getPeer(peerId));
}
clearRecentSearchBtn.style.display = '';
}
}, {capture: true});
let peopleContainer = document.createElement('div');
peopleContainer.classList.add('search-group-scrollable');
peopleContainer.append(this.searchGroups.people.list);
this.searchGroups.people.container.append(peopleContainer);
let peopleScrollable = new ScrollableX(peopleContainer);
appUsersManager.getTopPeers().then(peers => {
//console.log('got top categories:', categories);
if(peers.length) {
peers.forEach((peerId) => {
appDialogsManager.addDialog(peerId, this.searchGroups.people.list, false, true, true);
});
}
this.searchGroups.people.toggle();
});
2020-06-20 04:11:24 +03:00
let hideNewBtnMenuTimeout: number;
//const transition = Transition.bind(null, this.searchContainer.parentElement, 150);
const transition = TransitionSlider(this.searchContainer.parentElement, 'zoom-fade', 150, (id) => {
if(hideNewBtnMenuTimeout) clearTimeout(hideNewBtnMenuTimeout);
if(id == 0) {
this.globalSearch.reset();
hideNewBtnMenuTimeout = window.setTimeout(() => {
hideNewBtnMenuTimeout = 0;
this.newBtnMenu.classList.remove('is-hidden');
}, 150);
}
});
transition(0);
const onFocus = () => {
this.toolsBtn.classList.remove('active');
this.backBtn.classList.add('active');
this.newBtnMenu.classList.add('is-hidden');
transition(1);
if(firstTime) {
this.searchGroups.people.toggle();
this.renderRecentSearch();
firstTime = false;
2020-06-20 04:11:24 +03:00
}
/* this.searchInput.addEventListener('blur', (e) => {
if(!this.searchInput.value) {
this.toolsBtn.classList.add('active');
this.backBtn.classList.remove('active');
this.backBtn.click();
}
}, {once: true}); */
};
let firstTime = true;
this.searchInput.input.addEventListener('focus', onFocus);
onFocus();
this.backBtn.addEventListener('click', (e) => {
//appDialogsManager.chatsArchivedContainer.classList.remove('active');
this.toolsBtn.classList.add('active');
this.backBtn.classList.remove('active');
firstTime = true;
transition(0);
});
this.renderRecentSearch();
const clearRecentSearchBtn = this.recentSearchClearBtn = document.createElement('button');
clearRecentSearchBtn.classList.add('btn-icon', 'tgico-close');
this.searchGroups.recent.nameEl.append(clearRecentSearchBtn);
clearRecentSearchBtn.addEventListener('click', () => {
this.recentSearch = [];
appStateManager.pushToState('recentSearch', this.recentSearch);
this.renderRecentSearch(false);
clearRecentSearchBtn.style.display = 'none';
});
}, {once: true});
parseMenuButtonsTo(this.buttons, this.menuEl.children);
parseMenuButtonsTo(this.newButtons, this.newBtnMenu.firstElementChild.children);
this.archivedCount = this.buttons.archived.querySelector('.archived-count') as HTMLSpanElement;
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.saved, (e) => {
2020-02-17 19:18:06 +07:00
///////this.log('savedbtn click');
2020-02-10 14:56:15 +07:00
setTimeout(() => { // menu doesn't close if no timeout (lol)
appImManager.setPeer(appImManager.myId);
2020-02-10 14:56:15 +07:00
}, 0);
});
2020-02-07 13:38:55 +07:00
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.archived, (e) => {
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.archived);
});
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.contacts, (e) => {
2020-05-09 15:02:07 +03:00
this.contactsTab.openContacts();
});
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.settings, (e) => {
this.settingsTab.fillElements();
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.settings);
});
2020-02-22 18:20:43 +07:00
2020-12-12 18:30:01 +02:00
attachClickEvent(this.newButtons.channel, (e) => {
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
2020-05-09 15:02:07 +03:00
});
[this.newButtons.group, this.buttons.newGroup].forEach(btn => {
2020-12-12 18:30:01 +02:00
attachClickEvent(btn, (e) => {
this.addMembersTab.init(0, 'chat', false, (peerIds) => {
this.newGroupTab.init(peerIds);
2020-05-09 15:02:07 +03:00
});
});
});
2020-11-15 05:33:47 +02:00
rootScope.on('dialogs_archived_unread', (e) => {
this.archivedCount.innerText = '' + formatNumber(e.detail.count, 1);
this.archivedCount.classList.toggle('hide', !e.detail.count);
});
appUsersManager.getTopPeers();
2020-06-20 04:11:24 +03:00
}
2020-06-21 15:25:17 +03:00
public renderRecentSearch(setActive = true) {
2020-06-20 04:11:24 +03:00
appStateManager.getState().then(state => {
if(state && !this.recentSearchLoaded && Array.isArray(state.recentSearch)) {
this.recentSearch = state.recentSearch;
this.recentSearchLoaded = true;
}
2020-11-07 02:58:57 +02:00
if(this.searchInput.value.trim()) {
return;
}
2020-06-20 04:11:24 +03:00
this.searchGroups.recent.list.innerHTML = '';
this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none';
this.recentSearch.slice(0, 20).forEach(peerId => {
let {dialog, dom} = appDialogsManager.addDialog(peerId, this.searchGroups.recent.list, false, true, false, true);
2020-06-20 04:11:24 +03:00
dom.lastMessageSpan.innerText = peerId > 0 ? appUsersManager.getUserStatusString(peerId) : appChatsManager.getChatMembersString(peerId);
});
2020-06-20 04:11:24 +03:00
if(!this.recentSearch.length) {
this.searchGroups.recent.clear();
} else if(setActive) {
2020-06-21 15:25:17 +03:00
this.searchGroups.recent.setActive();
}
});
}
2020-02-06 22:43:07 +07:00
}
2020-04-08 18:46:43 +03:00
const appSidebarLeft = new AppSidebarLeft();
MOUNT_CLASS_TO && (MOUNT_CLASS_TO.appSidebarLeft = appSidebarLeft);
2020-04-08 18:46:43 +03:00
export default appSidebarLeft;