From 216b4d7a1a0d303b42a50b3c2bd3b8516aeb4ad1 Mon Sep 17 00:00:00 2001 From: "rit1992@mail.ru" <158091165+margarita0206@users.noreply.github.com> Date: Sun, 4 Aug 2024 20:17:01 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=A4=D0=BE=D1=82=D0=BE=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=BF=D0=B0=D0=BC=D1=8F=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/load-pictures.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/js/load-pictures.js b/js/load-pictures.js index 8b13789..fb27366 100644 --- a/js/load-pictures.js +++ b/js/load-pictures.js @@ -1 +1,19 @@ +import { FILE_TYPES } from './constant.js'; +const imgUploadPreview = document.querySelector('.img-upload__preview img'); +const fileChooser = document.querySelector('.img-upload__start input[type=file]'); + +const loadingPicture = () => { + fileChooser.addEventListener('change', () => { + const file = fileChooser.files[0]; + const fileName = file.name.toLowerCase(); + + const matches = FILE_TYPES.some((it) => fileName.endsWith(it)); + + if (matches) { + imgUploadPreview.src = URL.createObjectURL(file); + } + }); +}; + +export { loadingPicture }; From dcd1c0292852d3a9624ebb2b4db7e653a380d6b1 Mon Sep 17 00:00:00 2001 From: "rit1992@mail.ru" <158091165+margarita0206@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:14:13 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D1=8B=D0=B2?= =?UTF-8?q?=D0=B0=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BC=D0=B0=D1=88=D0=BD=D0=B5?= =?UTF-8?q?=D0=B5=20=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/effects-img.js | 2 +- js/form-modal.js | 11 ++++++----- js/form-validate.js | 2 +- js/main.js | 4 ++-- js/success-error.js | 44 ++++++++++++++++++++------------------------ js/thumbnail.js | 2 ++ 6 files changed, 32 insertions(+), 33 deletions(-) diff --git a/js/effects-img.js b/js/effects-img.js index 3452089..eaa12a4 100644 --- a/js/effects-img.js +++ b/js/effects-img.js @@ -5,7 +5,7 @@ import { } from './constant.js'; const modalElement = document.querySelector('.img-upload'); -const imgElement = modalElement.querySelector('.img-upload__preview'); +const imgElement = modalElement.querySelector('.img-upload__preview img'); const effectsElement = modalElement.querySelector('.effects'); const slider = modalElement.querySelector('.effect-level__slider'); const sliderContainer = modalElement.querySelector('.img-upload__effect-level'); diff --git a/js/form-modal.js b/js/form-modal.js index 5680115..735fe14 100644 --- a/js/form-modal.js +++ b/js/form-modal.js @@ -33,6 +33,7 @@ const closeRedactForm = () => { imgUploadInput.value = ''; document.removeEventListener('keydown', onDocumentKeydown); resetValidation(); + imgUploadForm.reset(); }; const toggleSubmitButton = (isDisabled) => { @@ -52,14 +53,14 @@ imgUploadCancelButton.addEventListener('click', () => { const isErrorMessageShown = () => Boolean(document.querySelector('.error')); -function onDocumentKeydown(evt) { - if(evt.isEscapeKey && !isErrorMessageShown()) { +function onDocumentKeydown (evt) { + if (isEscapeKey(evt) && !isErrorMessageShown()) { evt.preventDefault(); closeRedactForm(); } } -fieldComments.addEventListener('.keydown', (evt) => { +fieldComments.addEventListener('keydown', (evt) => { if(isEscapeKey(evt)) { evt.stopPropagation(); } @@ -75,7 +76,7 @@ const setOnFormSubmit = (callback) => { imgUploadForm.addEventListener('submit', async (evt) => { evt.preventDefault(); - if (isValid) { + if (isValid()) { toggleSubmitButton(true); await callback(new FormData(imgUploadForm)); toggleSubmitButton(); @@ -83,4 +84,4 @@ const setOnFormSubmit = (callback) => { }); }; -export { setOnFormSubmit, imgUploadForm }; +export { setOnFormSubmit, closeRedactForm }; diff --git a/js/form-validate.js b/js/form-validate.js index 2a40389..a0343c2 100644 --- a/js/form-validate.js +++ b/js/form-validate.js @@ -74,7 +74,7 @@ const resetValidation = () => { pristine.reset(); }; -const isValid = pristine.validate(); +const isValid = () => pristine.validate(); initEffect(); export { isValid, resetValidation }; diff --git a/js/main.js b/js/main.js index deb50b7..0f2126b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,14 +1,14 @@ import { generateThumbnails } from './thumbnail.js'; import { getData, sendData } from './api.js'; import { showAlert, debounce } from './utils.js'; -import { setOnFormSubmit, imgUploadForm } from './form-modal.js'; +import { setOnFormSubmit, closeRedactForm } from './form-modal.js'; import { showMessageSuccess, showMessageError } from './success-error.js'; import { init as initFilter, getFilteredPictures } from './filters.js'; setOnFormSubmit(async (data) => { try { await sendData(data); - imgUploadForm(); + closeRedactForm(); showMessageSuccess(); } catch { showMessageError(); diff --git a/js/success-error.js b/js/success-error.js index a0df201..d6267af 100644 --- a/js/success-error.js +++ b/js/success-error.js @@ -7,50 +7,46 @@ const errorFragment = document.createDocumentFragment(); const body = document.querySelector('body'); +const onEscapeKeydownSuccess = (evt) => { + if (isEscapeKey(evt)) { + document.querySelector('.success').remove(); + document.removeEventListener('keydown', onEscapeKeydownSuccess); + } +}; + const showMessageSuccess = () => { const messageSuccess = successTemplate.cloneNode(true); successFragment.appendChild(messageSuccess); body.appendChild(successFragment); const buttonSuccess = document.querySelector('.success__button'); const sectionSuccess = document.querySelector('.success'); - const successInner = document.querySelector('.success__inner'); - document.addEventListener('keydown', (evt) => { - if (isEscapeKey(evt)) { - sectionSuccess.remove(); - } - }); - sectionSuccess.addEventListener(('click'), (evt) => { - if (evt.target === buttonSuccess) { - sectionSuccess.remove(); - } - }); + document.addEventListener('keydown', onEscapeKeydownSuccess); sectionSuccess.addEventListener(('click'), (evt) => { - if (evt.target === successInner) { + if (evt.target === buttonSuccess || evt.target.classList.contains('success')) { sectionSuccess.remove(); + document.removeEventListener('keydown', onEscapeKeydownSuccess); } }); }; +const onEscapeKeydownError = (evt) => { + if (isEscapeKey(evt)) { + document.querySelector('.error').remove(); + document.removeEventListener('keydown', onEscapeKeydownError); + } +}; + const showMessageError = () => { const messageError = errorTemplate.cloneNode(true); errorFragment.appendChild(messageError); body.appendChild(errorFragment); const buttonError = document.querySelector('.error__button'); const sectionError = document.querySelector('.error'); - const errorInner = document.querySelector('.error__inner'); - document.addEventListener('keydown', (evt) => { - if (isEscapeKey(evt)) { - sectionError.remove(); - } - }); - sectionError.addEventListener(('click'), (evt) => { - if (evt.target === buttonError) { - sectionError.remove(); - } - }); + document.addEventListener('keydown', onEscapeKeydownError); sectionError.addEventListener(('click'), (evt) => { - if (evt.target === errorInner) { + if (evt.target === buttonError || evt.target.classList.contains('error')) { sectionError.remove(); + document.removeEventListener('keydown', onEscapeKeydownError); } }); }; diff --git a/js/thumbnail.js b/js/thumbnail.js index 430f0f1..da12589 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -9,7 +9,9 @@ const pictureTemplate = document.querySelector('#picture') const generateThumbnails = (picture) => { picturesContainer.querySelectorAll('.picture').forEach((element) => element.remove()); + const similarListFragment = document.createDocumentFragment(); + picture.forEach(({ id, url, description, likes, comments }) => { const pictureElement = pictureTemplate.cloneNode(true); pictureElement.querySelector('.picture__img').dataset.id = id;