Изменил функцию добавления эффектов

MaksimRozov · Mar 22, 2024 · fdb7999 · fdb7999
1 parent 555d4e0
commit fdb7999
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 58 deletions.
diff --git a/js/add-affects/index.js → js/add-effects/index.js b/js/add-affects/index.js → js/add-effects/index.js
@@ -23,5 +23,9 @@ const onDecreaseScale = () => {
   uploaPreviewImage.style.transform = `scale(${scaleLimited / 100})`;
 };
 
-scaleControlBigger.addEventListener('click', onIncreaseScale);
-scaleControlSmaller.addEventListener('click', onDecreaseScale);
+const scaleListener = () => {
+  scaleControlBigger.addEventListener('click', onIncreaseScale);
+  scaleControlSmaller.addEventListener('click', onDecreaseScale);
+};
+
+export {scaleListener};
diff --git a/js/create-thumbnails/index.js b/js/create-thumbnails/index.js
@@ -7,7 +7,6 @@ const createPhotoUsers = photoItems();
 
 const addPhotoThumbnailsUsers = () => {
   const listFragmentPhoto = document.createDocumentFragment();
-
   createPhotoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');
@@ -18,7 +17,6 @@ const addPhotoThumbnailsUsers = () => {
     pictureItem.querySelector('.picture__comments').textContent = element.comments.length;
     listFragmentPhoto.appendChild(pictureItem);
   });
-
   return pictureList.appendChild(listFragmentPhoto);
 };
 

diff --git a/js/main.js b/js/main.js
@@ -1,7 +1,11 @@
 import {addPhotoThumbnailsUsers} from './create-thumbnails';
-import './upload-photo';
-import './validation-form';
-import './add-affects';
-import './slider-effects';
+import {onOpenChangePhotoListener} from './upload-photo';
+import {validateListener} from './validation-form';
+import {scaleListener} from './add-effects';
+import {effectCheckedListener} from './slider-effects';
 
+effectCheckedListener();
+scaleListener();
+validateListener();
+onOpenChangePhotoListener();
 addPhotoThumbnailsUsers();
diff --git a/js/slider-effects/effect-data.js b/js/slider-effects/effect-data.js
@@ -0,0 +1,51 @@
+export const DEFAULT_MIN = 0;
+export const DEFAULT_MAX = 100;
+export const DEFAULT_START = 0;
+
+export const EFFECTS = [
+  {
+    name: 'chrome',
+    style: 'grayscale',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    start: 1,
+    unit: ' ',
+  },
+  {
+    name: 'sepia',
+    style: 'sepia',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    start: 1,
+    unit: ' ',
+  },
+  {
+    name: 'marvin',
+    style: 'invert',
+    min: 0,
+    max: 100,
+    step: 1,
+    start: 100,
+    unit: '%',
+  },
+  {
+    name: 'phobos',
+    style: 'blur',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    start: 3,
+    unit: 'px',
+  },
+  {
+    name: 'heat',
+    style: 'brightness',
+    min: 1,
+    max: 3,
+    step: 0.1,
+    start: 3,
+    unit: ' ',
+  },
+];
diff --git a/js/slider-effects/index.js b/js/slider-effects/index.js
@@ -1,19 +1,30 @@
 import {effectLevelSliderParrent, effectLevelSlider, effectLevelInput, effectChecked, uploaPreviewImage} from './slider-variables';
+import {EFFECTS, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_START } from './effect-data';
 
 const sliderVisableToggle = (isShown = true) => {
   effectLevelSliderParrent.classList.toggle('hidden', isShown);
 };
 
+const searhEffect = (value, array) => array.find((element) => element.name === value);
+
 noUiSlider.create(effectLevelSlider, {
   range: {
-    min: 0,
-    max: 100,
+    min: DEFAULT_MIN,
+    max: DEFAULT_MAX,
   },
-  start: 0,
+  start: DEFAULT_START,
   connect: 'lower'
 });
 
