diff --git a/index.html b/index.html index a17196b..87abaf5 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

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

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

-
+
@@ -233,5 +233,6 @@

Не удалось загрузить данны

+ diff --git a/js/form.js b/js/form.js new file mode 100644 index 0000000..2810dcb --- /dev/null +++ b/js/form.js @@ -0,0 +1,113 @@ +import {isEscapeKey} from './util.js'; + +const formUploadPhoto = document.querySelector('.img-upload__form'); +const overlayUploadPhoto = document.querySelector('.img-upload__overlay'); +const cancelUploadPhoto = document.querySelector('.img-upload__cancel'); +const body = document.querySelector('body'); +const inputUploadPhoto = formUploadPhoto.querySelector('#upload-file'); +const inputHashtagsPhoto = document.querySelector('.text__hashtags'); +const inputDescriptionPhoto = document.querySelector('.text__description'); +const regularForHashtag = /^#[a-zа-яё0-9]{1,19}$/i; + +const onDocumentKeydown = (evt) => { + if (!isEscapeKey(evt)) { + return; + } + if (document.activeElement === inputHashtagsPhoto || document.activeElement === inputDescriptionPhoto) { + evt.stopPropagation(); + } else { + evt.preventDefault(); + closeOverlayPhoto(); + } +}; + +function onCloseOverlayPhotoClick() { + closeOverlayPhoto(); +} + +function closeOverlayPhoto () { + overlayUploadPhoto.classList.add('hidden'); + body.classList.remove('modal-open'); + + inputUploadPhoto.value = ''; + inputHashtagsPhoto.value = ''; + inputDescriptionPhoto.value = ''; + + cancelUploadPhoto.removeEventListener('click', onCloseOverlayPhotoClick); + document.removeEventListener('keydown', onDocumentKeydown); + + inputUploadPhoto.addEventListener('change', openOverlayPhoto); + formUploadPhoto.removeEventListener('submit', onFormSubmit); +} + +function openOverlayPhoto () { + overlayUploadPhoto.classList.remove('hidden'); + body.classList.add('modal-open'); + + cancelUploadPhoto.addEventListener('click', onCloseOverlayPhotoClick); + document.addEventListener('keydown', onDocumentKeydown); + + inputUploadPhoto.removeEventListener('change', openOverlayPhoto); + formUploadPhoto.addEventListener('submit', onFormSubmit); +} + +inputUploadPhoto.addEventListener('change', openOverlayPhoto); + +// Валидация полей формы + +const pristine = new Pristine(formUploadPhoto, { + classTo: 'img-upload__field-wrapper', + errorTextParent: 'img-upload__field-wrapper', + errorClass: 'img-upload__field-wrapper--error', +}); + +function validateHashtag (value) { + const valueArray = value.trim().toLowerCase().split(' '); + if (valueArray.length > 5) { + return false; + } + for (let i = 0; i < valueArray.length; i++) { + if (!regularForHashtag.test(valueArray[i])) { + return false; + } + for (let k = i + 1; k < valueArray.length; k++) { + if (valueArray[i] === valueArray[k] && i !== k) { + return false; + } + } + } + return true; +} + +function getErrorMessageHashtag (value) { + const valueArray = value.trim().toLowerCase().split(' '); + if (valueArray.length > 5) { + return 'Превышено количество хэштегов'; + } + for (let i = 0; i < valueArray.length; i++) { + if (!regularForHashtag.test(valueArray[i])) { + return 'Введён невалидный хэштег'; + } + for (let k = i + 1; k < valueArray.length; k++) { + if (valueArray[i] === valueArray[k] && i !== k) { + return 'Хэштеги повторяются'; + } + } + } + return true; +} + +pristine.addValidator(inputHashtagsPhoto, validateHashtag, getErrorMessageHashtag); + +function validateDescription (value) { + return !(value.length > 140); +} + +pristine.addValidator(inputDescriptionPhoto, validateDescription, 'Длина комментария больше 140 символов'); + +function onFormSubmit (evt) { + evt.preventDefault(); + if (pristine.validate()) { + formUploadPhoto.submit(); + } +} diff --git a/js/main.js b/js/main.js index 87d4af7..8ab9c0c 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,5 @@ import {morePosts} from './data.js'; import {drawPictures} from './thumbnails.js'; +import './form.js'; drawPictures(morePosts);