Merge branch 'htmlacademy-javascript:master' into master

Author: Vip2045

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>
@@ -252,6 +253,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>
 
 

js/big-picture.js

@@ -1,4 +1,5 @@
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-use-before-define */
+
 const COMMENTS_STEP = 5;
 const body = document.body;
 const modalNode = document.querySelector('.big-picture');
@@ -24,13 +25,13 @@ const showModal = (isVisible = true) => {
     modalNode.classList.remove('hidden');
     body.classList.add('modal-open');
 
-    // eslint-disable-next-line no-use-before-define
+
     document.addEventListener('keydown', onDocumentKeydown);
     return;
   }
   modalNode.classList.add('hidden');
   body.classList.remove('modal-open');
-  // eslint-disable-next-line no-use-before-define
+
   document.removeEventListener('keydown', onDocumentKeydown);
 };
 

js/constans.js

@@ -1,3 +1,88 @@
+export const Effects = {
+  CHROME: 'chrome',
+  SEPIA: 'sepia',
+  PHOBOS: 'phobos',
+  HEAT: 'heat',
+  NONE: 'none',
+  MARVIN: 'marvin',
+};
+
+export const EffectsSettings = {
+  [Effects.CHROME]: {
+    slider: {
+      range: {
+        min: 0,
+        max: 1,
+      },
+      start: 1,
+      step: 0.1,
+    },
+    style: 'grayscale',
+    units: '',
+  },
+  [Effects.SEPIA]: {
+    slider: {
+      range: {
+        min: 0,
+        max: 1,
+      },
+      start: 1,
+      step: 0.1,
+    },
+    style: 'sepia',
+    units: '',
+  },
+  [Effects.PHOBOS]: {
+    slider: {
+      range: {
+        min: 0,
+        max: 3,
+      },
+      start: 3,
+      step: 0.1,
+    },
+    style: 'blur',
+    units: 'px',
+  },
+  [Effects.HEAT]: {
+    slider: {
+      range: {
+        min: 1,
+        max: 3,
+      },
+      start: 3,
+      step: 0.1,
+    },
+    style: 'brightness',
+    units: '',
+  },
+  [Effects.NONE]: {
+    slider: {
+      range: {
+        min: 0,
+        max: 100,
+      },
+      start: 100,
+      step: 1,
+      connect: 'lower',
+    },
+    style: '',
+    units: '',
+  },
+  [Effects.MARVIN]: {
+    slider: {
+      range: {
+        min: 0,
+        max: 100,
+      },
+      start: 100,
+      step: 1,
+    },
+    style: 'invert',
+    units: '%',
+  },
+};
+
 export const MIN_LIKES = 15;
 export const MAX_LIKES = 200;
 export const MIN_COMMENTS = 0;

js/data.js

@@ -52,7 +52,7 @@ const getPhoto = (i) => ({
 export const getPhotos = (n) => {
   const photos = [];
   for (let i = 1; i <= n; i++) {
-    photos.push(getPhoto(i)); // getPhotos(i)
+    photos.push(getPhoto(i));
   }
   return photos;
 };

js/effects.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-shadow */
+import { Effects, EffectsSettings } from './constans.js';
+
+const sliderNode = document.querySelector('.effect-level__slider');
+const listNode = document.querySelector('.effects__list');
+const previewNode = document.querySelector('.img-upload__preview img');
+const valueNode = document.querySelector('.effect-level__value');
+const sliderContainerNode = document.querySelector('.effect-level');
+
+let currentEffect = Effects.NONE;
+const { slider } = EffectsSettings[currentEffect];
+
+noUiSlider.create(sliderNode, slider);
+
+const render = () => {
+  if (currentEffect === Effects.NONE) {
+    previewNode.style.filter = '';
+    return;
+  }
+  const { style, units } = EffectsSettings[currentEffect];
+  previewNode.style.filter = `${style}(${valueNode.value}${units})`;
+};
+
+sliderNode.noUiSlider.on('update', () => {
+  valueNode.value = sliderNode.noUiSlider.get();
+  render();
+});
+
+const updateSlider = () => {
+  const {slider} = EffectsSettings[currentEffect];
+  sliderNode.noUiSlider.updateOptions(slider);
+};
+
+const showSlider = (isVisible = true) => {
+  sliderContainerNode.classList.toggle('hidden', !isVisible);
+};
+
+listNode.addEventListener('change', ({ target }) => {
+  currentEffect = target.value;
+  showSlider(!(currentEffect === Effects.NONE));
+  updateSlider();
+  render();
+});
+
+export const resetEffects = () => {
+  currentEffect = Effects.NONE;
+  showSlider(false);
+  render();
+};
+
+resetEffects();

js/form.js

@@ -1,4 +1,6 @@
 import { isValid, resetValidation } from './validation.js';
+import { resetScale } from './scale.js';
+import { resetEffects } from './effects.js';
 
 const formNode = document.querySelector('#upload-select-image');
 const inputFileNode = document.querySelector('#upload-file');
@@ -8,14 +10,19 @@ const closeButtonNode = document.querySelector('#upload-cancel');
 const closeModal = () => {
   modalNode.classList.add('hidden');
 
+  formNode.reset();
+
   resetValidation();
+  resetScale();
+  resetEffects();
 };
 
 inputFileNode.addEventListener('change', () => {
   modalNode.classList.remove('hidden');
 });
 
-closeButtonNode.addEventListener('click', () => {
+closeButtonNode.addEventListener('click', (evt) => {
+  evt.preventDefault();
   closeModal();
 });
 
@@ -24,4 +31,3 @@ formNode.addEventListener('submit', (evt) => {
     evt.preventDefault();
   }
 });
-

js/main.js

@@ -2,6 +2,6 @@ import { getPhotos } from './data.js';
 import { renderCards } from './render-cards.js';
 import './form.js';
 
-// eslint-disable-next-line no-unused-vars
+
 const photos = getPhotos(25);
 renderCards(photos);

js/render-cards.js

@@ -1,7 +1,5 @@
-/* eslint-disable no-unused-vars */
 import { openModal } from './big-picture.js';
 
-/* eslint-disable no-console */
 const cardTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const cardsContainerNode = document.querySelector('.pictures');
 

js/scale.js

@@ -0,0 +1,36 @@
+const Scale = {
+  MIN: 25,
+  MAX: 100,
+  STEP: 25,
+  DEFAULT: 100
+};
+
+const minusButtonNode = document.querySelector('.scale__control--smaller');
+const plusButtonNode = document.querySelector('.scale__control--bigger');
+const inputNode = document.querySelector('.scale__control--value');
+const previewNode = document.querySelector('.img-upload__preview img');
+
+let currentScale;
+
+const render = () => {
+  inputNode.value = `${currentScale}%`;
+  previewNode.style.transform = `scale(${currentScale}%)`;
+};
+
+minusButtonNode.addEventListener('click', () => {
+  currentScale = currentScale - Scale.STEP > Scale.MIN ? currentScale - Scale.STEP : Scale.MIN;
+  render();
+});
+
+
+plusButtonNode.addEventListener('click', () => {
+  currentScale = currentScale + Scale.STEP < Scale.MAX ? currentScale + Scale.STEP : Scale.MAX;
+  render();
+});
+
+export const resetScale = () => {
+  currentScale = Scale.DEFAULT;
+  render();
+};
+
+resetScale();

js/validation.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 const formNode = document.querySelector('#upload-select-image');
 const descriptionNode = formNode.querySelector('.text__description');
 const hashtagsNode = formNode.querySelector('.text__hashtags');