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 appChatsManager from "../lib/appManagers/appChatsManager";
|
||||||
import appDialogsManager from "../lib/appManagers/appDialogsManager";
|
import appDialogsManager from "../lib/appManagers/appDialogsManager";
|
||||||
import appImManager from "../lib/appManagers/appImManager";
|
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 appPeersManager from "../lib/appManagers/appPeersManager";
|
||||||
import rootScope from "../lib/rootScope";
|
import rootScope from "../lib/rootScope";
|
||||||
import { findUpTag } from "../helpers/dom";
|
import { findUpTag } from "../helpers/dom";
|
||||||
import { parseMenuButtonsTo, positionMenu, openBtnMenu } from "./misc";
|
import { positionMenu, openBtnMenu } from "./misc";
|
||||||
import { PopupButton } from "./popup";
|
import { PopupButton } from "./popup";
|
||||||
import PopupPeer from "./popupPeer";
|
import PopupPeer from "./popupPeer";
|
||||||
|
import ButtonMenu, { ButtonMenuItemOptions } from "./buttonMenu";
|
||||||
|
|
||||||
export default class DialogsContextMenu {
|
export default class DialogsContextMenu {
|
||||||
private element = document.getElementById('dialogs-contextmenu') as HTMLDivElement;
|
private element: HTMLElement;
|
||||||
private buttons: {
|
private buttons: (ButtonMenuItemOptions & {verify: () => boolean})[];
|
||||||
archive: HTMLButtonElement,
|
|
||||||
pin: HTMLButtonElement,
|
|
||||||
mute: HTMLButtonElement,
|
|
||||||
unread: HTMLButtonElement,
|
|
||||||
delete: HTMLButtonElement,
|
|
||||||
//clear: HTMLButtonElement,
|
|
||||||
} = {} as any;
|
|
||||||
private selectedID: number;
|
private selectedID: number;
|
||||||
private peerType: 'channel' | 'chat' | 'megagroup' | 'group' | 'saved';
|
private peerType: 'channel' | 'chat' | 'megagroup' | 'group' | 'saved';
|
||||||
private filterID: number;
|
private filterID: number;
|
||||||
|
private dialog: Dialog;
|
||||||
|
|
||||||
constructor() {
|
private init() {
|
||||||
parseMenuButtonsTo(this.buttons, this.element.children);
|
this.buttons = [{
|
||||||
|
icon: 'unread',
|
||||||
this.buttons.archive.addEventListener('click', () => {
|
text: 'Mark as unread',
|
||||||
let dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
onClick: this.onUnreadClick,
|
||||||
if(dialog) {
|
verify: () => {
|
||||||
appMessagesManager.editPeerFolders([dialog.peerID], +!dialog.folder_id);
|
const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
|
||||||
|
return !isUnread;
|
||||||
}
|
}
|
||||||
});
|
}, {
|
||||||
|
icon: 'readchats',
|
||||||
this.buttons.pin.addEventListener('click', () => {
|
text: 'Mark as read',
|
||||||
appMessagesManager.toggleDialogPin(this.selectedID, this.filterID);
|
onClick: this.onUnreadClick,
|
||||||
});
|
verify: () => {
|
||||||
|
const isUnread = !!(this.dialog.pFlags?.unread_mark || this.dialog.unread_count);
|
||||||
this.buttons.mute.addEventListener('click', () => {
|
return isUnread;
|
||||||
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: 'pin',
|
||||||
this.buttons.delete.addEventListener('click', () => {
|
text: 'Pin',
|
||||||
let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
|
onClick: this.onPinClick,
|
||||||
|
verify: () => {
|
||||||
let callbackFlush = (justClear?: true) => {
|
const isPinned = this.filterID > 1 ? appMessagesManager.filtersStorage.filters[this.filterID].pinned_peers.includes(this.dialog.peerID) : !!this.dialog.pFlags?.pinned;
|
||||||
appMessagesManager.flushHistory(this.selectedID, justClear);
|
return !isPinned;
|
||||||
};
|
|
||||||
|
|
||||||
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: '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({
|
this.element = ButtonMenu(this.buttons);
|
||||||
text: 'CANCEL',
|
this.element.id = 'dialogs-contextmenu';
|
||||||
isCancel: true
|
document.getElementById('page-chats').append(this.element);
|
||||||
});
|
|
||||||
|
|
||||||
let popup = new PopupPeer('popup-delete-chat', {
|
|
||||||
peerID: this.selectedID,
|
|
||||||
title: title,
|
|
||||||
description: description,
|
|
||||||
buttons: buttons
|
|
||||||
});
|
|
||||||
|
|
||||||
popup.show();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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) => {
|
onContextMenu = (e: MouseEvent | Touch) => {
|
||||||
|
if(this.init) {
|
||||||
|
this.init();
|
||||||
|
this.init = null;
|
||||||
|
}
|
||||||
|
|
||||||
let li: HTMLElement = null;
|
let li: HTMLElement = null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@ -165,54 +233,13 @@ export default class DialogsContextMenu {
|
|||||||
this.filterID = appDialogsManager.filterID;
|
this.filterID = appDialogsManager.filterID;
|
||||||
|
|
||||||
this.selectedID = +li.getAttribute('data-peerID');
|
this.selectedID = +li.getAttribute('data-peerID');
|
||||||
const dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
this.dialog = appMessagesManager.getDialogByPeerID(this.selectedID)[0];
|
||||||
const notOurDialog = dialog.peerID != rootScope.myID;
|
|
||||||
|
|
||||||
// archive button
|
this.buttons.forEach(button => {
|
||||||
if(notOurDialog) {
|
const good = button.verify();
|
||||||
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';
|
|
||||||
}
|
|
||||||
|
|
||||||
// mute button
|
button.element.classList.toggle('hide', !good);
|
||||||
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 = '';
|
|
||||||
} */
|
|
||||||
|
|
||||||
// delete button
|
// delete button
|
||||||
let deleteButtonText = '';
|
let deleteButtonText = '';
|
||||||
@ -233,12 +260,13 @@ export default class DialogsContextMenu {
|
|||||||
//deleteButtonText = 'Delete chat';
|
//deleteButtonText = 'Delete chat';
|
||||||
this.peerType = this.selectedID == rootScope.myID ? 'saved' : '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');
|
li.classList.add('menu-open');
|
||||||
positionMenu(e, this.element);
|
positionMenu(e, this.element);
|
||||||
openBtnMenu(this.element, () => {
|
openBtnMenu(this.element, () => {
|
||||||
li.classList.remove('menu-open');
|
li.classList.remove('menu-open');
|
||||||
|
this.selectedID = this.dialog = this.filterID = undefined;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -115,46 +115,4 @@
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #DADCE0;
|
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