Merge pull request #9 from Ayronhayd/module9-task1

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>

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

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());