Merge pull request #11 from NikitaKir98/module9-task2

Помощь друга

Author: ILokalin

index.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./vendor/nouislider/nouislider.css">
   <title>Кекстаграм</title>
 </head>
 
@@ -234,6 +235,7 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="./js/main.js" type="module"></script>
+    <script src="./vendor/nouislider/nouislider.js"></script>
     <script src="./vendor/pristine/pristine.min.js"></script>
 </body>
 </html>

js/filters.js

@@ -0,0 +1,90 @@
+const
+  EFFECTS_STEP = 0.01,
+  MAX_BLUR_VALUE = 3,
+  MAX_BRIGHTNESS = 3;
+
+const slider = {
+  MIN: 0,
+  MAX: 100,
+  STEP: 1,
+};
+
+const uploadForm = document.querySelector('.img-upload__form');
+const effectsList = uploadForm.querySelector('.effects__list');
+const imgPreview = uploadForm.querySelector('.img-upload__preview');
+const image = imgPreview.querySelector('img');
+const imgSliderUpload = uploadForm.querySelector('.img-upload__effect-level');
+const effectValue = uploadForm.querySelector('.effect-level__value');
+const sliderElement = uploadForm.querySelector('.effect-level__slider');
+
+let currentEffect = '';
+
+const effects = {
+  none: () => {
+    imgSliderUpload.classList.add('visually-hidden');
+    return 'none';
+  },
+  chrome: () => {
+    imgSliderUpload.classList.remove('visually-hidden');
+    return `grayscale(${parseInt(effectValue.value, 10) * EFFECTS_STEP})`;
+  },
+  sepia: () => {
+    imgSliderUpload.classList.remove('visually-hidden');
+    return `sepia(${parseInt(effectValue.value, 10) * EFFECTS_STEP})`;
+  },
+  marvin: () => {
+    imgSliderUpload.classList.remove('visually-hidden');
+    return `invert(${Math.floor(effectValue.value, 10)}%)`;
+  },
+  phobos: () => {
+    imgSliderUpload.classList.remove('visually-hidden');
+    return `blur(${(parseInt(effectValue.value, 10) * MAX_BLUR_VALUE) * EFFECTS_STEP}px)`;
+  },
+  heat: () => {
+    imgSliderUpload.classList.remove('visually-hidden');
+    return `brightness(${(parseInt(effectValue.value, 10) * MAX_BRIGHTNESS) * EFFECTS_STEP})`;
+  },
+};
+
+effects.none();
+
+const onEffectsListClick = (event) => {
+  const { target } = event;
+  if (!target.classList.contains('effects__preview')) {
+    return;
+  }
+
+  sliderElement.noUiSlider.set(slider.MAX);
+  effectValue.value = slider.MAX;
+  currentEffect = target.classList[1].replace('effects__preview--', '');
+  image.style.filter = effects[currentEffect]();
+};
+
+effectsList.addEventListener('click', onEffectsListClick);
+
+noUiSlider.create(sliderElement, {
+  range: {
+    min: slider.MIN,
+    max: slider.MAX,
+  },
+  start: slider.MAX,
+  step: slider.STEP,
+  connect: 'lower',
+});
+
+sliderElement.noUiSlider.on('slide', (value) => {
+  effectValue.value = [...value];
+  image.style.filter = effects[currentEffect]();
+});
+
+const resetEffect = () => {
+  image.style.removeProperty('filter');
+  effectValue.value = '';
+  sliderElement.noUiSlider.updateOptions({
+    start: slider.MAX,
+  });
+  effectsList.querySelector('#effect-none').checked = true;
+  effects.none();
+};
+
+export { resetEffect };

js/photo_upload_form.js

@@ -1,5 +1,7 @@
 import { isEscapeKey } from './util.js';
 import { validateDescription, validateHashtags, getError } from './validation.js';
+import { changeZoom, resetZoom } from './zoom.js';
+import { resetEffect } from './filters.js';
 
 const GET_ERROR_TAGS = 'tags';
 const GET_ERROR_DESCRIPTION = 'description';
@@ -12,6 +14,9 @@ const inputDescription = uploadForm.querySelector('.text__description');
 const inputHashtags = uploadForm.querySelector('.text__hashtags');
 const uploadSubmit = uploadForm.querySelector('.img-upload__submit');
 const uploadFile = document.querySelector('#upload-file');
+const scaleControlSmaller = uploadForm.querySelector('.scale__control--smaller');
+const scaleControlBigger = uploadForm.querySelector('.scale__control--bigger');
+
 
 const pristine = new Pristine(uploadForm, {
   classTo: 'img-upload__field-wrapper',
@@ -45,6 +50,9 @@ const onDocumentKeydown = (event) => {
   }
 };
 
+scaleControlSmaller.addEventListener('click', () => changeZoom(-1));
+scaleControlBigger.addEventListener('click', () => changeZoom());
+
 const onClickFormUpload = () => {
   body.classList.add('modal-open');
   overlayForm.classList.remove('hidden');
@@ -53,6 +61,8 @@ const onClickFormUpload = () => {
 };
 
 const closeFormUpload = () => {
+  resetZoom();
+  resetEffect();
   overlayForm.classList.add('hidden');
   body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);

js/zoom.js

@@ -0,0 +1,29 @@
+const scaleControlValue = document.querySelector('.scale__control--value');
+const imgPreview = document.querySelector('.img-upload__preview').querySelector('img');
+
+const zoomParameters = {
+  min: 25,
+  max: 100,
+  step: 25,
+};
+
+const changeZoom = (facktor = 1) => {
+  let size = parseInt(scaleControlValue.value, 10) + (zoomParameters.step * facktor);
+
+  if (size < zoomParameters.min){
+    size = zoomParameters.min;
+  }
+
+  if (size > zoomParameters.max){
+    size = zoomParameters.max;
+  }
+  scaleControlValue.value = `${size}%`;
+  imgPreview.style.transform = `scale(${size * 0.01})`;
+};
+
+const resetZoom = () => {
+  imgPreview.style.removeProperty('transform');
+  scaleControlValue.value = '100%';
+};
+
+export {changeZoom, resetZoom};