From c001af9e2e3f9190d44a88e14c2a28fbed1ef365 Mon Sep 17 00:00:00 2001
From: Ksenia Tryapitsyna <k.tryapitsyna@gmail.com>
Date: Mon, 12 Aug 2024 00:29:48 +0300
Subject: [PATCH 1/4] feat: add the ability to display the uploaded photo in a
 upload modal window

---
 index.html        |  2 +-
 js/upload-form.js | 21 +++++++++++++++++++--
 js/util.js        |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 35c9e8c..8b4e530 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" accept="image/png, image/jpeg, image/jpg" required>
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 
diff --git a/js/upload-form.js b/js/upload-form.js
index 106c42a..405b8bb 100644
--- a/js/upload-form.js
+++ b/js/upload-form.js
@@ -6,6 +6,7 @@ import { showPostErrorMessage, showPostSucsessMessage } from './messages.js';
 const HASHTAGS_REGEXP = /^#[a-zа-яё0-9]{1,19}$/i;
 const MAX_COMMENTS_LENGTH = 140;
 const MAX_HASHTAGS_COUNT = 5;
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
 
 const scaleSettings = {
   STEP: 25,
@@ -25,6 +26,7 @@ const minusScaleButton = document.querySelector('.scale__control--smaller');
 const scale = document.querySelector('.scale__control--value');
 const photoPreview = document.querySelector('.img-upload__preview');
 const submitButton = document.querySelector('.img-upload__submit');
+const photoPreviewImg = document.querySelector('.img-upload__preview img');
 
 const isFieldFocused = () => document.activeElement === textCommentField || document.activeElement === hashtagField;
 
@@ -62,8 +64,23 @@ function onDocumentEscKeyDown(evt) {
   }
 }
 
-// открытие окна загрузки фото
-uploadInput.addEventListener('change', openUploadModal);
+// функция для показа загруженной фотографии в модальном окне
+const setLoadedPhotoPreview = () => {
+  const file = uploadInput.files[0];
+  const fileName = file.name.toLowerCase();
+
+  const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
+
+  if (matches) {
+    photoPreviewImg.src = URL.createObjectURL(file);
+  }
+}
+
+// открытие окна загрузки фото, загрузка фото:
+uploadInput.addEventListener('change', () => {
+  openUploadModal();
+  setLoadedPhotoPreview();
+});
 
 // закрытие окна загрузки фото
 closeUploadModalButton.addEventListener('click', (evt) => {
diff --git a/js/util.js b/js/util.js
index de10055..005fc47 100644
--- a/js/util.js
+++ b/js/util.js
@@ -39,7 +39,7 @@ const createGenerator = () => {
 // функция, которая возвращает true / false в зависимости от наличия или отсутствия нажатия клавиши esc
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-//
+// функция для вызова коллбэка через определенное время
 const debounce = (callback, timeoutDelay) => {
   let timeoutId;
 

From 0bd33c1ab3c14826e2482aea1ae1af49ef4626bf Mon Sep 17 00:00:00 2001
From: Ksenia Tryapitsyna <k.tryapitsyna@gmail.com>
Date: Mon, 12 Aug 2024 00:31:11 +0300
Subject: [PATCH 2/4] fix: make auto changes after lint check

---
 js/upload-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/upload-form.js b/js/upload-form.js
index 405b8bb..0a85d20 100644
--- a/js/upload-form.js
+++ b/js/upload-form.js
@@ -74,7 +74,7 @@ const setLoadedPhotoPreview = () => {
   if (matches) {
     photoPreviewImg.src = URL.createObjectURL(file);
   }
-}
+};
 
 // открытие окна загрузки фото, загрузка фото:
 uploadInput.addEventListener('change', () => {

From efc55c54eb5bcb201c76da921ce07eecffd2b4c3 Mon Sep 17 00:00:00 2001
From: Ksenia Tryapitsyna <k.tryapitsyna@gmail.com>
Date: Mon, 12 Aug 2024 00:48:49 +0300
Subject: [PATCH 3/4] feat: change effects preview icons the same as user
 loaded

---
 js/upload-form.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/upload-form.js b/js/upload-form.js
index 0a85d20..1a0e1c3 100644
--- a/js/upload-form.js
+++ b/js/upload-form.js
@@ -27,6 +27,7 @@ const scale = document.querySelector('.scale__control--value');
 const photoPreview = document.querySelector('.img-upload__preview');
 const submitButton = document.querySelector('.img-upload__submit');
 const photoPreviewImg = document.querySelector('.img-upload__preview img');
+const effectsPreviewIcons = document.querySelectorAll('.effects__preview');
 
 const isFieldFocused = () => document.activeElement === textCommentField || document.activeElement === hashtagField;
 
@@ -72,7 +73,13 @@ const setLoadedPhotoPreview = () => {
   const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
 
   if (matches) {
-    photoPreviewImg.src = URL.createObjectURL(file);
+    const filePath = URL.createObjectURL(file);
+
+    photoPreviewImg.src = filePath;
+
+    effectsPreviewIcons.forEach((icon) => {
+      icon.style.backgroundImage = `url(${ filePath })`;
+    });
   }
 };
 

From 1a7166e301adaac5da85c0635bb2f24049c236fd Mon Sep 17 00:00:00 2001
From: Ksenia Tryapitsyna <k.tryapitsyna@gmail.com>
Date: Mon, 12 Aug 2024 14:00:45 +0300
Subject: [PATCH 4/4] fix: delete eventListener jn ESC when closing message
 modal

---
 js/messages.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/messages.js b/js/messages.js
index eabbac3..212653a 100644
--- a/js/messages.js
+++ b/js/messages.js
@@ -29,6 +29,7 @@ const showPostSucsessMessage = () => {
 
 successButton.addEventListener('click', () => {
   successMessage.remove();
+  document.removeEventListener('keydown', closeUploadSuccessMessageByEsc);
 });
 
 // показ сообщения об ошибке при отправке формы
@@ -44,6 +45,7 @@ const showPostErrorMessage = () => {
 
 errorButton.addEventListener('click', () => {
   errorMessage.remove();
+  document.removeEventListener('keydown', closeUploadSuccessMessageByEsc);
 });
 
 export {showGetDataError, showPostSucsessMessage, showPostErrorMessage };