From 2067eefc359ac1e8d7ab2baa021a9469d89e4db8 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Thu, 12 Nov 2020 04:46:54 +0200 Subject: [PATCH] Chat context menu for selection mode --- src/components/chat/contextMenu.ts | 66 +++++++++++++++++++++++------- src/components/chat/selection.ts | 4 +- 2 files changed, 54 insertions(+), 16 deletions(-) diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 40b8f60c..06f55498 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -13,7 +13,7 @@ import PopupForward from "../popupForward"; import PopupPinMessage from "../popupUnpinMessage"; export default class ChatContextMenu { - private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean})[]; + private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[]; private element: HTMLElement; private target: HTMLElement; @@ -57,9 +57,16 @@ export default class ChatContextMenu { } this.buttons.forEach(button => { - const good = bubbleContainer || isTouchSupported ? - button.verify() : - button.notDirect && button.notDirect() && button.verify(); + let good: boolean; + + if(appImManager.chatSelection.isSelecting && !button.withSelection) { + good = false; + } else { + good = bubbleContainer || isTouchSupported ? + button.verify() : + button.notDirect && button.notDirect() && button.verify(); + } + button.element.classList.toggle('hide', !good); }); @@ -115,6 +122,13 @@ export default class ChatContextMenu { text: 'Copy', onClick: this.onCopyClick, verify: () => !!appMessagesManager.getMessage(this.msgID).message + }, { + icon: 'copy', + text: 'Copy selected', + onClick: this.onCopyClick, + verify: () => !![...appImManager.chatSelection.selectedMids].find(mid => !!appMessagesManager.getMessage(mid).message), + notDirect: () => !![...appImManager.chatSelection.selectedMids].find(mid => !!appMessagesManager.getMessage(mid).message), + withSelection: true }, { icon: 'pin', text: 'Pin', @@ -153,6 +167,13 @@ export default class ChatContextMenu { text: 'Forward', onClick: this.onForwardClick, verify: () => this.msgID > 0 + }, { + icon: 'forward', + text: 'Forward selected', + onClick: this.onForwardClick, + verify: () => appImManager.chatSelection.selectedMids.has(this.msgID), + notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID), + withSelection: true }, { icon: 'select', text: 'Select', @@ -161,20 +182,27 @@ export default class ChatContextMenu { const message = appMessagesManager.getMessage(this.msgID); return !message.action && !appImManager.chatSelection.selectedMids.has(this.msgID); }, - notDirect: () => true + notDirect: () => true, + withSelection: true }, { icon: 'select', text: 'Clear selection', onClick: this.onClearSelectionClick, - verify: () => { - return appImManager.chatSelection.selectedMids.has(this.msgID); - }, - notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID) + verify: () => appImManager.chatSelection.selectedMids.has(this.msgID), + notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID), + withSelection: true }, { icon: 'delete danger', text: 'Delete', onClick: this.onDeleteClick, verify: () => appMessagesManager.canDeleteMessage(this.msgID) + }, { + icon: 'delete danger', + text: 'Delete selected', + onClick: this.onDeleteClick, + verify: () => appImManager.chatSelection.selectedMids.has(this.msgID), + notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID), + withSelection: true }]; this.element = ButtonMenu(this.buttons); @@ -197,9 +225,11 @@ export default class ChatContextMenu { }; private onCopyClick = () => { - const message = appMessagesManager.getMessage(this.msgID); - - const str = message ? message.message : ''; + const mids = appImManager.chatSelection.isSelecting ? [...appImManager.chatSelection.selectedMids] : [this.msgID]; + const str = mids.reduce((acc, mid) => { + const message = appMessagesManager.getMessage(mid); + return acc + (message?.message ? message.message + '\n' : ''); + }, '').trim(); const textArea = document.createElement('textarea'); textArea.value = str; @@ -234,7 +264,11 @@ export default class ChatContextMenu { }; private onForwardClick = () => { - new PopupForward(this.isTargetAnAlbumItem ? [this.msgID] : appMessagesManager.getMidsByMid(this.msgID)); + if(appImManager.chatSelection.isSelecting) { + appImManager.chatSelection.selectionForwardBtn.click(); + } else { + new PopupForward(this.isTargetAnAlbumItem ? [this.msgID] : appMessagesManager.getMidsByMid(this.msgID)); + } }; private onSelectClick = () => { @@ -246,6 +280,10 @@ export default class ChatContextMenu { }; private onDeleteClick = () => { - new PopupDeleteMessages([this.msgID]); + if(appImManager.chatSelection.isSelecting) { + appImManager.chatSelection.selectionDeleteBtn.click(); + } else { + new PopupDeleteMessages([this.msgID]); + } }; } \ No newline at end of file diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index 276544cf..4a0b15a2 100644 --- a/src/components/chat/selection.ts +++ b/src/components/chat/selection.ts @@ -44,8 +44,8 @@ export default class ChatSelection { private selectionContainer: HTMLElement; private selectionCountEl: HTMLElement; - private selectionForwardBtn: HTMLElement; - private selectionDeleteBtn: HTMLElement; + public selectionForwardBtn: HTMLElement; + public selectionDeleteBtn: HTMLElement; public selectedText: string;