Merge pull request #17 from PavelUd/master

htmlacademy-univer-javascript-1 · Dec 26, 2023 · fbc48d7 · fbc48d7
2 parents afd20c4 + eb92210
commit fbc48d7
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 147 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1195,7 +1195,7 @@ main {
   top: 0;
   right: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: 2;
 
   background-color: rgba(0, 0, 0, 0.8);
 }

diff --git a/js/filters.js b/js/filters.js
@@ -18,7 +18,7 @@ const filtersForm = filtersContainer.querySelector('.img-filters__form');
 let activeFilter = Filter.DEFAULT;
 let photos = [];
 
-const filterFinction = {
+const filterFunction = {
   [Filter.DEFAULT]: () => photos,
   [Filter.RANDOM]: () => shuffle(photos.slice()).slice(0, MAX_COUNT_RANDOM_PHOTO),
   [Filter.DISCUSSED]: () => photos.slice().sort(sortByCommentCountDescending)
@@ -31,7 +31,7 @@ const onFiltersFormClick = (evt) =>{
     filtersForm.querySelector(`#${activeFilter}`).classList.remove(ACTIVE_FILTER_CLASS);
     evt.target.classList.add(ACTIVE_FILTER_CLASS);
     activeFilter = id;
-    const pictures = filterFinction[id]();
+    const pictures = filterFunction[id]();
     destroyThumbnails();
     thumbnailsRender(pictures);
     renderBigPicture(pictures);

diff --git a/js/form.js b/js/form.js
@@ -2,7 +2,7 @@ import { sendData } from './api.js';
 import {isEscapeKey, isRightString} from './util.js';
 import { showSuccessMessage, showErrorMessage } from './mesages.js';
 import{renderScaleButtons, destroyScaleButtons} from './image-scale.js';
-import{createEffectSlider, onEffectsFilterChange, resetFilters} from './image-effects.js';
+import{createEffectSlider, onEffectsFilterChange as onEffectsFilterElementChange, resetFilters} from './image-effects.js';
 
 const MAX_HASHTAG_LENGTH = 20;
 const MAX_COMMENT_LENGTH = 140;
@@ -13,16 +13,16 @@ const ErrorMessage = {
   BAD_COMMENT: 'Комментарий не более 140 символов'
 };
 
-const uploadButton = document.querySelector('#upload-file');
-const form = document.querySelector('.img-upload__form');
-const overlay = document.querySelector('.img-upload__overlay');
-const mainImage = overlay.querySelector('.img-upload__preview img');
-const effectsPreviews = overlay.querySelectorAll('.effects__item .effects__preview');
-const cancelButton = document.querySelector('#upload-cancel');
-const hashtags = document.querySelector('.text__hashtags');
-const comments = document.querySelector('.text__description');
-const submitButton = document.querySelector('.img-upload__submit');
-const effectsFilter = document.querySelector('.img-upload__effects');
+const uploadButtonElement = document.querySelector('#upload-file');
+const formElement = document.querySelector('.img-upload__form');
+const overlayElement = document.querySelector('.img-upload__overlay');
+const mainImageElement = overlayElement.querySelector('.img-upload__preview img');
+const effectsPreviews = overlayElement.querySelectorAll('.effects__item .effects__preview');
+const cancelButtonElement = document.querySelector('#upload-cancel');
+const hashtagElement = document.querySelector('.text__hashtags');
+const commentElement = document.querySelector('.text__description');
+const submitButtonElement = document.querySelector('.img-upload__submit');
+const effectsFilterElement = document.querySelector('.img-upload__effects');
 
 const SubmitButtonText = {
   IDLE: 'Опубликовать',
@@ -33,7 +33,7 @@ const isCorrectComment = (comment) => isRightString(comment, MAX_COMMENT_LENGTH)
 
 const isCorrectHashtags = () =>{
   let isСorrectTag = true;
-  const hashtagsArray = hashtags.value.split(' ').map((hashtag) => {
+  const hashtagsArray = hashtagElement.value.split(' ').map((hashtag) => {
     hashtag = hashtag.toLowerCase();
     if(!HASHTAG_RULE.test(hashtag) || String(hashtag).length > MAX_HASHTAG_LENGTH){
       isСorrectTag = false;
@@ -42,7 +42,7 @@ const isCorrectHashtags = () =>{
   });
   const uniqueTags = new Set(hashtagsArray);
 
-  return (isСorrectTag && uniqueTags.size === hashtagsArray.length && hashtagsArray.length <= MAX_HASHTAG_COUNT) || hashtags.value === '';
+  return (isСorrectTag && uniqueTags.size === hashtagsArray.length && hashtagsArray.length <= MAX_HASHTAG_COUNT) || hashtagElement.value === '';
 };
 
 const onFocusPreventClose = (evt) => {
@@ -51,99 +51,96 @@ const onFocusPreventClose = (evt) => {
   }
 };
 
-const onComentsKeydown = (evt) => onFocusPreventClose(evt);
-const onHashtagsKeydown = (evt) => onFocusPreventClose(evt);
+const onCommentElementKeydown = (evt) => onFocusPreventClose(evt);
+const onHashtagElementKeydown = (evt) => onFocusPreventClose(evt);
 
-const onEscapeKeydown = (evt) => {
+const onDocumentKeydown = (evt) => {
   if(isEscapeKey(evt)){
-    form.reset();
+    formElement.reset();
     closeOverlay();
   }
 };
 
-const onCancelButtonClick = () => {
-  form.reset();
+const onCancelButtonElementClick = () => {
+  formElement.reset();
   closeOverlay();
 };
 
 const blockSubmitButton = () => {
-  submitButton.disabled = true;
-  submitButton.textContent = SubmitButtonText.SENDING;
+  submitButtonElement.disabled = true;
+  submitButtonElement.textContent = SubmitButtonText.SENDING;
 };
 
 const unblockSubmitButton = () => {
-  submitButton.disabled = false;
-  submitButton.textContent = SubmitButtonText.IDLE;
+  submitButtonElement.disabled = false;
+  submitButtonElement.textContent = SubmitButtonText.IDLE;
 };
 
 const validateForm = () => {
-  const pristine = new Pristine(form, {
+  const pristine = new Pristine(formElement, {
     classTo: 'img-upload__field-wrapper',
     errorTextParent: 'img-upload__field-wrapper',
     errorTextClass: 'img-upload__field-wrapper__error'
   });
-  pristine.addValidator(hashtags, isCorrectHashtags,
+  pristine.addValidator(hashtagElement, isCorrectHashtags,
     ErrorMessage.BAD_HASHTAG);
-  pristine.addValidator(comments, isCorrectComment, ErrorMessage.BAD_COMMENT);
+  pristine.addValidator(commentElement, isCorrectComment, ErrorMessage.BAD_COMMENT);
 
   return pristine.validate();
 };
 
 
-const onFormSubmit = (evt) => {
+const onFormElementSubmit = (evt) => {
   evt.preventDefault();
   if (validateForm()) {
     blockSubmitButton();
     sendData(new FormData(evt.target))
       .then(() =>{
         showSuccessMessage();
-        form.reset();
+        closeOverlay();
       })
       .catch(showErrorMessage)
       .finally(() => {
         unblockSubmitButton();
-        closeOverlay();
       }
       );
   }
 };
 
 function closeOverlay () {
   document.body.classList.remove('modal-open');
-  overlay.classList.add('hidden');
-  form.removeEventListener('submit', onFormSubmit);
-  comments.removeEventListener('keydown', onComentsKeydown);
-  hashtags.removeEventListener('keydown', onHashtagsKeydown);
-  document.removeEventListener('keydown', onEscapeKeydown);
+  overlayElement.classList.add('hidden');
+  formElement.removeEventListener('submit', onFormElementSubmit);
+  commentElement.removeEventListener('keydown', onCommentElementKeydown);
+  hashtagElement.removeEventListener('keydown', onHashtagElementKeydown);
+  document.removeEventListener('keydown', onDocumentKeydown);
   destroyScaleButtons();
   resetFilters();
+  formElement.reset();
 }
 
 const uploadFile = () => {
-  const file = uploadButton.files[0];
-  mainImage.src = mainImage.src = URL.createObjectURL(file);
+  const file = uploadButtonElement.files[0];
+  mainImageElement.src = mainImageElement.src = URL.createObjectURL(file);
   effectsPreviews.forEach((picture) => {
-    picture.style.backgroundImage = `url('${mainImage.src}')`;
+    picture.style.backgroundImage = `url('${mainImageElement.src}')`;
   });
 };
 
-const onUploadButtonChange = () => {
+const onUploadButtonElementChange = () => {
   uploadFile();
-  overlay.classList.remove('hidden');
+  overlayElement.classList.remove('hidden');
   document.body.classList.add('modal-open');
-  form.addEventListener('submit', onFormSubmit);
+  formElement.addEventListener('submit', onFormElementSubmit);
   renderScaleButtons();
-  effectsFilter.addEventListener('change', onEffectsFilterChange);
-  cancelButton.addEventListener('click', onCancelButtonClick);
-  document.addEventListener('keydown', onEscapeKeydown);
-  comments.addEventListener('keydown', onComentsKeydown);
-  hashtags.addEventListener('keydown', onHashtagsKeydown);
+  effectsFilterElement.addEventListener('change', onEffectsFilterElementChange);
+  cancelButtonElement.addEventListener('click', onCancelButtonElementClick);
+  document.addEventListener('keydown', onDocumentKeydown);
+  commentElement.addEventListener('keydown', onCommentElementKeydown);
+  hashtagElement.addEventListener('keydown', onHashtagElementKeydown);
 };
 
 export const renderUploadForm = () => {
-
-  uploadButton.addEventListener('change', onUploadButtonChange);
+  uploadButtonElement.addEventListener('change', onUploadButtonElementChange);
   createEffectSlider();
 };
-
-
diff --git a/js/fullsize-images-render.js b/js/fullsize-images-render.js
@@ -1,15 +1,15 @@
 import { isEscapeKey } from './util.js';
 
 const LIMIT = 5;
-const bigPicture = document.querySelector('.big-picture');
-const commentsCount = bigPicture.querySelector('.comments-count');
-const likesCount = bigPicture.querySelector('.likes-count');
-const bigImage = bigPicture.querySelector('.big-picture__img img');
-const description = bigPicture.querySelector('.social__caption');
-const uploadMoreButton = bigPicture.querySelector('.comments-loader');
-const nowComments = bigPicture.querySelector('.openedComments-count');
-const commentsBlock = bigPicture.querySelector('.social__comments');
-const closeButton = bigPicture.querySelector('.big-picture__cancel');
+const bigPictureElement = document.querySelector('.big-picture');
+const commentsCountElement = bigPictureElement.querySelector('.comments-count');
+const likesCountElement = bigPictureElement.querySelector('.likes-count');
+const bigImageElement = bigPictureElement.querySelector('.big-picture__img img');
+const descriptionElement = bigPictureElement.querySelector('.social__caption');
+const uploadMoreButtonElement = bigPictureElement.querySelector('.comments-loader');
+const nowCommentsElement = bigPictureElement.querySelector('.openedComments-count');
+const commentsBlockElement = bigPictureElement.querySelector('.social__comments');
+const closeButtonElement = bigPictureElement.querySelector('.big-picture__cancel');
 let commentsCounter;
 let photos;
 
@@ -24,73 +24,73 @@ const createComment = (avatar, name, text) => `<li class="social__comment">
 
 
 const uploadComments = () => {
-  const id = commentsBlock.dataset.photoId;
+  const id = commentsBlockElement.dataset.photoId;
   const comments = photos.filter((photo) => photo.id === Number(id))[0].comments;
   const start = commentsCounter - LIMIT;
-  nowComments.textContent = commentsCounter;
+  nowCommentsElement.textContent = commentsCounter;
   if(commentsCounter >= comments.length){
-    nowComments.textContent = comments.length;
-    uploadMoreButton.classList.add('hidden');
+    nowCommentsElement.textContent = comments.length;
+    uploadMoreButtonElement.classList.add('hidden');
   }
-  commentsBlock.insertAdjacentHTML(
+  commentsBlockElement.insertAdjacentHTML(
     'beforeend',
     comments.slice(start, commentsCounter).map((comment) => createComment(comment.avatar, comment.name, comment.message)).join('')
   );
 };
 
-const onUploadMoreButtonClick = () =>{
+const onUploadMoreButtonElementClick = () =>{
   commentsCounter += LIMIT;
-  nowComments.textContent = commentsCounter;
+  nowCommentsElement.textContent = commentsCounter;
   uploadComments();
 };
 
 const createCommentsBlock = () =>{
-  commentsBlock.innerHTML = '';
-  nowComments.textContent = LIMIT;
+  commentsBlockElement.innerHTML = '';
+  nowCommentsElement.textContent = LIMIT;
   commentsCounter = LIMIT;
   uploadComments();
-  uploadMoreButton.addEventListener('click', onUploadMoreButtonClick);
+  uploadMoreButtonElement.addEventListener('click', onUploadMoreButtonElementClick);
 };
 
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     hideModal();
   }
 };
-const onCloseButtonClick = () => {
+const onCloseButtonElementClick = () => {
   hideModal();
 };
 
 
 const destroyCommentsBlock = () => {
-  uploadMoreButton.removeEventListener('click', onUploadMoreButtonClick);
-  uploadMoreButton.classList.remove('hidden');
+  uploadMoreButtonElement.removeEventListener('click', onUploadMoreButtonElementClick);
+  uploadMoreButtonElement.classList.remove('hidden');
 };
 
 function hideModal () {
   document.body.classList.remove('modal-open');
-  bigPicture.classList.add('hidden');
-  closeButton.removeEventListener('click', onCloseButtonClick);
+  bigPictureElement.classList.add('hidden');
+  closeButtonElement.removeEventListener('click', onCloseButtonElementClick);
   document.removeEventListener('keydown', onDocumentKeydown);
   destroyCommentsBlock();
 }
 
 const constructBigPicture = (picture, photoInfo, image) =>{
-  bigImage.src = image.src;
-  const likes = picture.querySelector('.picture__likes');
+  bigImageElement.src = image.src;
+  const likesElement = picture.querySelector('.picture__likes');
   const maxCommentsCount = picture.querySelector('.picture__comments');
-  description.textContent = photoInfo.description;
-  likesCount.textContent = likes.textContent;
-  commentsCount.textContent = maxCommentsCount.textContent;
-  commentsBlock.dataset.photoId = photoInfo.id;
+  descriptionElement.textContent = photoInfo.description;
+  likesCountElement.textContent = likesElement.textContent;
+  commentsCountElement.textContent = maxCommentsCount.textContent;
+  commentsBlockElement.dataset.photoId = photoInfo.id;
   createCommentsBlock();
 };
 
 const showBigPicture = (picture, photoInfo, image) => {
   constructBigPicture(picture, photoInfo, image);
-  bigPicture.classList.remove('hidden');
+  bigPictureElement.classList.remove('hidden');
   document.body.classList.add('modal-open');
-  closeButton.addEventListener('click', onCloseButtonClick);
+  closeButtonElement.addEventListener('click', onCloseButtonElementClick);
   document.addEventListener('keydown', onDocumentKeydown);
 };
 
@@ -104,4 +104,3 @@ export const renderBigPicture = (photoInfos) => {
     picture.addEventListener('click',  () => showBigPicture(picture, photoInfo, image));
   });
 };
-
diff --git a/js/image-effects.js b/js/image-effects.js
@@ -20,39 +20,39 @@ const Effect = {
 };
 
 const DEFAULT_FILTER = 'NONE';
-const image = document.querySelector('.img-upload__preview').querySelector('img');
-const sliderValue = document.querySelector('.effect-level__value');
-const sliderWrapper = document.querySelector('.img-upload__effect-level');
-const slider = document.querySelector('.effect-level__slider');
+const imageElement = document.querySelector('.img-upload__preview').querySelector('img');
+const sliderValueElement = document.querySelector('.effect-level__value');
+const sliderWrapperElement = document.querySelector('.img-upload__effect-level');
+const sliderElement = document.querySelector('.effect-level__slider');
 
 
 export const createEffectSlider = () =>{
-  sliderWrapper.classList.add('hidden');
-  noUiSlider.create(slider,  Effect[DEFAULT_FILTER].options);
+  sliderWrapperElement.classList.add('hidden');
+  noUiSlider.create(sliderElement,  Effect[DEFAULT_FILTER].options);
 };
 
 export const resetFilters = () => {
-  image.style.filter = Effect[DEFAULT_FILTER].name;
-  sliderWrapper.classList.add('hidden');
+  imageElement.style.filter = Effect[DEFAULT_FILTER].name;
+  sliderWrapperElement.classList.add('hidden');
 };
 
 const updateImagePreview = (effect) => {
-  image.removeAttribute('class');
-  image.classList.add(`effects__preview--${effect}`);
+  imageElement.removeAttribute('class');
+  imageElement.classList.add(`effects__preview--${effect}`);
 
-  slider.noUiSlider.updateOptions(Effect[effect].options);
-  slider.noUiSlider.on('update', () => {
-    sliderValue.value = slider.noUiSlider.get();
-    image.style.filter = `${Effect[effect].filter}(${sliderValue.value}${Effect[effect].unit})`;
+  sliderElement.noUiSlider.updateOptions(Effect[effect].options);
+  sliderElement.noUiSlider.on('update', () => {
+    sliderValueElement.value = sliderElement.noUiSlider.get();
+    imageElement.style.filter = `${Effect[effect].filter}(${sliderValueElement.value}${Effect[effect].unit})`;
   });
 };
 
 const updateSliderOptions = (effect) => {
-  slider.noUiSlider.updateOptions(Effect[effect].options);
+  sliderElement.noUiSlider.updateOptions(Effect[effect].options);
 };
 
 const showFilterPreview = (effect) => {
-  sliderWrapper.classList.remove('hidden');
+  sliderWrapperElement.classList.remove('hidden');
   updateImagePreview(effect);
   updateSliderOptions(effect);
 };