morethanwords
5 years ago
37 changed files with 2578 additions and 665 deletions
@ -0,0 +1,187 @@ |
|||||||
|
import { SliderTab } from "../slider"; |
||||||
|
import lottieLoader, { RLottiePlayer } from "../../lib/lottieLoader"; |
||||||
|
import apiManager from "../../lib/mtproto/mtprotoworker"; |
||||||
|
import appMessagesManager, { DialogFilter } from "../../lib/appManagers/appMessagesManager"; |
||||||
|
import { RichTextProcessor } from "../../lib/richtextprocessor"; |
||||||
|
import appPeersManager from "../../lib/appManagers/appPeersManager"; |
||||||
|
import { ripple } from "../misc"; |
||||||
|
import { $rootScope, cancelEvent } from "../../lib/utils"; |
||||||
|
import appSidebarLeft from "../../lib/appManagers/appSidebarLeft"; |
||||||
|
|
||||||
|
type DialogFilterSuggested = { |
||||||
|
_: 'dialogFilterSuggested', |
||||||
|
filter: DialogFilter, |
||||||
|
description: string |
||||||
|
}; |
||||||
|
|
||||||
|
export default class AppChatFoldersTab implements SliderTab { |
||||||
|
public container: HTMLElement; |
||||||
|
public createFolderBtn: HTMLElement; |
||||||
|
private foldersContainer: HTMLElement; |
||||||
|
private suggestedContainer: HTMLElement; |
||||||
|
private stickerContainer: HTMLElement; |
||||||
|
private animation: RLottiePlayer; |
||||||
|
|
||||||
|
private filtersRendered: {[filterID: number]: HTMLElement} = {}; |
||||||
|
|
||||||
|
private renderFolder(dialogFilter: DialogFilterSuggested | DialogFilter, container?: HTMLElement, div: HTMLElement = document.createElement('div')) { |
||||||
|
let filter: DialogFilter; |
||||||
|
let description = ''; |
||||||
|
let d: string[] = []; |
||||||
|
if(dialogFilter._ == 'dialogFilterSuggested') { |
||||||
|
filter = dialogFilter.filter; |
||||||
|
description = dialogFilter.description; |
||||||
|
} else { |
||||||
|
filter = dialogFilter; |
||||||
|
description = ''; |
||||||
|
|
||||||
|
const filterID = filter.id; |
||||||
|
if(!this.filtersRendered.hasOwnProperty(filter.id)) { |
||||||
|
div.addEventListener('click', () => { |
||||||
|
appSidebarLeft.editFolderTab.open(appMessagesManager.filtersStorage.filters[filterID]); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
this.filtersRendered[filter.id] = div; |
||||||
|
|
||||||
|
let enabledFilters = Object.keys(filter.pFlags).length; |
||||||
|
/* (['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => { |
||||||
|
enabledFilters += +!!filter[key].length; |
||||||
|
}); */ |
||||||
|
|
||||||
|
if(enabledFilters == 1) { |
||||||
|
description = 'All '; |
||||||
|
|
||||||
|
const pFlags = filter.pFlags; |
||||||
|
if(pFlags.contacts) description += 'Contacts'; |
||||||
|
else if(pFlags.non_contacts) description += 'Non-Contacts'; |
||||||
|
else if(pFlags.groups) description += 'Groups'; |
||||||
|
else if(pFlags.broadcasts) description += 'Channels'; |
||||||
|
else if(pFlags.bots) description += 'Bots'; |
||||||
|
else if(pFlags.exclude_muted) description += 'Unmuted'; |
||||||
|
else if(pFlags.exclude_read) description += 'Unread'; |
||||||
|
else if(pFlags.exclude_archived) description += 'Unarchived'; |
||||||
|
d.push(description); |
||||||
|
} else { |
||||||
|
const folder = appMessagesManager.dialogsStorage.getFolder(filter.id); |
||||||
|
let chats = 0, channels = 0, groups = 0; |
||||||
|
for(const dialog of folder) { |
||||||
|
if(appPeersManager.isAnyGroup(dialog.peerID)) groups++; |
||||||
|
else if(appPeersManager.isBroadcast(dialog.peerID)) channels++; |
||||||
|
else chats++; |
||||||
|
} |
||||||
|
|
||||||
|
if(chats) d.push(chats + ' chats'); |
||||||
|
if(channels) d.push(channels + ' channels'); |
||||||
|
if(groups) d.push(groups + ' groups'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
div.classList.add('category'); |
||||||
|
div.innerHTML = ` |
||||||
|
<div> |
||||||
|
<p>${RichTextProcessor.wrapEmojiText(filter.title)}</p> |
||||||
|
<p>${d.length ? d.join(', ') : description}</p> |
||||||
|
</div> |
||||||
|
`;
|
||||||
|
ripple(div); |
||||||
|
|
||||||
|
if(container) container.append(div); |
||||||
|
return div; |
||||||
|
} |
||||||
|
|
||||||
|
init() { |
||||||
|
this.container = document.querySelector('.chat-folders-container'); |
||||||
|
this.stickerContainer = this.container.querySelector('.sticker-container'); |
||||||
|
this.foldersContainer = this.container.querySelector('.folders-my'); |
||||||
|
this.suggestedContainer = this.container.querySelector('.folders-suggested'); |
||||||
|
this.createFolderBtn = this.container.querySelector('.btn-create-folder'); |
||||||
|
|
||||||
|
this.createFolderBtn.addEventListener('click', () => { |
||||||
|
appSidebarLeft.editFolderTab.open(); |
||||||
|
}); |
||||||
|
|
||||||
|
lottieLoader.loadAnimationFromURL({ |
||||||
|
container: this.stickerContainer, |
||||||
|
loop: false, |
||||||
|
autoplay: true, |
||||||
|
width: 86, |
||||||
|
height: 86 |
||||||
|
}, 'assets/img/Folders_1.tgs').then(player => { |
||||||
|
this.animation = player; |
||||||
|
}); |
||||||
|
|
||||||
|
appMessagesManager.filtersStorage.getDialogFilters().then(filters => { |
||||||
|
for(const filterID in filters) { |
||||||
|
const filter = filters[filterID]; |
||||||
|
this.renderFolder(filter, this.foldersContainer); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$rootScope.$on('filter_update', (e: CustomEvent) => { |
||||||
|
const filter: DialogFilter = e.detail; |
||||||
|
if(this.filtersRendered.hasOwnProperty(filter.id)) { |
||||||
|
this.renderFolder(filter, null, this.filtersRendered[filter.id]); |
||||||
|
} else { |
||||||
|
this.renderFolder(filter, this.foldersContainer); |
||||||
|
} |
||||||
|
|
||||||
|
this.getSuggestedFilters(); |
||||||
|
}); |
||||||
|
|
||||||
|
$rootScope.$on('filter_delete', (e: CustomEvent) => { |
||||||
|
const filter: DialogFilter = e.detail; |
||||||
|
if(this.filtersRendered.hasOwnProperty(filter.id)) { |
||||||
|
/* for(const suggested of this.suggestedFilters) { |
||||||
|
if(deepEqual(suggested.filter, filter)) { |
||||||
|
|
||||||
|
} |
||||||
|
} */ |
||||||
|
this.getSuggestedFilters(); |
||||||
|
|
||||||
|
this.filtersRendered[filter.id].remove(); |
||||||
|
delete this.filtersRendered[filter.id] |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
private getSuggestedFilters() { |
||||||
|
apiManager.invokeApi('messages.getSuggestedDialogFilters').then(suggestedFilters => { |
||||||
|
this.suggestedContainer.style.display = suggestedFilters.length ? '' : 'none'; |
||||||
|
Array.from(this.suggestedContainer.children).slice(1).forEach(el => el.remove()); |
||||||
|
|
||||||
|
(suggestedFilters as DialogFilterSuggested[]).forEach(filter => { |
||||||
|
const div = this.renderFolder(filter); |
||||||
|
const button = document.createElement('button'); |
||||||
|
button.classList.add('btn-primary'); |
||||||
|
button.innerText = 'Add'; |
||||||
|
div.append(button); |
||||||
|
this.suggestedContainer.append(div); |
||||||
|
|
||||||
|
button.addEventListener('click', (e) => { |
||||||
|
cancelEvent(e); |
||||||
|
button.setAttribute('disabled', 'true'); |
||||||
|
|
||||||
|
appMessagesManager.filtersStorage.createDialogFilter(filter.filter).then(bool => { |
||||||
|
if(bool) { |
||||||
|
div.remove(); |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
button.removeAttribute('disabled'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
onOpen() { |
||||||
|
if(this.init) { |
||||||
|
this.init(); |
||||||
|
this.init = null; |
||||||
|
} else { |
||||||
|
if(this.animation) { |
||||||
|
this.animation.restart(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,249 @@ |
|||||||
|
import { SliderTab } from "../slider"; |
||||||
|
import appSidebarLeft, { AppSidebarLeft } from "../../lib/appManagers/appSidebarLeft"; |
||||||
|
import lottieLoader, { RLottiePlayer } from "../../lib/lottieLoader"; |
||||||
|
import appMessagesManager, { DialogFilter, Dialog } from "../../lib/appManagers/appMessagesManager"; |
||||||
|
import { parseMenuButtonsTo, ripple, toast } from "../misc"; |
||||||
|
import appDialogsManager from "../../lib/appManagers/appDialogsManager"; |
||||||
|
import { copy, deepEqual } from "../../lib/utils"; |
||||||
|
|
||||||
|
export default class AppEditFolderTab implements SliderTab { |
||||||
|
public container: HTMLElement; |
||||||
|
private closeBtn: HTMLElement; |
||||||
|
private title: HTMLElement; |
||||||
|
private caption: HTMLElement; |
||||||
|
private stickerContainer: HTMLElement; |
||||||
|
|
||||||
|
private confirmBtn: HTMLElement; |
||||||
|
private menuBtn: HTMLElement; |
||||||
|
private deleteFolderBtn: HTMLElement; |
||||||
|
private nameInput: HTMLInputElement; |
||||||
|
|
||||||
|
private include_peers: HTMLElement; |
||||||
|
private exclude_peers: HTMLElement; |
||||||
|
private flags: {[k in 'contacts' | 'non_contacts' | 'groups' | 'broadcasts' | 'bots' | 'exclude_muted' | 'exclude_archived' | 'exclude_read']: HTMLElement} = {} as any; |
||||||
|
|
||||||
|
private animation: RLottiePlayer; |
||||||
|
private filter: DialogFilter; |
||||||
|
private originalFilter: DialogFilter; |
||||||
|
|
||||||
|
private type: 'edit' | 'create'; |
||||||
|
|
||||||
|
init() { |
||||||
|
this.container = document.querySelector('.edit-folder-container'); |
||||||
|
this.closeBtn = this.container.querySelector('.sidebar-close-button'); |
||||||
|
this.title = this.container.querySelector('.sidebar-header__title'); |
||||||
|
this.caption = this.container.querySelector('.caption'); |
||||||
|
this.stickerContainer = this.container.querySelector('.sticker-container'); |
||||||
|
|
||||||
|
this.confirmBtn = this.container.querySelector('.btn-confirm'); |
||||||
|
this.menuBtn = this.container.querySelector('.btn-menu-toggle'); |
||||||
|
this.deleteFolderBtn = this.menuBtn.querySelector('.menu-delete'); |
||||||
|
this.nameInput = this.container.querySelector('#folder-name'); |
||||||
|
|
||||||
|
this.include_peers = this.container.querySelector('.folder-list-included'); |
||||||
|
this.exclude_peers = this.container.querySelector('.folder-list-excluded'); |
||||||
|
|
||||||
|
const includedFlagsContainer = this.include_peers.querySelector('.folder-categories'); |
||||||
|
const excludedFlagsContainer = this.exclude_peers.querySelector('.folder-categories'); |
||||||
|
parseMenuButtonsTo(this.flags, includedFlagsContainer.children); |
||||||
|
parseMenuButtonsTo(this.flags, excludedFlagsContainer.children); |
||||||
|
|
||||||
|
includedFlagsContainer.firstElementChild.addEventListener('click', () => { |
||||||
|
appSidebarLeft.includedChatsTab.open(this.filter, 'included'); |
||||||
|
}); |
||||||
|
|
||||||
|
excludedFlagsContainer.firstElementChild.addEventListener('click', () => { |
||||||
|
appSidebarLeft.includedChatsTab.open(this.filter, 'excluded'); |
||||||
|
}); |
||||||
|
|
||||||
|
lottieLoader.loadAnimationFromURL({ |
||||||
|
container: this.stickerContainer, |
||||||
|
loop: true, |
||||||
|
autoplay: true, |
||||||
|
width: 86, |
||||||
|
height: 86 |
||||||
|
}, 'assets/img/Folders_2.tgs').then(player => { |
||||||
|
this.animation = player; |
||||||
|
}); |
||||||
|
|
||||||
|
this.deleteFolderBtn.addEventListener('click', () => { |
||||||
|
this.deleteFolderBtn.setAttribute('disabled', 'true'); |
||||||
|
appMessagesManager.filtersStorage.updateDialogFilter(this.filter, true).then(bool => { |
||||||
|
if(bool) { |
||||||
|
this.closeBtn.click(); |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.deleteFolderBtn.removeAttribute('disabled'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
this.confirmBtn.addEventListener('click', () => { |
||||||
|
if(!this.nameInput.value.trim()) { |
||||||
|
this.nameInput.classList.add('error'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
let include = (Array.from(includedFlagsContainer.children) as HTMLElement[]).slice(1).reduce((acc, el) => acc + +!el.style.display, 0); |
||||||
|
if(this.include_peers.lastElementChild.tagName == 'UL') { |
||||||
|
include += this.include_peers.lastElementChild.childElementCount; |
||||||
|
} |
||||||
|
|
||||||
|
if(!include) { |
||||||
|
toast('Please choose at least one chat for this folder.'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
this.confirmBtn.setAttribute('disabled', 'true'); |
||||||
|
|
||||||
|
let promise: Promise<boolean>; |
||||||
|
if(!this.filter.id) { |
||||||
|
promise = appMessagesManager.filtersStorage.createDialogFilter(this.filter); |
||||||
|
} else { |
||||||
|
promise = appMessagesManager.filtersStorage.updateDialogFilter(this.filter); |
||||||
|
} |
||||||
|
|
||||||
|
promise.then(bool => { |
||||||
|
if(bool) { |
||||||
|
this.closeBtn.click(); |
||||||
|
} |
||||||
|
}).finally(() => { |
||||||
|
this.confirmBtn.removeAttribute('disabled'); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
this.nameInput.addEventListener('input', () => { |
||||||
|
this.filter.title = this.nameInput.value; |
||||||
|
this.nameInput.classList.remove('error'); |
||||||
|
|
||||||
|
this.editCheckForChange(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
onOpen() { |
||||||
|
if(this.init) { |
||||||
|
this.init(); |
||||||
|
this.init = null; |
||||||
|
} else { |
||||||
|
if(this.animation) { |
||||||
|
this.animation.restart(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onCloseAfterTimeout() { |
||||||
|
Array.from(this.container.querySelectorAll('ul, .show-more')).forEach(el => el.remove()); |
||||||
|
} |
||||||
|
|
||||||
|
private onCreateOpen() { |
||||||
|
this.caption.style.display = ''; |
||||||
|
this.title.innerText = 'New Folder'; |
||||||
|
this.menuBtn.classList.add('hide'); |
||||||
|
this.confirmBtn.classList.remove('hide'); |
||||||
|
this.nameInput.value = ''; |
||||||
|
|
||||||
|
for(const flag in this.flags) { |
||||||
|
// @ts-ignore
|
||||||
|
this.flags[flag].style.display = 'none'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
private onEditOpen() { |
||||||
|
this.caption.style.display = 'none'; |
||||||
|
this.title.innerText = this.type == 'create' ? 'New Folder' : 'Edit Folder'; |
||||||
|
|
||||||
|
if(this.type == 'edit') { |
||||||
|
this.menuBtn.classList.remove('hide'); |
||||||
|
this.confirmBtn.classList.add('hide'); |
||||||
|
} |
||||||
|
|
||||||
|
const filter = this.filter; |
||||||
|
this.nameInput.value = filter.title; |
||||||
|
|
||||||
|
for(const flag in this.flags) { |
||||||
|
// @ts-ignore
|
||||||
|
this.flags[flag].style.display = !!filter.pFlags[flag] ? '' : 'none'; |
||||||
|
} |
||||||
|
|
||||||
|
(['include_peers', 'exclude_peers'] as ['include_peers', 'exclude_peers']).forEach(key => { |
||||||
|
const container = this[key]; |
||||||
|
const ul = document.createElement('ul'); |
||||||
|
|
||||||
|
const peers = filter[key].slice(); |
||||||
|
|
||||||
|
const renderMore = (_length: number) => { |
||||||
|
for(let i = 0, length = Math.min(peers.length, _length); i < length; ++i) { |
||||||
|
const peerID = peers.shift(); |
||||||
|
|
||||||
|
const {dom} = appDialogsManager.addDialog(peerID, ul, false, false, undefined, true); |
||||||
|
dom.lastMessageSpan.parentElement.remove(); |
||||||
|
} |
||||||
|
|
||||||
|
if(peers.length) { |
||||||
|
showMore.innerHTML = `<div class="tgico-down"></div><div>Show ${Math.min(20, peers.length)} more chat${peers.length > 1 ? 's' : ''}</div>`; |
||||||
|
} else if(showMore) { |
||||||
|
showMore.remove(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
container.append(ul); |
||||||
|
|
||||||
|
let showMore: HTMLElement; |
||||||
|
if(peers.length) { |
||||||
|
showMore = document.createElement('div'); |
||||||
|
showMore.classList.add('show-more'); |
||||||
|
showMore.addEventListener('click', () => renderMore(20)); |
||||||
|
|
||||||
|
showMore.innerHTML = `<div class="tgico-down"></div><div>Show ${Math.min(20, peers.length)} more chat${peers.length > 1 ? 's' : ''}</div>`; |
||||||
|
ripple(showMore); |
||||||
|
container.append(showMore); |
||||||
|
} |
||||||
|
|
||||||
|
renderMore(4); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
editCheckForChange() { |
||||||
|
if(this.type == 'edit') { |
||||||
|
const changed = !deepEqual(this.originalFilter, this.filter); |
||||||
|
this.confirmBtn.classList.toggle('hide', !changed); |
||||||
|
this.menuBtn.classList.toggle('hide', changed); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
setFilter(filter: DialogFilter, firstTime: boolean) { |
||||||
|
// cleanup
|
||||||
|
this.onCloseAfterTimeout(); |
||||||
|
|
||||||
|
if(firstTime) { |
||||||
|
this.originalFilter = filter; |
||||||
|
this.filter = copy(filter); |
||||||
|
} else { |
||||||
|
this.filter = filter; |
||||||
|
this.onEditOpen(); |
||||||
|
this.editCheckForChange(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
open(filter?: DialogFilter) { |
||||||
|
appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder); |
||||||
|
|
||||||
|
if(filter === undefined) { |
||||||
|
this.setFilter({ |
||||||
|
_: 'dialogFilter', |
||||||
|
flags: 0, |
||||||
|
id: 0, |
||||||
|
title: '', |
||||||
|
pFlags: {}, |
||||||
|
pinned_peers: [], |
||||||
|
include_peers: [], |
||||||
|
exclude_peers: [] |
||||||
|
}, true); |
||||||
|
this.type = 'create'; |
||||||
|
this.onCreateOpen(); |
||||||
|
} else { |
||||||
|
this.setFilter(filter, true); |
||||||
|
this.type = 'edit'; |
||||||
|
this.onEditOpen(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
import { SliderTab } from "../slider"; |
||||||
|
import { AppSelectPeers } from "../appSelectPeers"; |
||||||
|
import appSidebarLeft, { AppSidebarLeft } from "../../lib/appManagers/appSidebarLeft"; |
||||||
|
import appDialogsManager from "../../lib/appManagers/appDialogsManager"; |
||||||
|
import appPeersManager from "../../lib/appManagers/appPeersManager"; |
||||||
|
import appUsersManager from "../../lib/appManagers/appUsersManager"; |
||||||
|
import { $rootScope, copy, deepEqual } from "../../lib/utils"; |
||||||
|
import { DialogFilter } from "../../lib/appManagers/appMessagesManager"; |
||||||
|
|
||||||
|
export default class AppIncludedChatsTab implements SliderTab { |
||||||
|
public container: HTMLElement; |
||||||
|
private closeBtn: HTMLElement; |
||||||
|
private confirmBtn: HTMLElement; |
||||||
|
private title: HTMLElement; |
||||||
|
|
||||||
|
private selector: AppSelectPeers; |
||||||
|
private type: 'included' | 'excluded'; |
||||||
|
private filter: DialogFilter; |
||||||
|
private originalFilter: DialogFilter; |
||||||
|
|
||||||
|
init() { |
||||||
|
this.container = document.querySelector('.included-chats-container'); |
||||||
|
this.closeBtn = this.container.querySelector('.sidebar-close-button'); |
||||||
|
this.confirmBtn = this.container.querySelector('.btn-confirm'); |
||||||
|
this.title = this.container.querySelector('.sidebar-header__title'); |
||||||
|
|
||||||
|
this.confirmBtn.addEventListener('click', () => { |
||||||
|
const selected = this.selector.getSelected(); |
||||||
|
|
||||||
|
this.filter.pFlags = {}; |
||||||
|
|
||||||
|
const peers: number[] = []; |
||||||
|
for(const key of selected) { |
||||||
|
if(typeof(key) === 'number') { |
||||||
|
peers.push(key); |
||||||
|
} else { |
||||||
|
// @ts-ignore
|
||||||
|
this.filter.pFlags[key] = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
this.filter[this.type == 'included' ? 'include_peers' : 'exclude_peers'] = peers; |
||||||
|
|
||||||
|
appSidebarLeft.editFolderTab.setFilter(this.filter, false); |
||||||
|
this.closeBtn.click(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
checkbox(selected?: boolean) { |
||||||
|
return `<div class="checkbox"><label><input type="checkbox" ${selected ? 'checked' : ''}><span></span></label></div>`; |
||||||
|
} |
||||||
|
|
||||||
|
renderResults = (peerIDs: number[]) => { |
||||||
|
const other = this.type == 'included' ? this.filter.exclude_peers : this.filter.include_peers; |
||||||
|
|
||||||
|
peerIDs.forEach(peerID => { |
||||||
|
if(other.includes(peerID)) return; |
||||||
|
|
||||||
|
const {dom} = appDialogsManager.addDialog(peerID, this.selector.scrollable, false, false); |
||||||
|
|
||||||
|
const selected = this.selector.selected.has(peerID); |
||||||
|
dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected)); |
||||||
|
if(selected) dom.listEl.classList.add('active'); |
||||||
|
|
||||||
|
let subtitle = ''; |
||||||
|
|
||||||
|
if(peerID > 0) { |
||||||
|
if(peerID == $rootScope.myID) { |
||||||
|
subtitle = 'Chat with yourself'; |
||||||
|
} else if(appUsersManager.isBot(peerID)) { |
||||||
|
subtitle = 'Bot'; |
||||||
|
} else { |
||||||
|
subtitle = appUsersManager.contactsList.has(peerID) ? 'Contact' : 'Non-Contact'; |
||||||
|
} |
||||||
|
} else { |
||||||
|
subtitle = appPeersManager.isBroadcast(peerID) ? 'Channel' : 'Group'; |
||||||
|
} |
||||||
|
|
||||||
|
dom.lastMessageSpan.innerHTML = subtitle; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
onOpen() { |
||||||
|
if(this.init) { |
||||||
|
this.init(); |
||||||
|
this.init = null; |
||||||
|
} |
||||||
|
|
||||||
|
this.confirmBtn.style.display = this.type == 'excluded' ? '' : 'none'; |
||||||
|
this.title.innerText = this.type == 'included' ? 'Included Chats' : 'Excluded Chats'; |
||||||
|
|
||||||
|
const filter = this.filter; |
||||||
|
|
||||||
|
const fragment = document.createDocumentFragment(); |
||||||
|
const dd = document.createElement('div'); |
||||||
|
dd.classList.add('sidebar-left-h2'); |
||||||
|
dd.innerText = 'Chat types'; |
||||||
|
|
||||||
|
const categories = document.createElement('div'); |
||||||
|
categories.classList.add('folder-categories'); |
||||||
|
|
||||||
|
let details: any; |
||||||
|
if(this.type == 'excluded') { |
||||||
|
details = { |
||||||
|
exclude_muted: {ico: 'tgico-mute', text: 'Muted'}, |
||||||
|
exclude_archived: {ico: 'tgico-archive', text: 'Archived'}, |
||||||
|
exclude_read: {ico: 'tgico-readchats', text: 'Read'} |
||||||
|
}; |
||||||
|
} else { |
||||||
|
details = { |
||||||
|
contacts: {ico: 'tgico-newprivate', text: 'Contacts'}, |
||||||
|
non_contacts: {ico: 'tgico-noncontacts', text: 'Non-Contacts'}, |
||||||
|
groups: {ico: 'tgico-group', text: 'Groups'}, |
||||||
|
broadcasts: {ico: 'tgico-newchannel', text: 'Channels'}, |
||||||
|
bots: {ico: 'tgico-bots', text: 'Bots'} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
let html = ''; |
||||||
|
for(const key in details) { |
||||||
|
html += `<div class="folder-category-button ${details[key].ico}" data-peerID="${key}"><p>${details[key].text}</p>${this.checkbox()}</div>`; |
||||||
|
} |
||||||
|
categories.innerHTML = html; |
||||||
|
|
||||||
|
const hr = document.createElement('hr'); |
||||||
|
hr.style.margin = '7px 0 9px'; |
||||||
|
|
||||||
|
const d = document.createElement('div'); |
||||||
|
d.classList.add('sidebar-left-h2'); |
||||||
|
d.innerText = 'Chats'; |
||||||
|
|
||||||
|
fragment.append(dd, categories, hr, d); |
||||||
|
|
||||||
|
/////////////////
|
||||||
|
|
||||||
|
const selectedPeers = (this.type == 'included' ? filter.include_peers : filter.exclude_peers).slice(); |
||||||
|
|
||||||
|
this.selector = new AppSelectPeers(this.container, this.onSelectChange, 'dialogs', null, this.renderResults); |
||||||
|
this.selector.selected = new Set(selectedPeers); |
||||||
|
this.selector.input.placeholder = 'Search'; |
||||||
|
|
||||||
|
const _add = this.selector.add.bind(this.selector); |
||||||
|
this.selector.add = (peerID, title) => { |
||||||
|
const div = _add(peerID, details[peerID]?.text); |
||||||
|
if(details[peerID]) { |
||||||
|
div.querySelector('avatar-element').classList.add(details[peerID].ico); |
||||||
|
} |
||||||
|
return div; |
||||||
|
}; |
||||||
|
|
||||||
|
this.selector.list.parentElement.insertBefore(fragment, this.selector.list); |
||||||
|
|
||||||
|
selectedPeers.forEach(peerID => { |
||||||
|
this.selector.add(peerID); |
||||||
|
}); |
||||||
|
|
||||||
|
for(const flag in filter.pFlags) { |
||||||
|
// @ts-ignore
|
||||||
|
if(details.hasOwnProperty(flag) && !!filter.pFlags[flag]) { |
||||||
|
(categories.querySelector(`[data-peerID="${flag}"]`) as HTMLElement).click(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onSelectChange = (length: number) => { |
||||||
|
//const changed = !deepEqual(this.filter, this.originalFilter);
|
||||||
|
if(this.type == 'included') { |
||||||
|
this.confirmBtn.style.display = length ? '' : 'none'; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
onCloseAfterTimeout() { |
||||||
|
if(this.selector) { |
||||||
|
this.selector.container.remove(); |
||||||
|
this.selector = null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
open(filter: DialogFilter, type: 'included' | 'excluded') { |
||||||
|
this.originalFilter = filter; |
||||||
|
this.filter = copy(this.originalFilter); |
||||||
|
this.type = type; |
||||||
|
|
||||||
|
appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.includedChats); |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue