Merge pull request #10 from AnastasiiaXX/module9-task2

Author: keksobot

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

js/image-filters.js

@@ -0,0 +1,60 @@
+const EFFECTS = {
+  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: ''}
+};
+
+const form = document.querySelector('.img-upload__form');
+
+const slider = form.querySelector('.effect-level__slider');
+const sliderContainer = form.querySelector('.img-upload__effect-level');
+const uploadedImage = form.querySelector('.img-upload__preview img');
+const effectRadios = form.querySelectorAll('input[name="effect"]');
+const inputValue = form.querySelector('.effect-level__value');
+
+export const initImageEffects = () => {
+  let selectedFilter = 'none';
+  noUiSlider.create(slider, {
+    range: {
+      min: 0,
+      max: 100,
+    },
+    start: 50,
+    step: 1,
+    connect: 'lower'
+  });
+
+  sliderContainer.classList.add('hidden');
+
+  slider.noUiSlider.on('update', () => {
+    if (selectedFilter === 'none') {
+      return;
+    }
+    const value = slider.noUiSlider.get();
+    const effect = EFFECTS[selectedFilter];
+    const filterStyle = `${effect.filter}(${value}${effect.unit})`;
+    uploadedImage.style.filter = filterStyle;
+    inputValue.value = value;
+  });
+
+  effectRadios.forEach((radio) => {
+    radio.addEventListener('change', () => {
+      selectedFilter = radio.value;
+      if (selectedFilter === 'none') {
+        sliderContainer.classList.add('hidden');
+        uploadedImage.style.filter = '';
+      } else {
+        sliderContainer.classList.remove('hidden');
+
+        const effect = EFFECTS[selectedFilter];
+        slider.noUiSlider.updateOptions({
+          range: { min: effect.min, max: effect.max },
+          start: effect.max,
+          step: effect.step
+        });
+      }
+    });
+  });
+};

js/image-scale.js

@@ -0,0 +1,24 @@
+const form = document.querySelector('.img-upload__form');
+const scaleSmallerBtn = form.querySelector('.scale__control--smaller');
+const scaleBiggerBtn = form.querySelector('.scale__control--bigger');
+const scaleControlValue = form.querySelector('.scale__control--value');
+const uploadedImage = form.querySelector('.img-upload__preview img');
+
+let currentScale = 100;
+export const initImageScale = () => {
+  scaleSmallerBtn.addEventListener('click', () => {
+    if (currentScale > 25) {
+      currentScale -= 25;
+      scaleControlValue.value = `${currentScale}%`;
+      uploadedImage.style.transform = `scale(${currentScale / 100})`;
+    }
+  });
+
+  scaleBiggerBtn.addEventListener('click', () => {
+    if (currentScale < 100) {
+      currentScale += 25;
+      scaleControlValue.value = `${currentScale}%`;
+      uploadedImage.style.transform = `scale(${currentScale / 100})`;
+    }
+  });
+};

js/upload-form.js

@@ -1,8 +1,9 @@
 import { openModal, closeModal } from './modal.js';
+import { initImageScale } from './image-scale.js';
+import { initImageEffects } from './image-filters.js';
 
 const MAX_HASHTAG_COUNT = 5;
 const MAX_COMMENT_LENGTH = 140;
-const TAG_ERROR_TEXT = 'Неправильно заполнены хэштеги';
 const HASHTAG_REGEXP = /^#[a-zа-я0-9]{1,19}$/i;
 
 const form = document.querySelector('.img-upload__form');
@@ -23,6 +24,8 @@ const pristine = new Pristine(form, {
 export const initUploadForm = () => {
   fileInput.addEventListener('change', () => {
     openModal(uploadOverlay, body);
+    initImageScale();
+    initImageEffects();
   });
 
   cancelBtn.addEventListener('click', () => {
@@ -31,19 +34,52 @@ export const initUploadForm = () => {
     fileInput.value = '';
     pristine.reset();
   });
-  const validateTags = (value) => {
+
+  const stopEscPropagation = (evt) => {
+    if (evt.key === 'Escape') {
+      evt.stopPropagation();
+    }
+  };
+
+  const parseHashTags = (value) => {
     if (!value) {
-      return true;
+      return [];
     }
-    const splitHashtags = value.split(' ').filter(Boolean);
-    const lowerCaseHashtags = splitHashtags.map((hashtag) => hashtag.toLowerCase());
+    return value.split(' ').filter(Boolean);
+  };
+
+  const validateHashtagFormat = (value) => {
+    const tags = parseHashTags(value);
+    return tags.every((tag) => HASHTAG_REGEXP.test(tag));
+  };
+
+  const validateHashtagCount = (value) => {
+    const tags = parseHashTags(value);
+    return tags.length <= MAX_HASHTAG_COUNT;
+  };
+
+  const validateHashtagUnique = (value) => {
+    const tags = parseHashTags(value);
+    const lowerCaseHashtags = tags.map((tag) => tag.toLowerCase());
     const sizeUnique = new Set(lowerCaseHashtags).size;
-    if (splitHashtags.length > MAX_HASHTAG_COUNT || splitHashtags.length !== sizeUnique) {
-      return false;
-    }
-    return splitHashtags.every((hashtag) => HASHTAG_REGEXP.test(hashtag));
+    return tags.length === sizeUnique;
   };
 
+  const hashtagValidators = [
+    {
+      validator: validateHashtagFormat,
+      error: 'Хэштег должен начинаться с # и содержать только буквы и цифры, максимум 20 символов'
+    },
+    {
+      validator: validateHashtagCount,
+      error: 'Количество хэштегов не может быть больше 5'
+    },
+    {
+      validator: validateHashtagUnique,
+      error: 'Хэштеги не могут повторяться'
+    },
+  ];
+
   const validateComment = (value) => {
     if (!value) {
       return true;
@@ -52,11 +88,9 @@ export const initUploadForm = () => {
     return value.length <= MAX_COMMENT_LENGTH;
   };
 
-  pristine.addValidator(
-    hashtagInput,
-    validateTags,
-    TAG_ERROR_TEXT
-  );
+  hashtagValidators.forEach((rule) => {
+    pristine.addValidator(hashtagInput, rule.validator, rule.error);
+  });
 
   pristine.addValidator(
     commentInput,
@@ -72,11 +106,6 @@ export const initUploadForm = () => {
     }
   });
 
-  const stopEscPropagation = (evt) => {
-    if (evt.key === 'Escape') {
-      evt.stopPropagation();
-    }
-  };
   hashtagInput.addEventListener('keydown', stopEscPropagation);
   commentInput.addEventListener('keydown', stopEscPropagation);
 };