9.15_v1

index.html

@@ -228,5 +228,9 @@ <h2 class="success__title">Изображение успешно загруже
   </template>
   <script type = 'module' src="js/main.js"></script>
   <script src="sha256-Pristine-d2ee511/dist/pristine.js" type="text/javascript"></script>
+  <!-- Стили noUiSlider -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
+  <!-- Скрипт noUiSlider -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
 </body>
 </html>

js/big-picture.js

@@ -38,7 +38,6 @@ function renderComments() {
     commentsLoader.classList.add('hidden');
   }
 }
-
 function openBigPicture(photoData) {
   // Данные фотографии
   imageElement.src = photoData.url;
@@ -50,6 +49,14 @@ function openBigPicture(photoData) {
   // Очистка старых комментариев
   socialComments.innerHTML = '';
 
+  // Сброс всех предыдущих эффектов
+  imageElement.className = '';
+
+  // Применение эффекта, если он есть
+  if (photoData.effect && photoData.effect !== 'none') {
+    imageElement.classList.add(`effects__preview--${photoData.effect}`);
+  }
+
   // Инициализация комментариев
   currentComments = photoData.comments;
   displayedCommentsCount = 0;
@@ -79,6 +86,7 @@ function openBigPicture(photoData) {
 }
 
 
+
 function closeBigPicture() {
   bigPicture.classList.add('hidden');
   document.body.classList.remove('modal-open');

js/form.js

@@ -8,11 +8,17 @@ const descriptionInput = uploadForm.querySelector('.text__description');
 const fileInput = uploadForm.querySelector('.img-upload__input');
 const uploadOverlay = document.querySelector('.img-upload__overlay'); // Блок формы
 const closeButton = uploadOverlay.querySelector('.img-upload__cancel'); // Крестик
+
 const scaleSmaller = uploadOverlay.querySelector('.scale__control--smaller');
 const scaleBigger = uploadOverlay.querySelector('.scale__control--bigger');
 const scaleValue = uploadOverlay.querySelector('.scale__control--value');
 
+const effectRadios = document.querySelectorAll('input[name="effect"]');
+const effectLevelSlider = document.querySelector('.effect-level__slider');
+const effectLevelValue = document.querySelector('.effect-level__value');
+
 let currentScale = 100;
+let currentEffect = 'none';
 
 // Инициализация Pristine
 const pristine = new Pristine(uploadForm, {
@@ -92,6 +98,61 @@ scaleBigger.addEventListener('click', () => {
   }
 });
 
+// Инициализация слайдера
+noUiSlider.create(effectLevelSlider, {
+  range: {
+    min: 0,
+    max: 100,
+  },
+  start: 100,
+  step: 1,
+  connect: 'lower',
+});
+
+// Применение эффекта к изображению
+
+function applyEffect(effect) {
+  const imageElement = document.querySelector('.img-upload__preview img');
+  currentEffect = effect; // Сохраняем активный эффект
+  imageElement.className = ''; // Удаляем предыдущий класс эффекта
+  if (effect !== 'none') {
+    imageElement.classList.add(`effects__preview--${effect}`); // Применяем новый класс эффекта
+  }
+}
+
+
+// Обновление слайдера при переключении фильтра
+function updateSlider(effect) {
+  if (effect === 'none') {
+    effectLevelSlider.classList.add('hidden');
+    effectLevelValue.value = '';
+    previewImage.style.filter = '';
+  } else {
+    effectLevelSlider.classList.remove('hidden');
+    effectLevelSlider.noUiSlider.updateOptions({
+      range: { min: 0, max: 100 },
+      start: 100,
+    });
+    effectLevelValue.value = 100; // Устанавливаем начальное значение
+  }
+}
+
+// Обработчик переключения фильтров
+effectRadios.forEach((radio) => {
+  radio.addEventListener('change', (evt) => {
+    currentEffect = evt.target.value;
+    updateSlider(currentEffect);
+    applyEffect(currentEffect, effectLevelSlider.noUiSlider.get());
+  });
+});
+
+// Обновление эффекта при движении слайдера
+effectLevelSlider.noUiSlider.on('update', (values) => {
+  const value = Math.round(values[0]);
+  effectLevelValue.value = value; // Записываем значение в скрытое поле
+  applyEffect(currentEffect, value); // Применяем эффект
+});
+
 
 function resetForm() {
   uploadForm.reset();
@@ -131,17 +192,18 @@ uploadForm.addEventListener('submit', (evt) => {
     })
       .then((response) => {
         if (response.ok) {
-          // В обработчике отправки формы добавляем новую фотографию
+          // Добавляем новую фотографию с эффектом
           const newPhoto = {
             id: photos.length + 1,
             url: URL.createObjectURL(fileInput.files[0]),
             description: descriptionInput.value || 'Новое фото',
             likes: 0,
-            comments: [] // Пустой массив, если нет комментариев
+            comments: [],
+            effect: currentEffect // Сохраняем текущий эффект
           };
+
           photos.push(newPhoto); // Добавляем фото в массив
           renderThumbnails([newPhoto]); // Добавляем миниатюру
-
           showSuccessMessage(); // Показ успешного сообщения
           resetForm();
         } else {

js/thumbnails.js

@@ -20,17 +20,26 @@ function createThumbnail(photoData) {
   return thumbnail;
 }
 
-function renderThumbnails(photos) {
-  const container = document.querySelector('.pictures'); // Контейнер для миниатюр
-  const template = document.querySelector('#picture').content.querySelector('.picture'); // Шаблон миниатюры
-
-  photos.forEach((photo) => {
-    const photoElement = template.cloneNode(true);
-    photoElement.querySelector('.picture__img').src = photo.url;
-    photoElement.querySelector('.picture__likes').textContent = photo.likes;
-    photoElement.querySelector('.picture__comments').textContent = photo.comments.length;
-    container.appendChild(photoElement);
+function renderThumbnails(photoArray) {
+  const thumbnailContainer = document.querySelector('.pictures');
+  const thumbnailTemplate = document.querySelector('#picture').content.querySelector('.picture');
+
+  photoArray.forEach((photo) => {
+    const thumbnailElement = createThumbnail(photo);
+    thumbnailElement.querySelector('.picture__img').src = photo.url;
+    thumbnailElement.querySelector('.picture__likes').textContent = photo.likes;
+    thumbnailElement.querySelector('.picture__comments').textContent = photo.comments.length;
+
+    // Применяем эффект к миниатюре
+    if (photo.effect && photo.effect !== 'none') {
+      thumbnailElement.querySelector('.picture__img').classList.add(`effects__preview--${photo.effect}`);
+    }
+
+    thumbnailContainer.appendChild(thumbnailElement);
   });
 }
 
+
 export { renderThumbnails };
+
+