From 545eabeb0534ef234c9779b31620c9a913489e4a Mon Sep 17 00:00:00 2001
From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com>
Date: Sat, 23 Mar 2024 14:17:32 +0300
Subject: [PATCH] =?UTF-8?q?Index-=20form=20main=20=D0=BF=D0=BE=D0=B4=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B8=D0=BB=20pristin=20form-=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=BA=D1=80?=
 =?UTF-8?q?=D1=8B=D1=82=D0=B8=D0=B5=20+=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html            |   4 +-
 js/components/form.js | 109 ++++++++++++++++++++++++++++++++++++++++++
 js/main.js            |   2 +-
 3 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 js/components/form.js

diff --git a/index.html b/index.html
index 3aee8cc..f2730f7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,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" action="https://31.javascript.htmlacademy.pro/kekstagram" enctype="multipart/form-data" autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -233,6 +233,8 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
+
+    <script src="vendor/pristine/pristine.min.js"></script>
     <script src="js/main.js" type="module"></script>
 </body>
 </html>
diff --git a/js/components/form.js b/js/components/form.js
new file mode 100644
index 0000000..5a55558
--- /dev/null
+++ b/js/components/form.js
@@ -0,0 +1,109 @@
+
+const body = document.querySelector('body');
+const form = body.querySelector('.img-upload__form');
+const overlay = form.querySelector('.img-upload__overlay');
+const cancelButton = form.querySelector('#upload-cancel');
+const fileField = form.querySelector('#upload-file');
+const hashtagField = form.querySelector('.text__hashtags');
+const commentField = form.querySelector('.text__description');
+
+const MAX_HASHTAG_COUNT = 5;
+const HASHTAG_LENGTH = {
+  min: 2,
+  max: 20,
+};
+const characterComment = 140;
+
+const UNVALID_SYMBOLS = /[^a-zA-Z0-9а-яА-ЯёЁ]/g;
+
+const pristine = new Pristine(form, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+},
+false
+);
+
+const showModal = () => {
+  overlay.classList.remove('hidden');
+  body.classList.add('modal-open');
+  document.addEventListener('keydown', onEscKeyDown);
+};
+
+const hideModal = () => {
+  form.reset();
+  pristine.reset();
+  overlay.classList.add('hidden');
+  body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onEscKeyDown);
+};
+
+const isTextFieldFocused = () =>
+  document.activeElement === hashtagField ||
+  document.activeElement === commentField;
+
+function onEscKeyDown(evt) {
+  if (evt.key === 'Escape' && !isTextFieldFocused()) {
+    evt.preventDefault();
+    hideModal();
+  }
+}
+
+const onCancelButtonClick = () => {
+  hideModal();
+};
+
+const onFileInputChange = () => {
+  showModal();
+};
+
+const startsWithHash = (string) => string[0] === '#';
+
+const hasValidLength = (string) =>
+  string.length >= HASHTAG_LENGTH.min && string.length <= HASHTAG_LENGTH.max;
+
+const hasValidSymbols = (string) => !UNVALID_SYMBOLS.test(string.slice(1));
+
+const isValidTag = (tag) =>
+  startsWithHash(tag) && hasValidLength(tag) && hasValidSymbols(tag);
+
+const hasValidCount = (tags) => tags.length <= MAX_HASHTAG_COUNT;
+
+const hasUniqueTags = (tags) => {
+  const lowerCaseTags = tags.map((tag) => tag.toLowerCase());
+  return lowerCaseTags.length === new Set(lowerCaseTags).size;
+};
+
+const validateTags = (value) => {
+  const tags = value
+    .trim()
+    .split(' ')
+    .filter((tag) => tag.trim().length);
+  return hasValidCount(tags) && hasUniqueTags(tags) && tags.every(isValidTag);
+};
+
+const hascommentLength = (value) => value.length <= characterComment;
+
+
+pristine.addValidator(
+  hashtagField,
+  validateTags,
+  'Неправильно заполнены хэштеги'
+);
+
+pristine.addValidator(
+  commentField,
+  hascommentLength,
+  'Максимум 140 символов'
+);
+
+
+const onFormSubmit = (evt) => {
+  evt.preventDefault();
+  pristine.validate();
+};
+
+
+fileField.addEventListener('change', onFileInputChange);
+cancelButton.addEventListener('click', onCancelButtonClick);
+form.addEventListener('submit', onFormSubmit);
diff --git a/js/main.js b/js/main.js
index 72b1e49..47e7f82 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,9 +1,9 @@
 import {
   generatedObjectArrays
 } from './data/generated-object.js';
-
 import {
   renderPictures
 } from './components/render-pictures.js';
+import './components/form.js';
 
 renderPictures(generatedObjectArrays());