From f9d953a424610cc80152065a48835a90f3baed4e Mon Sep 17 00:00:00 2001 From: brazilets Date: Mon, 18 Mar 2024 21:04:57 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D1=80=D0=B5=D0=B4=D0=B2=D0=B0=D1=80=D0=B8?= =?UTF-8?q?=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D0=B2=D0=B5=D1=80=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- js/fullSize.js | 2 +- js/main.js | 1 + js/uploadForm.js | 195 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 200 insertions(+), 2 deletions(-) create mode 100644 js/uploadForm.js diff --git a/index.html b/index.html index 17c87ad..1c8cdb9 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,8 @@

Фотографии других

Загрузка фотографии

-
+
@@ -241,6 +242,7 @@

Не удалось загрузить данны + \ No newline at end of file diff --git a/js/fullSize.js b/js/fullSize.js index b8892bf..6af0f3a 100644 --- a/js/fullSize.js +++ b/js/fullSize.js @@ -100,4 +100,4 @@ userBigPictureCancel.addEventListener('keydown', (evt) => { } }); -export { openBigPicture, closeBigPicture }; +export { openBigPicture, closeBigPicture, onBigPictureKeydown }; diff --git a/js/main.js b/js/main.js index f5c3359..c1fdc5c 100644 --- a/js/main.js +++ b/js/main.js @@ -1,3 +1,4 @@ import { renderUsersPictures } from './thumbnails.js'; +import './uploadForm.js'; renderUsersPictures(); diff --git a/js/uploadForm.js b/js/uploadForm.js new file mode 100644 index 0000000..3791736 --- /dev/null +++ b/js/uploadForm.js @@ -0,0 +1,195 @@ +const imgUploadForm = document.querySelector('.img-upload__form'); +const inputFile = document.querySelector('.img-upload__input'); +const formOverlay = document.querySelector('.img-upload__overlay'); +const cancelButton = document.querySelector('.img-upload__cancel'); +const submitButton = imgUploadForm.querySelector('.img-upload__submit'); +const hashtagInput = imgUploadForm.querySelector('.hashtag-input'); +const commentInput = imgUploadForm.querySelector('.comment-input'); +const effectLevelSlider = document.querySelector('.effect-level__slider'); + +inputFile.addEventListener('change', () => { + formOverlay.classList.remove('hidden'); + document.body.classList.add('modal-open'); +}); + +cancelButton.addEventListener('click', () => { + formOverlay.classList.add('hidden'); + document.body.classList.remove('modal-open'); +}); + +document.addEventListener('keydown', (evt) => { + if (evt.key === 'Escape') { + formOverlay.classList.add('hidden'); + document.body.classList.remove('modal-open'); + } +}); + +cancelButton.addEventListener('click', () => { + formOverlay.classList.add('hidden'); + document.body.classList.remove('modal-open'); + + inputFile.value = ''; + const otherInputs = imgUploadForm.querySelectorAll('otherInput'); + otherInputs.forEach((input) => { + input.value = ''; + }); +}); + +const scaleControlSmaller = document.querySelector('.scale__control--smaller'); +const scaleControlBigger = document.querySelector('.scale__control--bigger'); +const scaleControlValue = document.querySelector('.scale__control--value'); +const imgPreview = document.querySelector('.img-upload__preview img'); + +scaleControlSmaller.addEventListener('click', () => { + let scaleValue = parseInt(scaleControlValue.value, 10); + if (scaleValue > 25) { + scaleValue -= 25; + scaleControlValue.value = `${scaleValue} %`; + imgPreview.style.transform = `scale(${scaleValue / 100})`; + } +}); + +scaleControlBigger.addEventListener('click', () => { + let scaleValue = parseInt(scaleControlValue.value, 10); + if (scaleValue < 100) { + scaleValue += 25; + scaleControlValue.value = `${scaleValue} %`; + imgPreview.style.transform = `scale(${scaleValue / 100})`; + } +}); + +const pristine = new Pristine(imgUploadForm); + +// const isValid = pristine.validate(); + + +// pristine.addValidator(hashtagInput, function (value) { +// const hashtags = value.split(' '); + +// for (let i = 0; i < hashtags.length; i++) { +// const hashtag = hashtags[i]; + +// if (!hashtag.startsWith('#')) { +// return false; +// } + +// if (hashtag.length > 20) { +// return false; +// } + +// if (/[^a-zа-яё0-9#]/i.test(hashtag)) { +// return false; +// } +// } +// return true; +// }, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов.', 2); + +// pristine.addValidator(commentInput, function (value) { +// if (value === '') { +// return true; +// } +// return value.length <= 140; +// }, 'Комментарий не может быть длиннее 140 символов.', 2); + +// commentInput.addEventListener('keydown', function (evt) { +// if (evt.key === 'Escape') { +// evt.stopPropagation(); +// } +// }); + +// pristine.addValidator(hashtagInput, (value) => { +// const hashtag = /^#[a-zа-яё0-9]{1,19}$/i; +// return hashtag.test(value); +// }, 'Неверный формат хэштега. Хэштег должен начинаться с символа # и содержать от 1 до 19 буквенно-цифровых символов.', 2); + +// pristine.addValidator(commentInput, (value) => +// value.length <= 140, 'Комментарий не может быть длиннее 140 символов.', 2); + +// commentInput.addEventListener('keydown', (evt) => { +// if (evt.key === 'Escape') { +// evt.stopPropagation(); +// } +// }); + +// imgUploadForm.addEventListener('submit', (evt) => { +// evt.preventDefault(); + +// submitButton.disabled = true; + +// const isValid = pristine.validate(); + +// if (isValid) { +// imgUploadForm.reset(); +// scaleControlValue.value = '100%'; +// imgPreview.style.transform = 'scale(1)'; +// imgPreview.style.filter = 'none'; +// effectLevelSlider.noUiSlider.set(100); +// } else { +// // Если форма невалидна, показываем ошибки +// } + +// submitButton.disabled = false; +// }); + +// // Получаем элементы управления эффектами +// const effectControls = document.querySelectorAll('.effects__radio'); +// const effectLevelValue = document.querySelector('.effect-level__value'); + +// // Инициализируем слайдер noUiSlider +// noUiSlider.create(effectLevelSlider, { +// start: 100, +// range: { +// min: 0, +// max: 100 +// } +// }); + +// // Обработчик изменения значения слайдера +// effectLevelSlider.noUiSlider.on('update', (values, handle) => { +// effectLevelValue.value = values[handle]; +// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта и значения слайдера +// updateImageStyle(); +// }); + +// // Обработчики переключения эффектов +// effectControls.forEach((control) => { +// control.addEventListener('change', () => { +// // Сбрасываем значение слайдера до начального значения (100%) +// effectLevelSlider.noUiSlider.set(100); + +// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта +// updateImageStyle(); +// }); +// }); + +// function updateImageStyle() { +// // Получаем выбранный эффект +// const selectedEffect = document.querySelector('.effects__radio:checked').value; + +// // Получаем значение слайдера +// const sliderValue = effectLevelSlider.noUiSlider.get(); + +// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта +// switch (selectedEffect) { +// case 'chrome': +// imgPreview.style.filter = `grayscale(${sliderValue / 100})`; +// break; +// case 'sepia': +// imgPreview.style.filter = `sepia(${sliderValue / 100})`; +// break; +// case 'marvin': +// imgPreview.style.filter = `invert(${sliderValue}%)`; +// break; +// case 'phobos': +// imgPreview.style.filter = `blur(${sliderValue / 10}px)`; +// break; +// case 'heat': +// imgPreview.style.filter = `brightness(${sliderValue / 33.3 + 1})`; +// break; +// case 'none': +// default: +// imgPreview.style.filter = 'none'; +// break; +// } +// } + From aef06fd1561f2c6ae7c315300c9644c66f009576 Mon Sep 17 00:00:00 2001 From: brazilets Date: Tue, 19 Mar 2024 21:50:34 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D0=B8=D1=82?= =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=BF=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=B5=D1=80=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/uploadForm.js | 250 +++++++++++++++++++++-------------------------- 1 file changed, 114 insertions(+), 136 deletions(-) diff --git a/js/uploadForm.js b/js/uploadForm.js index 3791736..892c01d 100644 --- a/js/uploadForm.js +++ b/js/uploadForm.js @@ -3,10 +3,16 @@ const inputFile = document.querySelector('.img-upload__input'); const formOverlay = document.querySelector('.img-upload__overlay'); const cancelButton = document.querySelector('.img-upload__cancel'); const submitButton = imgUploadForm.querySelector('.img-upload__submit'); -const hashtagInput = imgUploadForm.querySelector('.hashtag-input'); -const commentInput = imgUploadForm.querySelector('.comment-input'); +const hashtagInput = imgUploadForm.querySelector('.text__hashtags'); +const commentInput = imgUploadForm.querySelector('.text__description'); const effectLevelSlider = document.querySelector('.effect-level__slider'); +const pristine = new Pristine(imgUploadForm, { + classTo: 'img-upload__field-wrapper', + errorTextParent: 'img-upload__field-wrapper', + errorTextClass: 'img-upload__field-wrapper--error' +}); + inputFile.addEventListener('change', () => { formOverlay.classList.remove('hidden'); document.body.classList.add('modal-open'); @@ -58,138 +64,110 @@ scaleControlBigger.addEventListener('click', () => { } }); -const pristine = new Pristine(imgUploadForm); - -// const isValid = pristine.validate(); - - -// pristine.addValidator(hashtagInput, function (value) { -// const hashtags = value.split(' '); - -// for (let i = 0; i < hashtags.length; i++) { -// const hashtag = hashtags[i]; - -// if (!hashtag.startsWith('#')) { -// return false; -// } - -// if (hashtag.length > 20) { -// return false; -// } - -// if (/[^a-zа-яё0-9#]/i.test(hashtag)) { -// return false; -// } -// } -// return true; -// }, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов.', 2); - -// pristine.addValidator(commentInput, function (value) { -// if (value === '') { -// return true; -// } -// return value.length <= 140; -// }, 'Комментарий не может быть длиннее 140 символов.', 2); - -// commentInput.addEventListener('keydown', function (evt) { -// if (evt.key === 'Escape') { -// evt.stopPropagation(); -// } -// }); - -// pristine.addValidator(hashtagInput, (value) => { -// const hashtag = /^#[a-zа-яё0-9]{1,19}$/i; -// return hashtag.test(value); -// }, 'Неверный формат хэштега. Хэштег должен начинаться с символа # и содержать от 1 до 19 буквенно-цифровых символов.', 2); - -// pristine.addValidator(commentInput, (value) => -// value.length <= 140, 'Комментарий не может быть длиннее 140 символов.', 2); - -// commentInput.addEventListener('keydown', (evt) => { -// if (evt.key === 'Escape') { -// evt.stopPropagation(); -// } -// }); - -// imgUploadForm.addEventListener('submit', (evt) => { -// evt.preventDefault(); - -// submitButton.disabled = true; - -// const isValid = pristine.validate(); - -// if (isValid) { -// imgUploadForm.reset(); -// scaleControlValue.value = '100%'; -// imgPreview.style.transform = 'scale(1)'; -// imgPreview.style.filter = 'none'; -// effectLevelSlider.noUiSlider.set(100); -// } else { -// // Если форма невалидна, показываем ошибки -// } - -// submitButton.disabled = false; -// }); - -// // Получаем элементы управления эффектами -// const effectControls = document.querySelectorAll('.effects__radio'); -// const effectLevelValue = document.querySelector('.effect-level__value'); - -// // Инициализируем слайдер noUiSlider -// noUiSlider.create(effectLevelSlider, { -// start: 100, -// range: { -// min: 0, -// max: 100 -// } -// }); - -// // Обработчик изменения значения слайдера -// effectLevelSlider.noUiSlider.on('update', (values, handle) => { -// effectLevelValue.value = values[handle]; -// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта и значения слайдера -// updateImageStyle(); -// }); - -// // Обработчики переключения эффектов -// effectControls.forEach((control) => { -// control.addEventListener('change', () => { -// // Сбрасываем значение слайдера до начального значения (100%) -// effectLevelSlider.noUiSlider.set(100); - -// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта -// updateImageStyle(); -// }); -// }); - -// function updateImageStyle() { -// // Получаем выбранный эффект -// const selectedEffect = document.querySelector('.effects__radio:checked').value; - -// // Получаем значение слайдера -// const sliderValue = effectLevelSlider.noUiSlider.get(); - -// // Обновляем CSS-стиль изображения в зависимости от выбранного эффекта -// switch (selectedEffect) { -// case 'chrome': -// imgPreview.style.filter = `grayscale(${sliderValue / 100})`; -// break; -// case 'sepia': -// imgPreview.style.filter = `sepia(${sliderValue / 100})`; -// break; -// case 'marvin': -// imgPreview.style.filter = `invert(${sliderValue}%)`; -// break; -// case 'phobos': -// imgPreview.style.filter = `blur(${sliderValue / 10}px)`; -// break; -// case 'heat': -// imgPreview.style.filter = `brightness(${sliderValue / 33.3 + 1})`; -// break; -// case 'none': -// default: -// imgPreview.style.filter = 'none'; -// break; -// } -// } +pristine.addValidator(hashtagInput, (value) => { + const hashtags = value.split(' '); + + for (let i = 0; i < hashtags.length; i++) { + const hashtag = hashtags[i]; + + if (!hashtag.startsWith('#')) { + return false; + } + + if (hashtag.length > 20) { + return false; + } + + if (/[^a-zа-яё0-9#]/i.test(hashtag)) { + return false; + } + } + return true; +}, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов.', 2); + +pristine.addValidator(commentInput, (value) => { + if (value === '') { + return true; + } + return value.length <= 140; +}, 'Комментарий не может быть длиннее 140 символов.', 2); + +commentInput.addEventListener('keydown', (evt) => { + if (evt.key === 'Escape') { + evt.stopPropagation(); + } +}); + +imgUploadForm.addEventListener('submit', (evt) => { + evt.preventDefault(); + + submitButton.disabled = true; + + const isValid = pristine.validate(); + + if (isValid) { + scaleControlValue.value = '100%'; + imgPreview.style.transform = 'scale(1)'; + imgPreview.style.filter = 'none'; + //effectLevelSlider.noUiSlider.set(100); + imgUploadForm.submit(); + imgUploadForm.reset(); + } else { + // Если форма невалидна, показываем ошибки + } + submitButton.disabled = false; +}); + + +const effects = document.querySelectorAll('.effects__radio'); +const effectLevelValue = document.querySelector('.effect-level__value'); +const imgUploadPreview = document.querySelector('.img-upload__preview img'); + +let currentEffect = 'none'; +let previousEffect = 'none'; +let previousEffectLevel = 100; + +effects.forEach((effect) => { + effect.addEventListener('change', (evt) => { + imgUploadPreview.classList.remove(`effects__preview--${currentEffect}`); + currentEffect = evt.target.value; + imgUploadPreview.classList.add(`effects__preview--${currentEffect}`); + + if (currentEffect === 'none') { + imgUploadPreview.style.filter = 'none'; + effectLevelSlider.style.visibility = 'hidden'; + imgUploadPreview.classList.add(`effects__preview--${previousEffect}`); + effectLevelSlider.noUiSlider.set(previousEffectLevel); + } else { + effectLevelSlider.style.visibility = 'visible'; + effectLevelSlider.noUiSlider.set(100); + previousEffect = currentEffect; + previousEffectLevel = effectLevelValue.value; + } + }); +}); + +effectLevelSlider.noUiSlider.on('update', (_, handle, unencoded) => { + effectLevelValue.value = unencoded[handle]; + + switch (currentEffect) { + case 'chrome': + imgUploadPreview.style.filter = `grayscale(${unencoded[handle] / 100})`; + break; + case 'sepia': + imgUploadPreview.style.filter = `sepia(${unencoded[handle] / 100})`; + break; + case 'marvin': + imgUploadPreview.style.filter = `invert(${unencoded[handle]}%)`; + break; + case 'phobos': + imgUploadPreview.style.filter = `blur(${unencoded[handle] * 3 / 100}px)`; + break; + case 'heat': + imgUploadPreview.style.filter = `brightness(${1 + 2 * unencoded[handle] / 100})`; + break; + default: + imgUploadPreview.style.filter = 'none'; + } +}); From d63ffef20c467bc665287f4438394d80a38226da Mon Sep 17 00:00:00 2001 From: brazilets Date: Tue, 19 Mar 2024 22:06:57 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=94=D0=97=209.13.'=D0=9F=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B4=D0=B0=20=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=B5=D0=B9=D1=81?= =?UTF-8?q?=D1=82=D0=B2=D0=B8=D0=B5'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/uploadForm.js | 118 +++++++++++++++++++++++++---------------------- 1 file changed, 64 insertions(+), 54 deletions(-) diff --git a/js/uploadForm.js b/js/uploadForm.js index 892c01d..72e419d 100644 --- a/js/uploadForm.js +++ b/js/uploadForm.js @@ -5,7 +5,7 @@ const cancelButton = document.querySelector('.img-upload__cancel'); const submitButton = imgUploadForm.querySelector('.img-upload__submit'); const hashtagInput = imgUploadForm.querySelector('.text__hashtags'); const commentInput = imgUploadForm.querySelector('.text__description'); -const effectLevelSlider = document.querySelector('.effect-level__slider'); +// const effectLevelSlider = document.querySelector('.effect-level__slider'); const pristine = new Pristine(imgUploadForm, { classTo: 'img-upload__field-wrapper', @@ -109,7 +109,7 @@ imgUploadForm.addEventListener('submit', (evt) => { scaleControlValue.value = '100%'; imgPreview.style.transform = 'scale(1)'; imgPreview.style.filter = 'none'; - //effectLevelSlider.noUiSlider.set(100); + // effectLevelSlider.noUiSlider.set(100); imgUploadForm.submit(); imgUploadForm.reset(); } else { @@ -118,56 +118,66 @@ imgUploadForm.addEventListener('submit', (evt) => { submitButton.disabled = false; }); - -const effects = document.querySelectorAll('.effects__radio'); -const effectLevelValue = document.querySelector('.effect-level__value'); -const imgUploadPreview = document.querySelector('.img-upload__preview img'); - -let currentEffect = 'none'; -let previousEffect = 'none'; -let previousEffectLevel = 100; - -effects.forEach((effect) => { - effect.addEventListener('change', (evt) => { - imgUploadPreview.classList.remove(`effects__preview--${currentEffect}`); - currentEffect = evt.target.value; - imgUploadPreview.classList.add(`effects__preview--${currentEffect}`); - - if (currentEffect === 'none') { - imgUploadPreview.style.filter = 'none'; - effectLevelSlider.style.visibility = 'hidden'; - imgUploadPreview.classList.add(`effects__preview--${previousEffect}`); - effectLevelSlider.noUiSlider.set(previousEffectLevel); - } else { - effectLevelSlider.style.visibility = 'visible'; - effectLevelSlider.noUiSlider.set(100); - previousEffect = currentEffect; - previousEffectLevel = effectLevelValue.value; - } - }); -}); - -effectLevelSlider.noUiSlider.on('update', (_, handle, unencoded) => { - effectLevelValue.value = unencoded[handle]; - - switch (currentEffect) { - case 'chrome': - imgUploadPreview.style.filter = `grayscale(${unencoded[handle] / 100})`; - break; - case 'sepia': - imgUploadPreview.style.filter = `sepia(${unencoded[handle] / 100})`; - break; - case 'marvin': - imgUploadPreview.style.filter = `invert(${unencoded[handle]}%)`; - break; - case 'phobos': - imgUploadPreview.style.filter = `blur(${unencoded[handle] * 3 / 100}px)`; - break; - case 'heat': - imgUploadPreview.style.filter = `brightness(${1 + 2 * unencoded[handle] / 100})`; - break; - default: - imgUploadPreview.style.filter = 'none'; - } -}); +// let slider = document.getElementById('slider'); + +// noUiSlider.create(slider, { +// start: [20, 80], +// connect: true, +// range: { +// 'min': 0, +// 'max': 100 +// } +// }); + +// const effects = document.querySelectorAll('.effects__radio'); +// const effectLevelValue = document.querySelector('.effect-level__value'); +// const imgUploadPreview = document.querySelector('.img-upload__preview img'); + +// let currentEffect = 'none'; +// let previousEffect = 'none'; +// let previousEffectLevel = 100; + +// effects.forEach((effect) => { +// effect.addEventListener('change', (evt) => { +// imgUploadPreview.classList.remove(`effects__preview--${currentEffect}`); +// currentEffect = evt.target.value; +// imgUploadPreview.classList.add(`effects__preview--${currentEffect}`); + +// if (currentEffect === 'none') { +// imgUploadPreview.style.filter = 'none'; +// effectLevelSlider.style.visibility = 'hidden'; +// imgUploadPreview.classList.add(`effects__preview--${previousEffect}`); +// effectLevelSlider.noUiSlider.set(previousEffectLevel); +// } else { +// effectLevelSlider.style.visibility = 'visible'; +// effectLevelSlider.noUiSlider.set(100); +// previousEffect = currentEffect; +// previousEffectLevel = effectLevelValue.value; +// } +// }); +// }); + +// effectLevelSlider.noUiSlider.on('update', (_, handle, unencoded) => { +// effectLevelValue.value = unencoded[handle]; + +// switch (currentEffect) { +// case 'chrome': +// imgUploadPreview.style.filter = `grayscale(${unencoded[handle] / 100})`; +// break; +// case 'sepia': +// imgUploadPreview.style.filter = `sepia(${unencoded[handle] / 100})`; +// break; +// case 'marvin': +// imgUploadPreview.style.filter = `invert(${unencoded[handle]}%)`; +// break; +// case 'phobos': +// imgUploadPreview.style.filter = `blur(${unencoded[handle] * 3 / 100}px)`; +// break; +// case 'heat': +// imgUploadPreview.style.filter = `brightness(${1 + 2 * unencoded[handle] / 100})`; +// break; +// default: +// imgUploadPreview.style.filter = 'none'; +// } +// }); From 737eed0a6210381b3f1e03eeb064364a4c0abf84 Mon Sep 17 00:00:00 2001 From: brazilets Date: Tue, 19 Mar 2024 23:23:50 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=94?= =?UTF-8?q?=D0=97=209.13.'=D0=9F=D1=80=D0=B0=D0=B2=D0=B4=D0=B0=20=D0=B8?= =?UTF-8?q?=D0=BB=D0=B8=20=D0=B4=D0=B5=D0=B9=D1=81=D1=82=D0=B2=D0=B8=D0=B5?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/uploadForm.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/js/uploadForm.js b/js/uploadForm.js index 72e419d..6d2cad4 100644 --- a/js/uploadForm.js +++ b/js/uploadForm.js @@ -67,6 +67,15 @@ scaleControlBigger.addEventListener('click', () => { pristine.addValidator(hashtagInput, (value) => { const hashtags = value.split(' '); + if (hashtags.length > 5) { + return false; + } + + const hashDuplicates = new Set(hashtags).size !== hashtags.length; + if (hashDuplicates) { + return false; + } + for (let i = 0; i < hashtags.length; i++) { const hashtag = hashtags[i]; @@ -83,7 +92,24 @@ pristine.addValidator(hashtagInput, (value) => { } } return true; -}, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов.', 2); +}, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов. Один и тот же хэштег не может быть использован дважды. Нельзя указать больше пяти хэштегов', 2); + +hashtagInput.addEventListener('focus', () => { + document.removeEventListener('keydown', onEscKeyDown); +}); + +hashtagInput.addEventListener('blur', () => { + document.addEventListener('keydown', onEscKeyDown); +}); + +function onEscKeyDown(evt) { + if (evt.key === 'Escape' && !evt.target.closest('.text__hashtags')) { + formOverlay.classList.add('hidden'); + document.body.classList.remove('modal-open'); + } +} + +document.addEventListener('keydown', onEscKeyDown); pristine.addValidator(commentInput, (value) => { if (value === '') { From f26f0dbb56fe5c6998af4a9026d94c3587406a23 Mon Sep 17 00:00:00 2001 From: brazilets Date: Wed, 20 Mar 2024 19:50:06 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D0=B8=D1=82?= =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=94=D0=97=209.13.'=D0=9F=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B4=D0=B0=20=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=B5=D0=B9=D1=81?= =?UTF-8?q?=D1=82=D0=B2=D0=B8=D0=B5'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/uploadForm.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/js/uploadForm.js b/js/uploadForm.js index 6d2cad4..2312f61 100644 --- a/js/uploadForm.js +++ b/js/uploadForm.js @@ -23,12 +23,7 @@ cancelButton.addEventListener('click', () => { document.body.classList.remove('modal-open'); }); -document.addEventListener('keydown', (evt) => { - if (evt.key === 'Escape') { - formOverlay.classList.add('hidden'); - document.body.classList.remove('modal-open'); - } -}); +document.addEventListener('keydown', onEscKeyDown); cancelButton.addEventListener('click', () => { formOverlay.classList.add('hidden'); @@ -64,35 +59,48 @@ scaleControlBigger.addEventListener('click', () => { } }); +let message = 'Неверный формат хэштега.'; pristine.addValidator(hashtagInput, (value) => { + if (!value) { + return true; + } + const hashtags = value.split(' '); if (hashtags.length > 5) { + message = 'Слишком много хэштегов. Максимум 5.'; return false; } - const hashDuplicates = new Set(hashtags).size !== hashtags.length; + const lowerCaseHashtags = hashtags.map((hashtag) => hashtag.toLowerCase()); + const hashDuplicates = new Set(lowerCaseHashtags).size !== lowerCaseHashtags.length; + if (hashDuplicates) { + message = 'Хэштеги не должны повторяться.'; return false; } for (let i = 0; i < hashtags.length; i++) { const hashtag = hashtags[i]; - + if (hashtag === '#') { + return false; + } if (!hashtag.startsWith('#')) { + message = 'Хэштег должен начинаться с символа #.'; return false; } - if (hashtag.length > 20) { + message = 'Хэштег не может быть длиннее 20 символов.'; return false; } if (/[^a-zа-яё0-9#]/i.test(hashtag)) { + message = 'Хэштег может содержать только буквы и цифры.'; return false; } } return true; -}, 'Неверный формат хэштега. Хэштег должен начинаться с символа #, содержать от 1 до 19 буквенно-цифровых символов и не содержать специальных символов или пробелов. Один и тот же хэштег не может быть использован дважды. Нельзя указать больше пяти хэштегов', 2); +}, () => message, 2); hashtagInput.addEventListener('focus', () => { document.removeEventListener('keydown', onEscKeyDown);