Merge pull request #8 from ClaireFotina/module9-task1

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>
@@ -237,5 +238,6 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </script>
     <script src="./vendor/pristine/pristine.min.js">
           </script>
+          <script src="./vendor/nouislider/nouislider.js"></script>
 </body>
 </html>

js/constants.js

@@ -0,0 +1,70 @@
+export const EFFECTS = {
+    NONE: 'none',
+    CHROME: 'chrome',
+    SEPIA: 'sepia',
+    MARVIN: 'marvin',
+    PHOBOS: 'phobos',
+    HEAT: 'heat'
+};
+
+const EFFECTS_STYLES = {
+    NONE: '',
+    GRAYSCALE: 'grayscale',
+    SEPIA: 'sepia',
+    INVERT: 'invert',
+    BLUR: 'blur',
+    BRIGHTNESS: 'brightness'
+}
+
+const UNITS = {
+    PX: 'px',
+    NONE: '',
+    PS: '%'
+}
+
+export const EffectsSetting = {
+    [EFFECTS.NONE]: {
+        min: 0,
+        max: 100,
+        step: 1,
+        style: EFFECTS_STYLES.NONE,
+        units: UNITS.NONE
+    },
+    [EFFECTS.CHROME]: {
+        min: 0,
+        max: 1,
+        step: 0.1,
+        style: EFFECTS_STYLES.GRAYSCALE,
+        units: UNITS.NONE
+    },
+    [EFFECTS.SEPIA]: {
+        min: 0,
+        max: 1,
+        step: 0.1,
+        style: EFFECTS_STYLES.SEPIA,
+        units: UNITS.NONE
+    },
+    [EFFECTS.MARVIN]: {
+        min: 0,
+        max: 100,
+        step: 1,
+        style: EFFECTS_STYLES.INVERT,
+        units: UNITS.PS
+    },
+    [EFFECTS.PHOBOS]: {
+        min: 0,
+        max: 3,
+        step: 0.1,
+        style: EFFECTS_STYLES.BLUR,
+        units: UNITS.PX
+    },
+    [EFFECTS.HEAT]: {
+        min: 1,
+        max: 3,
+        step: 0.1,
+        style: EFFECTS_STYLES.BRIGHTNESS,
+        units: UNITS.NONE
+    }
+};
+
+export const DEFAULT_EFFECT = EFFECTS.NONE;

js/effects.js

@@ -0,0 +1,59 @@
+import { DEFAULT_EFFECT, EffectsSetting } from "./constants.js";
+
+const effectsList = document.querySelector('.effects__list');
+const sliderContainer = document.querySelector('.effect-level__slider');
+const value = document.querySelector('.effect-level__value');
+const imageUploadPreview = document.querySelector('.img-upload__preview img');
+const sliderBlock = document.querySelector('.effect-level');
+
+let currentEffect = DEFAULT_EFFECT;
+
+noUiSlider.create(sliderContainer, {
+  range: {
+    min: 0,
+    max: 100,
+  },
+  start: 80,
+  step: 1,
+  connect: 'lower',
+})
+
+const render = () => {
+  const { style, units } = EffectsSetting[currentEffect];
+  imageUploadPreview.style.filter = `${style}(${value.value}${units})`;
+}
+
+const updateSlider = () => {
+  const { min, max, step } = EffectsSetting[currentEffect];
+  sliderContainer.noUiSlider.updateOptions({
+    range: {
+      min,
+      max,
+    },
+    step,
+    start: max,
+  }
+  )
+}
+
+sliderContainer.noUiSlider.on('update', () => {
+  value.value = sliderContainer.noUiSlider.get();
+  render();
+})
+
+export const reset = () => {
+  imageUploadPreview.style.filter = '';
+  sliderBlock.classList.add('hidden');
+}
+
+effectsList.addEventListener('change', ({ target }) => {
+  currentEffect = target.value;
+  if (currentEffect === DEFAULT_EFFECT) {
+    reset();
+  } else {
+    updateSlider();
+    sliderBlock.classList.remove('hidden');
+  }
+})
+
+reset()

js/form.js

@@ -1,34 +1,47 @@
-import { isValid, reset as resetValidation } from "./validation.js";
-
+import { isValid, reset as resetValidation } from './validation.js';
+import { reset as resetScale} from './scale.js';
+import {reset as resetEffects} from './effects.js';
 
 const uploadForm = document.querySelector('.img-upload__form');
 const uploadFileInput = uploadForm.querySelector('.img-upload__input');
 const uploadOverlay = uploadForm.querySelector('.img-upload__overlay');
 const uploadCancelInput = uploadForm.querySelector('.img-upload__cancel');
 const body = document.body;
 
-const openForm = ()  => {
-uploadOverlay.classList.remove('hidden');
-body.classList.add('modal-open');
+const openForm = () => {
+  uploadOverlay.classList.remove('hidden');
+  body.classList.add('modal-open');
 }
 
 uploadFileInput.addEventListener('change', () => {
-    openForm()
+  openForm()
+})
+
+const closeForm = () => {
+  uploadOverlay.classList.add('hidden');
+  body.classList.remove('modal-open');
+  uploadForm.reset();
+  resetValidation();
+  resetScale();
+  resetEffects();
+}
+
+uploadCancelInput.addEventListener('click', (evt) => {
+  evt.preventDefault();
+  closeForm()
 })
 
-const closeForm = ()  => {
-    uploadOverlay.classList.add('hidden');
-    body.classList.remove('modal-open');
-    }
-
-    uploadCancelInput.addEventListener('click', (evt) => {
-        evt.preventDefault();
-        closeForm()
-    })
-
-    document.addEventListener('keydown', (evt) => {
-        if(evt.key === "Escape"){
-            evt.preventDefault()
-            closeForm()
-        }
-    })
+document.addEventListener('keydown', (evt) => {
+  if (evt.key === "Escape") {
+    evt.preventDefault()
+    closeForm()
+  }
+})
+
+const onFormSubmit = (evt) => {
+  if (!isValid()) {
+    evt.preventDefault();
+  }
+}
+
+uploadForm.addEventListener('submit', onFormSubmit);

js/scale.js

@@ -0,0 +1,37 @@
+const SCALE_VALUE_MIN = 25;
+const SCALE_VALUE_MAX = 100;
+const SCALE_VALUE_STEP = 25;
+const SCALE_VALUE_DEFAULT = SCALE_VALUE_MAX;
+const FACTOR = 0.01;
+
+const scaleValue = document.querySelector('.scale__control--value');
+const imageUploadPreview = document.querySelector('.img-upload__preview img');
+const scalleSmaller = document.querySelector('.scale__control--smaller');
+const scalleBigger = document.querySelector('.scale__control--bigger');
+
+let currentScale = SCALE_VALUE_DEFAULT;
+
+const render = () => {
+  scaleValue.value = `${currentScale}%`;
+  imageUploadPreview.style.transform = `scale(${currentScale * FACTOR})`;
+}
+
+const onScalleSmallerClick = () => {
+  currentScale = currentScale > SCALE_VALUE_MIN ? currentScale - SCALE_VALUE_STEP : SCALE_VALUE_MIN;
+  render()
+}
+
+const onScalleBiggerClick = () => {
+  currentScale = currentScale < SCALE_VALUE_MAX ? currentScale + SCALE_VALUE_STEP : SCALE_VALUE_MAX;
+  render()
+}
+
+scalleSmaller.addEventListener('click', onScalleSmallerClick);
+scalleBigger.addEventListener('click', onScalleBiggerClick);
+
+export const reset = () => {
+  currentScale = SCALE_VALUE_DEFAULT;
+  render()
+}
+
+reset();