Merge pull request #12 from Vitali3207/module12-task1

Author: keksobot

index.html

@@ -15,8 +15,8 @@
   <main>
 
     <!-- Фильтрация изображений от других пользователей -->
-    <section class="img-filters  img-filters--inactive  container">
-      <h2 class="img-filters__title  visually-hidden">Фильтр фотографий</h2>
+    <section class="img-filters img-filters--inactive container">
+      <h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
       <form class="img-filters__form" action="index.html" method="get" autocomplete="off">
         <button type=button class="img-filters__button  img-filters__button--active" id="filter-default">По умолчанию</button>
         <button type=button class="img-filters__button" id="filter-random">Случайные</button>
@@ -36,7 +36,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" accept="image/jpg, image/jpeg, image/png" required>
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 
@@ -235,7 +235,6 @@ <h2 class="success__title">Изображение успешно загруже
       <h2 class="data-error__title">Не удалось загрузить данные</h2>
     </section>
   </template>
-  <script src="js/functions.js"></script>
   <script src="vendor/nouislider/nouislider.js"></script>
   <script src="vendor/pristine/pristine.min.js"></script>
   <script src="js/main.js" type="module"></script>

js/big-picture.js

@@ -13,7 +13,7 @@ const buttonLoader = document.querySelector('.comments-loader');
 const buttonClose = document.querySelector('.big-picture__cancel');
 socialComments.innerHTML = '';
 
-const COMMENTS__STEP = 5;
+const COMMENTS_STEP = 5;
 let commentCount = 0;
 let currentComments = [];
 
