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