2020-04-24 03:48:48 +03:00
|
|
|
//import { logger } from "../polyfill";
|
2020-02-06 22:43:07 +07:00
|
|
|
import appDialogsManager from "./appDialogsManager";
|
2020-04-24 03:48:48 +03:00
|
|
|
import { $rootScope } from "../utils";
|
2020-02-08 13:03:09 +07:00
|
|
|
import appImManager from "./appImManager";
|
2020-04-26 15:19:17 +03:00
|
|
|
//import apiManager from '../mtproto/apiManager';
|
|
|
|
import apiManager from '../mtproto/mtprotoworker';
|
2020-04-24 03:48:48 +03:00
|
|
|
import AppSearch, { SearchGroup } from "../../components/appSearch";
|
2020-05-06 04:03:31 +03:00
|
|
|
import { horizontalMenu } from "../../components/misc";
|
|
|
|
import appUsersManager from "./appUsersManager";
|
|
|
|
import Scrollable from "../../components/scrollable_new";
|
|
|
|
import appPhotosManager from "./appPhotosManager";
|
|
|
|
import { appPeersManager } from "../services";
|
|
|
|
|
|
|
|
const SLIDERITEMSIDS = {
|
|
|
|
archived: 1,
|
|
|
|
contacts: 2
|
|
|
|
};
|
2020-02-06 22:43:07 +07:00
|
|
|
|
|
|
|
class AppSidebarLeft {
|
2020-04-24 03:48:48 +03:00
|
|
|
private sidebarEl = document.getElementById('column-left') as HTMLDivElement;
|
2020-02-06 22:43:07 +07:00
|
|
|
private toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
|
2020-02-15 22:20:38 +07:00
|
|
|
private backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
|
2020-02-06 22:43:07 +07:00
|
|
|
private searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
|
2020-04-24 03:48:48 +03:00
|
|
|
private searchInput = document.getElementById('global-search') as HTMLInputElement;
|
2020-02-08 18:58:22 +07:00
|
|
|
|
2020-02-08 13:03:09 +07:00
|
|
|
private menuEl = this.toolsBtn.querySelector('.btn-menu');
|
|
|
|
private savedBtn = this.menuEl.querySelector('.menu-saved');
|
2020-02-11 22:35:57 +07:00
|
|
|
private archivedBtn = this.menuEl.querySelector('.menu-archive');
|
2020-05-06 04:03:31 +03:00
|
|
|
private contactsBtn = this.menuEl.querySelector('.menu-contacts');
|
2020-04-19 00:55:20 +03:00
|
|
|
private logOutBtn = this.menuEl.querySelector('.menu-logout');
|
2020-02-15 22:20:38 +07:00
|
|
|
public archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
|
2020-02-09 13:45:43 +07:00
|
|
|
|
2020-04-24 03:48:48 +03:00
|
|
|
//private log = logger('SL');
|
|
|
|
|
2020-05-06 04:03:31 +03:00
|
|
|
private searchGroups = {
|
2020-04-24 03:48:48 +03:00
|
|
|
contacts: new SearchGroup('Contacts and Chats', 'contacts'),
|
|
|
|
globalContacts: new SearchGroup('Global Search', 'contacts'),
|
2020-05-06 04:03:31 +03:00
|
|
|
messages: new SearchGroup('Global Search', 'messages'),
|
|
|
|
people: new SearchGroup('People', 'contacts', false, 'search-group-people'),
|
|
|
|
recent: new SearchGroup('Recent', 'contacts', false, 'search-group-recent')
|
|
|
|
};
|
|
|
|
private globalSearch = new AppSearch(this.searchContainer, this.searchInput, this.searchGroups);
|
|
|
|
|
|
|
|
private _selectTab: (id: number) => void;
|
|
|
|
private historyTabIDs: number[] = [];
|
|
|
|
|
|
|
|
private contactsList: HTMLUListElement;
|
|
|
|
private contactsScrollable: Scrollable;
|
|
|
|
private contactsPromise: Promise<void>;
|
|
|
|
private contactsInput: HTMLInputElement;
|
2020-02-21 15:25:19 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
constructor() {
|
2020-05-06 04:03:31 +03:00
|
|
|
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 Scrollable(peopleContainer, 'x');
|
|
|
|
|
2020-02-10 14:56:15 +07:00
|
|
|
this.savedBtn.addEventListener('click', (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-02-13 22:42:39 +07:00
|
|
|
let dom = appDialogsManager.getDialogDom(appImManager.myID);
|
2020-04-08 18:46:43 +03: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-02-11 22:35:57 +07:00
|
|
|
this.archivedBtn.addEventListener('click', (e) => {
|
2020-05-06 04:03:31 +03:00
|
|
|
this.selectTab(SLIDERITEMSIDS.archived);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.contactsBtn.addEventListener('click', (e) => {
|
|
|
|
this.openContacts();
|
|
|
|
this.selectTab(SLIDERITEMSIDS.contacts);
|
2020-02-11 22:35:57 +07:00
|
|
|
});
|
2020-04-19 00:55:20 +03:00
|
|
|
|
|
|
|
this.logOutBtn.addEventListener('click', (e) => {
|
|
|
|
apiManager.logOut();
|
|
|
|
});
|
2020-02-22 18:20:43 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchInput.addEventListener('focus', (e) => {
|
2020-02-15 22:20:38 +07:00
|
|
|
this.toolsBtn.classList.remove('active');
|
|
|
|
this.backBtn.classList.add('active');
|
2020-05-06 04:03:31 +03:00
|
|
|
this.searchContainer.classList.remove('hide');
|
|
|
|
void this.searchContainer.offsetWidth; // reflow
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchContainer.classList.add('active');
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-04-24 03:48:48 +03:00
|
|
|
/* if(!this.globalSearch.searchInput.value) {
|
|
|
|
for(let i in this.globalSearch.searchGroups) {
|
|
|
|
this.globalSearch.searchGroups[i].clear();
|
2020-02-11 22:35:57 +07:00
|
|
|
}
|
2020-04-24 03:48:48 +03:00
|
|
|
} */
|
2020-02-09 17:30:24 +07:00
|
|
|
|
2020-05-06 04:03:31 +03:00
|
|
|
false && this.searchInput.addEventListener('blur', (e) => {
|
2020-02-06 22:43:07 +07:00
|
|
|
if(!this.searchInput.value) {
|
2020-02-15 22:20:38 +07:00
|
|
|
this.toolsBtn.classList.add('active');
|
|
|
|
this.backBtn.classList.remove('active');
|
2020-02-17 19:18:06 +07:00
|
|
|
this.backBtn.click();
|
2020-02-06 22:43:07 +07:00
|
|
|
}
|
2020-02-07 13:38:55 +07:00
|
|
|
|
|
|
|
/* this.peerID = 0;
|
|
|
|
this.loadedCount = 0;
|
|
|
|
this.minMsgID = 0; */
|
2020-02-06 22:43:07 +07:00
|
|
|
}, {once: true});
|
|
|
|
});
|
2020-02-10 14:56:15 +07:00
|
|
|
|
2020-02-15 22:20:38 +07:00
|
|
|
this.backBtn.addEventListener('click', (e) => {
|
2020-04-20 00:40:00 +03:00
|
|
|
appDialogsManager.chatsArchivedContainer.classList.remove('active');
|
2020-02-15 22:20:38 +07:00
|
|
|
this.toolsBtn.classList.add('active');
|
|
|
|
this.backBtn.classList.remove('active');
|
2020-02-17 19:18:06 +07:00
|
|
|
this.searchContainer.classList.remove('active');
|
2020-05-06 04:03:31 +03:00
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
this.searchContainer.classList.add('hide');
|
|
|
|
this.globalSearch.reset();
|
|
|
|
|
|
|
|
this.searchGroups.people.setActive();
|
|
|
|
//this.searchGroups.recent.setActive();
|
|
|
|
}, 150);
|
2020-02-07 13:38:55 +07:00
|
|
|
});
|
2020-02-11 22:35:57 +07:00
|
|
|
|
2020-04-20 00:40:00 +03:00
|
|
|
$rootScope.$on('dialogs_archived_unread', (e: CustomEvent) => {
|
|
|
|
this.archivedCount.innerText = '' + e.detail.count;
|
|
|
|
});
|
|
|
|
|
2020-05-06 04:03:31 +03:00
|
|
|
this._selectTab = horizontalMenu(null, this.sidebarEl.querySelector('.sidebar-slider') as HTMLDivElement, null, null, 420);
|
|
|
|
this._selectTab(0);
|
|
|
|
|
|
|
|
Array.from(this.sidebarEl.querySelectorAll('.sidebar-close-button') as any as HTMLElement[]).forEach(el => {
|
|
|
|
el.addEventListener('click', () => {
|
|
|
|
console.log('sidebar-close-button click:', this.historyTabIDs);
|
|
|
|
let closingID = this.historyTabIDs.pop(); // pop current
|
|
|
|
|
|
|
|
// need to clear, and left 1 page for smooth slide
|
|
|
|
if(closingID == SLIDERITEMSIDS.contacts) {
|
|
|
|
let pageCount = appPhotosManager.windowH / 72 * 1.25 | 0;
|
|
|
|
(Array.from(this.contactsList.children) as HTMLElement[]).slice(pageCount).forEach(el => el.remove());
|
|
|
|
setTimeout(() => {
|
|
|
|
this.contactsList.innerHTML = '';
|
|
|
|
}, 420);
|
|
|
|
}
|
|
|
|
|
|
|
|
this._selectTab(this.historyTabIDs.pop() || 0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
appUsersManager.getTopPeers().then(categories => {
|
|
|
|
console.log('got top categories:', categories);
|
|
|
|
|
|
|
|
let category = categories[0];
|
|
|
|
if(!category || !category.peers) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
category.peers.forEach((topPeer: {
|
|
|
|
_: 'topPeer',
|
|
|
|
peer: any,
|
|
|
|
rating: number
|
|
|
|
}) => {
|
|
|
|
let peerID = appPeersManager.getPeerID(topPeer.peer);
|
|
|
|
let {dialog, dom} = appDialogsManager.addDialog(peerID, this.searchGroups.people.list, false, true, true);
|
|
|
|
|
|
|
|
this.searchGroups.people.setActive();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
let contactsContainer = this.sidebarEl.querySelector('#contacts-container');
|
|
|
|
this.contactsInput = contactsContainer.querySelector('#contacts-search');
|
|
|
|
this.contactsList = contactsContainer.querySelector('#contacts') as HTMLUListElement;
|
|
|
|
appDialogsManager.setListClickListener(this.contactsList);
|
|
|
|
this.contactsScrollable = new Scrollable(this.contactsList.parentElement);
|
|
|
|
|
|
|
|
let prevValue = '';
|
|
|
|
this.contactsInput.addEventListener('input', () => {
|
|
|
|
let value = this.contactsInput.value;
|
|
|
|
if(prevValue != value) {
|
|
|
|
this.contactsList.innerHTML = '';
|
|
|
|
this.openContacts(prevValue = value);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// preload contacts
|
|
|
|
appUsersManager.getContacts();
|
|
|
|
}
|
|
|
|
|
|
|
|
public openContacts(query?: string) {
|
|
|
|
if(this.contactsPromise) return this.contactsPromise;
|
|
|
|
this.contactsScrollable.onScrolledBottom = null;
|
|
|
|
|
|
|
|
this.contactsPromise = appUsersManager.getContacts(query).then(contacts => {
|
|
|
|
this.contactsPromise = null;
|
|
|
|
|
|
|
|
if(this.historyTabIDs[this.historyTabIDs.length - 1] != SLIDERITEMSIDS.contacts) {
|
|
|
|
console.warn('user closed contacts before it\'s loaded');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let sorted = contacts
|
|
|
|
.map(userID => {
|
|
|
|
let user = appUsersManager.getUser(userID);
|
|
|
|
let status = appUsersManager.getUserStatusForSort(user.status);
|
|
|
|
|
|
|
|
return {user, status};
|
|
|
|
})
|
|
|
|
.sort((a, b) => b.status - a.status);
|
|
|
|
|
|
|
|
let renderPage = () => {
|
|
|
|
let pageCount = appPhotosManager.windowH / 72 * 1.25 | 0;
|
|
|
|
let arr = sorted.splice(0, pageCount);
|
|
|
|
|
|
|
|
arr.forEach(({user}) => {
|
|
|
|
let {dialog, dom} = appDialogsManager.addDialog(user.id, this.contactsList, false);
|
|
|
|
|
|
|
|
let status = appUsersManager.getUserStatusString(user.id);
|
|
|
|
dom.lastMessageSpan.innerHTML = status == 'online' ? `<i>${status}</i>` : status;
|
|
|
|
});
|
|
|
|
|
|
|
|
if(!sorted.length) renderPage = undefined;
|
|
|
|
};
|
|
|
|
|
|
|
|
renderPage();
|
|
|
|
this.contactsScrollable.onScrolledBottom = () => {
|
|
|
|
if(renderPage) {
|
|
|
|
renderPage();
|
|
|
|
} else {
|
|
|
|
this.contactsScrollable.onScrolledBottom = null;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
public selectTab(id: number) {
|
|
|
|
this.historyTabIDs.push(id);
|
|
|
|
this._selectTab(id);
|
2020-02-07 13:38:55 +07:00
|
|
|
}
|
2020-02-06 22:43:07 +07:00
|
|
|
}
|
|
|
|
|
2020-04-08 18:46:43 +03:00
|
|
|
const appSidebarLeft = new AppSidebarLeft();
|
|
|
|
|
|
|
|
(window as any).appSidebarLeft = appSidebarLeft;
|
|
|
|
|
|
|
|
export default appSidebarLeft;
|