459 lines
15 KiB
TypeScript
Raw Normal View History

//import { logger } from "../polyfill";
import { formatNumber } from "../../helpers/number";
import appImManager from "../../lib/appManagers/appImManager";
import appPeersManager from "../../lib/appManagers/appPeersManager";
import appStateManager from "../../lib/appManagers/appStateManager";
import appUsersManager from "../../lib/appManagers/appUsersManager";
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";
2021-01-01 23:44:31 +04:00
import { 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 AppNewGroupTab from "./tabs/newGroup";
import appMessagesManager from "../../lib/appManagers/appMessagesManager";
2020-12-25 14:53:20 +02:00
import AppSearchSuper from "../appSearchSuper.";
2020-12-25 19:38:32 +02:00
import { DateData, fillTipDates } from "../../helpers/date";
2021-02-13 19:32:10 +04:00
import { MOUNT_CLASS_TO } from "../../config/debug";
2021-02-20 21:10:26 +04:00
import AppSettingsTab from "./tabs/settings";
import AppNewChannelTab from "./tabs/newChannel";
import AppContactsTab from "./tabs/contacts";
import AppArchivedTab from "./tabs/archivedTab";
import AppAddMembersTab from "./tabs/addMembers";
export class AppSidebarLeft extends SidebarSlider {
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;
//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() {
2021-02-16 19:36:26 +04:00
super({
sidebarEl: document.getElementById('column-left') as HTMLDivElement,
navigationType: 'left'
});
//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;
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) => {
2021-02-20 21:10:26 +04:00
new AppArchivedTab(this).open();
});
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.contacts, (e) => {
2021-02-20 21:10:26 +04:00
new AppContactsTab(this).open();
});
2020-12-12 18:30:01 +02:00
attachClickEvent(this.buttons.settings, (e) => {
2021-02-20 21:10:26 +04:00
new AppSettingsTab(this).open();
});
2020-02-22 18:20:43 +07:00
2020-12-12 18:30:01 +02:00
attachClickEvent(this.newButtons.channel, (e) => {
2021-02-20 21:10:26 +04:00
new AppNewChannelTab(this).open();
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) => {
2021-02-20 21:10:26 +04:00
new AppAddMembersTab(this).open({
2021-01-06 13:16:53 +04:00
peerId: 0,
type: 'chat',
skippable: false,
takeOut: (peerIds) => {
2021-02-20 21:10:26 +04:00
new AppNewGroupTab(this).open(peerIds);
2021-01-06 13:16:53 +04:00
},
title: 'Add Members',
placeholder: 'Add People...'
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.count, 1);
this.archivedCount.classList.toggle('hide', !e.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);
2021-01-26 02:40:53 +02:00
const close = () => {
2021-02-04 01:00:15 +02:00
//setTimeout(() => {
this.backBtn.click();
//}, 0);
2021-01-26 02:40:53 +02:00
};
2020-12-25 14:53:20 +02:00
this.searchGroups = {
2021-01-26 02:40:53 +02:00
contacts: new SearchGroup('Chats', 'contacts', undefined, undefined, undefined, undefined, close),
globalContacts: new SearchGroup('Global Search', 'contacts', undefined, undefined, undefined, undefined, close),
2020-12-25 14:53:20 +02:00
messages: new SearchGroup('Messages', 'messages'),
2021-01-26 02:40:53 +02:00
people: new SearchGroup('', 'contacts', true, 'search-group-people', true, false, close),
recent: new SearchGroup('Recent', 'contacts', true, 'search-group-recent', true, true, close)
2020-12-25 14:53:20 +02:00
};
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);
searchContainer.prepend(searchSuper.nav.parentElement.parentElement);
2020-12-25 14:53:20 +02:00
scrollable.container.append(searchSuper.container);
2020-12-25 19:38:32 +02:00
const resetSearch = () => {
searchSuper.setQuery({
peerId: 0,
folderId: 0
});
searchSuper.selectTab(0);
searchSuper.load(true);
};
resetSearch();
let pickedElements: HTMLElement[] = [];
let selectedPeerId = 0;
let selectedMinDate = 0;
let selectedMaxDate = 0;
const updatePicked = () => {
(this.inputSearch.input as HTMLInputElement).placeholder = pickedElements.length ? 'Search' : 'Telegram Search';
this.inputSearch.container.classList.toggle('is-picked-twice', pickedElements.length === 2);
this.inputSearch.container.classList.toggle('is-picked', !!pickedElements.length);
if(pickedElements.length) {
this.inputSearch.input.style.setProperty('--paddingLeft', (pickedElements[pickedElements.length - 1].getBoundingClientRect().right - this.inputSearch.input.getBoundingClientRect().left) + 'px');
} else {
this.inputSearch.input.style.removeProperty('--paddingLeft');
}
};
const helper = document.createElement('div');
helper.classList.add('search-helper');
helper.addEventListener('click', (e) => {
const target = findUpClassName(e.target, 'selector-user');
if(!target) {
return;
}
const key = target.dataset.key;
if(key.indexOf('date_') === 0) {
const [_, minDate, maxDate] = key.split('_');
selectedMinDate = +minDate;
selectedMaxDate = +maxDate;
} else {
selectedPeerId = +key;
}
target.addEventListener('click', () => {
unselectEntity(target);
});
this.inputSearch.container.append(target);
this.inputSearch.onChange(this.inputSearch.value = '');
pickedElements.push(target);
updatePicked();
2020-12-25 14:53:20 +02:00
});
2020-12-25 19:38:32 +02:00
searchSuper.nav.parentElement.append(helper);
const renderEntity = (peerId: any, title?: string) => {
const div = document.createElement('div');
div.classList.add('selector-user'/* , 'scale-in' */);
const avatarEl = document.createElement('avatar-element');
avatarEl.classList.add('selector-user-avatar', 'tgico');
avatarEl.setAttribute('dialog', '1');
avatarEl.classList.add('avatar-30');
div.dataset.key = '' + peerId;
if(typeof(peerId) === 'number') {
if(title === undefined) {
2021-02-04 02:30:23 +02:00
title = peerId === rootScope.myId ? 'Saved' : appPeersManager.getPeerTitle(peerId, false, true);
2020-12-25 19:38:32 +02:00
}
avatarEl.setAttribute('peer', '' + peerId);
} else {
avatarEl.classList.add('tgico-calendarfilter');
}
if(title) {
div.innerHTML = title;
}
div.insertAdjacentElement('afterbegin', avatarEl);
return div;
};
const unselectEntity = (target: HTMLElement) => {
const key = target.dataset.key;
if(key.indexOf('date_') === 0) {
selectedMinDate = selectedMaxDate = 0;
} else {
selectedPeerId = 0;
}
target.remove();
pickedElements.findAndSplice(t => t === target);
setTimeout(() => {
updatePicked();
this.inputSearch.onChange(this.inputSearch.value);
}, 0);
};
this.inputSearch.onClear = () => {
pickedElements.forEach(el => {
unselectEntity(el);
});
};
2020-12-25 14:53:20 +02:00
this.inputSearch.onChange = (value) => {
searchSuper.cleanupHTML();
searchSuper.setQuery({
2020-12-25 19:38:32 +02:00
peerId: selectedPeerId,
folderId: selectedPeerId ? undefined : 0,
query: value,
minDate: selectedMinDate,
maxDate: selectedMaxDate
2020-12-25 14:53:20 +02:00
});
searchSuper.load(true);
2020-12-25 19:38:32 +02:00
helper.innerHTML = '';
searchSuper.nav.classList.remove('hide');
if(!value) {
}
if(!selectedPeerId && value.trim()) {
const middleware = searchSuper.getMiddleware();
Promise.all([
appMessagesManager.getConversationsAll(value).then(dialogs => dialogs.map(d => d.peerId)),
appUsersManager.getContacts(value, true)
]).then(results => {
if(!middleware()) return;
const peerIds = new Set(results[0].concat(results[1]));
peerIds.forEach(peerId => {
helper.append(renderEntity(peerId));
});
searchSuper.nav.classList.toggle('hide', !!helper.innerHTML);
//console.log('got peerIds by value:', value, [...peerIds]);
});
}
if(!selectedMinDate && value.trim()) {
const dates: DateData[] = [];
fillTipDates(value, dates);
dates.forEach(dateData => {
helper.append(renderEntity('date_' + dateData.minDate + '_' + dateData.maxDate, dateData.title));
});
searchSuper.nav.classList.toggle('hide', !!helper.innerHTML);
}
2020-12-25 14:53:20 +02:00
};
2021-02-04 01:00:15 +02:00
searchSuper.tabs.inputMessagesFilterEmpty.addEventListener('mousedown', (e) => {
2020-12-25 14:53:20 +02:00
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
const peerId = +target.getAttribute('data-peer-id');
2020-12-25 14:53:20 +02:00
appStateManager.getState().then(state => {
const recentSearch = state.recentSearch || [];
2021-02-04 02:30:23 +02:00
if(recentSearch[0] !== peerId) {
recentSearch.findAndSplice(p => p === peerId);
2020-12-25 14:53:20 +02:00
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) {
searchSuper.selectTab(0, false);
2020-12-25 14:53:20 +02:00
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 activeClassName = 'is-visible';
2020-12-25 14:53:20 +02:00
const onFocus = () => {
this.toolsBtn.classList.remove(activeClassName);
this.backBtn.classList.add(activeClassName);
2020-12-25 14:53:20 +02:00
this.newBtnMenu.classList.add('is-hidden');
this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', true);
2020-12-25 14:53:20 +02:00
transition(1);
};
this.inputSearch.input.addEventListener('focus', onFocus);
onFocus();
this.backBtn.addEventListener('click', (e) => {
this.toolsBtn.classList.add(activeClassName);
this.backBtn.classList.remove(activeClassName);
this.toolsBtn.parentElement.firstElementChild.classList.toggle('state-back', false);
2020-12-25 14:53:20 +02:00
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
}
2021-01-06 13:16:53 +04:00
export class SettingSection {
public container: HTMLElement;
public content: HTMLElement;
public title: HTMLElement;
public caption: HTMLElement;
2021-02-18 21:30:41 +04:00
constructor(options: {
name?: string,
caption?: string,
noDelimiter?: boolean
}) {
2021-01-06 13:16:53 +04:00
this.container = document.createElement('div');
this.container.classList.add('sidebar-left-section');
2021-02-18 21:30:41 +04:00
if(!options.noDelimiter) {
const hr = document.createElement('hr');
this.container.append(hr);
2021-03-01 19:17:15 +04:00
} else {
this.container.classList.add('no-delimiter');
2021-02-18 21:30:41 +04:00
}
2021-01-06 13:16:53 +04:00
2021-02-18 21:30:41 +04:00
this.content = this.generateContentElement();
2021-01-06 13:16:53 +04:00
2021-02-18 21:30:41 +04:00
if(options.name) {
2021-01-06 13:16:53 +04:00
this.title = document.createElement('div');
this.title.classList.add('sidebar-left-h2', 'sidebar-left-section-name');
2021-02-18 21:30:41 +04:00
this.title.innerHTML = options.name;
2021-01-06 13:16:53 +04:00
this.content.append(this.title);
}
2021-02-18 21:30:41 +04:00
if(options.caption) {
this.caption = this.generateContentElement();
2021-01-06 13:16:53 +04:00
this.caption.classList.add('sidebar-left-section-caption');
2021-02-18 21:30:41 +04:00
this.caption.innerHTML = options.caption;
2021-01-06 13:16:53 +04:00
}
}
2021-02-18 21:30:41 +04:00
public generateContentElement() {
const content = document.createElement('div');
content.classList.add('sidebar-left-section-content');
this.container.append(content);
return content;
}
2021-01-06 13:16:53 +04:00
}
export const generateSection = (appendTo: Scrollable, name?: string, caption?: string) => {
2021-02-18 21:30:41 +04:00
const section = new SettingSection({name, caption});
2021-01-06 13:16:53 +04:00
appendTo.append(section.container);
return section.content;
};
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;