Merge pull request #9 from julia1121i1/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">
@@ -234,5 +234,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="./js/main.js" type="module"></script>
+    <script src="/vendor/pristine/pristine.min.js"></script>
 </body>
 </html>

js/form.js

@@ -0,0 +1,36 @@
+import { isEscapeKey } from './util.js';
+import './big-picture.js';
+import {resetValidation, validate} from './hashtegs-validation.js';
+const body = document.body;
+const form = document.querySelector('.img-upload__form');
+const filename = form.filename;
+const editingModal = form.querySelector('.img-upload__overlay');
+const closeModal = () => form.reset();
+const isFocusText = () =>
+  [form.hashtags, form.description].includes(document.activeElement);
+const onDocumentEscape = (evt) => {
+  if (isEscapeKey(evt) && !isFocusText()) {
+    evt.preventDefault();
+    closeModal();
+  }
+};
+const classToggle = () => {
+  editingModal.classList.toggle('hidden');
+  body.classList.toggle('modal-open');
+};
+filename.addEventListener('change', (evt) => {
+  evt.preventDefault();
+  classToggle();
+  document.addEventListener('keydown', onDocumentEscape);
+});
+form.addEventListener('reset', () => {
+  classToggle();
+  document.removeEventListener('keydown', onDocumentEscape);
+  resetValidation();
+});
+form.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  if (validate()) {
+    closeModal();
+  }
+});

js/hashtegs-validation.js

@@ -0,0 +1,63 @@
+import { isUniqueArray } from './util.js';
+const form = document.querySelector('.img-upload__form');
+const Hashtags = {
+  MAX_COUNT: 5,
+  MAX_LENGTH: 20,
+  ALLOWED_SYMBOLS: /^#[a-zа-яё0-9]{1,19}$/,
+  START_SYMBOL_ERROR: 'Хэштег должен начинаться с символа #',
+  HASHTAGS_ONLY_ERROR: 'Хэштег не может состоять только из #',
+  MAX_LENGTH_ERROR: 'Максимальная длина хэштега 20 символов',
+  REUSE_HASHTAGS_ERROR: 'Хэштеги повторяются',
+  MAX_COUNT_ERROR: 'Максимальное количество хэштегов 5',
+  SYMBOLS_ERROR: 'Хэштег должен состоять только из букв и чисел',
+};
+const Description = {
+  MAX_LENGTH: 140,
+};
+let errorMessage = '';
+const validateHashtags = (value) => {
+  if (!value.length) {
+    return true;
+  }
+  const tags = value.trim().toLowerCase().split(/\s+(?=#)/);
+  if (tags.length > Hashtags.MAX_COUNT) {
+    errorMessage = Hashtags.MAX_COUNT_ERROR;
+    return false;
+  }
+  if (!isUniqueArray(tags)) {
+    errorMessage = Hashtags.REUSE_HASHTAGS_ERROR;
+    return false;
+  }
+  return tags.every((tag) => {
+    if (tag[0] !== '#') {
+      errorMessage = Hashtags. START_SYMBOL_ERROR;
+      return false;
+    }
+    if (tag === '#') {
+      errorMessage = Hashtags.HASHTAGS_ONLY_ERROR;
+      return false;
+    }
+    if (tag.length > Hashtags.MAX_LENGTH) {
+      errorMessage = Hashtags.MAX_LENGTH_ERROR;
+      return false;
+    }
+    if (!Hashtags.ALLOWED_SYMBOLS.test(tag)) {
+      errorMessage = Hashtags.SYMBOLS_ERROR;
+      return false;
+    }
+    return true;
+  });
+};
+const pristine = new Pristine(form, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+});
+pristine.addValidator(form.hashtags, validateHashtags, () => errorMessage);
+pristine.addValidator(
+  form.description,
+  (value) => value.length <= Description.MAX_LENGTH,
+  `Максимальная длина комментария ${Description.MAX_LENGTH} символов`
+);
+const validate = () => pristine.validate();
+const resetValidation = () => pristine.reset();
+export { validate, resetValidation };

js/main.js

@@ -1,6 +1,7 @@
 import { createPhoto } from './data.js';
 import {renderThumbnails} from './thumbnails.js';
 import { savePhotos } from './photo-state.js';
+import './form.js';
 
 const photo = createPhoto(25);
 savePhotos(photo);

js/util.js

@@ -7,6 +7,10 @@ const getRandomInteger = (a,b) => {
 const getRandomElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
 
+
+const isUniqueArray = (array) => new Set(array).size === array.length;
 const isEscapeKey = (evt) => evt.key === 'Escape';
-export {getRandomElement,getRandomInteger,isEscapeKey};
+
+export {getRandomElement,getRandomInteger,isEscapeKey,isUniqueArray};
+