From 63cd915cf83056a069d790c48e5086eb4316e6d7 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Fri, 12 Mar 2021 22:08:39 +0400 Subject: [PATCH] Refactor input field --- src/components/inputField.ts | 16 +++++ .../sidebarLeft/tabs/editProfile.ts | 64 ++++++------------- 2 files changed, 35 insertions(+), 45 deletions(-) diff --git a/src/components/inputField.ts b/src/components/inputField.ts index 60de2250..387aa0a9 100644 --- a/src/components/inputField.ts +++ b/src/components/inputField.ts @@ -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; diff --git a/src/components/sidebarLeft/tabs/editProfile.ts b/src/components/sidebarLeft/tabs/editProfile.ts index 86b64f48..3f8f4c44 100644 --- a/src/components/sidebarLeft/tabs/editProfile.ts +++ b/src/components/sidebarLeft/tabs/editProfile.ts @@ -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 = 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[] = []; @@ -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(); - } -} \ No newline at end of file +}