Merge pull request #10 from DianaBrodovaya/module9-task2

Author: keksobot

index.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
@@ -253,6 +254,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
 
   <script type="module" src="js/main.js"></script>
   <script src="vendor/pristine/pristine.min.js"></script>
+  <script src="vendor/nouislider/nouislider.js"></script>
 </body>
 
 </html>

js/effects.js

@@ -0,0 +1,124 @@
+const EFFECTS = {
+  none: {
+    style: 'none',
+    min: 0,
+    max: 100,
+    step: 1,
+    unit: '',
+  },
+  chrome: {
+    style: 'grayscale',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    unit: '',
+  },
+  sepia: {
+    style: 'sepia',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    unit: '',
+  },
+  marvin: {
+    style: 'invert',
+    min: 0,
+    max: 100,
+    step: 1,
+    unit: '%',
+  },
+  phobos: {
+    style: 'blur',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    unit: 'px',
+  },
+  heat: {
+    style: 'brightness',
+    min: 1,
+    max: 3,
+    step: 0.1,
+    unit: '',
+  },
+};
+
+const DEFAULT_EFFECT = EFFECTS.none;
+let chosenEffect = DEFAULT_EFFECT;
+
+const imageForm = document.querySelector('.img-upload__form');
+const previewImage = imageForm.querySelector('.img-upload__preview img');
+const sliderContainer = imageForm.querySelector('.img-upload__effect-level');
+const sliderElement = imageForm.querySelector('.effect-level__slider');
+const effectLevelInput = imageForm.querySelector('.effect-level__value');
+
+const isDefault = () => chosenEffect === DEFAULT_EFFECT;
+
+const toggleSliderVisibility = () => {
+  if (isDefault()) {
+    sliderContainer.classList.add('hidden');
+  } else {
+    sliderContainer.classList.remove('hidden');
+  }
+};
+
+const updateSliderOptions = () => {
+  sliderElement.noUiSlider.updateOptions({
+    range: {
+      min: chosenEffect.min,
+      max: chosenEffect.max,
+    },
+    step: chosenEffect.step,
+    start: chosenEffect.max,
+  });
+
+  toggleSliderVisibility();
+};
+
+const onEffectsChange = (evt) => {
+  if (!evt.target.classList.contains('effects__radio')) {
+    return;
+  }
+  chosenEffect = EFFECTS[evt.target.value];
+  previewImage.className = `effects__preview--${evt.target.value}`;
+  updateSliderOptions();
+};
+
+const onSliderUpdate = () => {
+  const sliderValue = sliderElement.noUiSlider.get();
+  effectLevelInput.value = sliderValue;
+
+  if (isDefault()) {
+    previewImage.style.filter = 'none';
+  } else {
+    previewImage.style.filter = `${chosenEffect.style}(${sliderValue}${chosenEffect.unit})`;
+  }
+};
+
+const resetEffects = () => {
+  chosenEffect = DEFAULT_EFFECT;
+  previewImage.className = '';
+  previewImage.style.filter = 'none';
+  toggleSliderVisibility();
+};
+
+noUiSlider.create(sliderElement, {
+  range: {
+    min: DEFAULT_EFFECT.min,
+    max: DEFAULT_EFFECT.max,
+  },
+  start: DEFAULT_EFFECT.max,
+  step: DEFAULT_EFFECT.step,
+  connect: 'lower',
+  format: {
+    to: (value) => Number.isInteger(value) ? value : value.toFixed(1),
+    from: (value) => parseFloat(value),
+  },
+});
+
+toggleSliderVisibility();
+
+imageForm.addEventListener('change', onEffectsChange);
+sliderElement.noUiSlider.on('update', onSliderUpdate);
+
+export { resetEffects };

js/form.js

@@ -1,3 +1,7 @@
+
+import { resetScale } from './scale.js';
+import { resetEffects } from './effects.js';
+
 const MAX_HASHTAGS_COUNT = 5;
 const MAX_COMMENT_LENGTH = 140;
 const HASHTAG_REGEX = /^#[a-zа-яё0-9]{1,19}$/i;
@@ -23,10 +27,11 @@ const closeUploadForm = () => {
   document.body.classList.remove('modal-open');
   uploadForm.reset();
   pristine.reset();
+  resetScale();
+  resetEffects();
   document.removeEventListener('keydown', onDocumentKeydown);
 };
 
-// Функция обработки нажатия Esc
 function onDocumentKeydown(evt) {
   if (evt.key === 'Escape' && !isTextFieldFocused()) {
     evt.preventDefault();
@@ -37,6 +42,8 @@ function onDocumentKeydown(evt) {
 const openUploadForm = () => {
   uploadOverlay.classList.remove('hidden');
   document.body.classList.add('modal-open');
+  resetScale();
+  resetEffects();
   document.addEventListener('keydown', onDocumentKeydown);
 };
 

js/scale.js

@@ -0,0 +1,43 @@
+const SCALE_STEP = 25;
+const MIN_SCALE = 25;
+const MAX_SCALE = 100;
+const DEFAULT_SCALE = 100;
+
+const smallerButton = document.querySelector('.scale__control--smaller');
+const biggerButton = document.querySelector('.scale__control--bigger');
+const scaleInput = document.querySelector('.scale__control--value');
+const previewImage = document.querySelector('.img-upload__preview img');
+
+const scaleImage = (value) => {
+  scaleInput.value = `${value}%`;
+  previewImage.style.transform = `scale(${value / 100})`;
+};
+
+const onSmallerButtonClick = () => {
+  const currentValue = parseInt(scaleInput.value, 10);
+  let newValue = currentValue - SCALE_STEP;
+
+  if (newValue < MIN_SCALE) {
+    newValue = MIN_SCALE;
+  }
+
+  scaleImage(newValue);
+};
+
+const onBiggerButtonClick = () => {
+  const currentValue = parseInt(scaleInput.value, 10);
+  let newValue = currentValue + SCALE_STEP;
+
+  if (newValue > MAX_SCALE) {
+    newValue = MAX_SCALE;
+  }
+
+  scaleImage(newValue);
+};
+
+const resetScale = () => scaleImage(DEFAULT_SCALE);
+
+smallerButton.addEventListener('click', onSmallerButtonClick);
+biggerButton.addEventListener('click', onBiggerButtonClick);
+
+export { resetScale };