2020-04-24 03:48:48 +03:00
|
|
|
//import { logger } from "../polyfill";
|
2020-11-07 05:48:07 +02:00
|
|
|
import { formatNumber } from "../../helpers/number";
|
2020-10-10 20:19:04 +03:00
|
|
|
import appChatsManager from "../../lib/appManagers/appChatsManager";
|
2020-10-07 16:57:33 +03:00
|
|
|
import appDialogsManager from "../../lib/appManagers/appDialogsManager";
|
|
|
|
import appImManager from "../../lib/appManagers/appImManager";
|
2020-10-10 20:19:04 +03:00
|
|
|
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";
|
2020-10-07 16:57:33 +03:00
|
|
|
import AppSearch, { SearchGroup } from "../appSearch";
|
2020-11-10 02:47:00 +02:00
|
|
|
import "../avatar";
|
2020-11-25 21:36:18 +02:00
|
|
|
import { parseMenuButtonsTo } from "../misc";
|
2020-12-25 14:53:20 +02:00
|
|
|
import Scrollable, { ScrollableX } from "../scrollable";
|
2020-12-14 00:28:17 +02:00
|
|
|
import InputSearch from "../inputSearch";
|
2020-10-10 20:19:04 +03:00
|
|
|
import SidebarSlider from "../slider";
|
2020-11-25 21:36:18 +02:00
|
|
|
import { TransitionSlider } from "../transition";
|
2020-10-07 16:57:33 +03:00
|
|
|
import AppAddMembersTab from "./tabs/addMembers";
|
2020-10-10 20:19:04 +03:00
|
|
|
import AppArchivedTab from "./tabs/archivedTab";
|
2020-10-07 16:57:33 +03:00
|
|
|
import AppChatFoldersTab from "./tabs/chatFolders";
|
2020-10-10 20:19:04 +03:00
|
|
|
import AppContactsTab from "./tabs/contacts";
|
2020-10-07 16:57:33 +03:00
|
|
|
import AppEditFolderTab from "./tabs/editFolder";
|
2020-10-10 20:19:04 +03:00
|
|
|
import AppEditProfileTab from "./tabs/editProfile";
|
2020-10-07 16:57:33 +03:00
|
|
|
import AppIncludedChatsTab from "./tabs/includedChats";
|
2020-10-10 20:19:04 +03:00
|
|
|
import AppNewChannelTab from "./tabs/newChannel";
|
|
|
|
import AppNewGroupTab from "./tabs/newGroup";
|
|
|
|
import AppSettingsTab from "./tabs/settings";
|
2020-11-10 02:47:00 +02:00
|
|
|
import appMessagesManager from "../../lib/appManagers/appMessagesManager";
|
|
|
|
import apiManagerProxy from "../../lib/mtproto/mtprotoworker";
|
2020-12-25 14:53:20 +02:00
|
|
|
import AppSearchSuper from "../appSearchSuper.";
|
2020-05-06 04:03:31 +03:00
|
|
|
|
2020-06-13 11:19:39 +03:00
|
|
|
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();
|
2020-10-07 16:57:33 +03:00
|
|
|
const archivedTab = new AppArchivedTab();
|
2020-06-13 11:19:39 +03:00
|
|
|
|
|
|
|
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,
|
2020-05-13 18:26:40 +03:00
|
|
|
};
|
|
|
|
|
2020-06-13 11:19:39 +03:00
|
|
|
private toolsBtn: HTMLButtonElement;
|
|
|
|
private backBtn: HTMLButtonElement;
|
|
|
|
//private searchInput = document.getElementById('global-search') as HTMLInputElement;
|
2020-12-14 00:28:17 +02:00
|
|
|
private inputSearch: InputSearch;
|
2020-02-08 18:58:22 +07:00
|
|
|
|
2020-06-13 11:19:39 +03:00
|
|
|
private menuEl: HTMLElement;
|
2020-05-27 09:21:16 +03:00
|
|
|
private buttons: {
|
|
|
|
newGroup: HTMLButtonElement,
|
|
|
|
contacts: HTMLButtonElement,
|
|
|
|
archived: HTMLButtonElement,
|
|
|
|
saved: HTMLButtonElement,
|
|
|
|
settings: HTMLButtonElement,
|
|
|
|
help: HTMLButtonElement
|
|
|
|
} = {} as any;
|
|
|
|
public archivedCount: HTMLSpanElement;
|
2020-02-09 13:45:43 +07:00
|
|
|
|
2020-06-13 11:19:39 +03:00
|
|
|
private newBtnMenu: HTMLElement;
|
2020-05-27 09:21:16 +03:00
|
|
|
private newButtons: {
|
|
|
|
channel: HTMLButtonElement,
|
|
|
|
group: HTMLButtonElement,
|
|
|
|
privateChat: HTMLButtonElement,
|
|
|
|
} = {} as any;
|
2020-06-13 11:19:39 +03:00
|
|
|
|
2020-06-19 14:49:55 +03:00
|
|
|
public archivedTab: AppArchivedTab;
|
2020-06-13 11:19:39 +03:00
|
|
|
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
|
|
|
|
2020-04-24 03:48:48 +03:00
|
|
|
//private log = logger('SL');
|
|
|
|
|
2020-10-07 16:57:33 +03:00
|
|
|
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() {
|
2020-11-10 02:47:00 +02:00
|
|
|
super(document.getElementById('column-left') as HTMLDivElement);
|
|
|
|
|
|
|
|
Object.assign(this.tabs, {
|
2020-06-19 14:49:55 +03:00
|
|
|
[AppSidebarLeft.SLIDERITEMSIDS.archived]: archivedTab,
|
2020-06-13 11:19:39 +03:00
|
|
|
[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,
|
2020-06-13 11:19:39 +03:00
|
|
|
});
|
|
|
|
|
2020-09-24 02:37:22 +03:00
|
|
|
//this._selectTab(0); // make first tab as default
|
|
|
|
|
2020-12-14 00:28:17 +02:00
|
|
|
this.inputSearch = new InputSearch('Telegram Search');
|
2020-11-15 05:33:47 +02:00
|
|
|
const sidebarHeader = this.sidebarEl.querySelector('.item-main .sidebar-header');
|
2020-12-14 00:28:17 +02:00
|
|
|
sidebarHeader.append(this.inputSearch.container);
|
2020-06-13 11:19:39 +03:00
|
|
|
|
|
|
|
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;
|
2020-06-13 11:19:39 +03:00
|
|
|
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;
|
2020-06-13 11:19:39 +03:00
|
|
|
|
|
|
|
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});
|
2020-05-06 04:03:31 +03:00
|
|
|
|
2020-05-27 09:21:16 +03:00
|
|
|
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)
|
2020-12-11 04:06:16 +02:00
|
|
|
appImManager.setPeer(appImManager.myId);
|
2020-02-10 14:56:15 +07:00
|
|
|
}, 0);
|
2020-02-08 13:03:09 +07:00
|
|
|
});
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-12-12 18:30:01 +02:00
|
|
|
attachClickEvent(this.buttons.archived, (e) => {
|
2020-06-13 11:19:39 +03:00
|
|
|
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.archived);
|
2020-05-06 04:03:31 +03:00
|
|
|
});
|
|
|
|
|
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-02-11 22:35:57 +07:00
|
|
|
});
|
2020-04-19 00:55:20 +03:00
|
|
|
|
2020-12-12 18:30:01 +02:00
|
|
|
attachClickEvent(this.buttons.settings, (e) => {
|
2020-05-13 18:26:40 +03:00
|
|
|
this.settingsTab.fillElements();
|
2020-06-13 11:19:39 +03:00
|
|
|
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.settings);
|
2020-04-19 00:55:20 +03:00
|
|
|
});
|
2020-02-22 18:20:43 +07:00
|
|
|
|
2020-12-12 18:30:01 +02:00
|
|
|
attachClickEvent(this.newButtons.channel, (e) => {
|
2020-06-13 11:19:39 +03:00
|
|
|
this.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newChannel);
|
2020-05-09 15:02:07 +03:00
|
|
|
});
|
|
|
|
|
2020-05-27 09:21:16 +03:00
|
|
|
[this.newButtons.group, this.buttons.newGroup].forEach(btn => {
|
2020-12-12 18:30:01 +02:00
|
|
|
attachClickEvent(btn, (e) => {
|
2020-12-11 04:06:16 +02:00
|
|
|
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) => {
|
2020-09-23 23:29:53 +03:00
|
|
|
this.archivedCount.innerText = '' + formatNumber(e.detail.count, 1);
|
2020-10-15 23:58:14 +03:00
|
|
|
this.archivedCount.classList.toggle('hide', !e.detail.count);
|
2020-04-20 00:40:00 +03:00
|
|
|
});
|
|
|
|
|
2020-10-07 16:57:33 +03:00
|
|
|
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-05-06 04:03:31 +03:00
|
|
|
|
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-05-06 04:03:31 +03:00
|
|
|
});
|
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-05-06 04:03:31 +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-05-06 04:03:31 +03:00
|
|
|
}
|
2020-02-06 22:43:07 +07:00
|
|
|
}
|
|
|
|
|
2020-04-08 18:46:43 +03:00
|
|
|
const appSidebarLeft = new AppSidebarLeft();
|
2020-09-29 05:03:26 +03:00
|
|
|
MOUNT_CLASS_TO && (MOUNT_CLASS_TO.appSidebarLeft = appSidebarLeft);
|
2020-04-08 18:46:43 +03:00
|
|
|
export default appSidebarLeft;
|