Context menu chat list handhelds fix
This commit is contained in:
Eduard Kuzmenko
parent
d7ceb52e2e
commit
2ac1159413
@ -1,153 +1,221 @@
|
||||
import appChatsManager from "../lib/appManagers/appChatsManager";
|
||||
import appDialogsManager from "../lib/appManagers/appDialogsManager";
|
||||
import appImManager from "../lib/appManagers/appImManager";
|
||||
import appMessagesManager from "../lib/appManagers/appMessagesManager";
|
||||
import appMessagesManager, {Dialog} from "../lib/appManagers/appMessagesManager";
|
||||
import appPeersManager from "../lib/appManagers/appPeersManager";
|
||||
import rootScope from "../lib/rootScope";
|
||||
import { findUpTag } from "../helpers/dom";
|
||||
import { parseMenuButtonsTo, positionMenu, openBtnMenu } from "./misc";
|
||||
import { positionMenu, openBtnMenu } from "./misc";
|
||||
import { PopupButton } from "./popup";
|
||||
import PopupPeer from "./popupPeer";
|
||||
import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
|
||||
|
||||
export default class DialogsContextMenu {
|
||||
private element = document.getElementById('dialogs-contextmenu') as HTMLDivElement;
|
||||
private buttons: {
|
||||
archive: HTMLButtonElement,
|
||||
pin: HTMLButtonElement,
|
||||
mute: HTMLButtonElement,
|
||||
unread: HTMLButtonElement,
|
||||
delete: HTMLButtonElement,
|
||||
//clear: HTMLButtonElement,
|
||||
} = {} as any;
|
||||
private element: HTMLElement;
|
||||
private buttons: (ButtonMenuItemOptions & {verify: () => boolean})[];
|
||||
|
||||
private selectedID: number;
|
||||
private peerType: 'channel' | 'chat' | 'megagroup' | 'group' | 'saved';
|
||||
private filterID: number;
|
||||
private dialog: Dialog;
|
||||
|
||||
constructor() {
|
||||
parseMenuButtonsTo(this.buttons, this.element.children);
|
||||
|
||||
this.buttons.archive.addEventListener('click', () => {
|
||||
let dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
if(dialog) {
|
||||
appMessagesManager.editPeerFolders([dialog.peerID], +!dialog.folder_id);
|
||||
private init() {
|
||||
this.buttons = [{
|
||||
icon: 'unread',
|
||||
text: 'Mark as unread',
|
||||
onClick: this.onUnreadClick,
|
||||
verify: () => {
|
||||
const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
|
||||
return !isUnread;
|
||||
}
|
||||
});
|
||||
|
||||
this.buttons.pin.addEventListener('click', () => {
|
||||
appMessagesManager.toggleDialogPin(this.selectedID, this.filterID);
|
||||
});
|
||||
|
||||
this.buttons.mute.addEventListener('click', () => {
|
||||
appImManager.mutePeer(this.selectedID);
|
||||
});
|
||||
|
||||
this.buttons.unread.addEventListener('click', () => {
|
||||
const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
if(!dialog) return;
|
||||
|
||||
if(dialog.unread_count) {
|
||||
appMessagesManager.readHistory(this.selectedID, dialog.top_message);
|
||||
appMessagesManager.markDialogUnread(this.selectedID, true);
|
||||
} else {
|
||||
appMessagesManager.markDialogUnread(this.selectedID);
|
||||
}, {
|
||||
icon: 'readchats',
|
||||
text: 'Mark as read',
|
||||
onClick: this.onUnreadClick,
|
||||
verify: () => {
|
||||
const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
|
||||
return isUnread;
|
||||
}
|
||||
});
|
||||
|
||||
this.buttons.delete.addEventListener('click', () => {
|
||||
let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
|
||||
|
||||
let callbackFlush = (justClear?: true) => {
|
||||
appMessagesManager.flushHistory(this.selectedID, justClear);
|
||||
};
|
||||
|
||||
let callbackLeave = () => {
|
||||
appChatsManager.leave(-this.selectedID);
|
||||
};
|
||||
|
||||
let title: string, description: string, buttons: PopupButton[];
|
||||
switch(this.peerType) {
|
||||
case 'channel': {
|
||||
title = 'Leave Channel?';
|
||||
description = `Are you sure you want to leave this channel?`;
|
||||
buttons = [{
|
||||
text: 'LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: callbackLeave
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'megagroup': {
|
||||
title = 'Leave Group?';
|
||||
description = `Are you sure you want to leave this group?`;
|
||||
buttons = [{
|
||||
text: 'LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: callbackLeave
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'chat': {
|
||||
title = 'Delete Chat?';
|
||||
description = `Are you sure you want to delete chat with <b>${firstName}</b>?`;
|
||||
buttons = [{
|
||||
text: 'DELETE FOR ME AND ' + firstName,
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush()
|
||||
}, {
|
||||
text: 'DELETE JUST FOR ME',
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush(true)
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'saved': {
|
||||
title = 'Delete Saved Messages?';
|
||||
description = `Are you sure you want to delete all your saved messages?`;
|
||||
buttons = [{
|
||||
text: 'DELETE SAVED MESSAGES',
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush()
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'group': {
|
||||
title = 'Delete and leave Group?';
|
||||
description = `Are you sure you want to delete all message history and leave <b>${firstName}</b>?`;
|
||||
buttons = [{
|
||||
text: 'DELETE AND LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: () => callbackLeave()
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
}, {
|
||||
icon: 'pin',
|
||||
text: 'Pin',
|
||||
onClick: this.onPinClick,
|
||||
verify: () => {
|
||||
const isPinned = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(this.dialog.peerID) : !!this.dialog.pFlags?.pinned;
|
||||
return !isPinned;
|
||||
}
|
||||
}, {
|
||||
icon: 'unpin',
|
||||
text: 'Unpin',
|
||||
onClick: this.onPinClick,
|
||||
verify: () => {
|
||||
const isPinned = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(this.dialog.peerID) : !!this.dialog.pFlags?.pinned;
|
||||
return isPinned;
|
||||
}
|
||||
}, {
|
||||
icon: 'mute',
|
||||
text: 'Mute',
|
||||
onClick: this.onMuteClick,
|
||||
verify: () => {
|
||||
const isMuted = this.dialog.notify_settings && this.dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
|
||||
return !isMuted && this.selectedID != rootScope.myID;
|
||||
}
|
||||
}, {
|
||||
icon: 'unmute',
|
||||
text: 'Unmute',
|
||||
onClick: this.onMuteClick,
|
||||
verify: () => {
|
||||
const isMuted = this.dialog.notify_settings && this.dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
|
||||
return isMuted && this.selectedID != rootScope.myID;
|
||||
}
|
||||
}, {
|
||||
icon: 'archive',
|
||||
text: 'Archive',
|
||||
onClick: this.onArchiveClick,
|
||||
verify: () => this.filterID == 0 && this.selectedID != rootScope.myID
|
||||
}, {
|
||||
icon: 'unarchive',
|
||||
text: 'Unarchive',
|
||||
onClick: this.onArchiveClick,
|
||||
verify: () => this.filterID == 1 && this.selectedID != rootScope.myID
|
||||
}, {
|
||||
icon: 'delete danger',
|
||||
text: 'Delete',
|
||||
onClick: this.onDeleteClick,
|
||||
verify: () => true
|
||||
}];
|
||||
|
||||
buttons.push({
|
||||
text: 'CANCEL',
|
||||
isCancel: true
|
||||
});
|
||||
|
||||
let popup = new PopupPeer('popup-delete-chat', {
|
||||
peerID: this.selectedID,
|
||||
title: title,
|
||||
description: description,
|
||||
buttons: buttons
|
||||
});
|
||||
|
||||
popup.show();
|
||||
});
|
||||
this.element = ButtonMenu(this.buttons);
|
||||
this.element.id = 'dialogs-contextmenu';
|
||||
document.getElementById('page-chats').append(this.element);
|
||||
}
|
||||
|
||||
private onArchiveClick = () => {
|
||||
let dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
if(dialog) {
|
||||
appMessagesManager.editPeerFolders([dialog.peerID], +!dialog.folder_id);
|
||||
}
|
||||
};
|
||||
|
||||
private onPinClick = () => {
|
||||
appMessagesManager.toggleDialogPin(this.selectedID, this.filterID);
|
||||
};
|
||||
|
||||
private onMuteClick = () => {
|
||||
appImManager.mutePeer(this.selectedID);
|
||||
};
|
||||
|
||||
private onUnreadClick = () => {
|
||||
const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
if(!dialog) return;
|
||||
|
||||
if(dialog.unread_count) {
|
||||
appMessagesManager.readHistory(this.selectedID, dialog.top_message);
|
||||
appMessagesManager.markDialogUnread(this.selectedID, true);
|
||||
} else {
|
||||
appMessagesManager.markDialogUnread(this.selectedID);
|
||||
}
|
||||
};
|
||||
|
||||
private onDeleteClick = () => {
|
||||
let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
|
||||
|
||||
let callbackFlush = (justClear?: true) => {
|
||||
appMessagesManager.flushHistory(this.selectedID, justClear);
|
||||
};
|
||||
|
||||
let callbackLeave = () => {
|
||||
appChatsManager.leave(-this.selectedID);
|
||||
};
|
||||
|
||||
let title: string, description: string, buttons: PopupButton[];
|
||||
switch(this.peerType) {
|
||||
case 'channel': {
|
||||
title = 'Leave Channel?';
|
||||
description = `Are you sure you want to leave this channel?`;
|
||||
buttons = [{
|
||||
text: 'LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: callbackLeave
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'megagroup': {
|
||||
title = 'Leave Group?';
|
||||
description = `Are you sure you want to leave this group?`;
|
||||
buttons = [{
|
||||
text: 'LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: callbackLeave
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'chat': {
|
||||
title = 'Delete Chat?';
|
||||
description = `Are you sure you want to delete chat with <b>${firstName}</b>?`;
|
||||
buttons = [{
|
||||
text: 'DELETE FOR ME AND ' + firstName,
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush()
|
||||
}, {
|
||||
text: 'DELETE JUST FOR ME',
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush(true)
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'saved': {
|
||||
title = 'Delete Saved Messages?';
|
||||
description = `Are you sure you want to delete all your saved messages?`;
|
||||
buttons = [{
|
||||
text: 'DELETE SAVED MESSAGES',
|
||||
isDanger: true,
|
||||
callback: () => callbackFlush()
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'group': {
|
||||
title = 'Delete and leave Group?';
|
||||
description = `Are you sure you want to delete all message history and leave <b>${firstName}</b>?`;
|
||||
buttons = [{
|
||||
text: 'DELETE AND LEAVE ' + firstName,
|
||||
isDanger: true,
|
||||
callback: () => callbackLeave()
|
||||
}];
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
text: 'CANCEL',
|
||||
isCancel: true
|
||||
});
|
||||
|
||||
let popup = new PopupPeer('popup-delete-chat', {
|
||||
peerID: this.selectedID,
|
||||
title: title,
|
||||
description: description,
|
||||
buttons: buttons
|
||||
});
|
||||
|
||||
popup.show();
|
||||
};
|
||||
|
||||
onContextMenu = (e: MouseEvent | Touch) => {
|
||||
if(this.init) {
|
||||
this.init();
|
||||
this.init = null;
|
||||
}
|
||||
|
||||
let li: HTMLElement = null;
|
||||
|
||||
try {
|
||||
@ -165,54 +233,13 @@ export default class DialogsContextMenu {
|
||||
this.filterID = appDialogsManager.filterID;
|
||||
|
||||
this.selectedID = +li.getAttribute('data-peerID');
|
||||
const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
const notOurDialog = dialog.peerID != rootScope.myID;
|
||||
this.dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||
|
||||
// archive button
|
||||
if(notOurDialog) {
|
||||
const button = this.buttons.archive;
|
||||
const condition = dialog.folder_id == 1;
|
||||
button.classList.toggle('flip-icon', condition);
|
||||
(button.firstElementChild as HTMLElement).innerText = condition ? 'Unarchive' : 'Archive';
|
||||
this.buttons.archive.style.display = '';
|
||||
} else {
|
||||
this.buttons.archive.style.display = 'none';
|
||||
}
|
||||
|
||||
// pin button
|
||||
{
|
||||
const button = this.buttons.pin;
|
||||
//const condition = !!dialog.pFlags?.pinned;
|
||||
const condition = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(dialog.peerID) : !!dialog.pFlags?.pinned;
|
||||
button.classList.toggle('flip-icon', condition);
|
||||
(button.firstElementChild as HTMLElement).innerText = condition ? 'Unpin' : 'Pin';
|
||||
}
|
||||
this.buttons.forEach(button => {
|
||||
const good = button.verify();
|
||||
|
||||
// mute button
|
||||
if(notOurDialog) {
|
||||
const button = this.buttons.mute;
|
||||
const condition = dialog.notify_settings && dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
|
||||
button.classList.toggle('flip-icon', condition);
|
||||
(button.firstElementChild as HTMLElement).innerText = condition ? 'Unmute' : 'Mute';
|
||||
this.buttons.mute.style.display = '';
|
||||
} else {
|
||||
this.buttons.mute.style.display = 'none';
|
||||
}
|
||||
|
||||
// unread button
|
||||
{
|
||||
const button = this.buttons.unread;
|
||||
const condition = !!(dialog.pFlags?.unread_mark || dialog.unread_count);
|
||||
button.classList.toggle('flip-icon', condition);
|
||||
(button.firstElementChild as HTMLElement).innerText = condition ? 'Mark as Read' : 'Mark as Unread';
|
||||
}
|
||||
|
||||
/* // clear history button
|
||||
if(appPeersManager.isChannel(this.selectedID)) {
|
||||
this.buttons.clear.style.display = 'none';
|
||||
} else {
|
||||
this.buttons.clear.style.display = '';
|
||||
} */
|
||||
button.element.classList.toggle('hide', !good);
|
||||
});
|
||||
|
||||
// delete button
|
||||
let deleteButtonText = '';
|
||||
@ -233,12 +260,13 @@ export default class DialogsContextMenu {
|
||||
//deleteButtonText = 'Delete chat';
|
||||
this.peerType = this.selectedID == rootScope.myID ? 'saved' : 'chat';
|
||||
}
|
||||
(this.buttons.delete.firstElementChild as HTMLElement).innerText = deleteButtonText;
|
||||
this.buttons[this.buttons.length - 1].element.firstChild.nodeValue = deleteButtonText;
|
||||
|
||||
li.classList.add('menu-open');
|
||||
positionMenu(e, this.element);
|
||||
openBtnMenu(this.element, () => {
|
||||
li.classList.remove('menu-open');
|
||||
this.selectedID = this.dialog = this.filterID = undefined;
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -115,46 +115,4 @@
|
||||
border-style: solid;
|
||||
border-color: #DADCE0;
|
||||
}
|
||||
}
|
||||
|
||||
#dialogs-contextmenu {
|
||||
.menu-unread {
|
||||
&:before {
|
||||
content: $tgico-unread;
|
||||
}
|
||||
|
||||
&.flip-icon:before {
|
||||
content: $tgico-readchats;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-pin {
|
||||
&:before {
|
||||
content: $tgico-pin;
|
||||
}
|
||||
|
||||
&.flip-icon:before {
|
||||
content: $tgico-unpin;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-mute {
|
||||
&:before {
|
||||
content: $tgico-mute;
|
||||
}
|
||||
|
||||
&.flip-icon:before {
|
||||
content: $tgico-unmute;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-archive {
|
||||
&:before {
|
||||
content: $tgico-archive;
|
||||
}
|
||||
|
||||
&.flip-icon:before {
|
||||
content: $tgico-unarchive;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user