Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implemented multi forward of messages, extended share media wit… #216

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: implemented multi forward of messages, extended share media wit… #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 143 additions & 32 deletions src/components/appSelectPeers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import rootScope from '../lib/rootScope';
import Scrollable from './scrollable';
import {FocusDirection} from '../helpers/fastSmoothScroll';
import CheckboxField from './checkboxField';
import {i18n, LangPackKey, _i18n} from '../lib/langPack';
import {_i18n, i18n, LangPackKey} from '../lib/langPack';
import findUpAttribute from '../helpers/dom/findUpAttribute';
import findUpClassName from '../helpers/dom/findUpClassName';
import PeerTitle from './peerTitle';
Expand All @@ -38,12 +38,112 @@ import getDialogIndex from '../lib/appManagers/utils/dialogs/getDialogIndex';
import {generateDelimiter} from './generateDelimiter';
import SettingSection from './settingSection';
import liteMode from '../helpers/liteMode';
import {ButtonMenuItemOptions, ButtonMenuSync} from "./buttonMenu";
import ListenerSetter from "../helpers/listenerSetter";
import {attachContextMenuListener} from "../helpers/dom/attachContextMenuListener";
import positionMenu from "../helpers/positionMenu";
import contextMenuController from "../helpers/contextMenuController";
import {addFullScreenListener, isFullScreen} from "../helpers/dom/fullScreen";

type SelectSearchPeerType = 'contacts' | 'dialogs' | 'channelParticipants';

// TODO: правильная сортировка для addMembers, т.е. для peerType: 'contacts', потому что там идут сначала контакты - потом неконтакты, а должно всё сортироваться по имени
export class AppSelectPeersContextMenu {
private buttons: (ButtonMenuItemOptions & { verify: (peerId: PeerId) => boolean | Promise<boolean> })[];
private element: HTMLElement;
private targetPeerId: PeerId;
private managers: AppManagers;


constructor(options: {
listenerSetter: ListenerSetter,
onContextElement: HTMLElement,
toggleMultiSelectState: () => void,
selectContact: (key: PeerId | string) => void
}) {
const {listenerSetter} = options;
this.buttons = [{
icon: 'select',
text: 'Message.Context.Select',
verify: () => true,
onClick: (e) => {
cancelEvent(e);
options.toggleMultiSelectState();
options.selectContact(this.targetPeerId);
console.log(this.targetPeerId)
}
}];
this.element = ButtonMenuSync({buttons: this.buttons, listenerSetter});
this.element.classList.add('select-peers-menu', 'night');

attachContextMenuListener({
element: options.onContextElement,
callback: async(e) => {

const li = findUpClassName(e.target, 'chatlist-chat');
if(!li) {
return;
}

if(this.element.parentElement !== appendTo) {
appendTo.append(this.element);
}

cancelEvent(e);

const peerId = this.targetPeerId = li.dataset.peerId.toPeerId();

await filterAsync(this.buttons, async(button) => {
const good = await button.verify(peerId);
button.element.classList.toggle('hide', !good);
return good;
});

positionMenu((e as TouchEvent).touches ? (e as TouchEvent).touches[0] : e as MouseEvent, this.element, 'right');
contextMenuController.openBtnMenu(this.element);
},
listenerSetter
});

let appendTo: HTMLElement = document.body;
addFullScreenListener(document.body, () => {
const isFull = isFullScreen();
appendTo = document.body;

if(!isFull) {
contextMenuController.close();
}
}, listenerSetter);
}

}

export interface ISelectPeers {
appendTo: AppSelectPeers['appendTo'],
onChange?: AppSelectPeers['onChange'],
peerType?: AppSelectPeers['peerType'],
peerId?: AppSelectPeers['peerId'],
onFirstRender?: () => void,
renderResultsFunc?: AppSelectPeers['renderResultsFunc'],
chatRightsActions?: AppSelectPeers['chatRightsActions'],
multiSelect?: AppSelectPeers['multiSelect'],
rippleEnabled?: AppSelectPeers['rippleEnabled'],
avatarSize?: AppSelectPeers['avatarSize'],
placeholder?: AppSelectPeers['placeholder'],
selfPresence?: AppSelectPeers['selfPresence'],
exceptSelf?: AppSelectPeers['exceptSelf'],
filterPeerTypeBy?: AppSelectPeers['filterPeerTypeBy'],
sectionNameLangPackKey?: AppSelectPeers['sectionNameLangPackKey'],
managers: AppSelectPeers['managers'],
design?: AppSelectPeers['design'],
listenerSetter?: ListenerSetter,
toggleableMultiSelect?: boolean,
}


