2020-02-06 22:43:07 +07:00
|
|
|
import { logger } from "../polyfill";
|
|
|
|
import { scrollable } from "../../components/misc";
|
|
|
|
import appMessagesManager from "./appMessagesManager";
|
|
|
|
import appDialogsManager from "./appDialogsManager";
|
2020-02-08 13:03:09 +07:00
|
|
|
import { isElementInViewport, $rootScope } from "../utils";
|
2020-02-07 13:38:55 +07:00
|
|
|
import appMessagesIDsManager from "./appMessagesIDsManager";
|
2020-02-08 13:03:09 +07:00
|
|
|
import apiManager from '../mtproto/apiManager';
|
|
|
|
import appImManager from "./appImManager";
|
2020-02-06 22:43:07 +07:00
|
|
|
|
|
|
|
class AppSidebarLeft {
|
|
|
|
private sidebarEl = document.querySelector('.page-chats .chats-container') as HTMLDivElement;
|
|
|
|
private searchInput = document.getElementById('global-search') as HTMLInputElement;
|
|
|
|
private toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
|
|
|
|
private searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
|
2020-02-08 13:03:09 +07:00
|
|
|
|
|
|
|
private menuEl = this.toolsBtn.querySelector('.btn-menu');
|
|
|
|
private savedBtn = this.menuEl.querySelector('.menu-saved');
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
private listsContainer: HTMLDivElement = null;
|
|
|
|
private searchMessagesList: HTMLUListElement = null;
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
private log = logger('SL');
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
private peerID = 0;
|
2020-02-07 13:38:55 +07:00
|
|
|
private minMsgID = 0;
|
|
|
|
private loadedCount = 0;
|
|
|
|
private foundCount = 0;
|
|
|
|
private offsetRate = 0;
|
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
private searchPromise: Promise<void> = null;
|
2020-02-07 13:38:55 +07:00
|
|
|
private searchTimeout: number = 0;
|
2020-02-06 22:43:07 +07:00
|
|
|
|
2020-02-07 13:38:55 +07:00
|
|
|
private query = '';
|
|
|
|
|
2020-02-08 13:03:09 +07:00
|
|
|
public myID = 0;
|
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
constructor() {
|
|
|
|
this.listsContainer = scrollable(this.searchContainer);
|
|
|
|
this.searchMessagesList = document.createElement('ul');
|
2020-02-08 13:03:09 +07:00
|
|
|
|
|
|
|
apiManager.getUserID().then((id) => {
|
|
|
|
this.myID = id;
|
|
|
|
});
|
|
|
|
|
|
|
|
$rootScope.$on('user_auth', (e: CustomEvent) => {
|
|
|
|
let userAuth = e.detail;
|
|
|
|
this.myID = userAuth ? userAuth.id : 0;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.savedBtn.addEventListener('click', () => {
|
|
|
|
appImManager.setPeer(this.myID);
|
|
|
|
});
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-07 21:17:39 +07:00
|
|
|
this.listsContainer.addEventListener('scroll', this.onSidebarScroll.bind(this));
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchContainer.append(this.listsContainer);
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
appDialogsManager.setListClickListener(this.searchMessagesList);
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchInput.addEventListener('focus', (e) => {
|
|
|
|
this.toolsBtn.classList.remove('tgico-menu');
|
|
|
|
this.toolsBtn.classList.add('tgico-back');
|
|
|
|
this.searchContainer.classList.add('active');
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
if(!this.searchInput.value) {
|
|
|
|
this.searchMessagesList.innerHTML = '';
|
|
|
|
}
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchInput.addEventListener('blur', (e) => {
|
|
|
|
if(!this.searchInput.value) {
|
|
|
|
this.toolsBtn.classList.add('tgico-menu');
|
|
|
|
this.toolsBtn.classList.remove('tgico-back');
|
|
|
|
this.searchContainer.classList.remove('active');
|
|
|
|
}
|
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-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchInput.addEventListener('input', (e) => {
|
|
|
|
//console.log('messageInput input', this.innerText, serializeNodes(Array.from(messageInput.childNodes)));
|
|
|
|
let value = this.searchInput.value;
|
|
|
|
this.log('input', value);
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
if(this.listsContainer.contains(this.searchMessagesList)) {
|
|
|
|
this.listsContainer.removeChild(this.searchMessagesList)
|
|
|
|
}
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
if(!value.trim()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-02-07 13:38:55 +07:00
|
|
|
this.query = value;
|
|
|
|
this.minMsgID = 0;
|
|
|
|
this.loadedCount = 0;
|
|
|
|
this.foundCount = 0;
|
|
|
|
this.offsetRate = 0;
|
|
|
|
this.searchMessagesList.innerHTML = '';
|
|
|
|
this.searchPromise = null;
|
|
|
|
this.searchMore().then(() => {
|
2020-02-06 22:43:07 +07:00
|
|
|
this.listsContainer.append(this.searchMessagesList);
|
|
|
|
});
|
|
|
|
});
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.toolsBtn.addEventListener('click', () => {
|
|
|
|
if(this.toolsBtn.classList.contains('tgico-back')) {
|
|
|
|
this.searchInput.value = '';
|
|
|
|
this.toolsBtn.classList.add('tgico-menu');
|
|
|
|
this.toolsBtn.classList.remove('tgico-back');
|
|
|
|
this.searchContainer.classList.remove('active');
|
2020-02-07 14:39:00 +07:00
|
|
|
this.peerID = 0;
|
2020-02-06 22:43:07 +07:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-02-07 13:38:55 +07:00
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
setTimeout(() => this.onSidebarScroll(), 0);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
public onSidebarScroll() {
|
|
|
|
let elements = Array.from(this.searchMessagesList.childNodes).slice(-5);
|
|
|
|
for(let li of elements) {
|
|
|
|
if(isElementInViewport(li)) {
|
|
|
|
this.log('Will load more search');
|
|
|
|
|
|
|
|
if(!this.searchTimeout) {
|
|
|
|
this.searchTimeout = setTimeout(() => {
|
|
|
|
this.searchMore();
|
|
|
|
this.searchTimeout = 0;
|
|
|
|
}, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
public beginSearch(peerID?: number) {
|
|
|
|
if(peerID) {
|
|
|
|
this.peerID = peerID;
|
|
|
|
}
|
2020-02-07 13:38:55 +07:00
|
|
|
|
2020-02-06 22:43:07 +07:00
|
|
|
this.searchInput.focus();
|
|
|
|
}
|
2020-02-07 13:38:55 +07:00
|
|
|
|
|
|
|
private searchMore() {
|
|
|
|
if(this.searchPromise) return this.searchPromise;
|
|
|
|
|
|
|
|
let query = this.query;
|
|
|
|
|
|
|
|
if(this.loadedCount != 0 && this.loadedCount >= this.foundCount) {
|
|
|
|
return Promise.resolve();
|
|
|
|
}
|
|
|
|
|
2020-02-07 14:39:00 +07:00
|
|
|
let maxID = appMessagesIDsManager.getMessageIDInfo(this.minMsgID)[0];
|
2020-02-07 13:38:55 +07:00
|
|
|
|
|
|
|
return this.searchPromise = appMessagesManager.getSearch(this.peerID, query, null, maxID, 20, this.offsetRate).then(res => {
|
|
|
|
this.searchPromise = null;
|
|
|
|
|
|
|
|
if(this.searchInput.value != query) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.log('input search result:', this.peerID, query, null, maxID, 20, res);
|
|
|
|
|
|
|
|
let {count, history, next_rate} = res;
|
|
|
|
|
|
|
|
if(history[0] == this.minMsgID) {
|
|
|
|
history.shift();
|
|
|
|
}
|
|
|
|
|
|
|
|
history.forEach((msgID: number) => {
|
|
|
|
let message = appMessagesManager.getMessage(msgID);
|
|
|
|
let originalDialog = appMessagesManager.getDialogByPeerID(message.peerID)[0];
|
|
|
|
|
|
|
|
if(!originalDialog) {
|
2020-02-07 14:39:00 +07:00
|
|
|
this.log('no original dialog by message:', message);
|
|
|
|
|
|
|
|
originalDialog = {
|
|
|
|
peerID: message.peerID,
|
|
|
|
pFlags: {},
|
|
|
|
peer: message.to_id
|
|
|
|
};
|
2020-02-07 13:38:55 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
let {dialog, dom} = appDialogsManager.addDialog(originalDialog, this.searchMessagesList, false);
|
|
|
|
appDialogsManager.setLastMessage(dialog, message, dom);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.minMsgID = history[history.length - 1];
|
|
|
|
this.offsetRate = next_rate;
|
|
|
|
this.loadedCount += history.length;
|
|
|
|
|
|
|
|
if(!this.foundCount) {
|
|
|
|
this.foundCount = count;
|
|
|
|
}
|
|
|
|
}).catch(err => {
|
|
|
|
this.log.error('search error', err);
|
|
|
|
this.searchPromise = null;
|
|
|
|
});
|
|
|
|
}
|
2020-02-06 22:43:07 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
export default new AppSidebarLeft();
|