Merge pull request #15 from Daniil888-m/module9-task2

Помощь друга

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>
@@ -235,6 +236,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
   <script src="vendor/pristine/pristine.min.js"></script>
+  <script src="vendor/nouislider/nouislider.js"></script>
   <script src="js/main.js" type="module"></script>
   <script src="js/functions.js"></script>
 </body>

js/consts.js

@@ -35,7 +35,57 @@ const MESSAGES = [
   'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
   'Лица у людей на фотке перекошены, как будто их избивают.Как можно было поймать такой неудачный момент ? !',
 ];
+const FILTERS = {
+  chrome: {
+    MIN_VALUE: 0,
+    MAX_VALUE: 1,
+    STEP: 0.1,
+    UNIT_OF_MEASUREMENT: '',
+    EFFECT: 'grayscale'
+
+  },
+  sepia: {
+    MIN_VALUE: 0,
+    MAX_VALUE: 1,
+    STEP: 0.1,
+    UNIT_OF_MEASUREMENT: '',
+    EFFECT: 'sepia'
+
+  },
+  marvin: {
+    MIN_VALUE: 0,
+    MAX_VALUE: 100,
+    STEP: 1,
+    UNIT_OF_MEASUREMENT: '%',
+    EFFECT: 'invert'
+
+  },
+  phobos: {
+    MIN_VALUE: 0,
+    MAX_VALUE: 3,
+    STEP: 0.1,
+    UNIT_OF_MEASUREMENT: 'px',
+    EFFECT: 'blur'
+
+  },
+  heat: {
+    MIN_VALUE: 1,
+    MAX_VALUE: 3,
+    STEP: 0.1,
+    UNIT_OF_MEASUREMENT: '',
+    EFFECT: 'brightness'
+  },
+
+};
+const SCALE = {
+  MAX_SCALE: 100,
+  MIN_SCALE: 25,
+  SCALE_STEP: 25,
+};
 const PHOTOS_COUNT = 25;
 const COMMENTS_STEP = 5;
 
-export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT, COMMENTS_STEP };
+
+export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT, COMMENTS_STEP, FILTERS, SCALE };
+
+

js/upload-form.js

@@ -1,4 +1,5 @@
 import { show, hide } from './utils.js';
+import { SCALE, FILTERS } from './consts.js';
 const uploadForm = document.querySelector('#upload-select-image');
 const uploadInput = uploadForm.querySelector('.img-upload__input');
 const uploadOverlay = uploadForm.querySelector('.img-upload__overlay');
@@ -81,15 +82,14 @@ pristine.addValidator(descriptionInput, (value) => {
 }, 'Максимальная длина комментария 140 символов');
 function onUploadOverlayKeydown(e) {
   if (e.key === 'Escape') {
-    closeUploadOverlay();
+    closeUploadOverlay(e);
   }
 }
 
 function closeUploadOverlay(e) {
   document.removeEventListener('keydown', onUploadOverlayKeydown);
-  if (e) {
-    e.preventDefault();
-  }
+  e.preventDefault();
+
   hide(uploadOverlay);
   document.body.classList.remove('modal-open');
   uploadForm.reset();
@@ -103,6 +103,11 @@ uploadInput.addEventListener('change', () => {
 function showUploadOverlay() {
   show(uploadOverlay);
   document.body.classList.add('modal-open');
+  uploadForm.querySelector('input[name="effect"][value="none"]').dispatchEvent(new Event('change', {
+    bubbles: true
+  }));
+  changeImgScale();
+
 }
 
 uploadFormCancelElem.addEventListener('click', closeUploadOverlay);
@@ -114,3 +119,98 @@ uploadForm.addEventListener('submit', (e) => {
 
 });
 
+//FILTERS FUNCTIONALITY
+const uploadFormPreviewImg = uploadForm.querySelector('.img-upload__preview');
+const scaleControl = uploadForm.querySelector('.scale__control--value');
+const effectsSlider = uploadForm.querySelector('.effect-level__slider');
+const effectsValue = uploadForm.querySelector('.effect-level__value');
+const sliderContainer = uploadForm.querySelector('.img-upload__effect-level');
+
+function onSmallerBtnClick(e) {
+  e.preventDefault();
+  updateScale(false);
+  changeImgScale();
+}
+function onBiggerBtnClick(e) {
+  e.preventDefault();
+  updateScale(true);
+  changeImgScale();
+}
+function updateScale(isIncreasing) {
+  let scaleValue = parseInt(scaleControl.value, 10);
+
+  scaleValue = isIncreasing
+    ? scaleValue + SCALE.SCALE_STEP
+    : scaleValue - SCALE.SCALE_STEP;
+
+  scaleValue = Math.max(SCALE.MIN_SCALE, Math.min(SCALE.MAX_SCALE, scaleValue));
+
+  scaleControl.value = `${scaleValue}%`;
+}
+
+function changeImgScale() {
+  uploadFormPreviewImg.style.transform = `scale(${parseFloat(scaleControl.value) / 100})`;
+
+}
+uploadForm.querySelector('.scale__control--smaller').addEventListener('click', onSmallerBtnClick);
+uploadForm.querySelector('.scale__control--bigger').addEventListener('click', onBiggerBtnClick);
+
+noUiSlider.create(effectsSlider, {
+  range: {
+    max: 1,
+    min: 0,
+  },
+  step: 0.1,
+  start: 1,
+  format: {
+    to: function (value) {
+      if (!Number.isInteger(value)) {
+        return value.toFixed(1);
+      }
+      return value;
+    },
+    from: function (value) {
+      return value;
+    }
+  }
+});
+
+function updateEffectsSlider(effect) {
+  effectsSlider.noUiSlider.updateOptions({
+    range: {
+      max: FILTERS[effect].MAX_VALUE,
+      min: FILTERS[effect].MIN_VALUE,
+    },
+    step: FILTERS[effect].STEP,
+    start: FILTERS[effect].MAX_VALUE,
+  });
+}
+
+function hideEffectsContainer() {
+  hide(sliderContainer);
+  effectsValue.value = 0;
+  uploadFormPreviewImg.style.filter = 'none';
+}
+
+effectsSlider.noUiSlider.on('update', () => {
+  effectsValue.value = effectsSlider.noUiSlider.get();
+  const currentEffect = uploadForm.querySelector('input[name="effect"]:checked').value;
+  if (!(currentEffect === 'none')) {
+    uploadFormPreviewImg.style.filter = `${FILTERS[currentEffect].EFFECT}(${effectsValue.value + FILTERS[currentEffect].UNIT_OF_MEASUREMENT}`;
+  }
+});
+
+uploadForm.querySelector('.img-upload__effects').addEventListener('change', (e) => {
+  const currentEffect = e.target.closest('input[name="effect"]:checked').value;
+  if (currentEffect) {
+    if (currentEffect === 'none') {
+      hideEffectsContainer();
+    } else {
+      show(sliderContainer);
+      updateEffectsSlider(currentEffect);
+      uploadFormPreviewImg.style.filter = `${FILTERS[currentEffect].EFFECT}(${effectsValue.value + FILTERS[currentEffect].UNIT_OF_MEASUREMENT}`;
+    }
+  }
+});
+
+hideEffectsContainer();