export default class AppSelectPeers {
private contextMenu: AppSelectPeersContextMenu;
private listenerSetter: ListenerSetter;
public container = document.createElement('div');
public list = appDialogsManager.createChatList(/* {
handheldsSize: 66,
Expand All @@ -52,8 +152,7 @@ export default class AppSelectPeers {
private chatsContainer = document.createElement('div');
public scrollable: Scrollable;
private selectedScrollable: Scrollable;

private selectedContainer: HTMLElement;
public selectedContainer: HTMLElement;
public input: HTMLInputElement;

// public selected: {[peerId: PeerId]: HTMLElement} = {};
Expand All @@ -68,7 +167,7 @@ export default class AppSelectPeers {
private query = '';
private cachedContacts: PeerId[];

private loadedWhat: Partial<{[k in 'dialogs' | 'archived' | 'contacts' | 'channelParticipants']: true}> = {};
private loadedWhat: Partial<{ [k in 'dialogs' | 'archived' | 'contacts' | 'channelParticipants']: true }> = {};

private renderedPeerIds: Set<PeerId> = new Set();

Expand All @@ -83,7 +182,7 @@ export default class AppSelectPeers {
private exceptSelf = false;
private filterPeerTypeBy: IsPeerType[];

private tempIds: {[k in keyof AppSelectPeers['loadedWhat']]: number} = {};
private tempIds: { [k in keyof AppSelectPeers['loadedWhat']]: number } = {};
private peerId: PeerId;

private placeholder: LangPackKey;
Expand All @@ -98,25 +197,11 @@ export default class AppSelectPeers {

private design: 'round' | 'square' = 'round';

constructor(options: {
appendTo: AppSelectPeers['appendTo'],
onChange?: AppSelectPeers['onChange'],
peerType?: AppSelectPeers['peerType'],
peerId?: AppSelectPeers['peerId'],
onFirstRender?: () => void,
renderResultsFunc?: AppSelectPeers['renderResultsFunc'],
chatRightsActions?: AppSelectPeers['chatRightsActions'],
multiSelect?: AppSelectPeers['multiSelect'],
rippleEnabled?: AppSelectPeers['rippleEnabled'],
avatarSize?: AppSelectPeers['avatarSize'],
placeholder?: AppSelectPeers['placeholder'],
selfPresence?: AppSelectPeers['selfPresence'],
exceptSelf?: AppSelectPeers['exceptSelf'],
filterPeerTypeBy?: AppSelectPeers['filterPeerTypeBy'],
sectionNameLangPackKey?: AppSelectPeers['sectionNameLangPackKey'],
managers: AppSelectPeers['managers'],
design?: AppSelectPeers['design']
}) {
public toggleableMultiSelect: boolean = false;
public toggleableMultiSelectState: boolean = false;


constructor(options: ISelectPeers) {
safeAssign(this, options);

this.container.classList.add('selector', 'selector-' + this.design);
Expand Down Expand Up @@ -195,7 +280,6 @@ export default class AppSelectPeers {
simulateClickEvent(li);
}
});

section.content.append(topContainer);
this.container.append(section.container/* , delimiter */);
}
Expand All @@ -221,7 +305,7 @@ export default class AppSelectPeers {
let key: PeerId | string = target.dataset.peerId;
key = key.isPeerId() ? key.toPeerId() : key;

if(!this.multiSelect) {
if(!this.multiSelect || (this.multiSelect && this.toggleableMultiSelect && !this.toggleableMultiSelectState)) {
this.add(key);
return;
}
Expand Down Expand Up @@ -260,6 +344,10 @@ export default class AppSelectPeers {
}, 0);
}

