Merge pull request #13 from Musa-Ismailov/module11-task1

Author: keksobot

js/data.js

@@ -8,7 +8,6 @@ const SEPIA_MAX_RANGE = 1;
 const PHOBOS_MAX_RANGE = 3;
 const HEAT_MIN_RANGE = 1;
 const HEAT_MAX_RANGE = 3;
-const NONE = 'none';
 const EffectConfig = {
   chrome: {
     range: { min: DEFAULT_MIN_RANGE, max: CHROME_MAX_RANGE },
@@ -59,11 +58,10 @@ const EffectConfig = {
 };
 
 const imgUploadSlider = document.querySelector('.effect-level__slider');
-const imgUploadValue = document.querySelector('.effect-level__value');
 const effectsList = document.querySelector('.effects__list');
 const imgPreview = document.querySelector('.img-upload__preview img');
 const effectLevelElement = document.querySelector('.effect-level');
-const noneRadio = document.querySelector('#effect-none');
+const form = document.querySelector('.img-upload__form');
 
 let currentEffect = EffectConfig.none;
 
@@ -77,11 +75,10 @@ noUiSlider.create(imgUploadSlider, {
 effectLevelElement.classList.add('hidden');
 
 export const resetEffectAndSlider = () => {
-  imgUploadValue.value = DEFAULT_MAX_VALUE;
-  imgPreview.style.filter = NONE;
+  imgPreview.removeAttribute('style');
   currentEffect = EffectConfig.none;
   effectLevelElement.classList.add('hidden');
-  noneRadio.checked = true;
+  form.reset();
 };
 
 const applyEffect = (currentFilter, value) => {

js/effects.js

@@ -0,0 +1,121 @@
+import {renderGallery, setGalleryData} from './gallery.js';
+import {showErrorMessage} from './utils.js';
+import { onCloseImageEditor } from './upload-picture.js';
+
+const hashtagPattern = /^#[a-zа-яё0-9]{1,19}$/i;
+const MAX_HASHTAGS = 5;
+const MAX_DESCRIPTION_LEN = 140;
+const imgUploadForm = document.querySelector('.img-upload__form');
+const imgUploadSubmit = imgUploadForm.querySelector('.img-upload__submit');
+const descriptionInput = imgUploadForm.querySelector('.text__description');
+const hashtagsInput = imgUploadForm.querySelector('.text__hashtags');
+
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные. Попробуйте обновить страницу',
+  SEND_DATA: 'Не удалось отправить форму. Попробуйте ещё раз',
+};
+const SubmitButtonText = {
+  IDLE: 'Сохранить',
+  SENDING: 'Сохраняю...'
+};
+
+
+const load = (route, errorText, method = Method.GET, body = null) =>
+  fetch(`${BASE_URL}${route}`, {method, body})
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    })
+    .catch(() => {
+      throw new Error(errorText);
+    });
+
+const getData = () => load(Route.GET_DATA, ErrorText.GET_DATA);
+
+export const sendData = (body) => load(Route.SEND_DATA, ErrorText.SEND_DATA, Method.POST, body);
+
+getData()
+  .then((gallery) => {
+    renderGallery(gallery);
+    setGalleryData(gallery);
+  })
+  .catch(
+    (err) => {
+      showErrorMessage(err.message);
+    }
+  );
+
+const toggleSubmitButton = (disabled) => {
+  imgUploadSubmit.disabled = disabled;
+  imgUploadSubmit.textContent = disabled
+    ? SubmitButtonText.SENDING
+    : SubmitButtonText.IDLE;
+};
+
+const pristine = new Pristine(imgUploadForm, {
+  classTo: 'img-upload__field-wrapper',
+  errorTextParent: 'img-upload__field-wrapper',
+  errorTextClass: 'img-upload__field-wrapper--error'
+});
+
+const isHashtagsValid = (value) => {
+  const trimmedValue = value.trim();
+
+  if (trimmedValue === '') {
+    return true;
+  }
+
+  const hashtagsArray = trimmedValue.split(/\s+/);
+
+  if (hashtagsArray.length > MAX_HASHTAGS) {
+    return false;
+  }
+
+  const uniqueHashtags = new Set(hashtagsArray.map((h) => h.toLowerCase()));
+
+  if (uniqueHashtags.size !== hashtagsArray.length) {
+    return false;
+  }
+
+  return hashtagsArray.every((hashtag) => hashtagPattern.test(hashtag));
+};
+
+const isDescriptionValid = (value) =>
+  value.trim() === '' || value.length <= MAX_DESCRIPTION_LEN;
+
+pristine.addValidator(hashtagsInput, isHashtagsValid, 'введён невалидный хэштег');
+pristine.addValidator(descriptionInput, isDescriptionValid, 'длина комментария больше 140 символов.');
+
+imgUploadForm.addEventListener('submit', async (evt) => {
+  evt.preventDefault();
+  const isValid = pristine.validate();
+
+  if (isValid) {
+    try {
+      toggleSubmitButton(true);
+
+      await sendData(new FormData(evt.target));
+      onCloseImageEditor();
+    } catch (err) {
+      showErrorMessage(err.message);
+    } finally {
+      toggleSubmitButton(false);
+    }
+  } else {
+    hashtagsInput.style.borderColor = 'red';
+
+    hashtagsInput.focus();
+  }
+});
+

js/form.js

@@ -23,7 +23,7 @@ function onDocumentKeydown (evt){
   }
 }
 
-function closePhotoModal () {
+export function closePhotoModal () {
   bigPicture.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
@@ -94,7 +94,6 @@ export const openBigPicture = (photoData) => {
   openPhotoModal();
 };
 
-
 bigPictureClosedElement.addEventListener('click', () => {
   closePhotoModal();
 });

js/fullscreen-picture.js

@@ -1,33 +1,8 @@
-import {NAMES, COMMENTS, DESCRIPTIONS, MIN_LIKES, MAX_LIKES, MIN_AVATAR_ID, MAX_AVATAR_ID, MIN_COMMENTS, MAX_COMMENTS, ID_INCREMENT} from './data.js';
-import {getRandomInteger, getRandomArrayElement} from './utils.js';
 import {openBigPicture} from './fullscreen-picture.js';
 
 const pictureList = document.querySelector('.pictures');
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
-const generateComments = (count) =>
-  Array.from({ length: count }, (_, i) => ({
-    id: i + ID_INCREMENT,
-    avatar: `img/avatar-${getRandomInteger(MIN_AVATAR_ID, MAX_AVATAR_ID)}.svg`,
-    message: getRandomArrayElement(COMMENTS),
-    name: getRandomArrayElement(NAMES),
-  }));
-
-const createPhoto = (id) => ({
-  id: id + ID_INCREMENT,
-  url: `photos/${id + ID_INCREMENT}.jpg`,
-  description: getRandomArrayElement(DESCRIPTIONS),
-  likes: getRandomInteger(MIN_LIKES, MAX_LIKES),
-  name: getRandomArrayElement(NAMES),
-  avatar: `img/avatar-${getRandomInteger(MIN_AVATAR_ID, MAX_AVATAR_ID)}.svg`,
-  comments: generateComments(getRandomInteger(MIN_COMMENTS, MAX_COMMENTS)),
-});
-
-const createGallery = (maxPhotos) =>
-  Array.from({ length: maxPhotos }, (_, index) => createPhoto(index));
-
-const gallery = createGallery(20);
-
 const createPictureEl = (pictureData) => {
   const galleryElement = pictureTemplate.cloneNode(true);
 
@@ -40,9 +15,15 @@ const createPictureEl = (pictureData) => {
   return galleryElement;
 };
 
-const getPhotoById = (id) => gallery.find((photo) => photo.id === id);
+let galleryData = [];
 
-const renderGallery = (data) => {
+export const setGalleryData = (data) => {
+  galleryData = data;
+};
+
+const getPhotoById = (id) => galleryData.find((photo) => photo.id === id);
+
+export const renderGallery = (data) => {
   const fragment = document.createDocumentFragment();
 
   data.forEach((picture) => {
@@ -53,8 +34,6 @@ const renderGallery = (data) => {
   pictureList.appendChild(fragment);
 };
 
-renderGallery(gallery);
-
 pictureList.addEventListener('click', (evt) => {
   const pictureElement = evt.target.closest('.picture');
 

js/gallery.js

@@ -1,3 +1,4 @@
 import './gallery.js';
 import './fullscreen-picture.js';
 import './upload-picture.js';
+import './form.js';

js/main.js

@@ -47,7 +47,7 @@ const resetUploadedImage = () => {
   imgUploadInput.value = '';
 };
 
-const onCloseImageEditor = () => {
+export const onCloseImageEditor = () => {
   imgUploadOverlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
@@ -63,11 +63,7 @@ const isValidImageFile = (file) => {
   }
 
   const fileName = file.name.toLowerCase();
-  const validImage = FILE_TYPES.some((type) => fileName.endsWith(type));
-
-  if (!validImage) {
-    return false;
-  }
+  return FILE_TYPES.some((type) => fileName.endsWith(type));
 };
 
 const applyUploadedImage = () => {

js/upload-picture.js

@@ -1,12 +1,16 @@
-export const getRandomInteger = (a, b) => {
-  const lower = Math.ceil(Math.min(a, b));
-  const upper = Math.floor(Math.max(a, b));
-  const result = Math.random() * (upper - lower + 1) + lower;
+export const isEscapeKey = (key) => key === 'Escape';
 
-  return Math.floor(result);
-};
+export const showErrorMessage = () => {
+  const errorTemplate = document.querySelector('#data-error');
+  const errorElement = errorTemplate.content.cloneNode(true);
 
-export const getRandomArrayElement = (elements) =>
-  elements[getRandomInteger(0, elements.length - 1)];
+  document.body.appendChild(errorElement);
 
-export const isEscapeKey = (key) => key === 'Escape';
+  const errorMessage = document.body.lastElementChild;
+
+  setTimeout(() => {
+    if (errorMessage && errorMessage.parentNode) {
+      errorMessage.remove();
+    }
+  }, 5000);
+};