Изменил функции фильтра и превью

MaksimRozov · Mar 30, 2024 · 6cc2e2c · 6cc2e2c
1 parent 3b5ea8f
commit 6cc2e2c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 68 deletions.
diff --git a/js/api/secondary-functions.js b/js/api/secondary-functions.js
@@ -55,11 +55,16 @@ const onSendErrorMessage = () => {
   document.removeEventListener('keydown', onCloseChangePhotoEsc);
 };
 
-const onShowErrorGetData = () => {
+const onShowErrorGetData = (textError) => {
   const errorFragment = document.createDocumentFragment();
   const errorItem = dataErrorTemplate.cloneNode(true);
+
+
   errorFragment.append(errorItem);
   document.body.append(errorFragment);
+  if(textError){
+    errorItem.querySelector('.data-error__title').textContent = textError;
+  }
   const dataError = document.querySelector('.data-error');
 
   setTimeout(() => {

diff --git a/js/create-thumbnails/index.js b/js/create-thumbnails/index.js
@@ -3,8 +3,15 @@ import {onOpenBigPicture } from '../show-large-picture';
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureList = document.querySelector('.pictures');
 
+const removePhoto = () => {
+  const parentElement = document.querySelector('.pictures');
+  const allPicture = parentElement.querySelectorAll('.picture');
+  allPicture.forEach((element) => element.remove());
+};
+
 const addPhotoThumbnailsUsers = (photoUsers) => {
   const listFragmentPhoto = document.createDocumentFragment();
+  removePhoto();
   photoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');

diff --git a/js/filters/filter-variables.js b/js/filters/filter-variables.js
@@ -0,0 +1,12 @@
+const filtersControlPanel = document.querySelector('.img-filters');
+const sortFunc = {
+  random: () => 0.5 - Math.random(),
+  discussed: (a, b) => b.comments.length - a.comments.length
+};
+const buttonValue = {
+  random: 'filter-random',
+  discussed: 'filter-discussed',
+};
+const RANDOM_PHOTO_LIMIT = 10;
+
+export {filtersControlPanel, sortFunc, buttonValue, RANDOM_PHOTO_LIMIT};
diff --git a/js/filters/index.js b/js/filters/index.js
@@ -1,4 +1,4 @@
-const filtersControlPanel = document.querySelector('.img-filters');
+import {filtersControlPanel, sortFunc, buttonValue, RANDOM_PHOTO_LIMIT} from './filter-variables';
 
 const showFilterPanel = () => {
   filtersControlPanel.classList.remove('img-filters--inactive');
@@ -9,48 +9,20 @@ const setActiveFilter = (button) => {
   button.classList.add('img-filters__button--active');
 };
 
-const compareThumbnails = (photoA, photoB) => {
-  const rankA = photoA.comments.length;
-  const rankB = photoB.comments.length;
-  return rankB - rankA;
-};
-
-const getRandomPhoto = (arr) => {
-  const randomIndex = Math.floor(Math.random() * arr.length);
-  return arr[randomIndex];
-};
-
-const getUniqueRandomPhotos = (arr) => {
-  const uniquePhotos = [];
-  while (uniquePhotos.length < 10) {
-    const randomPhoto = getRandomPhoto(arr);
-
-    if (!uniquePhotos.includes(randomPhoto)) {
-      uniquePhotos.push(randomPhoto);
-    }
-  }
-  return uniquePhotos;
-};
-
-const removePhoto = () => {
-  const parentElement = document.querySelector('.pictures');
-  const allPicture = parentElement.querySelectorAll('.picture');
-  allPicture.forEach((element) => element.remove());
-};
-
 const listenerButtonsFilter = (photo, addPhotoThumbnails) => {
   filtersControlPanel.addEventListener('click', (evt) => {
     const target = evt.target;
     if(target.closest('.img-filters__button')){
-      removePhoto();
       setActiveFilter(target);
-      if(target.id === 'filter-random'){
-        const randomPhoto = getUniqueRandomPhotos(photo);
-        addPhotoThumbnails(randomPhoto);
-      }else if (target.id === 'filter-discussed'){
-        addPhotoThumbnails(photo.slice().sort(compareThumbnails));
-      }else{
-        addPhotoThumbnails(photo);
+      switch (target.id) {
+        case buttonValue.random:
+          addPhotoThumbnails(photo.toSorted(sortFunc.random).slice(0, RANDOM_PHOTO_LIMIT));
+          break;
+        case buttonValue.discussed:
+          addPhotoThumbnails(photo.toSorted(sortFunc.discussed));
+          break;
+        default:
+          addPhotoThumbnails(photo);
       }
     }
   });

diff --git a/js/upload-photo/index.js b/js/upload-photo/index.js
@@ -1,10 +1,7 @@
 import {toggleClass} from '../util';
-import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
+import {imgUploadInput, imgUpoadOverlay, imgUploadancel, effectsPreview, effectLevelSliderParrent, uploaPreviewImage, FILE_TYPES} from './uploadPhotoVariables';
 import {inputTextHashtag, commentForm, imgUploadForm} from '../validation-form';
-
-const effectsPreview = document.querySelectorAll('.effects__preview');
-const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
-const uploaPreviewImage = document.querySelector('.img-upload__preview img');
+import {onShowErrorGetData } from '../api/secondary-functions';
 
 const onCloseChangePhoto = () => {
   toggleClass(imgUpoadOverlay, false);
@@ -23,40 +20,34 @@ function onCloseChangePhotoEsc(evt){
   }
 }
 
-const selectImage = (evt) => {
-  const files = evt.target.files;
-  const countFiles = files.length;
-  const selectedFile = files[0];
-  const reader = new FileReader();
+const onOpenChangePhoto = () => {
+  toggleClass(imgUpoadOverlay);
+  effectLevelSliderParrent.classList.add('hidden');
+  document.addEventListener('keydown', onCloseChangePhotoEsc);
+  imgUploadancel.addEventListener('click', onCloseChangePhoto);
+};
 
-  if (!countFiles) {
-    return;
-  }
+const selectImage = () => {
+  const selectedFile = imgUploadInput.files[0];
+  const fileName = selectedFile.name.toLowerCase();
+  const fileUrl = URL.createObjectURL(selectedFile);
+  const matches = FILE_TYPES.some((it) => fileName.endsWith(it));
 
-  if (!/^image/.test(selectedFile.type)) {
+  if (!matches) {
+    onShowErrorGetData('Неверный тип файла');
     return;
   }
 
-  reader.readAsDataURL(selectedFile);
-
-  reader.addEventListener('load', (e) => {
-    uploaPreviewImage.src = e.target.result;
-    effectsPreview.forEach((element) => {
-      element.style.backgroundImage = `url(${e.target.result})`;
-    });
+  uploaPreviewImage.src = fileUrl;
+  effectsPreview.forEach((element) => {
+    element.style.backgroundImage = `url(${fileUrl})`;
   });
-};
 
-const onOpenChangePhoto = (evt) => {
-  toggleClass(imgUpoadOverlay);
-  selectImage(evt);
-  effectLevelSliderParrent.classList.add('hidden');
-  document.addEventListener('keydown', onCloseChangePhotoEsc);
-  imgUploadancel.addEventListener('click', onCloseChangePhoto);
+  onOpenChangePhoto();
 };
 
 const onOpenChangePhotoListener = () => {
-  imgUploadInput.addEventListener('change', onOpenChangePhoto);
+  imgUploadInput.addEventListener('change', selectImage);
 };
 
 export {onOpenChangePhotoListener, onCloseChangePhoto, onCloseChangePhotoEsc};
diff --git a/js/upload-photo/uploadPhotoVariables.js b/js/upload-photo/uploadPhotoVariables.js
@@ -1,3 +1,7 @@
 export const imgUploadInput = document.querySelector('.img-upload__input');
 export const imgUpoadOverlay = document.querySelector('.img-upload__overlay');
 export const imgUploadancel = imgUpoadOverlay.querySelector('.img-upload__cancel');
+export const effectsPreview = document.querySelectorAll('.effects__preview');
+export const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+export const uploaPreviewImage = document.querySelector('.img-upload__preview img');
+export const FILE_TYPES = ['.jpg', '.jpeg', '.png'];