315 lines
11 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";
2020-12-25 14:53:20 +02:00
import Scrollable, { ScrollableX } from "../scrollable";
import InputSearch from "../inputSearch";
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";
2020-12-25 14:53:20 +02:00
import AppSearchSuper from "../appSearchSuper.";
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();
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 searchInput = document.getElementById('global-search') as HTMLInputElement;
private inputSearch: InputSearch;
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;
2020-12-25 14:53:20 +02:00
searchSuper: AppSearchSuper;
2020-06-20 04:11:24 +03:00
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.inputSearch = new InputSearch('Telegram Search');
2020-11-15 05:33:47 +02:00
const sidebarHeader = this.sidebarEl.querySelector('.item-main .sidebar-header');
sidebarHeader.append(this.inputSearch.container);
this.toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
this.backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
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');
2020-12-25 14:53:20 +02:00
this.inputSearch.input.addEventListener('focus', () => this.initSearch(), {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-12-25 14:53:20 +02:00
private initSearch() {
const searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
const scrollable = new Scrollable(searchContainer);
this.searchGroups = {
contacts: new SearchGroup('Chats', 'contacts'),
globalContacts: new SearchGroup('Global Search', 'contacts'),
messages: new SearchGroup('Messages', 'messages'),
people: new SearchGroup('', 'contacts', true, 'search-group-people', true, false),
recent: new SearchGroup('Recent', 'contacts', true, 'search-group-recent', true, false)
};
const searchSuper = this.searchSuper = new AppSearchSuper([{
inputFilter: 'inputMessagesFilterEmpty',
name: 'Chats'
}, {
inputFilter: 'inputMessagesFilterPhotoVideo',
name: 'Media'
}, {
inputFilter: 'inputMessagesFilterUrl',
name: 'Links'
}, {
inputFilter: 'inputMessagesFilterDocument',
name: 'Files'
}, {
inputFilter: 'inputMessagesFilterMusic',
name: 'Music'
}, {
inputFilter: 'inputMessagesFilterVoice',
name: 'Voice'
}], scrollable, this.searchGroups, true);
scrollable.container.append(searchSuper.container);
searchSuper.setQuery({
peerId: 0,
folderId: 0
});
searchSuper.selectTab(0);
searchSuper.load(true);
this.inputSearch.onChange = (value) => {
searchSuper.cleanupHTML();
searchSuper.setQuery({
peerId: 0,
folderId: 0,
query: value
});
searchSuper.load(true);
};
2020-12-25 14:53:20 +02:00
searchSuper.tabs.inputMessagesFilterEmpty.addEventListener('click', (e) => {
const target = findUpTag(e.target, 'LI') as HTMLElement;
if(!target) {
2020-11-07 02:58:57 +02:00
return;
}
2020-12-25 14:53:20 +02:00
const searchGroup = findUpClassName(target, 'search-group');
if(!searchGroup || searchGroup.classList.contains('search-group-recent') || searchGroup.classList.contains('search-group-people')) {
return;
}
2020-06-20 04:11:24 +03:00
2020-12-25 14:53:20 +02:00
const peerId = +target.getAttribute('data-peerId');
appStateManager.getState().then(state => {
const recentSearch = state.recentSearch || [];
if(recentSearch[0] != peerId) {
recentSearch.findAndSplice(p => p == peerId);
recentSearch.unshift(peerId);
if(recentSearch.length > 20) {
recentSearch.length = 20;
}
appStateManager.pushToState('recentSearch', recentSearch);
for(const peerId of recentSearch) {
appStateManager.setPeer(peerId, appPeersManager.getPeer(peerId));
}
}
});
2020-12-25 14:53:20 +02:00
}, {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);
let hideNewBtnMenuTimeout: number;
//const transition = Transition.bind(null, searchContainer.parentElement, 150);
const transition = TransitionSlider(searchContainer.parentElement, 'zoom-fade', 150, (id) => {
if(hideNewBtnMenuTimeout) clearTimeout(hideNewBtnMenuTimeout);
if(id === 0) {
this.inputSearch.onClearClick();
hideNewBtnMenuTimeout = window.setTimeout(() => {
hideNewBtnMenuTimeout = 0;
this.newBtnMenu.classList.remove('is-hidden');
}, 150);
2020-06-21 15:25:17 +03:00
}
});
2020-12-25 14:53:20 +02:00
transition(0);
const onFocus = () => {
this.toolsBtn.classList.remove('active');
this.backBtn.classList.add('active');
this.newBtnMenu.classList.add('is-hidden');
transition(1);
};
this.inputSearch.input.addEventListener('focus', onFocus);
onFocus();
this.backBtn.addEventListener('click', (e) => {
this.toolsBtn.classList.add('active');
this.backBtn.classList.remove('active');
transition(0);
});
const clearRecentSearchBtn = document.createElement('button');
clearRecentSearchBtn.classList.add('btn-icon', 'tgico-close');
this.searchGroups.recent.nameEl.append(clearRecentSearchBtn);
clearRecentSearchBtn.addEventListener('click', () => {
this.searchGroups.recent.clear();
appStateManager.pushToState('recentSearch', []);
});
}
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;