Merge pull request #9 from zarram89/module9-task1

Author: keksobot

index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
 </head>
@@ -31,7 +32,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">
@@ -120,7 +121,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                     <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
                   </div>
                   <div class="img-upload__field-wrapper">
-                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
+                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..." maxlength="140"></textarea>
                   </div>
                 </fieldset>
 
@@ -234,6 +235,8 @@ <h2 class="success__title">Изображение успешно загруже
       <h2 class="data-error__title">Не удалось загрузить данные</h2>
     </section>
   </template>
+  <script src="vendor/pristine/pristine.min.js"></script>
+  <script src="vendor/nouislider/nouislider.js"></script>
   <script src="js/main.js" type="module"></script>
 </body>
 

js/main.js

@@ -2,12 +2,14 @@ import { getPictures } from './mock/pictures.js';
 import { renderGallery } from './ui/gallery.js';
 import { initBigPicture } from './ui/big-picture/meta.js';
 import { initCommentsLoader } from './ui/big-picture/comments.js';
+import { initForm } from './ui/form/index.js';
 
 const container = document.querySelector('.pictures');
 const template = document.querySelector('#picture')?.content?.querySelector('.picture');
 
 initBigPicture();
 initCommentsLoader();
+initForm();
 
 if (container && template) {
   renderGallery(getPictures(), container, template);

js/ui/big-picture/meta.js

@@ -20,7 +20,7 @@ const renderMeta = ({ url, likes, description }) => {
   caption.textContent = description;
 };
 
-const open = (data) => {
+const showBigPicture = (data) => {
   if (!data || isOpen) {
     return;
   }
@@ -37,7 +37,7 @@ const open = (data) => {
   renderComments();
 };
 
-const close = () => {
+const hideBigPicture = () => {
   if (!isOpen) {
     return;
   }
@@ -53,12 +53,12 @@ const close = () => {
 function onDocumentKeydown(evt) {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
-    close();
+    hideBigPicture();
   }
 }
 
 function onCancelButtonClick() {
-  close();
+  hideBigPicture();
 }
 
 const initBigPicture = () => {
@@ -70,8 +70,4 @@ const initBigPicture = () => {
   cancelButton.addEventListener('click', onCancelButtonClick);
 };
 
-export {
-  initBigPicture,
-  open as showBigPicture,
-  close as hideBigPicture,
-};
+export { initBigPicture, showBigPicture, hideBigPicture };

js/ui/form/const.js

@@ -0,0 +1,5 @@
+const MAX_HASHTAG_COUNT = 5;
+const MAX_COMMENT_LENGTH = 140;
+const VALID_SYMBOLS = /^#[a-zа-яё0-9]{1,19}$/i;
+
+export { MAX_HASHTAG_COUNT, MAX_COMMENT_LENGTH, VALID_SYMBOLS };

js/ui/form/index.js

@@ -0,0 +1,14 @@
+import { initModal } from './modal.js';
+import { initValidation, resetValidation } from './validation.js';
+import { initSubmit } from './submit.js';
+
+const initForm = () => {
+  initValidation();
+  initSubmit();
+
+  initModal(() => {
+    resetValidation();
+  });
+};
+
+export { initForm };

js/ui/form/modal.js

@@ -0,0 +1,44 @@
+import { isEscapeKey } from '../../utils/common.js';
+
+const body = document.body;
+const form = document.querySelector('.img-upload__form');
+const overlay = form.querySelector('.img-upload__overlay');
+const cancelButton = form.querySelector('.img-upload__cancel');
+const fileField = form.querySelector('.img-upload__input');
+
+let onCloseCallback = null;
+
+const showModal = () => {
+  overlay.classList.remove('hidden');
+  body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+};
+
+const hideModal = () => {
+  form.reset();
+  fileField.value = '';
+
+  overlay.classList.add('hidden');
+  body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+
+  if (onCloseCallback) {
+    onCloseCallback();
+  }
+};
+
+const initModal = (cb) => {
+  onCloseCallback = cb;
+
+  fileField.addEventListener('change', showModal);
+  cancelButton.addEventListener('click', hideModal);
+};
+
+function onDocumentKeydown(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    hideModal();
+  }
+}
+
+export { initModal, hideModal };

js/ui/form/submit.js

@@ -0,0 +1,15 @@
+import { isValid } from './validation.js';
+
+const form = document.querySelector('.img-upload__form');
+
+const initSubmit = () => {
+  form.addEventListener('submit', (evt) => {
+    const valid = isValid();
+
+    if (!valid) {
+      evt.preventDefault();
+    }
+  });
+};
+
+export { initSubmit };

js/ui/form/utils.js

@@ -0,0 +1,18 @@
+import { VALID_SYMBOLS } from './const.js';
+
+const getTags = (value) =>
+  value
+    .trim()
+    .split(/\s+/)
+    .filter((tag) => tag.trim().length);
+
+const isValidTag = (tag) => VALID_SYMBOLS.test(tag);
+
+const isValidCount = (tags, max) => tags.length <= max;
+
+const hasUniqueTags = (tags) => {
+  const lowerCaseTags = tags.map((tag) => tag.toLowerCase());
+  return lowerCaseTags.length === new Set(lowerCaseTags).size;
+};
+
+export { getTags, isValidTag, isValidCount, hasUniqueTags };

js/ui/form/validation.js

@@ -0,0 +1,65 @@
+import { MAX_HASHTAG_COUNT, MAX_COMMENT_LENGTH } from './const.js';
+import { getTags, isValidTag, isValidCount, hasUniqueTags } from './utils.js';
+
+const form = document.querySelector('.img-upload__form');
+const hashtagField = form.querySelector('.text__hashtags');
+const commentField = form.querySelector('.text__description');
+
+const ERROR_MESSAGES = {
+  hashtags: {
+    count: () => 'превышено количество хэштегов',
+    unique: () => 'хэштеги повторяются',
+    format: () => 'введён невалидный хэштег',
+  },
+  comment: {
+    length: (max) => `длина комментария больше ${max} символов`,
+  },
+};
+
+const formConfig = {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error',
+};
+
+const pristine = new Pristine(form, formConfig);
+
+const initValidation = () => {
+  [hashtagField, commentField].forEach((field) => {
+    field.addEventListener('keydown', (evt) => {
+      if (evt.key === 'Escape') {
+        evt.stopPropagation();
+      }
+    });
+  });
+
+  pristine.addValidator(
+    hashtagField,
+    (value) => isValidCount(getTags(value), MAX_HASHTAG_COUNT),
+    ERROR_MESSAGES.hashtags.count()
+  );
+
+  pristine.addValidator(
+    hashtagField,
+    (value) => hasUniqueTags(getTags(value)),
+    ERROR_MESSAGES.hashtags.unique()
+  );
+
+  pristine.addValidator(
+    hashtagField,
+    (value) => getTags(value).every(isValidTag),
+    ERROR_MESSAGES.hashtags.format()
+  );
+
+  pristine.addValidator(
+    commentField,
+    (value) => value.length <= MAX_COMMENT_LENGTH,
+    ERROR_MESSAGES.comment.length(MAX_COMMENT_LENGTH)
+  );
+};
+
+const isValid = () => pristine.validate();
+
+const resetValidation = () => pristine.reset();
+
+export { initValidation, isValid, resetValidation };