r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor input field

Browse Source
This commit is contained in:
morethanwords 2021-03-12 22:08:39 +04:00
parent 0df25557e0
commit 63cd915cf8
2 changed files with 35 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/inputField.ts
View File

@ -57,6 +57,8 @@ class InputField {
public inputFake: HTMLElement;
public label: HTMLLabelElement;
public originalValue: string;
//public onLengthChange: (length: number, isOverflow: boolean) => void;
protected wasInputFakeClientHeight: number;
protected showScrollDebounced: () => void;
@ -204,6 +206,20 @@ class InputField {
}
}
}
public isValid() {
return !this.input.classList.contains('error') && this.value !== this.originalValue;
}
public setOriginalValue(value: InputField['originalValue']) {
this.originalValue = value;
if(this.options.plainText) {
this.value = value;
} else {
this.value = RichTextProcessor.wrapDraftText(value);
}
}
}
export default InputField;

64
src/components/sidebarLeft/tabs/editProfile.ts
View File

@ -2,13 +2,13 @@ import type { InputFile } from "../../../layer";
import appProfileManager from "../../../lib/appManagers/appProfileManager";
import appUsersManager from "../../../lib/appManagers/appUsersManager";
import apiManager from "../../../lib/mtproto/mtprotoworker";
import RichTextProcessor from "../../../lib/richtextprocessor";
import rootScope from "../../../lib/rootScope";
import AvatarElement from "../../avatar";
import InputField from "../../inputField";
import { SliderSuperTab } from "../../slider";
import AvatarEdit from "../../avatarEdit";
import Button from "../../button";
import { attachClickEvent } from "../../../helpers/dom";
// TODO: аватарка не поменяется в этой вкладке после изменения почему-то (если поставить в другом клиенте, и потом тут проверить, для этого ещё вышел в чатлист)
@ -20,9 +20,6 @@ export default class AppEditProfileTab extends SliderSuperTab {
private lastNameInputField: InputField;
private bioInputField: InputField;
private userNameInputField: InputField;
private firstNameInput: HTMLElement;
private lastNameInput: HTMLElement;
private bioInput: HTMLElement;
private userNameInput: HTMLElement;
private uploadAvatar: () => Promise<InputFile> = null;
@ -32,13 +29,6 @@ export default class AppEditProfileTab extends SliderSuperTab {
private profileUrlContainer: HTMLDivElement;
private profileUrlAnchor: HTMLAnchorElement;
private originalValues = {
firstName: '',
lastName: '',
userName: '',
bio: ''
};
protected init() {
this.container.classList.add('edit-profile-container');
this.title.innerText = 'Edit Profile';
@ -77,10 +67,6 @@ export default class AppEditProfileTab extends SliderSuperTab {
maxLength: 70
});
this.firstNameInput = this.firstNameInputField.input;
this.lastNameInput = this.lastNameInputField.input;
this.bioInput = this.bioInputField.input;
inputWrapper.append(this.firstNameInputField.container, this.lastNameInputField.container, this.bioInputField.container);
const caption = document.createElement('div');
@ -122,14 +108,14 @@ export default class AppEditProfileTab extends SliderSuperTab {
let userNameLabel = this.userNameInput.nextElementSibling as HTMLLabelElement;
this.firstNameInput.addEventListener('input', this.handleChange);
this.lastNameInput.addEventListener('input', this.handleChange);
this.bioInput.addEventListener('input', this.handleChange);
this.userNameInput.addEventListener('input', () => {
this.listenerSetter.add(this.firstNameInputField.input, 'input', this.handleChange);
this.listenerSetter.add(this.lastNameInputField.input, 'input', this.handleChange);
this.listenerSetter.add(this.bioInputField.input, 'input', this.handleChange);
this.listenerSetter.add(this.userNameInput, 'input', () => {
let value = this.userNameInputField.value;
//console.log('userNameInput:', value);
if(value === this.originalValues.userName || !value.length) {
if(value === this.userNameInputField.originalValue || !value.length) {
this.userNameInput.classList.remove('valid', 'error');
userNameLabel.innerText = 'Username (optional)';
this.setProfileUrl();
@ -180,7 +166,7 @@ export default class AppEditProfileTab extends SliderSuperTab {
});
});
this.nextBtn.addEventListener('click', () => {
attachClickEvent(this.nextBtn, () => {
this.nextBtn.disabled = true;
let promises: Promise<any>[] = [];
@ -197,14 +183,14 @@ export default class AppEditProfileTab extends SliderSuperTab {
}));
}
if(this.userNameInputField.value !== this.originalValues.userName && this.userNameInput.classList.contains('valid')) {
if(this.userNameInputField.isValid() && this.userNameInput.classList.contains('valid')) {
promises.push(appProfileManager.updateUsername(this.userNameInputField.value));
}
Promise.race(promises).finally(() => {
this.nextBtn.removeAttribute('disabled');
});
});
}, {listenerSetter: this.listenerSetter});
}
public fillElements() {
@ -215,25 +201,17 @@ export default class AppEditProfileTab extends SliderSuperTab {
const user = appUsersManager.getSelf();
Object.assign(this.originalValues, {
firstName: user.first_name,
lastName: user.last_name,
userName: user.username,
bio: ''
});
this.firstNameInputField.value = RichTextProcessor.wrapDraftText(user.first_name);
this.lastNameInputField.value = RichTextProcessor.wrapDraftText(user.last_name);
this.bioInputField.value = '';
this.userNameInputField.value = this.originalValues.userName = user.username ?? '';
this.firstNameInputField.setOriginalValue(user.first_name);
this.lastNameInputField.setOriginalValue(user.last_name);
this.bioInputField.setOriginalValue('');
this.userNameInputField.setOriginalValue(user.username ?? '');
this.userNameInput.classList.remove('valid', 'error');
this.userNameInput.nextElementSibling.innerHTML = 'Username (optional)';
appProfileManager.getProfile(user.id, true).then(userFull => {
if(userFull.about) {
this.originalValues.bio = userFull.about;
this.bioInputField.value = RichTextProcessor.wrapDraftText(userFull.about);
this.bioInputField.setOriginalValue(userFull.about);
this.handleChange();
}
@ -256,10 +234,10 @@ export default class AppEditProfileTab extends SliderSuperTab {
private isChanged() {
return !!this.uploadAvatar
|| (!this.firstNameInput.classList.contains('error') && this.firstNameInputField.value !== this.originalValues.firstName)
|| (!this.lastNameInput.classList.contains('error') && this.lastNameInputField.value !== this.originalValues.lastName)
|| (!this.bioInput.classList.contains('error') && this.bioInputField.value !== this.originalValues.bio)
|| (this.userNameInputField.value !== this.originalValues.userName && !this.userNameInput.classList.contains('error'));
|| this.firstNameInputField.isValid()
|| this.lastNameInputField.isValid()
|| this.bioInputField.isValid()
|| this.userNameInputField.isValid();
}
private setProfileUrl() {
@ -276,8 +254,4 @@ export default class AppEditProfileTab extends SliderSuperTab {
private handleChange = () => {
this.nextBtn.classList.toggle('is-visible', this.isChanged());
};
onCloseAfterTimeout() {
super.onCloseAfterTimeout();
}
}
}