Browse Source

Chat context menu for selection mode

master
Eduard Kuzmenko 4 years ago
parent
commit
2067eefc35
  1. 58
      src/components/chat/contextMenu.ts
  2. 4
      src/components/chat/selection.ts

58
src/components/chat/contextMenu.ts

@ -13,7 +13,7 @@ import PopupForward from "../popupForward";
import PopupPinMessage from "../popupUnpinMessage"; import PopupPinMessage from "../popupUnpinMessage";
export default class ChatContextMenu { export default class ChatContextMenu {
private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean})[]; private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[];
private element: HTMLElement; private element: HTMLElement;
private target: HTMLElement; private target: HTMLElement;
@ -57,9 +57,16 @@ export default class ChatContextMenu {
} }
this.buttons.forEach(button => { this.buttons.forEach(button => {
const good = bubbleContainer || isTouchSupported ? let good: boolean;
if(appImManager.chatSelection.isSelecting && !button.withSelection) {
good = false;
} else {
good = bubbleContainer || isTouchSupported ?
button.verify() : button.verify() :
button.notDirect && button.notDirect() && button.verify(); button.notDirect && button.notDirect() && button.verify();
}
button.element.classList.toggle('hide', !good); button.element.classList.toggle('hide', !good);
}); });
@ -115,6 +122,13 @@ export default class ChatContextMenu {
text: 'Copy', text: 'Copy',
onClick: this.onCopyClick, onClick: this.onCopyClick,
verify: () => !!appMessagesManager.getMessage(this.msgID).message 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', icon: 'pin',
text: 'Pin', text: 'Pin',
@ -153,6 +167,13 @@ export default class ChatContextMenu {
text: 'Forward', text: 'Forward',
onClick: this.onForwardClick, onClick: this.onForwardClick,
verify: () => this.msgID > 0 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', icon: 'select',
text: 'Select', text: 'Select',
@ -161,20 +182,27 @@ export default class ChatContextMenu {
const message = appMessagesManager.getMessage(this.msgID); const message = appMessagesManager.getMessage(this.msgID);
return !message.action && !appImManager.chatSelection.selectedMids.has(this.msgID); return !message.action && !appImManager.chatSelection.selectedMids.has(this.msgID);
}, },
notDirect: () => true notDirect: () => true,
withSelection: true
}, { }, {
icon: 'select', icon: 'select',
text: 'Clear selection', text: 'Clear selection',
onClick: this.onClearSelectionClick, onClick: this.onClearSelectionClick,
verify: () => { verify: () => appImManager.chatSelection.selectedMids.has(this.msgID),
return appImManager.chatSelection.selectedMids.has(this.msgID); notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID),
}, withSelection: true
notDirect: () => appImManager.chatSelection.selectedMids.has(this.msgID)
}, { }, {
icon: 'delete danger', icon: 'delete danger',
text: 'Delete', text: 'Delete',
onClick: this.onDeleteClick, onClick: this.onDeleteClick,
verify: () => appMessagesManager.canDeleteMessage(this.msgID) 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); this.element = ButtonMenu(this.buttons);
@ -197,9 +225,11 @@ export default class ChatContextMenu {
}; };
private onCopyClick = () => { private onCopyClick = () => {
const message = appMessagesManager.getMessage(this.msgID); const mids = appImManager.chatSelection.isSelecting ? [...appImManager.chatSelection.selectedMids] : [this.msgID];
const str = mids.reduce((acc, mid) => {
const str = message ? message.message : ''; const message = appMessagesManager.getMessage(mid);
return acc + (message?.message ? message.message + '\n' : '');
}, '').trim();
const textArea = document.createElement('textarea'); const textArea = document.createElement('textarea');
textArea.value = str; textArea.value = str;
@ -234,7 +264,11 @@ export default class ChatContextMenu {
}; };
private onForwardClick = () => { private onForwardClick = () => {
if(appImManager.chatSelection.isSelecting) {
appImManager.chatSelection.selectionForwardBtn.click();
} else {
new PopupForward(this.isTargetAnAlbumItem ? [this.msgID] : appMessagesManager.getMidsByMid(this.msgID)); new PopupForward(this.isTargetAnAlbumItem ? [this.msgID] : appMessagesManager.getMidsByMid(this.msgID));
}
}; };
private onSelectClick = () => { private onSelectClick = () => {
@ -246,6 +280,10 @@ export default class ChatContextMenu {
}; };
private onDeleteClick = () => { private onDeleteClick = () => {
if(appImManager.chatSelection.isSelecting) {
appImManager.chatSelection.selectionDeleteBtn.click();
} else {
new PopupDeleteMessages([this.msgID]); new PopupDeleteMessages([this.msgID]);
}
}; };
} }

4
src/components/chat/selection.ts

@ -44,8 +44,8 @@ export default class ChatSelection {
private selectionContainer: HTMLElement; private selectionContainer: HTMLElement;
private selectionCountEl: HTMLElement; private selectionCountEl: HTMLElement;
private selectionForwardBtn: HTMLElement; public selectionForwardBtn: HTMLElement;
private selectionDeleteBtn: HTMLElement; public selectionDeleteBtn: HTMLElement;
public selectedText: string; public selectedText: string;

Loading…
Cancel
Save