Сделаны фильты для загрузки фотографий

js/create-thumbnails/index.js

@@ -20,7 +20,6 @@ const addPhotoThumbnailsUsers = () => {
   });
 
   return pictureList.appendChild(listFragmentPhoto);
-
 };
 
 pictureList.addEventListener('click', (evt) => {

js/generate-data/createComments.js

@@ -1,7 +1,6 @@
 import {getRandomInteger, createId, getRandomArrayElement} from '../util';
 import {NAMES, MESSAGES} from '../data';
 
-
 const AVATAR_MIN = 1;
 const AVATAR_MAX = 6;
 const COMMENTS_MIN = 0;

js/main.js

@@ -2,6 +2,6 @@ import {addPhotoThumbnailsUsers} from './create-thumbnails';
 import './upload-photo';
 import './validation-form';
 import './add-affects';
-import './slider-affects';
+import './slider-effects';
 
 addPhotoThumbnailsUsers();

js/show-large-picture/createComments.js

@@ -1,8 +1,8 @@
 import {buttonShowMore, socialCommentsList, commentShownCount, socialCommentChild} from './elementVariables';
+
 const LIMITED_DISPLAY_COMMENTS = 5;
 const arrayComments = [];
 
-
 const createComment = (comments) => {
   const socialComment = document.createElement('li');
   socialComment.classList.add('social__comment');
@@ -46,10 +46,8 @@ const renderComments = (element) => {
   arrayComments.splice(0, arrayComments.length) ;
   arrayComments.push(...element);
   socialCommentsList.innerHTML = '';
-
   buttonShowMore.addEventListener('click', onShowMoreComments);
   onShowMoreComments();
 };
 
-
 export {renderComments, onShowMoreComments};

js/show-large-picture/index.js

@@ -6,7 +6,6 @@ const onCloseBigPicture = () => {
   toggleClass(bigPictureBlock, false);
   socialCommentsList.innerHTML = '';
   buttonShowMore.classList.remove('hidden');
-
   buttonShowMore.removeEventListener('click', onShowMoreComments);
   bigPictureCancel.removeEventListener('click', onCloseBigPicture);
   document.removeEventListener('keydown', onCloseBigPictureEsc);
@@ -24,7 +23,6 @@ const onOpenBigPicture = (element) => {
   addInformation(element);
   toggleClass(bigPictureBlock);
   renderComments(element.comments);
-
   document.addEventListener('keydown', onCloseBigPictureEsc);
   bigPictureCancel.addEventListener('click', onCloseBigPicture);
 };
@@ -36,6 +34,5 @@ function onCloseBigPictureEsc(evt){
   }
 }
 
-
 export {onOpenBigPicture};
 

js/slider-effects/index.js

@@ -0,0 +1,66 @@
+import {effectLevelSliderParrent, effectLevelSlider, effectLevelInput, effectChecked, uploaPreviewImage} from './slider-variables';
+
+const sliderVisableToggle = (isShown = true) => {
+  effectLevelSliderParrent.classList.toggle('hidden', isShown);
+};
+
+noUiSlider.create(effectLevelSlider, {
+  range: {
+    min: 0,
+    max: 100,
+  },
+  start: 0,
+  connect: 'lower'
+});
+
+const sliderUpdateOptions = (min, max, start, step, addStyleFunction) => {
+  effectLevelSlider.noUiSlider.updateOptions({
+    range: {
+      min: min,
+      max: max,
+    },
+    start: start,
+    step: step
+  });
+  effectLevelSlider.noUiSlider.on('update', () => {
+    let effectLevelInputValue = effectLevelInput.value;
+    effectLevelInputValue = effectLevelSlider.noUiSlider.get();
+    effectLevelInput.value = effectLevelInputValue;
+    uploaPreviewImage.style.filter = addStyleFunction(effectLevelInputValue);
+  });
+};
+
+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');
+    }
+  }
+});

js/slider-effects/slider-variables.js

@@ -0,0 +1,5 @@
+export const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+export const effectLevelSlider = effectLevelSliderParrent.querySelector('.effect-level__slider');
+export const effectLevelInput = document.querySelector('.effect-level__value');
+export const effectChecked = document.querySelector('.effects');
+export const uploaPreviewImage = document.querySelector('.img-upload__preview img');

js/upload-photo/index.js

@@ -2,22 +2,25 @@ import {toggleClass} from '../util';
 import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
 import {inputTextHashtag, commentForm} from '../validation-form';
 
+const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+
 const onCloseChangePhoto = () => {
   toggleClass(imgUpoadOverlay, false);
   imgUploadInput.value = '';
   document.removeEventListener('keydown', onCloseChangePhotoEsc);
 };
 
 function onCloseChangePhotoEsc(evt){
-  if (evt.key === 'Escape' && (document.activeElement === inputTextHashtag || document.activeElement === commentForm)) {
-    evt.stopPropagation();
-  } else {
+  if (evt.key === 'Escape' && !(document.activeElement === inputTextHashtag || document.activeElement === commentForm)) {
     onCloseChangePhoto();
+  } else {
+    evt.stopPropagation();
   }
 }
 
 const onOpenChangePhoto = () => {
   toggleClass(imgUpoadOverlay);
+  effectLevelSliderParrent.classList.add('hidden');
   document.addEventListener('keydown', onCloseChangePhotoEsc);
 };
 

js/util/index.js

@@ -1,4 +1,3 @@
-
 const getRandomInteger = (a, b) => {
   const lower = Math.ceil(Math.min(a, b));
   const upper = Math.floor(Math.max(a, b));
@@ -21,5 +20,4 @@ const toggleClass = (className, isOpened = true) =>{
   document.body.classList.toggle('modal-open');
 };
 
-
 export {getRandomInteger, createId, getRandomArrayElement, toggleClass};

js/validation-form/index.js

@@ -12,11 +12,9 @@ const createHashtagArray = () => inputTextHashtag.value.replace(/\s+/g, ' ').tri
 
 const onValidateHashtagRegex = () => {
   const arrayHashtag = createHashtagArray();
-
   if (arrayHashtag.length === 1 && arrayHashtag[0] === '') {
     return true;
   }
-
   return arrayHashtag.every((item) => hashtagRegex.test(item));
 };
 
@@ -35,7 +33,7 @@ const pristine = new Pristine(imgUploadForm, {
   errorClass: 'img-upload__field-wrapper--error',
   successClass: 'img-upload__field-wrapper--valid',
   errorTextParent: 'img-upload__field-wrapper',
-}, true);
+});
 
 pristine.addValidator(inputTextHashtag, onValidateHashtagRegex, 'Введён невалидный хэштег');
 pristine.addValidator(inputTextHashtag, onUniqueHashtag, 'Хэштеги повторяются');