Merge pull request #13 from generalofgotei/module9-task2

js/form.js

@@ -1,5 +1,6 @@
 import { isEscapeKey } from './util.js';
 import { runValidator, stopValidator } from './validator.js';
+import { runImageEditor } from './image-editor.js';
 
 const imgUploadElement = document.querySelector('.img-upload__input');
 const imgEditElement = document.querySelector('.img-upload__overlay');
@@ -11,6 +12,7 @@ const newHashTagsElement = document.querySelector('.text__hashtags');
 const setupFormEventListeners = () => {
   imgUploadElement.addEventListener('change', () => {
     runValidator();
+    runImageEditor();
     imgEditElement.classList.remove('hidden');
     bodyContainerElement.classList.add('modal-open');
     imgEditCloseButtonElement.addEventListener('click', onClickCloseButton);

js/image-editor.js

@@ -0,0 +1,135 @@
+import '../vendor/nouislider/nouislider.js';
+import '../vendor/nouislider/nouislider.css';
+
+const buttonDecrementElement = document.querySelector('.scale__control--smaller');
+const buttonIncrementElement = document.querySelector('.scale__control--bigger');
+const scaleValueElement = document.querySelector('.scale__control--value');
+
+const sliderContainerElement = document.querySelector('.img-upload__effect-level');
+const sliderElement = sliderContainerElement.querySelector('.effect-level__slider');
+const effectLevelElement = sliderContainerElement.querySelector('.effect-level__value');
+const ImageElement = document.querySelector('.img-upload__preview');
+const effectListElement = document.querySelector('.effects__list');
+const originalElement = effectListElement.querySelector('#effect-none');
+
+const SCALE = {
+  MIN: 0.25,
+  MAX: 1,
+  STEP: 0.25,
+  DEFAULT: 1,
+};
+
+const EFFECTS = {
+  chrome: {
+    MIN: 0,
+    MAX: 1,
+    START: 1,
+    STEP: 0.1,
+    STYLE: 'grayscale',
+    UNIT: '',
+  },
+  sepia: {
+    MIN: 0,
+    MAX: 1,
+    START: 1,
+    STEP: 0.1,
+    STYLE: 'sepia',
+    UNIT: '',
+  },
+  marvin: {
+    MIN: 0,
+    MAX: 100,
+    START: 100,
+    STEP: 1,
+    STYLE: 'invert',
+    UNIT: '%',
+  },
+  phobos: {
+    MIN: 0,
+    MAX: 3,
+    START: 3,
+    STEP: 0.1,
+    STYLE: 'blur',
+    UNIT: 'px',
+  },
+  heat: {
+    MIN: 0,
+    MAX: 3,
+    START: 3,
+    STEP: 0.1,
+    STYLE: 'brightness',
+    UNIT: '',
+  },
+};
+
+
+// Создаем редактирование масштаба
+let scaleValue = SCALE.DEFAULT;
+
+const formatScale = (value) => `${value * 100}%`;
+
+const changeScale = (value) => {
+  scaleValue = value;
+  ImageElement.style.transform = `scale(${scaleValue})`;
+  scaleValueElement.value = formatScale(scaleValue);
+};
+
+const decrementScale = () => {
+  if (scaleValue > SCALE.MIN) {
+    changeScale(scaleValue - SCALE.STEP);
+  }
+};
+
+const incrementScale = () => {
+  if (scaleValue < SCALE.MAX) {
+    changeScale(scaleValue + SCALE.STEP);
+  }
+};
+
+// Создаем слайдер
+const createSlider = ({ MIN, MAX, START, STEP, STYLE, UNIT }) => {
+  noUiSlider.create(sliderElement, {
+    range: { min: MIN, max: MAX },
+    start: START,
+    step: STEP,
+    connect: 'lower',
+    format: {
+      to: (value) => value.toFixed(1),
+      from: (value) => parseFloat(value)
+    }
+  });
+
+  sliderElement.noUiSlider.on('update', () => {
+    const value = sliderElement.noUiSlider.get();
+    effectLevelElement.value = value;
+    ImageElement.style.filter = `${STYLE}(${value}${UNIT})`;
+  });
+};
+
+const addEffect = () => {
+  if (sliderElement.noUiSlider) {
+    sliderElement.noUiSlider.destroy();
+  }
+  if (originalElement.checked) {
+    ImageElement.style.filter = 'none';
+    sliderContainerElement.classList.add('hidden');
+    return;
+  }
+  sliderContainerElement.classList.remove('hidden');
+
+  const checkedEffect = effectListElement.querySelector('input:checked').value;
+  createSlider(EFFECTS[checkedEffect]);
+};
+
+const runImageEditor = () => {
+  ImageElement.style.filter = 'none';
+  sliderContainerElement.classList.add('hidden');
+  effectListElement.addEventListener('change', addEffect);
+  scaleValue = SCALE.DEFAULT;
+  ImageElement.style.transform = `scale(${SCALE.DEFAULT})`;
+  scaleValueElement.value = formatScale(scaleValue);
+  buttonDecrementElement.addEventListener('click', decrementScale);
+  buttonIncrementElement.addEventListener('click', incrementScale);
+};
+
+export { runImageEditor };

js/main.js

@@ -7,3 +7,4 @@ const photoCollection = generateArrObj();
 renderGallery(photoCollection);
 setupPictureEventListeners(photoCollection);
 setupFormEventListeners();
+

js/photo-modal.js

@@ -2,31 +2,31 @@ import { isEscapeKey } from './util.js';
 import { initComments } from './comments-loader.js';
 
 // Общий контейнер
-const bodyContainerElement = document.body;
+const body = document.body;
 
 // Контейнер с картинками
 const picturesContainerElement = document.querySelector('.pictures');
 
 // Элементы большой картинки
-const bigPictureContainerElement = document.querySelector('.big-picture');
-const bigPictureOverlayElement = document.querySelector('.overlay');
-const bigPictureCloseButtonElement = bigPictureContainerElement.querySelector('.big-picture__cancel');
-const bigPictureImageElement = bigPictureContainerElement.querySelector('.big-picture__img img');
-const bigPictureSocialElement = bigPictureContainerElement.querySelector('.big-picture__social');
-const bigPictureLikesElement = bigPictureSocialElement.querySelector('.likes-count');
-const bigPictureDescriptionElement = bigPictureSocialElement.querySelector('.social__caption');
+const containerElement = document.querySelector('.big-picture');
+const overlayElement = document.querySelector('.overlay');
+const closeButtonElement = containerElement.querySelector('.big-picture__cancel');
+const imageElement = containerElement.querySelector('.big-picture__img img');
+const socialElement = containerElement.querySelector('.big-picture__social');
+const likesElement = socialElement.querySelector('.likes-count');
+const descriptionElement = socialElement.querySelector('.social__caption');
 
 // Рендер большой картинки
 const renderBigPicture = ({ url, likes, comments, description }) => {
-  bigPictureImageElement.src = url;
-  bigPictureLikesElement.textContent = likes;
-  bigPictureDescriptionElement.textContent = description;
-  bigPictureCloseButtonElement.addEventListener('click', onClickCloseButton);
-  bigPictureOverlayElement.addEventListener('click', onOverlayClick);
+  imageElement.src = url;
+  likesElement.textContent = likes;
+  descriptionElement.textContent = description;
+  closeButtonElement.addEventListener('click', onClickCloseButton);
+  overlayElement.addEventListener('click', onOverlayClick);
   document.addEventListener('keydown', onKeydownDocument);
   initComments(comments); // Инициализируем комментарии
-  bigPictureContainerElement.classList.remove('hidden'); // включаем видимость контейнера большой картинки
-  bodyContainerElement.classList.add('modal-open'); // блокируем прокрутку body
+  containerElement.classList.remove('hidden'); // включаем видимость контейнера большой картинки
+  body.classList.add('modal-open'); // блокируем прокрутку body
 };
 
 // Вызов закрытия картинки нажатием на закрывающий элемент
@@ -36,7 +36,7 @@ function onClickCloseButton () {
 
 // Вызов закрытия картинки нажатием мимо модального окна
 function onOverlayClick(evt) {
-  if (evt.target === bigPictureOverlayElement) {
+  if (evt.target === overlayElement) {
     closeBigPicture();
   }
 }
@@ -50,17 +50,21 @@ function onKeydownDocument (evt) {
 }
 
 function closeBigPicture () {
-  bigPictureCloseButtonElement.removeEventListener('click', onClickCloseButton);
-  bigPictureContainerElement.removeEventListener('click', onOverlayClick);
+  closeButtonElement.removeEventListener('click', onClickCloseButton);
+  containerElement.removeEventListener('click', onOverlayClick);
   document.removeEventListener('keydown', onKeydownDocument);
-  bigPictureContainerElement.classList.add('hidden');
-  bodyContainerElement.classList.remove('modal-open');
+  containerElement.classList.add('hidden');
+  body.classList.remove('modal-open');
 }
 
 // Функция добавления обработчика событий на контейнер с картинками и вычисление ID картинки, по которой был клик
 const setupPictureEventListeners = (photoCollection) => {
   picturesContainerElement.addEventListener('click', (evt) => {
-    const id = evt.target.closest('.picture').dataset.pictureId; // поиск по установленному атрибуту data-set-id
+    const target = evt.target.closest('.picture');
+    if (!target) {
+      return;
+    }
+    const id = target.dataset.pictureId; // поиск по установленному атрибуту data-set-id
     if (id) {
       const foundedPhoto = photoCollection.find((picture) => picture.id === Number(id));
       renderBigPicture(foundedPhoto);

js/thumbnails.js

@@ -1,19 +1,19 @@
 const renderGallery = (userPictures) => {
-  const picturesContainer = document.querySelector('.pictures');
-  const pictureTemplate = document.querySelector('#picture').content.querySelector('a');
+  const picturesContainerElement = document.querySelector('.pictures');
+  const pictureTemplateElement = document.querySelector('#picture').content.querySelector('a');
 
-  const pictureFragment = document.createDocumentFragment();
+  const pictureFragmentElement = document.createDocumentFragment();
 
   userPictures.forEach(({id, url, description, likes, comments}) => {
-    const pictureElement = pictureTemplate.cloneNode(true);
+    const pictureElement = pictureTemplateElement.cloneNode(true);
     pictureElement.dataset.pictureId = id; // Устанавливает атрибут data-set-id
     pictureElement.querySelector('.picture__img').src = url;
     pictureElement.querySelector('.picture__img').alt = description;
     pictureElement.querySelector('.picture__likes').textContent = likes;
     pictureElement.querySelector('.picture__comments').textContent = comments.length;
-    pictureFragment.append(pictureElement);
+    pictureFragmentElement.append(pictureElement);
   });
-  picturesContainer.append(pictureFragment);
+  picturesContainerElement.append(pictureFragmentElement);
 };
 
 export { renderGallery };

js/validator.js

@@ -4,12 +4,12 @@ const MAX_LENGTH = 140;
 const MAX_QTY = 5;
 
 
-const imgEditForm = document.querySelector('.img-upload__form');
-const newCommentElement = document.querySelector('.text__description');
-const newHashTagsElement = document.querySelector('.text__hashtags');
-const submitButtonElement = document.querySelector('.img-upload__submit');
+const imgEditFormElement = document.querySelector('.img-upload__form');
+const newCommentElement = imgEditFormElement.querySelector('.text__description');
+const newHashTagsElement = imgEditFormElement.querySelector('.text__hashtags');
+const submitButtonElement = imgEditFormElement.querySelector('.img-upload__submit');
 
-const pristine = new Pristine(imgEditForm, {
+const pristine = new Pristine(imgEditFormElement, {
   classTo: 'img-upload__field-wrapper',
   errorClass: 'img-upload__field-wrapper--error',
   errorTextParent: 'img-upload__field-wrapper',