Merge pull request #13 from KseniaTry/module12-task2

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>
 

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 };

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,8 @@ 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 effectsPreviewIcons = document.querySelectorAll('.effects__preview');
 
 const isFieldFocused = () => document.activeElement === textCommentField || document.activeElement === hashtagField;
 
@@ -62,8 +65,29 @@ 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) {
+    const filePath = URL.createObjectURL(file);
+
+    photoPreviewImg.src = filePath;
+
+    effectsPreviewIcons.forEach((icon) => {
+      icon.style.backgroundImage = `url(${ filePath })`;
+    });
+  }
+};
+
+// открытие окна загрузки фото, загрузка фото:
+uploadInput.addEventListener('change', () => {
+  openUploadModal();
+  setLoadedPhotoPreview();
+});
 
 // закрытие окна загрузки фото
 closeUploadModalButton.addEventListener('click', (evt) => {

js/util.js

@@ -39,7 +39,7 @@ const createGenerator = () => {
 // функция, которая возвращает true / false в зависимости от наличия или отсутствия нажатия клавиши esc
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-//
+// функция для вызова коллбэка через определенное время
 const debounce = (callback, timeoutDelay) => {
   let timeoutId;