Merge pull request #11 from Julyova/module9-task2

Author: keksobot

index.html

@@ -235,9 +235,11 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
 
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
+  <script src="vendor/nouislider/nouislider.min.js"></script>
+  <script src="vendor/pristine/pristine.min.js"></script>
   <script type="module" src="js/main.js"></script>
   <script type="module" src="js/functions.js"></script>
-  <script src="vendor/pristine/pristine.min.js"></script>
 
 </body>
 

js/effect.js

@@ -0,0 +1,117 @@
+const effectLevelSlider = document.querySelector('.effect-level__slider');
+const effectLevelValue = document.querySelector('.effect-level__value');
+const effectsRadioList = document.querySelectorAll('.effects__radio');
+const imgUploadPreview = document.querySelector('.img-upload__preview img');
+const effectLevelContainer = document.querySelector('.img-upload__effect-level');
+
+const EFFECTS = {
+  none: {
+    filter: null,
+    min: 0,
+    max: 100,
+    step: 1,
+    unit: ''
+  },
+  chrome: {
+    filter: 'grayscale',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    unit: ''
+  },
+  sepia: {
+    filter: 'sepia',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    unit: ''
+  },
+  marvin: {
+    filter: 'invert',
+    min: 0,
+    max: 100,
+    step: 1,
+    unit: '%'
+  },
+  phobos: {
+    filter: 'blur',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    unit: 'px'
+  },
+  heat: {
+    filter: 'brightness',
+    min: 1,
+    max: 3,
+    step: 0.1,
+    unit: ''
+  }
+};
+
+let currentEffect = 'none';
+
+const updateSliderOptions = (effect) => {
+  effectLevelSlider.noUiSlider.updateOptions({
+    range: {
+      min: effect.min,
+      max: effect.max
+    },
+    start: effect.max,
+    step: effect.step
+  });
+};
+
+const applyEffect = (value) => {
+  const effect = EFFECTS[currentEffect];
+
+  if (currentEffect === 'none') {
+    imgUploadPreview.style.filter = '';
+    effectLevelContainer.classList.add('hidden');
+    return;
+  }
+
+  effectLevelContainer.classList.remove('hidden');
+  imgUploadPreview.style.filter = `${effect.filter}(${value}${effect.unit})`;
+};
+
+const onSliderUpdate = () => {
+  const value = effectLevelSlider.noUiSlider.get();
+  effectLevelValue.value = value;
+  applyEffect(value);
+};
+
+const onEffectChange = (evt) => {
+  currentEffect = evt.target.value;
+  updateSliderOptions(EFFECTS[currentEffect]);
+  applyEffect(EFFECTS[currentEffect].max);
+};
+
+const resetEffect = () => {
+  currentEffect = 'none';
+  document.querySelector('#effect-none').checked = true;
+  imgUploadPreview.style.filter = '';
+  effectLevelContainer.classList.add('hidden');
+};
+
+const initEffect = () => {
+  noUiSlider.create(effectLevelSlider, {
+    range: {
+      min: 0,
+      max: 100
+    },
+    start: 100,
+    step: 1,
+    connect: 'lower'
+  });
+
+  effectLevelSlider.noUiSlider.on('update', onSliderUpdate);
+
+  effectsRadioList.forEach((radio) => {
+    radio.addEventListener('change', onEffectChange);
+  });
+
+  effectLevelContainer.classList.add('hidden');
+};
+
+export { initEffect, resetEffect };

js/form-upload.js

@@ -1,3 +1,6 @@
+import { initScale, resetScale } from './scale.js';
+import { initEffect, resetEffect } from './effect.js';
+
 const uploadFileInput = document.querySelector('.img-upload__input');
 const uploadOverlay = document.querySelector('.img-upload__overlay');
 const uploadForm = document.querySelector('#upload-select-image');
@@ -59,6 +62,8 @@ const closeForm = () => {
   document.body.classList.remove('modal-open');
   uploadForm.reset();
   pristine.reset();
+  resetScale();
+  resetEffect();
 };
 
 const onUploadFileInputChange = () => {
@@ -86,6 +91,8 @@ const onDocumentKeydown = (evt) => {
 };
 
 const initFormUpload = () => {
+  initScale();
+  initEffect();
   uploadFileInput.addEventListener('change', onUploadFileInputChange);
   uploadCancel.addEventListener('click', onUploadCancelClick);
   uploadForm.addEventListener('submit', onUploadFormSubmit);

js/scale.js

@@ -0,0 +1,42 @@
+const scaleControlSmaller = document.querySelector('.scale__control--smaller');
+const scaleControlBigger = document.querySelector('.scale__control--bigger');
+const scaleControlValue = document.querySelector('.scale__control--value');
+const imgUploadPreview = document.querySelector('.img-upload__preview img');
+
+const SCALE_STEP = 25;
+const SCALE_MIN = 25;
+const SCALE_MAX = 100;
+const SCALE_DEFAULT = 100;
+
+let currentScale = SCALE_DEFAULT;
+
+const updateScale = () => {
+  scaleControlValue.value = `${currentScale}%`;
+  imgUploadPreview.style.transform = `scale(${currentScale / 100})`;
+};
+
+const onScaleSmallerClick = () => {
+  if (currentScale > SCALE_MIN) {
+    currentScale -= SCALE_STEP;
+    updateScale();
+  }
+};
+
+const onScaleBiggerClick = () => {
+  if (currentScale < SCALE_MAX) {
+    currentScale += SCALE_STEP;
+    updateScale();
+  }
+};
+
+const resetScale = () => {
+  currentScale = SCALE_DEFAULT;
+  updateScale();
+};
+
+const initScale = () => {
+  scaleControlSmaller.addEventListener('click', onScaleSmallerClick);
+  scaleControlBigger.addEventListener('click', onScaleBiggerClick);
+};
+
+export { initScale, resetScale };