const popupProfile = document.querySelector('.popup-profile');
const popupAdd = document.querySelector('.popup-add');
const popupImage = document.querySelector('.popup-image');
const buttonEdit = document.querySelector('.profile__edit-button');
const addButton = document.querySelector('.profile__add-button');
const formCards = document.querySelector('.form-cards');
const formProfile = document.querySelector('.form-profile');
const nameProfileInput = document.querySelector('.form__input_text_name');
const jobProfileInput = document.querySelector('.form__input_text_job');
const nameProfileTitle = document.querySelector('.profile__name');
const jobProfileTitle = document.querySelector('.profile__job');
const nameImageAdd = document.querySelector('.form__input_image_name');
const linkImageAdd = document.querySelector('.form__input_image_link');
const imageClicked = document.querySelector('.popup-image__img');
const nameImageClicked = document.querySelector('.popup-image__title');
const cardsBlock = document.querySelector('.cards');
const closeButtons = document.querySelectorAll('.popup__close');
closeButtons.forEach((button) => {
const popup = button.closest('.popup');
button.addEventListener('click', () => closePopup(popup));
});
const closeWithinPopup = (e) => {
const isOverlay = e.target.classList.contains('popup_opened');
if (isOverlay) {
closePopup(e.target);
}
};
const closePopupEsc = (e) => {
const isEsc = (e.key === 'Escape');
if (isEsc) {
const popup = document.querySelector('.popup_opened');
closePopup(popup);
}
};
const openPopup = (popup) => {
popup.classList.add('popup_opened');
popup.addEventListener('click', closeWithinPopup);
document.addEventListener('keydown', closePopupEsc);// тут его не должно быть
};
const closePopup = (popup) => {
popup.classList.remove('popup_opened');
popup.removeEventListener('click', closeWithinPopup);
document.removeEventListener('keydown', closePopupEsc);
};
function viewPopupImageImg(name, link) {
imageClicked.src = link;
imageClicked.alt = name;
nameImageClicked.textContent = name;
openPopup(popupImage);
}
function createCard(data) {
const card = new Card(data, '#card__template', viewPopupImageImg);
return card.generateCard();
}
function addNewCard(input) {
cardsBlock.prepend(input);
}
initialCards.forEach((input) => {
addNewCard(createCard(input));
});
function clearInput(e) {
e.target.reset();
}
function handleFormProfileSubmit(e) {
e.preventDefault();
nameProfileTitle.textContent = nameProfileInput.value;
jobProfileTitle.textContent = jobProfileInput.value;
closePopup(popupProfile);
}
function handleFormAddSubmit(e) {
e.preventDefault();
const addCard = {
name: nameImageAdd.value,
link: linkImageAdd.value,
};
addNewCard(createCard(addCard));
closePopup(popupAdd, clearInput(e));
}
buttonEdit.addEventListener('click', function () {
nameProfileInput.value = nameProfileTitle.textContent;
jobProfileInput.value = jobProfileTitle.textContent;
openPopup(popupProfile);
});
addButton.addEventListener('click', function () {
formCardValidation.disablesSubmitForm();
openPopup(popupAdd);
});
formProfile.addEventListener('submit', handleFormProfileSubmit);
formCards.addEventListener('submit', handleFormAddSubmit);
openPopup.addEventListener('keydown', closePopupEsc);
//валидация
const profileValidation = new FormValidator(obj, formProfile);
profileValidation.enableValidation();
const formCardValidation = new FormValidator(obj, formCards);
formCardValidation.enableValidation();