add photo scale and effects

Author: natalya87324

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>
 </body>
 

js/update-photo-mode.js

@@ -0,0 +1,167 @@
+const SCALE_STEP = 25;
+
+const Scale = {
+  MIN: 25,
+  MAX: 100
+};
+
+const scaleValueField = document.querySelector('.scale__control--value');
+const scaleDownBtn = document.querySelector('.scale__control--smaller');
+const scaleUpBtn = document.querySelector('.scale__control--bigger');
+const preview = document.querySelector('.img-upload__preview img');
+const sliderContainer = document.querySelector('.img-upload__effect-level');
+const sliderElement = document.querySelector('.effect-level__slider');
+const effectLevel = document.querySelector('.effect-level__value');
+const effectItems = document.querySelectorAll('.effects__radio');
+
+let currentScale = Number.parseInt(scaleValueField.value, 10);
+let currentEffect = null;
+
+const effects = [
+  {
+    name: 'chrome',
+    options: {
+      range: {
+        min: 0,
+        max: 1
+      },
+      start: 0,
+      step: 0.1
+    },
+    setFilter: (value) => `grayscale(${value})`
+  },
+  {
+    name: 'sepia',
+    options: {
+      range: {
+        min: 0,
+        max: 1
+      },
+      start: 0,
+      step: 0.1
+    },
+    setFilter: (value) => `sepia(${value})`
+  },
+  {
+    name: 'marvin',
+    options: {
+      range: {
+        min: 0,
+        max: 100
+      },
+      start: 0,
+      step: 1
+    },
+    setFilter: (value) => `invert(${value}%)`
+  },
+  {
+    name: 'phobos',
+    options: {
+      range: {
+        min: 0,
+        max: 3
+      },
+      start: 0,
+      step: 0.1
+    },
+    setFilter: (value) => `blur(${value}px)`
+  },
+  {
+    name: 'heat',
+    options: {
+      range: {
+        min: 1,
+        max: 3
+      },
+      start: 1,
+      step: 0.1
+    },
+    setFilter: (value) => `brightness(${value})`
+  },
+];
+
+const changeScale = () => {
+  if (currentScale < Scale.MIN) {
+    currentScale = Scale.MIN;
+  }
+
+  if (currentScale > Scale.MAX) {
+    currentScale = Scale.MAX;
+  }
+
+  scaleValueField.value = `${currentScale}%`;
+  preview.style.transform = `scale(${currentScale / 100})`;
+};
+
+const resetScale = () => {
+  currentScale = Scale.MAX;
+  preview.style.transform = `scale(${currentScale / 100})`;
+};
+
+const resetSlider = () => {
+  currentEffect = null;
+  sliderContainer.style.display = 'none';
+  preview.style.filter = '';
+};
+
+const onScaleDown = () => {
+  currentScale -= SCALE_STEP;
+  changeScale();
+};
+
+const onScaleUp = () => {
+  currentScale += SCALE_STEP;
+  changeScale();
+};
+
+function onEffectItemClick() {
+  currentEffect = effects.find((effect) => effect.name === this.value);
+  if (!currentEffect) {
+    resetSlider();
+    return;
+  }
+  sliderContainer.style.display = '';
+  sliderElement.noUiSlider.updateOptions(currentEffect.options);
+  preview.style.filter = currentEffect.setFilter(currentEffect.options.start);
+}
+
+const updateScale = () => {
+  scaleUpBtn.addEventListener('click', onScaleUp);
+  scaleDownBtn.addEventListener('click', onScaleDown);
+};
+
+const updateEffect = () => {
+
+  noUiSlider.create(sliderElement, {
+    range: {
+      min: 0,
+      max: 100,
+    },
+    start: 100,
+    step: 1,
+    connect: 'lower',
+    format: {
+      to: function (value) {
+        if (Number.isInteger(value)) {
+          return value.toFixed(0);
+        }
+        return value.toFixed(1);
+      },
+      from: function (value) {
+        return parseFloat(value);
+      },
+    }
+  });
+
+  sliderElement.noUiSlider.on('update', () => {
+    if (currentEffect) {
+      effectLevel.value = sliderElement.noUiSlider.get();
+      preview.style.filter = currentEffect.setFilter(effectLevel.value);
+    }
+  });
+
+  effectItems.forEach((item) => item.addEventListener('click', onEffectItemClick));
+};
+
+
+export { updateScale, resetScale, updateEffect, resetSlider };

js/upload-photo.js

@@ -1,4 +1,5 @@
 import { toggleClass, isEscapeKey } from './util.js';
+import { updateScale, resetScale, updateEffect, resetSlider } from './update-photo-mode.js';
 
 const HASHTAG_MAX_COUNT = 5;
 
@@ -89,12 +90,9 @@ const validateHashtags = (value) => {
 pristine.addValidator(photoDescriptionField, validatePhotoDescription, getDescriptionErrorMessage);
 pristine.addValidator(hashtagInput, validateHashtags, getHashtagErrorMessage);
 
+
 const toggleSubmitBtn = () => {
-  if (pristine.validate()) {
-    photoSubmitBtn.disabled = false;
-  } else {
-    photoSubmitBtn.disabled = true;
-  }
+  photoSubmitBtn.disabled = !pristine.validate();
 };
 
 const onHashtagInput = () => toggleSubmitBtn();
@@ -113,6 +111,8 @@ const resetForm = () => {
     });
   }
   photoUploadForm.reset();
+  resetScale();
+  resetSlider();
 };
 
 const onCancelPhotoUpload = (evt) => {
@@ -139,6 +139,7 @@ function openPhotoUploadForm() {
   document.addEventListener('keydown', onPhotoUploadEscKey);
   toggleModal();
   toggleSubmitBtn();
+  resetSlider();
 }
 
 function closePhotoUploadForm() {
@@ -161,6 +162,8 @@ const initPhotoUploadForm = () => {
   cancelPhotoUploadBtn.addEventListener('click', onCancelPhotoUpload);
   hashtagInput.addEventListener('input', onHashtagInput);
   photoDescriptionField.addEventListener('input', onDescriptionInput);
+  updateScale();
+  updateEffect();
 };