@@ -29,7 +29,7 @@ const onPictureCancelClick = () => {
 };
 
 const onShowMoreButtonClick = () => {
-  const renderingNewComments = currentComments.slice(commentCount, commentCount + COMMENTS__STEP);
+  const renderingNewComments = currentComments.slice(commentCount, commentCount + COMMENTS_STEP);
   const newCommentsLength = renderingNewComments.length += commentCount;
   const fragment = document.createDocumentFragment();
 
@@ -50,7 +50,7 @@ const onShowMoreButtonClick = () => {
   if (newCommentsLength >= currentComments.length) {
     buttonLoader.classList.add('hidden');
   }
-  commentCount += COMMENTS__STEP;
+  commentCount += COMMENTS_STEP;
 };
 
 const renderComments = (currentPhotoComments) => {
@@ -111,5 +111,5 @@ const setPicturesListener = (photos) => {
   usersPhotoList.addEventListener('click', (evt) => onPictureContainerClick(evt, photos));
 };
 
-export { setPicturesListener, onEscKeyDown };
+export { setPicturesListener, onEscKeyDown, renderBigPicture };
 

js/filter.js

@@ -0,0 +1,49 @@
+import { renderThumbnails } from './render-thumbnails';
+import { debounce } from './util';
+
+const filterContainer = document.querySelector('.img-filters');
+const filterDefault = 'filter-default';
+const filterRandom = 'filter-random';
+const filterDiscussed = 'filter-discussed';
+
+const debounceRenderPicture = debounce(renderThumbnails, 500);
+let currentFilter = filterDefault;
+let pictures = [];
+
+const generateFilter = () => {
+  let picturesFilter = [];
+
+  if (currentFilter === filterDefault) {
+    picturesFilter = pictures;
+  } else if (currentFilter === filterRandom) {
+    picturesFilter = pictures.toSorted(() => Math.random() - 0.5).slice(0, 10);
+  } else if (currentFilter === filterDiscussed) {
+    picturesFilter = pictures.toSorted((a, b) => b.comments.length - a.comments.length);
+  }
+  debounceRenderPicture(picturesFilter);
+};
+
+function onFilterClick (evt) {
+  const activButton = document.querySelector('.img-filters__button--active');
+  const targetButton = evt.target;
+
+  if (!targetButton.matches('button') || activButton === targetButton) {
+    return;
+  }
+
+  activButton.classList.remove('img-filters__button--active');
+  targetButton.classList.add('img-filters__button--active');
+  currentFilter = targetButton.id;
+
+  generateFilter();
+}
+
+const initFilter = (picturesData) => {
+  filterContainer.classList.remove('img-filters--inactive');
+  filterContainer.addEventListener('click', onFilterClick);
+  pictures = picturesData;
+};
+
+export { initFilter };
+
+

js/form/image-form.js

@@ -3,18 +3,21 @@ import { initScale, resetScale } from './image-scale';
 import { initValidation, validateForm } from './validation';
 import { initEffect, resetEffect } from './slider-effect';
 import { sendData } from '../load-data';
-import { showSuccessMessage, showErrorMessage, errorMessageContainer } from '../messages';
+import { generateErrorMessage, showSuccessMessage, showErrorMessage, hasErrorMessage } from '../messages';
+
+const FILE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 
 const uploadForm = document.querySelector('.img-upload__form');
-const uploadInput = uploadForm.querySelector('.img-upload__input');
 const formOverlay = uploadForm.querySelector('.img-upload__overlay');
 const buttonCloseUpload = uploadForm.querySelector('.img-upload__cancel');
 const hashtagsInput = uploadForm.querySelector('.text__hashtags');
 const descriptionInput = uploadForm.querySelector('.text__description');
-
+const fileChooser = document.querySelector('.img-upload__wrapper input[type=file]');
+const preview = document.querySelector('.img-upload__preview img');
+const uploadFormEffects = uploadForm.querySelectorAll('.effects__preview');
 
 const onEscKeyDown = (evt) => {
-  if (isEscapeKey(evt) && (document.activeElement !== hashtagsInput || document.activeElement !== descriptionInput) && !errorMessageContainer) {
+  if (isEscapeKey(evt) && (document.activeElement !== hashtagsInput || document.activeElement !== descriptionInput) && !hasErrorMessage) {
     closeUploadModal();
   }
 };
@@ -32,6 +35,8 @@ function closeUploadModal () {
   resetEffect();
   resetScale();
   uploadForm.reset();
+  fileChooser.reset();
+  // При повторной попытке отправить неверный формата файла ошибка не появляется. Подскажи как реализовать.
 }
 
 const openUploadModal = () => {
@@ -45,12 +50,33 @@ const openUploadModal = () => {
   initValidation();
 };
 
-const sendFormData = async (formElement) => {
+function onFileChooserChange () {
+  const file = fileChooser.files[0];
+  const fileName = file.name.toLowerCase();
+
+  const matches = FILE_TYPES.some((item) => fileName.endsWith(item));
+
+  if (matches) {
+    preview.src = URL.createObjectURL(file);
+    uploadFormEffects.forEach((item) => {
+      item.style.backgroundImage = `url(${URL.createObjectURL(file)})`;
+    });
+  }else {
+    generateErrorMessage();
+    return;
+  }
+
+  openUploadModal();
+}
+
+const onFormSubmit = async (evt) => {
+  evt.preventDefault();
+
   const isValid = validateForm();
 
   if (isValid) {
     try {
-      await sendData(new FormData(formElement));
+      await sendData(new FormData(evt.target));
       closeUploadModal();
       showSuccessMessage();
     } catch (error) {
@@ -59,17 +85,9 @@ const sendFormData = async (formElement) => {
   }
 };
 
-const onFormSubmit = (evt) => {
-  evt.preventDefault();
-  sendFormData(evt.target);
-};
-
 const initUploadModal = () => {
   uploadForm.addEventListener('submit', onFormSubmit);
-
-  uploadInput.addEventListener('change', () => {
-    openUploadModal();
-  });
+  fileChooser.addEventListener('change', onFileChooserChange);
 };
 
 export { initUploadModal };

js/functions.js

@@ -3,12 +3,14 @@ import { generateErrorMessage } from './messages.js';
 import { renderThumbnails } from './render-thumbnails';
 import { setPicturesListener } from './big-picture';
 import { initUploadModal } from './form/image-form';
+import { initFilter } from './filter.js';
 
 const bootstrap = async () => {
   try {
     const photos = await getData();
     renderThumbnails(photos);
     setPicturesListener(photos);
+    initFilter(photos);
     initUploadModal();
   }catch(error) {
     generateErrorMessage();