From fdb7999d980e8ef46dabd4c08b9bf03b4a40d192 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC?= Date: Fri, 22 Mar 2024 15:21:34 +0300 Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=8D=D1=84=D1=84?= =?UTF-8?q?=D0=B5=D0=BA=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/{add-affects => add-effects}/index.js | 8 ++- js/create-thumbnails/index.js | 2 - js/main.js | 12 +++-- js/slider-effects/effect-data.js | 51 +++++++++++++++++++ js/slider-effects/index.js | 63 +++++++++--------------- js/upload-photo/index.js | 15 ++++-- js/validation-form/index.js | 17 ++++--- 7 files changed, 110 insertions(+), 58 deletions(-) rename js/{add-affects => add-effects}/index.js (84%) create mode 100644 js/slider-effects/effect-data.js diff --git a/js/add-affects/index.js b/js/add-effects/index.js similarity index 84% rename from js/add-affects/index.js rename to js/add-effects/index.js index 56295f7..e46f716 100644 --- a/js/add-affects/index.js +++ b/js/add-effects/index.js @@ -23,5 +23,9 @@ const onDecreaseScale = () => { uploaPreviewImage.style.transform = `scale(${scaleLimited / 100})`; }; -scaleControlBigger.addEventListener('click', onIncreaseScale); -scaleControlSmaller.addEventListener('click', onDecreaseScale); +const scaleListener = () => { + scaleControlBigger.addEventListener('click', onIncreaseScale); + scaleControlSmaller.addEventListener('click', onDecreaseScale); +}; + +export {scaleListener}; diff --git a/js/create-thumbnails/index.js b/js/create-thumbnails/index.js index fea5055..f37f71a 100644 --- a/js/create-thumbnails/index.js +++ b/js/create-thumbnails/index.js @@ -7,7 +7,6 @@ const createPhotoUsers = photoItems(); const addPhotoThumbnailsUsers = () => { const listFragmentPhoto = document.createDocumentFragment(); - createPhotoUsers.forEach((element) => { const pictureItem = pictureTemplate.cloneNode(true); const pictureImage = pictureItem.querySelector('.picture__img'); @@ -18,7 +17,6 @@ const addPhotoThumbnailsUsers = () => { pictureItem.querySelector('.picture__comments').textContent = element.comments.length; listFragmentPhoto.appendChild(pictureItem); }); - return pictureList.appendChild(listFragmentPhoto); }; diff --git a/js/main.js b/js/main.js index 5d32482..5cd9076 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,11 @@ import {addPhotoThumbnailsUsers} from './create-thumbnails'; -import './upload-photo'; -import './validation-form'; -import './add-affects'; -import './slider-effects'; +import {onOpenChangePhotoListener} from './upload-photo'; +import {validateListener} from './validation-form'; +import {scaleListener} from './add-effects'; +import {effectCheckedListener} from './slider-effects'; +effectCheckedListener(); +scaleListener(); +validateListener(); +onOpenChangePhotoListener(); addPhotoThumbnailsUsers(); diff --git a/js/slider-effects/effect-data.js b/js/slider-effects/effect-data.js new file mode 100644 index 0000000..5252bf9 --- /dev/null +++ b/js/slider-effects/effect-data.js @@ -0,0 +1,51 @@ +export const DEFAULT_MIN = 0; +export const DEFAULT_MAX = 100; +export const DEFAULT_START = 0; + +export const EFFECTS = [ + { + name: 'chrome', + style: 'grayscale', + min: 0, + max: 1, + step: 0.1, + start: 1, + unit: ' ', + }, + { + name: 'sepia', + style: 'sepia', + min: 0, + max: 1, + step: 0.1, + start: 1, + unit: ' ', + }, + { + name: 'marvin', + style: 'invert', + min: 0, + max: 100, + step: 1, + start: 100, + unit: '%', + }, + { + name: 'phobos', + style: 'blur', + min: 0, + max: 3, + step: 0.1, + start: 3, + unit: 'px', + }, + { + name: 'heat', + style: 'brightness', + min: 1, + max: 3, + step: 0.1, + start: 3, + unit: ' ', + }, +]; diff --git a/js/slider-effects/index.js b/js/slider-effects/index.js index e770fcf..6dbb6a8 100644 --- a/js/slider-effects/index.js +++ b/js/slider-effects/index.js @@ -1,19 +1,30 @@ import {effectLevelSliderParrent, effectLevelSlider, effectLevelInput, effectChecked, uploaPreviewImage} from './slider-variables'; +import {EFFECTS, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_START } from './effect-data'; const sliderVisableToggle = (isShown = true) => { effectLevelSliderParrent.classList.toggle('hidden', isShown); }; +const searhEffect = (value, array) => array.find((element) => element.name === value); + noUiSlider.create(effectLevelSlider, { range: { - min: 0, - max: 100, + min: DEFAULT_MIN, + max: DEFAULT_MAX, }, - start: 0, + start: DEFAULT_START, connect: 'lower' }); -const sliderUpdateOptions = (min, max, start, step, addStyleFunction) => { +const sliderUpdateOptions = (value) => { + const effect = searhEffect(value, EFFECTS); + if(!effect){ + sliderVisableToggle(); + uploaPreviewImage.style.removeProperty('filter'); + return; + } + const {min, max, start, step, unit} = effect; + sliderVisableToggle(false); effectLevelSlider.noUiSlider.updateOptions({ range: { min: min, @@ -23,44 +34,16 @@ const sliderUpdateOptions = (min, max, start, step, addStyleFunction) => { step: step }); effectLevelSlider.noUiSlider.on('update', () => { - let effectLevelInputValue = effectLevelInput.value; - effectLevelInputValue = effectLevelSlider.noUiSlider.get(); + const effectLevelInputValue = effectLevelSlider.noUiSlider.get(); effectLevelInput.value = effectLevelInputValue; - uploaPreviewImage.style.filter = addStyleFunction(effectLevelInputValue); + uploaPreviewImage.style.filter = `${effect.style}(${effectLevelInputValue}${unit})`; }); }; -effectChecked.addEventListener('change', (evt) => { - if (evt.target.checked) { - switch (evt.target.value) { - case 'chrome': - sliderVisableToggle(false); - sliderUpdateOptions(0, 1, 0, 0.1, (value) => `grayscale(${value})`); - break; - - case 'sepia': - sliderVisableToggle(false); - sliderUpdateOptions(0, 1, 0, 0.1, (value) => `sepia(${value})`); - break; - - case 'marvin': - sliderVisableToggle(false); - sliderUpdateOptions(0, 100, 0, 1, (value) => `invert(${value}%)`); - break; - - case 'phobos': - sliderVisableToggle(false); - sliderUpdateOptions(0, 3, 0, 0.1, (value) => `blur(${value}px)`); - break; - - case 'heat': - sliderVisableToggle(false); - sliderUpdateOptions(0, 3, 1, 0.1, (value) => `brightness(${value})`); - break; - - default: - sliderVisableToggle(); - uploaPreviewImage.style.removeProperty('filter'); +export const effectCheckedListener = () => { + effectChecked.addEventListener('change', (evt) => { + if (evt.target.checked) { + sliderUpdateOptions(evt.target.value); } - } -}); + }); +}; diff --git a/js/upload-photo/index.js b/js/upload-photo/index.js index 493e779..5a3e5c8 100644 --- a/js/upload-photo/index.js +++ b/js/upload-photo/index.js @@ -1,7 +1,7 @@ import {toggleClass} from '../util'; import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables'; import {inputTextHashtag, commentForm} from '../validation-form'; -const effectsPreview = document.querySelectorAll('.effects__preview '); +const effectsPreview = document.querySelectorAll('.effects__preview'); const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level'); const uploaPreviewImage = document.querySelector('.img-upload__preview img'); @@ -9,7 +9,11 @@ const uploaPreviewImage = document.querySelector('.img-upload__preview img'); const onCloseChangePhoto = () => { toggleClass(imgUpoadOverlay, false); imgUploadInput.value = ''; + uploaPreviewImage.style.removeProperty('filter'); + uploaPreviewImage.style.removeProperty('transform'); document.removeEventListener('keydown', onCloseChangePhotoEsc); + imgUploadancel.removeEventListener('click', onCloseChangePhoto); + }; function onCloseChangePhotoEsc(evt){ @@ -49,7 +53,12 @@ const onOpenChangePhoto = (evt) => { selectImage(evt); effectLevelSliderParrent.classList.add('hidden'); document.addEventListener('keydown', onCloseChangePhotoEsc); + imgUploadancel.addEventListener('click', onCloseChangePhoto); + +}; + +const onOpenChangePhotoListener = () => { + imgUploadInput.addEventListener('change', onOpenChangePhoto); }; -imgUploadInput.addEventListener('change', onOpenChangePhoto); -imgUploadancel.addEventListener('click', onCloseChangePhoto); +export {onOpenChangePhotoListener}; diff --git a/js/validation-form/index.js b/js/validation-form/index.js index fb5ca98..740c1eb 100644 --- a/js/validation-form/index.js +++ b/js/validation-form/index.js @@ -7,7 +7,6 @@ const COMMENTS_LIMIT = 140; const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/i; const onValidateCommentForm = (value) => value.length <= COMMENTS_LIMIT; - const createHashtagArray = () => inputTextHashtag.value.replace(/\s+/g, ' ').trim().toLowerCase().split(' '); const onValidateHashtagRegex = () => { @@ -40,9 +39,13 @@ pristine.addValidator(inputTextHashtag, onUniqueHashtag, 'Хэштеги пов pristine.addValidator(inputTextHashtag, onHashtagLimitLength, 'Превышено количество хэштегов'); pristine.addValidator(commentForm, onValidateCommentForm, 'Длина комментария больше 140 символов'); -imgUploadForm.addEventListener('submit', (evt) => { - if(pristine.validate()) { - imgUploadForm.submit(); - } - evt.preventDefault(); -}); +const validateListener = () => { + imgUploadForm.addEventListener('submit', (evt) => { + if(pristine.validate()) { + imgUploadForm.submit(); + } + evt.preventDefault(); + }); +}; + +export {validateListener};