Правки по критериям

js/filters.js

@@ -2,12 +2,13 @@ import { renderUsersPictures, clearUsersPictures } from './thumbnails.js';
 import { getData } from './api.js';
 import { debounce } from './util.js';
 
+const DEBOUNCE_DELAY = 500;
+
 const imgFilters = document.querySelector('.img-filters');
 const filterDefault = imgFilters.querySelector('#filter-default');
 const filterRandom = imgFilters.querySelector('#filter-random');
 const filterDiscussed = imgFilters.querySelector('#filter-discussed');
 const filters = [filterDefault, filterRandom, filterDiscussed];
-const DEBOUNCE_DELAY = 500;
 
 let usersPictures = null;
 
@@ -21,6 +22,7 @@ const getRandomPictures = (pictures) => {
     randomPictures.splice(Math.floor(Math.random() * randomPictures.length), 1);
   }
   return randomPictures;
+
 };
 
 const getDiscussedPictures = (pictures) => pictures.slice().sort((a, b) => b.comments.length - a.comments.length);
@@ -44,20 +46,27 @@ const setActiveFilter = (activeFilter) => {
   activeFilter.classList.add('img-filters__button--active');
 };
 
-filterDefault.addEventListener('click', debounce(() => {
-  clearUsersPictures();
-  renderUsersPictures(usersPictures);
+filterDefault.addEventListener('click', () => {
   setActiveFilter(filterDefault);
-}, DEBOUNCE_DELAY));
+  debounce(() => {
+    clearUsersPictures();
+    renderUsersPictures(usersPictures);
+  }, DEBOUNCE_DELAY)();
+});
+
 
-filterRandom.addEventListener('click', debounce(() => {
-  clearUsersPictures();
-  renderUsersPictures(getRandomPictures(usersPictures));
+filterRandom.addEventListener('click', () => {
   setActiveFilter(filterRandom);
-}, DEBOUNCE_DELAY));
+  debounce(() => {
+    clearUsersPictures();
+    renderUsersPictures(getRandomPictures(usersPictures));
+  }, DEBOUNCE_DELAY)();
+});
 
-filterDiscussed.addEventListener('click', debounce(() => {
-  clearUsersPictures();
-  renderUsersPictures(getDiscussedPictures(usersPictures));
+filterDiscussed.addEventListener('click', () => {
   setActiveFilter(filterDiscussed);
-}, DEBOUNCE_DELAY));
+  debounce(() => {
+    clearUsersPictures();
+    renderUsersPictures(getDiscussedPictures(usersPictures));
+  }, DEBOUNCE_DELAY)();
+});

js/fullSize.js

