refactor: unify naming for arrays and event handlers

Author: NoaVel

js/filters.js

@@ -11,42 +11,41 @@ const FilterId = {
   DISCUSSED: 'filter-discussed',
 };
 
-const filtersSection = document.querySelector('.img-filters');
-const filtersForm = document.querySelector('.img-filters__form');
+const filtersSectionNode = document.querySelector('.img-filters');
+const filtersFormNode = document.querySelector('.img-filters__form');
 
 let currentFilter = FilterId.DEFAULT;
-let photos = [];
+let loadedPhotos = [];
 
-const getRandomPhotos = (photosArray) => {
-  const shuffled = [...photosArray];
+const getRandomPhotos = (photos) => {
+  const shuffled = [...photos];
   for (let i = shuffled.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
     [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
   }
   return shuffled.slice(0, RANDOM_PHOTOS_COUNT);
 };
 
-
-const getDiscussedPhotos = (photosArray) =>
-  [...photosArray].sort((a, b) => b.comments.length - a.comments.length);
+const getDiscussedPhotos = (photos) =>
+  [...photos].sort((a, b) => b.comments.length - a.comments.length);
 
 const filterPhotos = () => {
   switch (currentFilter) {
     case FilterId.RANDOM:
-      return getRandomPhotos(photos);
+      return getRandomPhotos(loadedPhotos);
     case FilterId.DISCUSSED:
-      return getDiscussedPhotos(photos);
+      return getDiscussedPhotos(loadedPhotos);
     default:
-      return [...photos];
+      return [...loadedPhotos];
   }
 };
 
-const updateActiveButton = (clickedButton) => {
-  const activeButton = filtersForm.querySelector(`.${ACTIVE_BUTTON_CLASS}`);
-  if (activeButton) {
-    activeButton.classList.remove(ACTIVE_BUTTON_CLASS);
+const updateActiveButton = (clickedButtonNode) => {
+  const activeButtonNode = filtersFormNode.querySelector(`.${ACTIVE_BUTTON_CLASS}`);
+  if (activeButtonNode) {
+    activeButtonNode.classList.remove(ACTIVE_BUTTON_CLASS);
   }
-  clickedButton.classList.add(ACTIVE_BUTTON_CLASS);
+  clickedButtonNode.classList.add(ACTIVE_BUTTON_CLASS);
 };
 
 const debouncedRenderThumbnails = debounce(
@@ -71,13 +70,13 @@ const onFilterButtonClick = (evt) => {
 };
 
 const showFilters = () => {
-  filtersSection.classList.remove('img-filters--inactive');
+  filtersSectionNode.classList.remove('img-filters--inactive');
 };
 
-const initFilters = (loadedPhotos) => {
-  photos = loadedPhotos;
+const initFilters = (photos) => {
+  loadedPhotos = photos;
   showFilters();
-  filtersForm.addEventListener('click', onFilterButtonClick);
+  filtersFormNode.addEventListener('click', onFilterButtonClick);
 };
 
 export { initFilters };

js/messages.js

@@ -2,30 +2,30 @@
 
 const ALERT_SHOW_TIME = 5000;
 
-const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
-const successTemplate = document.querySelector('#success').content.querySelector('.success');
-const errorTemplate = document.querySelector('#error').content.querySelector('.error');
+const dataErrorTemplateNode = document.querySelector('#data-error').content.querySelector('.data-error');
+const successTemplateNode = document.querySelector('#success').content.querySelector('.success');
+const errorTemplateNode = document.querySelector('#error').content.querySelector('.error');
 
 
 // Показывает сообщение об ошибке загрузки данных
 
 const showDataLoadError = (message) => {
-  const dataErrorElement = dataErrorTemplate.cloneNode(true);
-  dataErrorElement.querySelector('.data-error__title').textContent = message;
-  document.body.appendChild(dataErrorElement);
+  const dataErrorNode = dataErrorTemplateNode.cloneNode(true);
+  dataErrorNode.querySelector('.data-error__title').textContent = message;
+  document.body.appendChild(dataErrorNode);
 
   setTimeout(() => {
-    dataErrorElement.remove();
+    dataErrorNode.remove();
   }, ALERT_SHOW_TIME);
 };
 
 // Создает и показывает модальное сообщение (успех или ошибка)
 
 const showMessage = (template, buttonClass) => {
-  const messageElement = template.cloneNode(true);
-  document.body.appendChild(messageElement);
+  const messageNode = template.cloneNode(true);
+  document.body.appendChild(messageNode);
 
-  const closeButton = messageElement.querySelector(buttonClass);
+  const closeButtonNode = messageNode.querySelector(buttonClass);
 
   const handlers = {};
 
@@ -38,28 +38,28 @@ const showMessage = (template, buttonClass) => {
   };
 
   handlers.onOutsideClick = (evt) => {
-    if (evt.target === messageElement) {
+    if (evt.target === messageNode) {
       handlers.closeMessage();
     }
   };
 
   handlers.closeMessage = () => {
-    messageElement.remove();
+    messageNode.remove();
     document.removeEventListener('keydown', handlers.onEscKeydown, true);
     document.removeEventListener('click', handlers.onOutsideClick);
   };
 
-  closeButton.addEventListener('click', handlers.closeMessage);
+  closeButtonNode.addEventListener('click', handlers.closeMessage);
   document.addEventListener('keydown', handlers.onEscKeydown, true);
   document.addEventListener('click', handlers.onOutsideClick);
 };
 
 const showSuccessMessage = () => {
-  showMessage(successTemplate, '.success__button');
+  showMessage(successTemplateNode, '.success__button');
 };
 
 const showErrorMessage = () => {
-  showMessage(errorTemplate, '.error__button');
+  showMessage(errorTemplateNode, '.error__button');
 };
 
 export { showDataLoadError, showSuccessMessage, showErrorMessage };

js/render-comments.js

@@ -9,12 +9,12 @@ const bigPictureNode = document.querySelector('.big-picture');
 const socialCommentsNode = bigPictureNode.querySelector('.social__comments');
 const commentsShownCountNode = bigPictureNode.querySelector('.social__comment-shown-count');
 const commentsTotalCountNode = bigPictureNode.querySelector('.social__comment-total-count');
-const socialCommentTemplate = socialCommentsNode.querySelector('.social__comment');
+const socialCommentTemplateNode = socialCommentsNode.querySelector('.social__comment');
 const commentsCountNode = bigPictureNode.querySelector('.social__comment-count');
 const commentsLoaderNode = bigPictureNode.querySelector('.social__comments-loader');
 
 const createComment = ({ avatar, name, message}) => {
-  const socialCommentNode = socialCommentTemplate.cloneNode(true);
+  const socialCommentNode = socialCommentTemplateNode.cloneNode(true);
   const socialPictureNode = socialCommentNode.querySelector('.social__picture');
 
   socialPictureNode.src = avatar;

js/render-thumbnails.js

@@ -1,14 +1,14 @@
 import { openBigPicture } from './full-size-picture.js';
 
 const picturesNode = document.querySelector('.pictures');
-const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
+const pictureTemplateNode = document.querySelector('#picture').content.querySelector('.picture');
 
-if (!picturesNode || !pictureTemplate) {
+if (!picturesNode || !pictureTemplateNode) {
   throw new Error('Не найден контейнер .pictures или шаблон #picture');
 }
 
 const createPicture = ({id, url, description, comments, likes }) => {
-  const pictureNode = pictureTemplate.cloneNode(true);
+  const pictureNode = pictureTemplateNode.cloneNode(true);
 
   pictureNode.dataset.pictureId = id;
   const imageNode = pictureNode.querySelector('.picture__img');