Помощь друга

index.html

@@ -234,6 +234,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="vendor/pristine/pristine.min.js"></script>
+    <script src="vendor/nouislider/nouislider.js"></script>
     <script src="/js/main.js" type="module"></script>
 </body>
 </html>

js/effects.js

@@ -0,0 +1,143 @@
+const EFFECTS_DATA = {
+  chrome:
+  {
+    filter: 'grayscale',
+    values: {
+      range: {
+        min: 0,
+        max: 1
+      },
+      start: 1,
+      step: 0.1,
+    },
+    unit: ''
+  },
+
+  sepia:
+  {
+    filter: 'sepia',
+    values: {
+      range: {
+        min: 0,
+        max: 1
+      },
+      start: 1,
+      step: 0.1,
+    },
+    unit: ''
+  },
+
+  marvin:
+  {
+    filter: 'invert',
+    values: {
+      range: {
+        min: 0,
+        max: 100
+      },
+      start: 100,
+      step: 1,
+    },
+    unit: '%'
+  },
+
+  phobos:
+  {
+    filter: 'blur',
+    values: {
+      range: {
+        min: 0,
+        max: 3
+      },
+      start: 3,
+      step: 0.1,
+    },
+    unit: 'px'
+  },
+
+  heat:
+  {
+    filter: 'brightness',
+    values: {
+      range: {
+        min: 0,
+        max: 3
+      },
+      start: 3,
+      step: 0.1,
+    },
+    unit: ''
+  },
+
+  none:
+  {
+    filter: '',
+    values: {
+      range: {
+        min: 0,
+        max: 1
+      },
+      start: 1,
+      step: 0.1,
+    },
+    unit: ''
+  }
+};
+
+const effectLevel = document.querySelector('.img-upload__effect-level');
+const effectLevelValue = effectLevel.querySelector('.effect-level__value');
+const slider = effectLevel.querySelector('.effect-level__slider');
+const imagePreview = document.querySelector('.img-upload__preview img');
+const effectsContainer = document.querySelector('.effects__list');
+
+const INITIAL_EFFECT = EFFECTS_DATA.none;
+
+noUiSlider.create(slider, {
+  range: {
+    min: 0,
+    max: 100
+  },
+  start: 100,
+  step: 1,
+  connect: 'lower'
+});
+
+effectLevel.classList.add('hidden');
+
+const updateSlider = (filterName) => {
+  slider.noUiSlider.on('update', () => {
+    const filter = EFFECTS_DATA[filterName].filter;
+    const unit = EFFECTS_DATA[filterName].unit;
+
+    if (filterName !== INITIAL_EFFECT) {
+      const value = slider.noUiSlider.get();
+      imagePreview.style.filter = `${filter}(${value}${unit})`;
+      effectLevelValue.value = value;
+    }
+  });
+};
+
+const onEffectsContainerChange = (evt) => {
+  const targetElement = evt.target.value;
+  effectLevel.classList.add('hidden');
+  imagePreview.className = '';
+  imagePreview.style.filter = '';
+
+  if (targetElement !== INITIAL_EFFECT) {
+    effectLevel.classList.remove('hidden');
+    imagePreview.classList.add(`effects__preview--${targetElement}`);
+    slider.noUiSlider.updateOptions(EFFECTS_DATA[targetElement].values);
+    updateSlider(targetElement);
+  }
+};
+
+const resetEffects = () => {
+  effectsContainer.removeEventListener('click', onEffectsContainerChange);
+  imagePreview.style.filter = '';
+  imagePreview.className = '';
+  slider.noUiSlider.updateOptions(INITIAL_EFFECT);
+};
+
+effectsContainer.addEventListener('change', onEffectsContainerChange);
+
+export { resetEffects };

js/form.js

@@ -1,5 +1,6 @@
 import { isEscapeKey } from './util.js';
 import { resetImagePreviewScale } from './scale.js';
+import { resetEffects } from './effects.js';
 
 const COMMENT_MAXLENGTH = 140;
 const HASHTAGS_MAXQUANTITY = 5;
@@ -94,6 +95,7 @@ function closeEditForm() {
   form.reset();
   pristine.reset();
   resetImagePreviewScale();
+  resetEffects();
   overlay.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);

js/scale.js

@@ -5,7 +5,7 @@ const MAX_SCALE = 100;
 const scaleControlSmaller = document.querySelector('.scale__control--smaller');
 const scaleControlBigger = document.querySelector('.scale__control--bigger');
 const scaleControlValue = document.querySelector('.scale__control--value');
-const imagePreview = document.querySelector('.img-upload__preview');
+const imagePreview = document.querySelector('.img-upload__preview img');
 
 // Функция для установки нового значения масштаба
 function setScale(newValue) {