Помощь друга

index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css" />
   <title>Кекстаграм</title>
 </head>
 
@@ -235,6 +236,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </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/create-full-size-photo.js

@@ -9,7 +9,7 @@ const commentLoaderElement = fullSizePhotoElement.querySelector('.social__commen
 const commentsListElement = fullSizePhotoElement.querySelector('.social__comments');
 
 const createFullSizePhoto = ({url, description, likes, comments}) => {
-  fullSizePhotoImageElement.src = url;
+  fullSizePhotoImageElement.setAttribute('src', url);
   likesCountElement.textContent = likes;
   captionElement.textContent = description;
   commentsQuantityElement.textContent = comments.length;

js/create-thumbnails.js

@@ -9,8 +9,8 @@ const createThumbnails = (photos) => {
     const photoImageElement = photoElement.querySelector('.picture__img');
 
     photoImageElement.dataset.photoId = id;
-    photoImageElement.src = url;
-    photoImageElement.alt = description;
+    photoImageElement.setAttribute('src', url);
+    photoImageElement.setAttribute('alt', description);
     photoElement.querySelector('.picture__likes').textContent = likes;
     photoElement.querySelector('.picture__comments').textContent = comments.length;
 

js/main.js

@@ -2,15 +2,11 @@ import { createPhotos } from './create-photos.js';
 import { createThumbnails } from './create-thumbnails.js';
 import { openFullSizePhotoModal } from './full-size-photo-modal.js';
 import { openPhotoEditModal } from './photo-edit-modal.js';
-import { validatePhotoEditForm } from './photo-edit-form-validation.js';
 
 const photos = createPhotos();
 
 createThumbnails(photos);
-
 openFullSizePhotoModal(photos);
-
 openPhotoEditModal();
-validatePhotoEditForm();
 
 

js/photo-edit-form-validation.js

@@ -21,7 +21,6 @@ const getHashtagErrorMessage = (value) => {
   return '';
 };
 
-
 const pristine = new Pristine(formElement, {
   classTo: 'img-upload__field-wrapper',
   errorTextParent: 'img-upload__field-wrapper',
@@ -53,13 +52,8 @@ const validateHashtags = (value) => { // хэштеги необязательн
   return true;
 };
 
-// === Валидация комментария ===
-const validateDescription = (value) => {
-  if (value.length > 140) {
-    return false;
-  }
-  return true;
-};
+// Валидация комментария
+const validateDescription = (value) => value.length <= 140;
 
 // если фокус находится в поле ввода хэштега или комментария, нажатие на Esc не должно приводить к закрытию формы редактирования изображения
 const preventEscClose = (evt) => {

js/photo-edit-modal.js

@@ -1,3 +1,6 @@
+import { validatePhotoEditForm } from './photo-edit-form-validation.js';
+import { editPhotoScale, editPhotoEffect } from './photo-settings.js';
+
 const formElement = document.querySelector('.img-upload__form');
 const photoUploadInputElement = formElement.querySelector('.img-upload__input');
 const modalElement = formElement.querySelector('.img-upload__overlay');
@@ -24,6 +27,9 @@ const openPhotoEditModal = () => {
 
   document.addEventListener('keydown', onEscapeDown);
   closeElement.addEventListener('click', closeModal);
+  validatePhotoEditForm();
+  editPhotoScale();
+  editPhotoEffect();
 };
 
 export { openPhotoEditModal };

js/photo-settings.js

@@ -0,0 +1,94 @@
+const image = document.querySelector('.img-upload__preview img');
+
+const editPhotoScale = () => {
+  const scaleControlSmallerButtonElement = document.querySelector('.scale__control--smaller');
+  const scaleControlBiggerButtonElement = document.querySelector('.scale__control--bigger');
+  const scaleControlValueElement = document.querySelector('.scale__control--value');
+  const scaleStep = 25;
+  const scaleMin = 25;
+  const scaleMax = 100;
+
+  let scaleValue = parseFloat(scaleControlValueElement.value.replace('%', ''));
+
+  scaleControlSmallerButtonElement.addEventListener('click', () => {
+    if (scaleValue > scaleMin) {
+      scaleValue -= scaleStep;
+    }
+    scaleControlValueElement.setAttribute('value', `${scaleValue}%`);
+    image.setAttribute('style', `transform: scale(0.${scaleValue})`);
+  });
+
+  scaleControlBiggerButtonElement.addEventListener('click', () => {
+    if (scaleValue < scaleMax) {
+      scaleValue += scaleStep;
+    }
+    scaleControlValueElement.setAttribute('value', `${scaleValue}%`);
+    image.setAttribute('style', scaleValue === scaleMax ? 'transform: scale(1.00)' : `transform: scale(0.${scaleValue})`);
+  });
+};
+
+const editPhotoEffect = () => {
+  const effectLevelContainerElement = document.querySelector('.img-upload__effect-level');
+  const effectsListElement = document.querySelectorAll('.effects__radio');
+  const effectLevelElement = document.querySelector('.effect-level__value');
+  const sliderElement = document.querySelector('.effect-level__slider');
+
+  noUiSlider.create(sliderElement, {
+    start: [100],
+    range: {
+      'min': [0],
+      'max': [100]
+    },
+    step: 1,
+    connect: 'lower'
+  });
+
+  const applyEffect = (effectName, value) => {
+    if (effectName === 'chrome') {
+      image.setAttribute('style', `filter: grayscale(${value / 100})`); // Для эффекта «Хром»
+    }
+    if (effectName === 'sepia') {
+      image.setAttribute('style', `filter: sepia(${value / 100})`); // Для эффекта «Сепия»
+    }
+    if (effectName === 'marvin') {
+      image.setAttribute('style', `filter: invert(${value}%)`); // Для эффекта «Марвин»
+    }
+    if (effectName === 'phobos') {
+      image.setAttribute('style', `filter: blur(${(value * 3) / 100}px)`); // Для эффекта «Фобос»
+    }
+    if (effectName === 'heat') {
+      image.setAttribute('style', `filter: brightness(${1 + (value * 2) / 100})`); // Для эффекта «Зной»
+    }
+    if (effectName === 'none') {
+      image.setAttribute('style', ''); // Для эффекта «Оригинал»
+    }
+  };
+
+  for (const effect of effectsListElement) {
+    effectLevelContainerElement.classList.add('hidden');
+
+    effect.addEventListener('change', () => {
+      effect.setAttribute('checked', '');
+      image.removeAttribute('class');
+      image.classList.add(`effects__preview--${effect.id.substring(7)}`);
+      sliderElement.noUiSlider.set(100);
+      effectLevelElement.setAttribute('value', 100);
+
+      effectLevelContainerElement.classList.remove('hidden');
+      applyEffect(effect.getAttribute('id').substring(7), 100);
+
+      if (effect.getAttribute('id') === 'effect-none') {
+        effectLevelContainerElement.classList.add('hidden');
+      }
+    });
+  }
+
+  sliderElement.noUiSlider.on('update', (values, handle) => {
+    const effectValue = values[handle];
+    effectLevelElement.setAttribute('value', Math.round(effectValue));
+    const selectedEffect = document.querySelector('.effects__radio:checked').getAttribute('id').substring(7);
+    applyEffect(selectedEffect, effectValue);
+  });
+};
+
+export { editPhotoScale, editPhotoEffect };

js/show-сomments.js

@@ -15,8 +15,8 @@ const renderComment = ({ avatar, name, message }) => {
   const commentAuthorElement = newCommentElement.querySelector('.social__picture');
   const commentTextElement = newCommentElement.querySelector('.social__text');
 
-  commentAuthorElement.src = avatar;
-  commentAuthorElement.alt = name;
+  commentAuthorElement.setAttribute('src', avatar);
+  commentAuthorElement.setAttribute('alt', name);
   commentTextElement.textContent = message;
 
   return newCommentElement;