Помощь друга

index.html

@@ -5,6 +5,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>
@@ -232,7 +233,8 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
-  <script type="module" src="./js/main.js"></script>
   <script src="./vendor/pristine/pristine.min.js"></script>
+  <script src="./vendor/nouislider/nouislider.js"></script>
+  <script type="module" src="./js/main.js"></script>
 </body>
 </html>

js/filters.js

@@ -0,0 +1,81 @@
+const effectsList = document.querySelector('.effects__list');
+const previewPhoto = document.querySelector('.img-upload__preview').querySelector('img');
+const effectLevel = document.querySelector('.img-upload__effect-level');
+const sliderEffect = document.querySelector('.effect-level__slider');
+const valueEffect = document.querySelector('.effect-level__value');
+
+const EFFECT_SETTINGS = {
+  none: {
+    hidden: true,
+    filter: null,
+  },
+  chrome: {
+    range: { min: 0, max: 1 },
+    start: 1,
+    step: 0.1,
+    filter: (value) => `grayscale(${value})`
+  },
+  sepia: {
+    range: { min: 0, max: 1 },
+    start: 1,
+    step: 0.1,
+    filter: (value) => `sepia(${value})`
+  },
+  marvin: {
+    range: { min: 0, max: 100 },
+    start: 100,
+    step: 1,
+    filter: (value) => `invert(${value}%)`
+  },
+  phobos: {
+    range: { min: 0, max: 3 },
+    start: 3,
+    step: 0.1,
+    filter: (value) => `blur(${value}px)`
+  },
+  heat: {
+    range: { min: 1, max: 3 },
+    start: 3,
+    step: 0.1,
+    filter: (value) => `brightness(${value})`
+  }
+};
+
+noUiSlider.create(sliderEffect, {
+  range: {
+    min: 0,
+    max: 100,
+  },
+  start: 0,
+  step: 1,
+  connect: 'lower',
+});
+
+sliderEffect.noUiSlider.on('update', () => {
+  valueEffect.value = sliderEffect.noUiSlider.get();
+});
+effectLevel.classList.add('hidden');
+
+function onEffectListChange (evt) {
+  const effect = evt.target.value;
+  const settings = EFFECT_SETTINGS[effect];
+
+  if (settings.hidden) {
+    effectLevel.classList.add('hidden');
+    previewPhoto.removeAttribute('style');
+    return;
+  }
+
+  effectLevel.classList.remove('hidden');
+  sliderEffect.noUiSlider.updateOptions({
+    range: settings.range,
+    start: settings.start,
+    step: settings.step,
+  });
+  valueEffect.value = sliderEffect.noUiSlider.get();
+  sliderEffect.noUiSlider.on('update', () => {
+    previewPhoto.style.filter = settings.filter(valueEffect.value);
+  });
+}
+
+effectsList.addEventListener('change', onEffectListChange);

js/form.js

@@ -7,6 +7,8 @@ const body = document.querySelector('body');
 const inputUploadPhoto = formUploadPhoto.querySelector('#upload-file');
 const inputHashtagsPhoto = document.querySelector('.text__hashtags');
 const inputDescriptionPhoto = document.querySelector('.text__description');
+const previewPhoto = document.querySelector('.img-upload__preview').querySelector('img');
+const effectLevel = document.querySelector('.img-upload__effect-level');
 const regularForHashtag = /^#[a-zа-яё0-9]{1,19}$/i;
 
 const onDocumentKeydown = (evt) => {
@@ -32,6 +34,8 @@ function closeOverlayPhoto () {
   inputUploadPhoto.value = '';
   inputHashtagsPhoto.value = '';
   inputDescriptionPhoto.value = '';
+  previewPhoto.removeAttribute('style');
+  effectLevel.classList.add('hidden');
 
   cancelUploadPhoto.removeEventListener('click', onCloseOverlayPhotoClick);
   document.removeEventListener('keydown', onDocumentKeydown);

js/main.js

@@ -1,5 +1,7 @@
 import {morePosts} from './data.js';
 import {drawPictures} from './thumbnails.js';
 import './form.js';
+import './scale.js';
+import './filters.js';
 
 drawPictures(morePosts);

js/scale.js

@@ -0,0 +1,25 @@
+const previewPhoto = document.querySelector('.img-upload__preview').querySelector('img');
+const controlSmaller = document.querySelector('.scale__control--smaller');
+const controlBigger = document.querySelector('.scale__control--bigger');
+const controlValue = document.querySelector('.scale__control--value');
+const scaleStep = 0.25;
+let scaleValue = 1;
+
+function onSmallerClick () {
+  if (scaleValue > scaleStep) {
+    scaleValue -= scaleStep;
+    previewPhoto.style.transform = `scale(${scaleValue})`;
+    controlValue.value = `${scaleValue * 100}%`;
+  }
+}
+
+function onBiggerClick () {
+  if (scaleValue < 1) {
+    scaleValue += scaleStep;
+    previewPhoto.style.transform = `scale(${scaleValue})`;
+    controlValue.value = `${scaleValue * 100}%`;
+  }
+}
+
+controlSmaller.addEventListener('click', onSmallerClick);
+controlBigger.addEventListener('click', onBiggerClick);

js/thumbnails.js

@@ -19,7 +19,9 @@ function createPictureElement (postData) {
 
 function onPictureListClick(evt) {
   const card = evt.target.closest('.picture');
-  if (!card) return;
+  if (!card) {
+    return;
+  }
 
   openBigPicture(card.dataset.photoId);
 }