From d8c69ee9260baeba0093d0d11bd2edd50c6da84a Mon Sep 17 00:00:00 2001
From: "rit1992@mail.ru" <158091165+margarita0206@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:30:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B6=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=BC=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3=D1=80=D0=B0=D1=84?=
 =?UTF-8?q?=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                     |  3 +-
 js/img-upload-form-modal.js    | 57 ++++++++++++++++++++++++++++++++++
 js/img-upload-form-validate.js | 10 ++++++
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 js/img-upload-form-modal.js
 create mode 100644 js/img-upload-form-validate.js

diff --git a/index.html b/index.html
index 87a9e35..b6029b7 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@ <h2 class="pictures__title  visually-hidden">Фотографии других 
       <section class="img-upload">
         <div class="img-upload__wrapper">
           <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
-          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+          <form class="img-upload__form" id="upload-select-image"  method="post" enctype="multipart/form-data" action="https://32.javascript.htmlacademy.pro/kekstagram" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -235,5 +235,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="js/functions.js"></script>
+    <script src="vendor/pristine/pristine.min.js"></script>
 </body>
 </html>
diff --git a/js/img-upload-form-modal.js b/js/img-upload-form-modal.js
new file mode 100644
index 0000000..bc812bd
--- /dev/null
+++ b/js/img-upload-form-modal.js
@@ -0,0 +1,57 @@
+import { isValid } from './img-upload-form-validate';
+import { isEscapeKey } from './utils';
+
+const imgUploadform = document.querySelector('.img-upload__form');
+const redactForm = document.querySelector('.img-upload__overlay');
+const imgUploadInput = document.querySelector('.img-upload__input');
+const imgUploadCancelButton = document.querySelector('.img-upload__cancel');
+const fieldComments = document.querySelector('.text__description');
+const fieldHashtag = document.querySelector('.text__hashtags');
+
+
+const openRedactForm = () => {
+  redactForm.classList.remove('hidden');
+  document.body.classList.add('.modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+
+const closeRedactForm = () => {
+  redactForm.classList.add('.hidden');
+  document.body.classList.remove('.modal-open');
+  imgUploadInput.value = '';
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+imgUploadInput.addEventListener('change', () => {
+  openRedactForm();
+});
+
+imgUploadCancelButton.addEventListener('click', () => {
+  closeRedactForm();
+});
+
+function onDocumentKeydown(evt) {
+  if(isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeRedactForm();
+  }
+}
+
+fieldComments.addEventListener('.keydown', (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+fieldHashtag.addEventListener('keydown', (evt) => {
+  if(isEscapeKey(evt)) {
+    evt.stopPropagation();
+  }
+});
+
+imgUploadform.addEventListener('submit', (evt) => {
+  if(!isValid()){
+    evt.preventDefault();
+  }
+});
+
diff --git a/js/img-upload-form-validate.js b/js/img-upload-form-validate.js
new file mode 100644
index 0000000..cde072a
--- /dev/null
+++ b/js/img-upload-form-validate.js
@@ -0,0 +1,10 @@
+const orderForm = document.querySelector('.img-upload__form');
+
+const pristine = new Pristine(orderForm, {
+  classTo: 'form__item',
+  errorClass: 'form__item--invalid',
+  successClass: 'form__item--valid',
+  errorTextParent: 'form__item',
+  errorTextTag: 'span',
+  errorTextClass: 'form__error'
+});