Merge pull request #13 from ksenya3112/module9-task2

Author: keksobot

index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
 </head>
@@ -251,6 +252,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>
 

js/form.js

@@ -4,13 +4,55 @@ const MAX_HASHTAGS = 5;
 const VALID_SYMBOLS = /^#[a-zа-яё0-9]{1,19}$/i;
 const COMMENT_LENGTH = 140;
 
+const SCALE_STEP = 25;
+const MIN_SCALE = 25;
+const MAX_SCALE = 100;
+const DEFAULT_SCALE = 100;
+
+const EFFECTS = {
+  none: {
+    range: { min: 0, max: 100 },
+    start: 100, step: 1, unit: '', filter: 'none'
+  },
+  chrome: {
+    range: { min: 0, max: 1 },
+    start: 1, step: 0.1, unit: '', filter: 'grayscale'
+  },
+  sepia: {
+    range: { min: 0, max: 1 },
+    start: 1, step: 0.1, unit: '', filter: 'sepia'
+  },
+  marvin: {
+    range: { min: 0, max: 100 },
+    start: 100, step: 1, unit: '%', filter: 'invert'
+  },
+  phobos: {
+    range: { min: 0, max: 3 },
+    start: 3, step: 0.1, unit: 'px', filter: 'blur'
+  },
+  heat: {
+    range: { min: 1, max: 3 }, start: 3, step: 0.1, unit: '', filter: 'brightness'
+  },
+};
+
 const uploadForm = document.querySelector('.img-upload__form');
 const fileInput = uploadForm.querySelector('.img-upload__input');
 const overlay = uploadForm.querySelector('.img-upload__overlay');
 const closeButton = uploadForm.querySelector('.img-upload__cancel');
 const hashtagInput = uploadForm.querySelector('.text__hashtags');
 const commentInput = uploadForm.querySelector('.text__description');
 
+const scaleControlSmaller = document.querySelector('.scale__control--smaller');
+const scaleControlBigger = document.querySelector('.scale__control--bigger');
+const scaleControlValue = document.querySelector('.scale__control--value');
+const imgPreview = document.querySelector('.img-upload__preview img');
+let currentScale = DEFAULT_SCALE;
+
+const sliderContainer = document.querySelector('.img-upload__effect-level');
+const sliderElement = document.querySelector('.effect-level__slider');
+const effectValueInput = document.querySelector('.effect-level__value');
+const effectsList = document.querySelector('.effects__list');
+
 // Инициализация Pristine
 const pristine = new Pristine(uploadForm, {
   classTo: 'img-upload__field-wrapper',
@@ -58,7 +100,7 @@ const validateHashtags = (value) => {
 pristine.addValidator(hashtagInput, validateHashtags, 'Некорректные хэштеги (макс 5, без повторов, начинаются с #)');
 
 // Валидация комментария
-pristine.addValidator(commentInput, (val) => val.length <= 140, 'Максимум 140 символов');
+pristine.addValidator(commentInput, (val) => val.length <= COMMENT_LENGTH, 'Максимум COMMENT_LENGTH символов');
 
 // Отправка формы
 uploadForm.addEventListener('submit', (evt) => {
@@ -67,3 +109,58 @@ uploadForm.addEventListener('submit', (evt) => {
     evt.preventDefault();
   }
 });
+
+// Управление масштабом
+const setScale = (value) => {
+  currentScale = value;
+  scaleControlValue.value = `${value}%`;
+  imgPreview.style.transform = `scale(${value / 100})`;
+};
+
+scaleControlSmaller.addEventListener('click', () => {
+  if (currentScale > MIN_SCALE) {
+    setScale(currentScale - SCALE_STEP);
+  }
+});
+
+scaleControlBigger.addEventListener('click', () => {
+  if (currentScale < MAX_SCALE) {
+    setScale(currentScale + SCALE_STEP);
+  }
+});
+
+// Инициализация слайдера
+noUiSlider.create(sliderElement, {
+  range: { min: 0, max: 100 },
+  start: 100,
+  step: 1,
+  connect: 'lower',
+});
+
+const updateEffect = (effect) => {
+  if (effect === 'none') {
+    sliderContainer.classList.add('hidden');
+    imgPreview.style.filter = 'none';
+    effectValueInput.value = '';
+    return;
+  }
+
+  sliderContainer.classList.remove('hidden');
+  const { range, start, step, filter, unit } = EFFECTS[effect];
+
+  sliderElement.noUiSlider.updateOptions({ range, start, step });
+
+  sliderElement.noUiSlider.on('update', () => {
+    const value = sliderElement.noUiSlider.get();
+    effectValueInput.value = value;
+    imgPreview.style.filter = `${filter}(${value}${unit})`;
+  });
+};
+
+// Сброс при старте
+updateEffect('none');
+
+effectsList.addEventListener('change', (evt) => {
+  updateEffect(evt.target.value);
+});
+

js/full-size-picture.js

@@ -63,12 +63,12 @@ const onCloseButtonClick = () => {
   //Удаление обработчика с кнопки при закрытии, чтобы не накапливались
   commentsLoader.removeEventListener('click', onCommentsLoaderClick);
 };
-const onDocumentKeydown = (evt) => {
+function onDocumentKeydown(evt) {
   if (isEsc(evt)) {
     evt.preventDefault();
     onCloseButtonClick();
   }
-};
+}
 
 //Открытие и заполнение данными
 const openFullSizePicture = (data) => {