Telegram Web K with changes to work inside I2P https://web.telegram.i2p/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

345 lines
11 KiB

import { isTouchSupported } from "../../helpers/touchSupport";
import type { AppImManager } from "../../lib/appManagers/appImManager";
import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
import { cancelEvent, cancelSelection, findUpClassName, getSelectedText } from "../../lib/utils";
import Button from "../button";
import ButtonIcon from "../buttonIcon";
import CheckboxField from "../checkbox";
import PopupDeleteMessages from "../popupDeleteMessages";
import PopupForward from "../popupForward";
import { toast } from "../toast";
const SetTransition = (element: HTMLElement, className: string, forwards: boolean, duration: number, onTransitionEnd?: () => void) => {
const timeout = element.dataset.timeout;
if(timeout !== undefined) {
clearTimeout(+timeout);
}
if(forwards) {
element.classList.add(className);
}
element.classList.add('animating');
element.classList.toggle('backwards', !forwards);
element.dataset.timeout = '' + setTimeout(() => {
delete element.dataset.timeout;
if(!forwards) {
element.classList.remove('backwards', className);
}
element.classList.remove('animating');
onTransitionEnd && onTransitionEnd();
}, duration);
};
const MAX_SELECTION_LENGTH = 100;
//const MIN_CLICK_MOVE = 32; // minimum bubble height
export default class ChatSelection {
public selectedMids: Set<number> = new Set();
public isSelecting = false;
private selectionContainer: HTMLElement;
private selectionCountEl: HTMLElement;
private selectionForwardBtn: HTMLElement;
private selectionDeleteBtn: HTMLElement;
public selectedText: string;
constructor(private appImManager: AppImManager, private appMessagesManager: AppMessagesManager) {
const bubblesContainer = appImManager.bubblesContainer;
if(isTouchSupported) {
bubblesContainer.addEventListener('touchend', (e) => {
if(!this.isSelecting) return;
this.selectedText = getSelectedText();
});
return;
}
bubblesContainer.addEventListener('mousedown', (e) => {
//console.log('selection mousedown', e);
if(e.button != 0 || (!this.selectedMids.size && !(e.target as HTMLElement).classList.contains('bubble'))) { // LEFT BUTTON
return;
}
const seen: Set<number> = new Set();
let selecting: boolean;
/* let good = false;
const {x, y} = e; */
/* const bubbles = appImManager.bubbles;
for(const mid in bubbles) {
const bubble = bubbles[mid];
bubble.addEventListener('mouseover', () => {
console.log('mouseover');
}, {once: true});
} */
//const foundTargets: Map<HTMLElement, true> = new Map();
const onMouseMove = (e: MouseEvent) => {
/* if(!good) {
if(Math.abs(e.x - x) > MIN_CLICK_MOVE || Math.abs(e.y - y) > MIN_CLICK_MOVE) {
good = true;
} else {
return;
}
} */
/* if(foundTargets.has(e.target as HTMLElement)) return;
foundTargets.set(e.target as HTMLElement, true); */
const bubble = findUpClassName(e.target, 'bubble');
if(!bubble) {
console.error('found no bubble', e);
return;
}
const mid = +bubble.dataset.mid;
if(!mid) return;
if(e.target != bubble && selecting === undefined) {
bubblesContainer.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
return;
}
if(!seen.has(mid)) {
const isBubbleSelected = this.selectedMids.has(mid);
if(selecting === undefined) {
//bubblesContainer.classList.add('no-select');
selecting = !isBubbleSelected;
}
seen.add(mid);
if((selecting && !isBubbleSelected) || (!selecting && isBubbleSelected)) {
if(!this.selectedMids.size) {
if(seen.size == 2) {
[...seen].forEach(mid => {
const mounted = this.appImManager.getMountedBubble(mid);
if(mounted) {
this.toggleByBubble(mounted.bubble);
}
})
}
} else {
this.toggleByBubble(bubble);
}
}
}
//console.log('onMouseMove', target);
};
const onMouseUp = (e: MouseEvent) => {
if(seen.size) {
window.addEventListener('click', (e) => {
cancelEvent(e);
}, {capture: true, once: true, passive: false});
}
bubblesContainer.removeEventListener('mousemove', onMouseMove);
//bubblesContainer.classList.remove('no-select');
// ! CANCEL USER SELECTION !
cancelSelection();
};
bubblesContainer.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp, {once: true});
});
}
public toggleBubbleCheckbox(bubble: HTMLElement, show: boolean) {
const hasCheckbox = !!this.getCheckboxInputFromBubble(bubble);
if(show) {
if(hasCheckbox) return;
const checkboxField = CheckboxField('', bubble.dataset.mid, true);
checkboxField.label.classList.add('bubble-select-checkbox');
// * if it is a render of new message
const mid = +bubble.dataset.mid;
if(this.selectedMids.has(mid)) {
checkboxField.input.checked = true;
bubble.classList.add('is-selected');
}
bubble.prepend(checkboxField.label);
} else if(hasCheckbox) {
bubble.firstElementChild.remove();
}
}
public getCheckboxInputFromBubble(bubble: HTMLElement) {
return bubble.firstElementChild.tagName == 'LABEL' && bubble.firstElementChild.firstElementChild as HTMLInputElement;
}
public updateForwardContainer() {
if(!this.selectedMids.size) return;
this.selectionCountEl.innerText = this.selectedMids.size + ' Message' + (this.selectedMids.size == 1 ? '' : 's');
let cantForward = false, cantDelete = false;
for(const mid of this.selectedMids.values()) {
const message = this.appMessagesManager.getMessage(mid);
if(!cantForward) {
if(message.action) {
cantForward = true;
}
}
if(!cantDelete) {
const canDelete = this.appMessagesManager.canDeleteMessage(mid);
if(!canDelete) {
cantDelete = true;
}
}
if(cantForward && cantDelete) break;
}
this.selectionForwardBtn.toggleAttribute('disabled', cantForward);
this.selectionDeleteBtn.toggleAttribute('disabled', cantDelete);
}
public toggleSelection(toggleCheckboxes = true) {
const wasSelecting = this.isSelecting;
this.isSelecting = this.selectedMids.size > 0;
if(wasSelecting == this.isSelecting) return;
const bubblesContainer = this.appImManager.bubblesContainer;
//bubblesContainer.classList.toggle('is-selecting', !!this.selectedMids.size);
/* if(bubblesContainer.classList.contains('is-chat-input-hidden')) {
const scrollable = this.appImManager.scrollable;
if(scrollable.isScrolledDown) {
scrollable.scrollTo(scrollable.scrollHeight, 'top', true, true, 200);
}
} */
if(!isTouchSupported) {
bubblesContainer.classList.toggle('no-select', this.isSelecting);
if(wasSelecting) {
// ! CANCEL USER SELECTION !
cancelSelection();
}
}
SetTransition(bubblesContainer, 'is-selecting', !!this.selectedMids.size, 200, () => {
if(!this.isSelecting) {
this.selectionContainer.remove();
this.selectionContainer = this.selectionForwardBtn = this.selectionDeleteBtn = null;
this.selectedText = undefined;
}
window.requestAnimationFrame(() => {
this.appImManager.onScroll();
});
});
//const chatInput = this.appImManager.chatInput;
if(this.isSelecting) {
if(!this.selectionContainer) {
const inputMessageDiv = document.querySelector('.input-message');
this.selectionContainer = document.createElement('div');
this.selectionContainer.classList.add('selection-container');
const btnCancel = ButtonIcon('close', {noRipple: true});
btnCancel.addEventListener('click', this.cancelSelection, {once: true});
this.selectionCountEl = document.createElement('div');
this.selectionCountEl.classList.add('selection-container-count');
this.selectionForwardBtn = Button('btn-primary btn-transparent selection-container-forward', {icon: 'forward'});
this.selectionForwardBtn.append('Forward');
this.selectionForwardBtn.addEventListener('click', () => {
new PopupForward([...this.selectedMids], () => {
this.cancelSelection();
});
});
this.selectionDeleteBtn = Button('btn-primary btn-transparent danger selection-container-delete', {icon: 'delete'});
this.selectionDeleteBtn.append('Delete');
this.selectionDeleteBtn.addEventListener('click', () => {
new PopupDeleteMessages([...this.selectedMids], () => {
this.cancelSelection();
});
});
this.selectionContainer.append(btnCancel, this.selectionCountEl, this.selectionForwardBtn, this.selectionDeleteBtn);
inputMessageDiv.append(this.selectionContainer);
}
}
if(toggleCheckboxes) {
for(const mid in this.appImManager.bubbles) {
const bubble = this.appImManager.bubbles[mid];
this.toggleBubbleCheckbox(bubble, this.isSelecting);
}
}
}
public cancelSelection = () => {
for(const mid of this.selectedMids) {
const bubble = this.appImManager.bubbles[mid];
if(bubble) {
this.toggleByBubble(bubble);
}
}
this.selectedMids.clear();
this.toggleSelection();
cancelSelection();
};
public cleanup() {
this.selectedMids.clear();
this.toggleSelection(false);
}
public toggleByBubble(bubble: HTMLElement) {
const mid = +bubble.dataset.mid;
const mids = this.appMessagesManager.getMidsByMid(mid);
const found = mids.find(mid => this.selectedMids.has(mid));
if(found) {
mids.forEach(mid => this.selectedMids.delete(mid));
} else {
let diff = MAX_SELECTION_LENGTH - this.selectedMids.size - mids.length;
if(diff < 0) {
toast('Max selection count reached.');
return;
/* const it = this.selectedMids.values();
do {
const mid = it.next().value;
const mounted = this.appImManager.getMountedBubble(mid);
if(mounted) {
this.toggleByBubble(mounted.bubble);
} else {
const mids = this.appMessagesManager.getMidsByMid(mid);
for(const mid of mids) {
this.selectedMids.delete(mid);
}
}
} while(this.selectedMids.size > MAX_SELECTION_LENGTH); */
}
mids.forEach(mid => this.selectedMids.add(mid));
}
this.toggleBubbleCheckbox(bubble, true);
const input = this.getCheckboxInputFromBubble(bubble);
input.checked = !found;
this.toggleSelection();
this.updateForwardContainer();
SetTransition(bubble, 'is-selected', !found, 200);
}
}