Merge pull request #18 from Daniil888-m/module12-task2

htmlacademy-javascript · Jan 18, 2025 · 8e16ade · 8e16ade
2 parents 5a33a5b + 3f90424
commit 8e16ade
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/js/consts.js b/js/consts.js
@@ -1,4 +1,4 @@
-const Filters = {
+const FiltersList = {
   chrome: {
     MIN_VALUE: 0,
     MAX_VALUE: 1,
@@ -54,6 +54,6 @@ const PHOTOS_COUNT = 25;
 const COMMENTS_STEP = 5;
 
 
-export { PHOTOS_COUNT, COMMENTS_STEP, Filters, Scale, AlertType };
+export { PHOTOS_COUNT, COMMENTS_STEP, FiltersList, Scale, AlertType };
 
 
diff --git a/js/effects.js b/js/effects.js
@@ -1,4 +1,4 @@
-import { Filters, Scale } from './consts.js';
+import { FiltersList, Scale } from './consts.js';
 import { hide, show } from './utils.js';
 
 const uploadForm = document.querySelector('#upload-select-image');
@@ -60,11 +60,11 @@ noUiSlider.create(effectsSlider, {
 function updateEffectsSlider(effect) {
   effectsSlider.noUiSlider.updateOptions({
     range: {
-      max: Filters[effect].MAX_VALUE,
-      min: Filters[effect].MIN_VALUE,
+      max: FiltersList[effect].MAX_VALUE,
+      min: FiltersList[effect].MIN_VALUE,
     },
-    step: Filters[effect].STEP,
-    start: Filters[effect].MAX_VALUE,
+    step: FiltersList[effect].STEP,
+    start: FiltersList[effect].MAX_VALUE,
   });
 }
 
@@ -78,7 +78,7 @@ effectsSlider.noUiSlider.on('update', () => {
   effectsValue.value = effectsSlider.noUiSlider.get();
   const currentEffect = uploadForm.querySelector('input[name="effect"]:checked').value;
   if (!(currentEffect === 'none')) {
-    uploadFormPreviewImg.style.filter = `${Filters[currentEffect].EFFECT}(${effectsValue.value + Filters[currentEffect].UNIT_OF_MEASUREMENT}`;
+    uploadFormPreviewImg.style.filter = `${FiltersList[currentEffect].EFFECT}(${effectsValue.value + FiltersList[currentEffect].UNIT_OF_MEASUREMENT}`;
   }
 });
 
@@ -90,7 +90,7 @@ uploadForm.querySelector('.img-upload__effects').addEventListener('change', (evt
     } else {
       show(sliderContainer);
       updateEffectsSlider(currentEffect);
-      uploadFormPreviewImg.style.filter = `${Filters[currentEffect].EFFECT}(${effectsValue.value + Filters[currentEffect].UNIT_OF_MEASUREMENT}`;
+      uploadFormPreviewImg.style.filter = `${FiltersList[currentEffect].EFFECT}(${effectsValue.value + FiltersList[currentEffect].UNIT_OF_MEASUREMENT}`;
     }
   }
 });

diff --git a/js/filters.js b/js/filters.js
@@ -29,13 +29,9 @@ const onFilterCLick = (evt) => {
   evt.preventDefault();
   const currentTarget = evt.target;
 
-  const currentActiveButton = filterInput.querySelector(`.${ACTIVE_BUTTON_CLASS}`);
-
   if (!currentTarget.classList.contains('img-filters__button')) {
     return;
   }
-  currentActiveButton.classList.toggle(ACTIVE_BUTTON_CLASS);
-  currentTarget.classList.toggle(ACTIVE_BUTTON_CLASS);
 
   debouncedApplyFilter(currentTarget.id);
 };
@@ -47,4 +43,15 @@ const setFilter = (photos) => {
   filterInput.addEventListener('click', onFilterCLick);
 };
 
+document.querySelector('.img-filters__form').addEventListener('click', (evt) => {
+  const currentTarget = evt.target;
+  const currentActiveButton = filterInput.querySelector(`.${ACTIVE_BUTTON_CLASS}`);
+
+  if (!currentTarget.classList.contains('img-filters__button')) {
+    return;
+  }
+  currentActiveButton.classList.toggle(ACTIVE_BUTTON_CLASS);
+  currentTarget.classList.toggle(ACTIVE_BUTTON_CLASS);
+});
+
 export { setFilter };
diff --git a/js/upload-form.js b/js/upload-form.js
@@ -15,7 +15,7 @@ const HASHTAGS_ERRORS = {
   invalidHashtag: 'Хэштег начинается с символа # и состоит только из букв и цифр и не превышает длину 20 символов',
   repeatedHashtags: 'Хэштеги не должны повторяться'
 };
-const FYLES_TYPES = ['png', 'jpeg', 'jpg'];
+const FYLES_TYPE_LIST = ['png', 'jpeg', 'jpg'];
 const HASHTAGS_MAX_COUNT = 5;
 const MAX_DESCRIPTION_LETTERS_COUNT = 140;
 
@@ -108,6 +108,13 @@ function closeUploadOverlay() {
 
 }
 
+const setPreview = (src) => {
+  uploadFormPreview.src = src;
+  Array.from(document.querySelectorAll('.effects__preview')).forEach((el) => {
+    el.style.backgroundImage = `url(${src})`;
+  });
+};
+
 const showUploadOverlay = () => {
   show(uploadOverlay);
   document.body.classList.add('modal-open');
@@ -117,10 +124,11 @@ uploadInput.addEventListener('change', () => {
   const file = uploadInput.files[0];
   const fileName = file.name.toLowerCase();
 
-  const matches = FYLES_TYPES.some((it) => fileName.endsWith(it));
+  const matches = FYLES_TYPE_LIST.some((it) => fileName.endsWith(it));
   if (matches) {
-    uploadFormPreview.src = URL.createObjectURL(file);
+    const previewSrc = URL.createObjectURL(file);
     showUploadOverlay();
+    setPreview(previewSrc);
     document.addEventListener('keydown', onUploadOverlayKeydown);
   } else {
     showDataError('Неправильный формат картинки');