Merge pull request #7 from ClaireFotina/module8-task2

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" novalidate="true">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -149,7 +149,7 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
         <div class="big-picture__social  social">
           <div class="social__header">
             <img class="social__picture" src="img/avatar-1.svg" alt="Аватар автора фотографии" width="35" height="35">
-            <p class="social__caption">Тестим новую камеру! =</p>
+            <p class="social__caption">Тестим новую камеру! =)</p>
             <p class="social__likes">Нравится <span class="likes-count">356</span></p>
           </div>
 
@@ -235,5 +235,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </template>
     <script type="module" src="./js/main.js">
     </script>
+    <script src="./vendor/pristine/pristine.min.js">
+          </script>
 </body>
 </html>

js/form.js

@@ -0,0 +1,34 @@
+import { isValid, reset as resetValidation } from "./validation.js";
+
+
+const uploadForm = document.querySelector('.img-upload__form');
+const uploadFileInput = uploadForm.querySelector('.img-upload__input');
+const uploadOverlay = uploadForm.querySelector('.img-upload__overlay');
+const uploadCancelInput = uploadForm.querySelector('.img-upload__cancel');
+const body = document.body;
+
+const openForm = ()  => {
+uploadOverlay.classList.remove('hidden');
+body.classList.add('modal-open');
+}
+
+uploadFileInput.addEventListener('change', () => {
+    openForm()
+})
+
+const closeForm = ()  => {
+    uploadOverlay.classList.add('hidden');
+    body.classList.remove('modal-open');
+    }
+
+    uploadCancelInput.addEventListener('click', (evt) => {
+        evt.preventDefault();
+        closeForm()
+    })
+
+    document.addEventListener('keydown', (evt) => {
+        if(evt.key === "Escape"){
+            evt.preventDefault()
+            closeForm()
+        }
+    })

js/main.js

@@ -1,5 +1,6 @@
-import {getData} from './data.js'
-import {renderThumbnails} from './thumbnails.js'
+import { getData } from './data.js';
+import { renderThumbnails } from './thumbnails.js';
+import './form.js';
 
 const data = getData();
 renderThumbnails(data);

js/validation.js

@@ -0,0 +1,73 @@
+const MAX_SYMBOL = 140;
+const SPACE = /\s+/g;
+const HASHTAG_FORMULA = /^#[a-za-яё0-9]{1,19}$/;
+const MAX_HASHTAGS = 5;
+
+const uploadForm = document.querySelector('.img-upload__form');
+const inputHashtags = uploadForm.querySelector('.text__hashtags');
+const inputComment = uploadForm.querySelector('.text__description');
+
+
+const pristine = new Pristine(uploadForm, {
+    classTo: 'img-upload__field-wrapper',
+    errorClass: 'img-upload__field-wrapper--error',
+    errorTextParent: 'img-upload__field-wrapper'
+})
+
+const createHashtags = (value) => value
+    .toLowerCase()
+    .replaceAll(SPACE, ' ')
+    .trim()
+    .split(' ')
+    .filter((item) => item !== '');
+
+const checkDescription = (value) => value.length <= MAX_SYMBOL;
+const checkHashtags = (value) => {
+    if(!value.length) {
+       return true;
+    }
+    const hashTags = createHashtags(value);
+    return hashTags.every((hashtag) => HASHTAG_FORMULA.test(hashtag))
+};
+const checkHashtagsCount = (value) => {
+    if(!value.length) {
+        return true;
+     }
+    const hashTags = createHashtags(value);
+    return hashTags.length <= MAX_HASHTAGS;
+};
+const checkUniqueHashtags = (value) => {
+    if(!value.length) {
+        return true;
+     }
+     const hashTags = createHashtags(value);
+     const uniques = [...new Set(hashTags)];
+     return hashTags.length === uniques.length;
+}
+
+pristine.addValidator(
+    inputHashtags,
+    checkHashtags,
+    'Хэштэг содержит неверные символы'
+)
+
+pristine.addValidator(
+    inputHashtags,
+    checkHashtagsCount,
+    `Количество хэштэгов не должно превышать ${MAX_HASHTAGS}`
+)
+
+pristine.addValidator(
+    inputHashtags,
+    checkUniqueHashtags,
+    'Хэштэги не должны повторяться'
+)
+
+pristine.addValidator(
+    inputComment,
+    checkDescription,
+    `Максимальная длина - ${MAX_SYMBOL} символов`
+)
+
+export const isValid = () => pristine.validate();
+export const reset = () => pristine.reset();