-const sliderUpdateOptions = (min, max, start, step, addStyleFunction) => {
+const sliderUpdateOptions = (value) => {
+  const effect = searhEffect(value, EFFECTS);
+  if(!effect){
+    sliderVisableToggle();
+    uploaPreviewImage.style.removeProperty('filter');
+    return;
+  }
+  const {min, max, start, step, unit} = effect;
+  sliderVisableToggle(false);
   effectLevelSlider.noUiSlider.updateOptions({
     range: {
       min: min,
@@ -23,44 +34,16 @@ const sliderUpdateOptions = (min, max, start, step, addStyleFunction) => {
     step: step
   });
   effectLevelSlider.noUiSlider.on('update', () => {
-    let effectLevelInputValue = effectLevelInput.value;
-    effectLevelInputValue = effectLevelSlider.noUiSlider.get();
+    const effectLevelInputValue = effectLevelSlider.noUiSlider.get();
     effectLevelInput.value = effectLevelInputValue;
-    uploaPreviewImage.style.filter = addStyleFunction(effectLevelInputValue);
+    uploaPreviewImage.style.filter = `${effect.style}(${effectLevelInputValue}${unit})`;
   });
 };
 
-effectChecked.addEventListener('change', (evt) => {
-  if (evt.target.checked) {
-    switch (evt.target.value) {
-      case 'chrome':
-        sliderVisableToggle(false);
-        sliderUpdateOptions(0, 1, 0, 0.1, (value) => `grayscale(${value})`);
-        break;
-
-      case 'sepia':
-        sliderVisableToggle(false);
-        sliderUpdateOptions(0, 1, 0, 0.1, (value) => `sepia(${value})`);
-        break;
-
-      case 'marvin':
-        sliderVisableToggle(false);
-        sliderUpdateOptions(0, 100, 0, 1, (value) => `invert(${value}%)`);
-        break;
-
-      case 'phobos':
-        sliderVisableToggle(false);
-        sliderUpdateOptions(0, 3, 0, 0.1, (value) => `blur(${value}px)`);
-        break;
-
-      case 'heat':
-        sliderVisableToggle(false);
-        sliderUpdateOptions(0, 3, 1, 0.1, (value) => `brightness(${value})`);
-        break;
-
-      default:
-        sliderVisableToggle();
-        uploaPreviewImage.style.removeProperty('filter');
+export const effectCheckedListener = () => {
+  effectChecked.addEventListener('change', (evt) => {
+    if (evt.target.checked) {
+      sliderUpdateOptions(evt.target.value);
     }
-  }
-});
+  });
+};
diff --git a/js/upload-photo/index.js b/js/upload-photo/index.js
@@ -1,15 +1,19 @@
 import {toggleClass} from '../util';
 import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
 import {inputTextHashtag, commentForm} from '../validation-form';
-const effectsPreview = document.querySelectorAll('.effects__preview ');
+const effectsPreview = document.querySelectorAll('.effects__preview');
 
 const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
 const uploaPreviewImage = document.querySelector('.img-upload__preview img');
 
 const onCloseChangePhoto = () => {
   toggleClass(imgUpoadOverlay, false);
   imgUploadInput.value = '';
+  uploaPreviewImage.style.removeProperty('filter');
+  uploaPreviewImage.style.removeProperty('transform');
   document.removeEventListener('keydown', onCloseChangePhotoEsc);
+  imgUploadancel.removeEventListener('click', onCloseChangePhoto);
+
 };
 
 function onCloseChangePhotoEsc(evt){
@@ -49,7 +53,12 @@ const onOpenChangePhoto = (evt) => {
   selectImage(evt);
   effectLevelSliderParrent.classList.add('hidden');
   document.addEventListener('keydown', onCloseChangePhotoEsc);
+  imgUploadancel.addEventListener('click', onCloseChangePhoto);
+
+};
+
+const onOpenChangePhotoListener = () => {
+  imgUploadInput.addEventListener('change', onOpenChangePhoto);
 };
 
-imgUploadInput.addEventListener('change', onOpenChangePhoto);
-imgUploadancel.addEventListener('click', onCloseChangePhoto);
+export {onOpenChangePhotoListener};
diff --git a/js/validation-form/index.js b/js/validation-form/index.js
@@ -7,7 +7,6 @@ const COMMENTS_LIMIT = 140;
 const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/i;
 
 const onValidateCommentForm = (value) => value.length <= COMMENTS_LIMIT;
-
 const createHashtagArray = () => inputTextHashtag.value.replace(/\s+/g, ' ').trim().toLowerCase().split(' ');
 
 const onValidateHashtagRegex = () => {
@@ -40,9 +39,13 @@ pristine.addValidator(inputTextHashtag, onUniqueHashtag, 'Хэштеги пов
 pristine.addValidator(inputTextHashtag, onHashtagLimitLength, 'Превышено количество хэштегов');
 pristine.addValidator(commentForm, onValidateCommentForm, 'Длина комментария больше 140 символов');
 
-imgUploadForm.addEventListener('submit', (evt) => {
-  if(pristine.validate()) {
-    imgUploadForm.submit();
-  }
-  evt.preventDefault();
-});
+const validateListener = () => {
+  imgUploadForm.addEventListener('submit', (evt) => {
+    if(pristine.validate()) {
+      imgUploadForm.submit();
+    }
+    evt.preventDefault();
+  });
+};
+
+export {validateListener};