private toggleMultiSelectState = () => {
this.toggleableMultiSelectState = true;
this.container.querySelectorAll('.checkbox-field').forEach(node => node.classList.remove('hide'));
}
private onInput = () => {
const value = this.input.value;
if(this.query !== value) {
Expand Down Expand Up @@ -553,7 +641,7 @@ export default class AppSelectPeers {
}

private getMoreSomething(peerType: SelectSearchPeerType) {
const map: {[type in SelectSearchPeerType]: () => Promise<any>} = {
const map: { [type in SelectSearchPeerType]: () => Promise<any> } = {
dialogs: this.getMoreDialogs,
contacts: this.getMoreContacts,
channelParticipants: this.getMoreChannelParticipants
Expand All @@ -565,7 +653,22 @@ export default class AppSelectPeers {

private async renderResults(peerIds: PeerId[]) {
// console.log('will renderResults:', peerIds);

if(this.toggleableMultiSelect) {
const {listenerSetter} = this;
this.contextMenu = new AppSelectPeersContextMenu({
onContextElement: this.list,
listenerSetter,
toggleMultiSelectState: () => {
this.toggleMultiSelectState();
},
selectContact: (peerId) => {
window.requestAnimationFrame(() => {
const li = this.chatsContainer.querySelector('[data-peer-id="' + peerId + '"]') as HTMLElement;
simulateClickEvent(li);
})
}
});
}
// оставим только неконтакты с диалогов
if(!this.peerType.includes('dialogs') && this.loadedWhat.contacts) {
peerIds = await filterAsync(peerIds, (peerId) => {
Expand All @@ -582,8 +685,12 @@ export default class AppSelectPeers {
});

if(this.multiSelect) {

const selected = this.selected.has(peerId);
const checkboxField = new CheckboxField();
const checkboxField = new CheckboxField({round: true});
if(!this.toggleableMultiSelectState) {
checkboxField.hide();
}

if(selected) {
// dom.listEl.classList.add('active');
Expand All @@ -610,7 +717,7 @@ export default class AppSelectPeers {
// console.trace('add');
this.selected.add(key);

if(!this.multiSelect) {
if(!this.multiSelect || (this.multiSelect && this.toggleableMultiSelect && !this.toggleableMultiSelectState)) {
this.onChange(this.selected.size);
return;
}
Expand Down Expand Up @@ -641,7 +748,7 @@ export default class AppSelectPeers {
}

if(title) {
if(typeof(title) === 'string') {
if(typeof (title) === 'string') {
div.innerHTML = title;
} else {
replaceContent(div, title);
Expand All @@ -650,8 +757,12 @@ export default class AppSelectPeers {
}

div.insertAdjacentElement('afterbegin', avatarEl);
try {
this.selectedContainer.insertBefore(div, this.input);
} catch(e) {
this.selectedContainer.append(div);
}

this.selectedContainer.insertBefore(div, this.input);
// this.selectedScrollable.scrollTop = this.selectedScrollable.scrollHeight;
this.onChange?.(this.selected.size);

Expand Down
11 changes: 10 additions & 1 deletion src/components/checkboxField.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import type ListenerSetter from '../helpers/listenerSetter';
import ripple from './ripple';
import {LangPackKey, _i18n} from '../lib/langPack';
import {_i18n, LangPackKey} from '../lib/langPack';
import getDeepProperty from '../helpers/object/getDeepProperty';
import rootScope from '../lib/rootScope';
import apiManagerProxy from '../lib/mtproto/mtprotoworker';
Expand Down Expand Up @@ -46,6 +46,7 @@ export default class CheckboxField {
label.classList.add('checkbox-field-round');
}


if(options.disabled) {
this.toggleDisability(true);
}
Expand Down Expand Up @@ -179,6 +180,14 @@ export default class CheckboxField {
this.input.checked = checked;
}

public show() {
this.label.classList.remove('hide');
}

public hide() {
this.label.classList.add('hide');
}

public isDisabled() {
return this.label.classList.contains('checkbox-disabled');
}
Expand Down
Loading