morethanwords
4 years ago
5 changed files with 142 additions and 86 deletions
@ -0,0 +1,58 @@
@@ -0,0 +1,58 @@
|
||||
import { InputFile } from "../layer"; |
||||
import AvatarEdit from "./avatarEdit"; |
||||
import AvatarElement from "./avatar"; |
||||
import InputField from "./inputField"; |
||||
import ListenerSetter from "../helpers/listenerSetter"; |
||||
import Button from "./button"; |
||||
|
||||
export default class EditPeer { |
||||
public nextBtn: HTMLButtonElement; |
||||
|
||||
public uploadAvatar: () => Promise<InputFile>; |
||||
public avatarEdit: AvatarEdit; |
||||
public avatarElem: AvatarElement; |
||||
|
||||
private inputFields: InputField[]; |
||||
private listenerSetter: ListenerSetter; |
||||
|
||||
private peerId: number; |
||||
|
||||
constructor(options: { |
||||
peerId: number, |
||||
inputFields: EditPeer['inputFields'], |
||||
listenerSetter: ListenerSetter |
||||
}) { |
||||
for(let i in options) { |
||||
// @ts-ignore
|
||||
this[i] = options[i]; |
||||
} |
||||
|
||||
this.nextBtn = Button('btn-circle btn-corner tgico-check'); |
||||
|
||||
this.avatarElem = document.createElement('avatar-element') as AvatarElement; |
||||
this.avatarElem.classList.add('avatar-placeholder', 'avatar-120'); |
||||
|
||||
this.avatarEdit = new AvatarEdit((_upload) => { |
||||
this.uploadAvatar = _upload; |
||||
this.handleChange(); |
||||
this.avatarElem.remove(); |
||||
}); |
||||
|
||||
this.avatarElem.setAttribute('peer', '' + this.peerId); |
||||
if(!this.avatarElem.parentElement) { |
||||
this.avatarEdit.container.append(this.avatarElem); |
||||
} |
||||
|
||||
this.inputFields.forEach(inputField => { |
||||
this.listenerSetter.add(inputField.input, 'input', this.handleChange); |
||||
}); |
||||
} |
||||
|
||||
public isChanged = () => { |
||||
return !!this.uploadAvatar || !!this.inputFields.find(inputField => inputField.isValid()); |
||||
}; |
||||
|
||||
public handleChange = () => { |
||||
this.nextBtn.classList.toggle('is-visible', this.isChanged()); |
||||
}; |
||||
} |
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
import { SliderSuperTab } from "../../slider" |
||||
import InputField from "../../inputField"; |
||||
import EditPeer from "../../editPeer"; |
||||
|
||||
export default class AppEditGroupTab extends SliderSuperTab { |
||||
private groupNameInputField: InputField; |
||||
private descriptionInputField: InputField; |
||||
private editPeer: EditPeer; |
||||
|
||||
protected init() { |
||||
this.container.classList.add('edit-peer-container', 'edit-group-container'); |
||||
this.title.innerHTML = 'Edit'; |
||||
|
||||
const inputFields: InputField[] = []; |
||||
|
||||
{ |
||||
const inputWrapper = document.createElement('div'); |
||||
inputWrapper.classList.add('input-wrapper'); |
||||
|
||||
this.groupNameInputField = new InputField({ |
||||
label: 'Group Name', |
||||
name: 'group-name', |
||||
maxLength: 70 |
||||
}); |
||||
this.descriptionInputField = new InputField({ |
||||
label: 'Description', |
||||
name: 'group-description', |
||||
maxLength: 64 |
||||
}); |
||||
|
||||
inputWrapper.append(this.groupNameInputField.container, this.descriptionInputField.container); |
||||
|
||||
inputFields.push(this.groupNameInputField, this.descriptionInputField); |
||||
this.scrollable.append(inputWrapper); |
||||
} |
||||
|
||||
this.editPeer = new EditPeer({ |
||||
peerId: -1408712018, |
||||
inputFields, |
||||
listenerSetter: this.listenerSetter |
||||
}); |
||||
this.content.append(this.editPeer.nextBtn); |
||||
this.scrollable.prepend(this.editPeer.avatarEdit.container); |
||||
} |
||||
} |
Loading…
Reference in new issue