✔️ Сборка #10

Author: Keks

10/index.html

@@ -243,6 +243,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>
     <script src="./js/functions.js"></script>
 </body>

10/js/filterForm.js

@@ -2,6 +2,10 @@ const scaleValueInput = document.querySelector('.scale__control--value'); // о
 const scaleSmallerBtn = document.querySelector('.scale__control--smaller'); // минус
 const scaleBiggerBtn = document.querySelector('.scale__control--bigger'); // плюсик
 const previewImage = document.querySelector('.img-upload__preview img'); // фотка
+const effectSlider = document.querySelector('.effect-level__slider'); // слайдер со значениями выбранного фильтра
+const effectValueInput = document.querySelector('.effect-level__value'); // Уровень эффекта
+const effectLevelContainer = document.querySelector('.img-upload__effect-level'); // эффект «Оригинал» слайдер и его контейнер
+const effectsRadio = document.querySelectorAll('.effects__radio'); // все кнопки эффектов
 
 const SCALE_STEP = 25; // шаг в 25
 const SCALE_MIN = 25; // минимальный процент
@@ -26,3 +30,59 @@ scaleBiggerBtn.addEventListener('click', () => {
 
 // по умолчанию значение 100
 updateScale(currentScale);
+
+const effects = { // эффекты
+  'chrome': {min: 0, max: 1, step: 0.1, start: 1, filter: (value) => `grayscale(${value})`},
+  'sepia': {min: 0, max: 1, step: 0.1, start: 1, filter: (value) => `sepia(${value})`},
+  'marvin': {min: 0, max: 100, step: 1, start: 100, filter: (value) => `invert(${value}%)`},
+  'phobos': {min: 0, max: 3, step: 0.1, start: 3, filter: (value) => `blur(${value}px)`},
+  'heat': {min: 1, max: 3, step: 0.1, start: 3, filter: (value) => `heat(${value})`},
+  'none': {} // Оригинал
+};
+
+let currentEffect = 'none'; // выбранный эффект
+
+function updateEffectSlider(effect) {
+  if (effect === 'none') { // если выбран эффект 'none'
+    effectLevelContainer.style.display = 'none'; // скрывается контейнер слайдера
+    previewImage.style.filter = ''; // с изображения убирается CSS-фильтр
+    effectValueInput.value = ''; // очищается поле ввода значения эффекта
+    return;
+  }
+
+  effectLevelContainer.style.display = ''; // показывается контейнер слайдера
+
+  const { min, max, step, start } = effects[effect]; // из объекта effects берутся параметры для выбранного эффекта: min, max, step, start.
+
+  if (effectSlider.noUiSlider) { // если слайдер уже существует
+    effectSlider.noUiSlider.updateOptions({ // обновляются его параметры (диапазон, старт, шаг)
+      range: {min, max}, start, step
+    });
+  } else {
+    noUiSlider.create(effectSlider, { // если слайдер ещё не был создан
+      range: {min, max}, // создаётся новый слайдер с заданными параметрами
+      start,
+      step,
+      connect: 'lower'
+    });
+
+    effectSlider.noUiSlider.on('update', (values, handle) => { // вешается обработчик события update
+      const value = values[handle]; // получает текущее значение слайдера
+      effectValueInput.value = value; // записывает его в поле ввода
+      previewImage.style.filter = effects[currentEffect].filter(value); // применяет CSS-фильтр к изображению с этим значением.
+    });
+  }
+
+  effectSlider.noUiSlider.set(start); // стартовое значение
+}
+
+// переключение эффекта:
+effectsRadio.forEach((radio) => { // проходим по всем кнопкам
+  radio.addEventListener('change', (evt) => { // если кнопка меняется
+    currentEffect = evt.target.value; // то выбранному значению выбираем от нажатой
+    updateEffectSlider(currentEffect); // и в функцию передаем значения от выбранного
+  });
+});
+
+// выбор по умолчанию:
+updateEffectSlider('none');