76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import Modal from '../modal/Modal';
|
|
import {createElement} from '../../utils/elementUtils';
|
|
import FormControl from '../form-control/index';
|
|
import './AvatarModal.css';
|
|
import usersServiceApi from '../../api/UsersServiceAPI';
|
|
import userInfoService from '../../services/UserInfoService';
|
|
import {EVENTS} from '../../consts';
|
|
|
|
class AvatarModal extends Modal {
|
|
constructor (parentNode) {
|
|
super(parentNode);
|
|
|
|
this.header.textContent = 'Основное изображение';
|
|
this.avatar = createElement({
|
|
tagName: 'div',
|
|
options: {
|
|
className: 'Avatar__img',
|
|
}
|
|
});
|
|
this.width = this.avatar.scrollWidth;
|
|
this.content.append(this.avatar);
|
|
this.content.className = 'Avatar__container';
|
|
|
|
this.input = this.createComponent(FormControl, this.content, {
|
|
id: 'avatar-url-input',
|
|
label: 'URL нового изображения',
|
|
placeholder: 'Введите URL',
|
|
className: 'Avatar__url-input'
|
|
});
|
|
|
|
this.submitBtn = createElement({
|
|
tagName: 'button',
|
|
options: {
|
|
className: 'Avatar__submit-btn btn btn-outline-primary'
|
|
}
|
|
});
|
|
this.submitBtn.textContent = 'Применить';
|
|
this.footer.append(this.submitBtn);
|
|
this.addEventListener(this.submitBtn, EVENTS.CLICK, () => {
|
|
this.submit();
|
|
});
|
|
|
|
this.addSubscribe(this.input, 'input', (evt) => {
|
|
this.url = evt.currentTarget.value;
|
|
this.changeAvatar(this.url);
|
|
});
|
|
|
|
this.init();
|
|
}
|
|
|
|
changeAvatar (url) {
|
|
this.avatar.style.backgroundImage = `url(${url})`;
|
|
}
|
|
|
|
init = async () => {
|
|
const user = await usersServiceApi.getSelfInfo();
|
|
this.changeAvatar(this.url || user.avatar);
|
|
}
|
|
|
|
openEditor () {
|
|
this.show();
|
|
}
|
|
|
|
submit = async () => {
|
|
if (this.url) {
|
|
await usersServiceApi.setAvatar(this.url);
|
|
userInfoService.setUserLogin();
|
|
this.hide();
|
|
} else {
|
|
this.input.input.placeholder = 'Вы не ввели URL';
|
|
}
|
|
|
|
}
|
|
}
|
|
export default AvatarModal;
|