Skip to content

Commit

Permalink
Merge pull request #14 from Daniil888-m/module9-task1
Browse files Browse the repository at this point in the history
Правда или действие
  • Loading branch information
craz3r authored Dec 24, 2024
2 parents df921e7 + 1602870 commit 95e8fd5
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 1 deletion.
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h2 class="pictures__title visually-hidden">Фотографии других
<section class="img-upload">
<div class="img-upload__wrapper">
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
<form class="img-upload__form" id="upload-select-image" autocomplete="off">
<form action="https://31.javascript.htmlacademy.pro/kekstagram" method="POST" enctype="multipart/form-data" class="img-upload__form" id="upload-select-image" autocomplete="off">

<!-- Изначальное состояние поля для загрузки изображения -->
<fieldset class="img-upload__start">
Expand Down Expand Up @@ -234,6 +234,7 @@ <h2 class="success__title">Изображение успешно загруже
<h2 class="data-error__title">Не удалось загрузить данные</h2>
</section>
</template>
<script src="vendor/pristine/pristine.min.js"></script>
<script src="js/main.js" type="module"></script>
<script src="js/functions.js"></script>
</body>
Expand Down
1 change: 1 addition & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { renderPictures } from './render-pictures.js';
import { openBigPhotoPopup } from './big-picture-popup.js';
import './upload-form.js';

renderPictures();

Expand Down
116 changes: 116 additions & 0 deletions js/upload-form.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import { show, hide } from './utils.js';
const uploadForm = document.querySelector('#upload-select-image');
const uploadInput = uploadForm.querySelector('.img-upload__input');
const uploadOverlay = uploadForm.querySelector('.img-upload__overlay');
const hashtagsInput = uploadForm.querySelector('.text__hashtags');
const descriptionInput = uploadForm.querySelector('.text__description');
const uploadFormCancelElem = uploadForm.querySelector('.img-upload__cancel');
const HASHTAGS_ERRORS = {
maxCount: 'Максимум 5 хэштегов',
invalidHashtag: 'Хэштег начинается с символа # и состоит только из букв и цифр и не превышает длину 20 символов',
repeatedHashtags: 'Хэштеги не должны повторяться'
};
const HASHTAGS_MAX_COUNT = 5;
const MAX_DESCRIPTION_LETTERS_COUNT = 140;

function parseHashtags(hashtags) {
return hashtags.trim().split(' ').map((hashtag) => hashtag.toLowerCase());
}

const pristine = new Pristine(uploadForm, {
classTo: 'img-upload__form',
succesClass: 'has-success',
errorClass: '--error',
errorTextParent: 'img-upload__field-wrapper',
errorTextClass: 'img-upload__field-wrapper',

}, true);

pristine.addValidator(hashtagsInput, (value) => {
if (value.length) {
const hashtags = parseHashtags(value);
const uniqueHashtags = new Set(hashtags);
if (uniqueHashtags.size !== hashtags.length) {
return false;
}
}
return true;

}, HASHTAGS_ERRORS.repeatedHashtags);
pristine.addValidator(hashtagsInput, (value) => {
if (value.length) {
const hashtags = parseHashtags(value);

if (hashtags.length > HASHTAGS_MAX_COUNT) {
return false;
}
}
return true;

}, HASHTAGS_ERRORS.maxCount);
pristine.addValidator(hashtagsInput, (value) => {
if (value.length) {
const hashtags = parseHashtags(value);

return hashtags.every((hashtag) => {
const hashRegExp = /^#[a-zа-яё0-9]{1,19}$/i;
return hashRegExp.test(hashtag);
});
}
return true;
}, HASHTAGS_ERRORS.invalidHashtag);

hashtagsInput.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.stopPropagation();
}
});

descriptionInput.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.stopPropagation();
}
});
pristine.addValidator(descriptionInput, (value) => {
if (value.length) {
if (value.length > MAX_DESCRIPTION_LETTERS_COUNT) {
return false;
}
}
return true;
}, 'Максимальная длина комментария 140 символов');
function onUploadOverlayKeydown(e) {
if (e.key === 'Escape') {
closeUploadOverlay();
}
}

function closeUploadOverlay(e) {
document.removeEventListener('keydown', onUploadOverlayKeydown);
if (e) {
e.preventDefault();
}
hide(uploadOverlay);
document.body.classList.remove('modal-open');
uploadForm.reset();
}

uploadInput.addEventListener('change', () => {
showUploadOverlay();
document.addEventListener('keydown', onUploadOverlayKeydown);
});

function showUploadOverlay() {
show(uploadOverlay);
document.body.classList.add('modal-open');
}

uploadFormCancelElem.addEventListener('click', closeUploadOverlay);
uploadForm.addEventListener('submit', (e) => {
if (!pristine.validate()) {
e.preventDefault();

}

});

0 comments on commit 95e8fd5

Please sign in to comment.