@@ -61,7 +61,7 @@ function openBigPicture(photo) {
   likesCounter.textContent = photo.likes;
   pictureUrl.src = photo.url;
   commentsCount.textContent = photo.comments.length;
-  socialCommentCount.textContent = photo.comments.length < 5 ? photo.comments.length : 5;
+  socialCommentCount.textContent = photo.comments.length < COMMENTS_LOAD_STEP ? photo.comments.length : COMMENTS_LOAD_STEP;
 
   setTimeout(() => {
     if (photo.comments.length <= 5) {

js/slider.js

@@ -2,65 +2,124 @@ import { imgPreview } from './uploadForm.js';
 
 const effectLevelSlider = document.querySelector('.img-upload__effect-level');
 const slider = document.querySelector('.effect-level__slider');
-if (slider) {
-  noUiSlider.create(slider, {
-    start: [100],
+
+const format = {
+  to: function (value) {
+    if (Number.isInteger(value)) {
+      return value.toFixed(0);
+    }
+    return value.toFixed(1);
+  },
+  from: function (value) {
+    return parseFloat(value);
+  },
+};
+
+const defaultSettings = {
+  animate: false,
+  start: 0,
+  step: 0.1,
+  connect: 'lower',
+  range: {
+    min: 0,
+    max: 1
+  },
+};
+
+const CONFIGS = {
+  chrome: {
+    range: {
+      min: 0,
+      max: 1
+    },
+    start: 1,
     step: 0.1,
+    format
+  },
+  sepia: {
     range: {
-      'min': [0],
-      'max': [100]
+      min: 0,
+      max: 1
     },
-    format: {
-      to: function (value) {
-        return Number(value).toFixed(1);
-      },
-      from: function (value) {
-        return Number(value);
-      }
-    }
-  });
-
-  slider.noUiSlider.on('update', (values, handle) => {
-    const value = Number(values[handle]);
-    const effectLevelValue = document.querySelector('.effect-level__value');
-    effectLevelValue.value = value.toFixed(1);
+    start: 1,
+    step: 0.1,
+    format
+  },
+  marvin: {
+    range: {
+      min: 0,
+      max: 100
+    },
+    start: 100,
+    step: 1
+  },
+  phobos: {
+    range: {
+      min: 0,
+      max: 3
+    },
+    start: 3,
+    step: 0.1,
+    format
+  },
+  heat: {
+    range: {
+      min: 1,
+      max: 3
+    },
+    start: 3,
+    step: 0.1,
+    format
+  },
+  none: defaultSettings
 
-    const currentEffect = document.querySelector('input[name="effect"]:checked').value;
+};
 
+document.querySelector('.effects__list').addEventListener('change', (evt) => {
+  const currentEffect = document.querySelector('input[name="effect"]:checked').value;
+  if (slider.noUiSlider) {
+    slider.noUiSlider.destroy();
+  }
+  noUiSlider.create(slider, CONFIGS[currentEffect]);
+  const effectLevelValue = document.querySelector('.effect-level__value');
+  slider.noUiSlider.on('update', (values) => {
+    const value = values[0];
+    effectLevelValue.value = value;
     switch (currentEffect) {
       case 'chrome':
-        imgPreview.style.filter = `grayscale(${(value / 100).toFixed(1)})`;
+        imgPreview.style.filter = `grayscale(${value})`;
         break;
       case 'sepia':
-        imgPreview.style.filter = `sepia(${(value / 100).toFixed(1)})`;
+        imgPreview.style.filter = `sepia(${value})`;
         break;
       case 'marvin':
-        imgPreview.style.filter = `invert(${value.toFixed(1)}%)`;
+        imgPreview.style.filter = `invert(${value}%)`;
         break;
       case 'phobos':
-        imgPreview.style.filter = `blur(${(value * 0.03).toFixed(1)}px)`;
+        effectLevelValue.value = value;
+        imgPreview.style.filter = `blur(${value}px)`;
         break;
       case 'heat':
-        imgPreview.style.filter = `brightness(${(1 + (value * 0.02)).toFixed(1)})`;
+        imgPreview.style.filter = `brightness(${value})`;
         break;
       default:
         imgPreview.style.filter = 'none';
     }
   });
 
-  document.querySelector('.effects__list').addEventListener('change', (evt) => {
-    if (evt.target.value === 'none') {
-      effectLevelSlider.classList.add('hidden');
-    } else {
-      effectLevelSlider.classList.remove('hidden');
-    }
-    slider.noUiSlider.set(100);
-  });
 
-  window.addEventListener('load', () => {
-    const currentEffect = document.querySelector('input[name="effect"]:checked').value;
-    if (currentEffect === 'none') {
-      effectLevelSlider.classList.add('hidden');
-    }
-  });
-}
+  if (evt.target.value === 'none') {
+    effectLevelSlider.classList.add('hidden');
+  } else {
+    effectLevelSlider.classList.remove('hidden');
+  }
+  slider.noUiSlider.set(100);
+});
+
+window.addEventListener('load', () => {
+  const currentEffect = document.querySelector('input[name="effect"]:checked').value;
+  if (currentEffect === 'none') {
+    effectLevelSlider.classList.add('hidden');
+  }
+});
+

js/uploadForm.js

@@ -18,7 +18,6 @@ const hashtagInput = imgUploadForm.querySelector('.text__hashtags');
 const commentInput = imgUploadForm.querySelector('.text__description');
 const scale = document.querySelector('.scale__control--value');
 
-const slider = document.querySelector('.effect-level__slider');
 const imgPreview = document.querySelector('.img-upload__preview img');
 const effect = document.querySelector('.img-upload__effect-level');
 
@@ -38,26 +37,27 @@ const pristine = new Pristine(imgUploadForm, {
 });
 
 const onEscKeyDown = (evt) => {
-  if (evt.key === 'Escape' && !evt.target.closest('.text__hashtags')) {
+  if (evt.key === 'Escape' && !evt.target.closest('.text__hashtags') && !document.querySelector('.error__inner')) {
     formOverlay.classList.add('hidden');
     document.body.classList.remove('modal-open');
+    resetFormHandler();
   }
 };
 
-const resetFormHandler = () => {
+function resetFormHandler() {
   formOverlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.addEventListener('keydown', onEscKeyDown);
   imgPreview.style.transform = 'scale(1)';
-  slider.noUiSlider.set(SCALE_MAX);
   imgPreview.style.filter = 'none';
   effect.classList.add('hidden');
   scale.value = `${SCALE_MAX}%`;
   imgPreview.style.transform = '';
   effect.classList.add('hidden');
   inputFile.value = '';
   imgUploadForm.reset();
-};
+  pristine.reset();
+}
 
 cancelButton.addEventListener('click', () => {
   formOverlay.classList.add('hidden');
@@ -69,7 +69,7 @@ scaleControlSmaller.addEventListener('click', () => {
   let scaleValue = parseInt(scaleControlValue.value, SCALE_MIN);
   if (scaleValue > SCALE_STEP) {
     scaleValue -= SCALE_STEP;
-    scaleControlValue.value = `${scaleValue} %`;
+    scaleControlValue.value = `${scaleValue}%`;
     imgPreview.style.transform = `scale(${scaleValue / SCALE_MAX})`;
   }
 });
@@ -78,7 +78,7 @@ scaleControlBigger.addEventListener('click', () => {
   let scaleValue = parseInt(scaleControlValue.value, SCALE_MIN);
   if (scaleValue < SCALE_MAX) {
     scaleValue += SCALE_STEP;
-    scaleControlValue.value = `${scaleValue} %`;
+    scaleControlValue.value = `${scaleValue}%`;
     imgPreview.style.transform = `scale(${scaleValue / SCALE_MAX})`;
   }
 });
@@ -89,7 +89,7 @@ pristine.addValidator(hashtagInput, (value) => {
     return true;
   }
 
-  const hashtags = value.split(' ');
+  const hashtags = value.split(' ').filter((e) => e !== '');
 
   if (hashtags.length > MAX_HASHTAGS) {
     hashtagErrorMessage = 'Слишком много хэштегов. Максимум 5.';
@@ -119,7 +119,7 @@ pristine.addValidator(hashtagInput, (value) => {
       return false;
     }
 
-    if (/[^a-zа-яё0-9#]/i.test(hashtag)) {
+    if (!/^#[a-zа-яё0-9]{1,19}$/i.test(hashtag)) {
       hashtagErrorMessage = 'Хэштег может содержать только буквы и цифры.';
       return false;
     }
@@ -220,14 +220,21 @@ inputFile.addEventListener('change', () => {
   document.body.classList.add('modal-open');
   const file = inputFile.files[0];
   const fileName = file.name.toLowerCase();
-  const reader = new FileReader();
-
-  reader.onloadend = function () {
-    imgPreview.src = reader.result;
-  };
 
   if (file && FILE_TYPES.some((it) => fileName.endsWith(it))) {
-    reader.readAsDataURL(file);
+    const objectURL = URL.createObjectURL(file);
+    imgPreview.src = objectURL;
+
+    const previewElements = document.querySelectorAll('.effects__preview');
+
+    previewElements.forEach((previewElement) => {
+      previewElement.style.backgroundImage = `url(${objectURL})`;
+    });
+
+    imgPreview.onload = () => {
+      URL.revokeObjectURL(objectURL);
+    };
+
     submitButton.disabled = false;
   } else {
     imgPreview.src = '';
@@ -250,25 +257,6 @@ errorMessageElement.style.textAlign = 'center';
 errorMessageElement.style.zIndex = '1000';
 errorMessageElement.style.display = 'none';
 
-imgUploadForm.addEventListener('submit', (evt) => {
-  evt.preventDefault();
-
-  const formData = new FormData(imgUploadForm);
-
-  sendData(formData)
-    .then(() => {
-      errorMessageElement.style.display = 'none';
-    })
-
-    .catch(() => {
-      errorMessageElement.style.display = 'block';
-      setTimeout(() => {
-        errorMessageElement.style.display = 'none';
-      }, 3000);
-
-    });
-});
-
 document.body.prepend(errorMessageElement);
 
 export { imgPreview };