Merge pull request #16 from YouAreNotReady/master

Author: keksobot

js/comments-loader.js

@@ -2,8 +2,8 @@ const SHOW_COMMENTS_STEP = 5;
 
 const commentsList = document.querySelector('.social__comments');
 const commentTemplate = commentsList.querySelector('li');
-const pictureShownComments = document.querySelector('.social__comment-shown-count');
-const pictureTotalComments = document.querySelector('.social__comment-total-count');
+const imageShownComments = document.querySelector('.social__comment-shown-count');
+const imageTotalComments = document.querySelector('.social__comment-total-count');
 const commentsShowMoreButton = document.querySelector('.comments-loader');
 let currentComments = [];
 let currentCommentsCount = 0;
@@ -32,15 +32,15 @@ const showNextComments = () => {
     commentsShowMoreButton.classList.add('hidden');
   }
 
-  pictureShownComments.textContent = renderedCommentsCount;
+  imageShownComments.textContent = renderedCommentsCount;
   currentCommentsCount += SHOW_COMMENTS_STEP;
 };
 
 const showComments = (comments) => {
   commentsList.innerHTML = '';
   currentComments = comments;
-  pictureShownComments.textContent = currentCommentsCount + SHOW_COMMENTS_STEP;
-  pictureTotalComments.textContent = comments.length;
+  imageShownComments.textContent = currentCommentsCount + SHOW_COMMENTS_STEP;
+  imageTotalComments.textContent = comments.length;
   showNextComments();
   commentsShowMoreButton.addEventListener('click', showNextComments);
 };

js/image-filtration.js

@@ -1,43 +1,58 @@
-import { renderPictures } from './pictures-preview-loader.js';
-import { getRandomInteger } from './util.js';
+import { renderImages } from './images-preview-loader.js';
+import { getRandomInteger, debounce } from './util.js';
 
-const RANDOM_PHOTOS_COUNT = 10;
+const RANDOM_IMAGES_COUNT = 10;
 const RERENDER_DELAY = 500;
 
-const picturesFilter = document.querySelector('.img-filters');
+const imagesFilter = document.querySelector('.img-filters');
 const FilterButtons = {
-  default: picturesFilter.querySelector('#filter-default'),
-  random: picturesFilter.querySelector('#filter-random'),
-  discussed: picturesFilter.querySelector('#filter-discussed'),
+  default: imagesFilter.querySelector('#filter-default'),
+  random: imagesFilter.querySelector('#filter-random'),
+  discussed: imagesFilter.querySelector('#filter-discussed'),
 };
 
-const compareCommentsCount = (photoA, photoB) => {
-  const commentsA = photoA.comments.length;
-  const commentsB = photoB.comments.length;
+const compareCommentsCount = (imageA, imageB) => {
+  const commentsA = imageA.comments.length;
+  const commentsB = imageB.comments.length;
 
   return commentsB - commentsA;
 };
 
-const showFilter = () => picturesFilter.classList.remove('img-filters--inactive');
+const showFilter = () => imagesFilter.classList.remove('img-filters--inactive');
 
-const renderRandomPhotos = (photos) => {
-  const randomPhotos = photos.slice().sort(() => getRandomInteger(-1, 1)).splice(0, RANDOM_PHOTOS_COUNT);
-  renderPictures(randomPhotos);
+const renderRandomImages = (images) => {
+  const randomImages = images
+    .slice()
+    .sort(() => getRandomInteger(-1, 1))
+    .splice(0, RANDOM_IMAGES_COUNT);
+  renderImages(randomImages);
 };
-const renderMostDiscussedPhotos = (photos) => {
-  const sortedPhotos = photos.slice().sort(compareCommentsCount);
-  renderPictures(sortedPhotos);
+const renderMostDiscussedImages = (images) => {
+  const sortedImages = images
+    .slice()
+    .sort(compareCommentsCount);
+  renderImages(sortedImages);
 };
 
-const debounceRender = (renderFunction) => {
-  clearTimeout(debounceRender.lastDebouncedCall);
-  debounceRender.lastDebouncedCall = setTimeout(() => {
-    renderFunction();
-  }, RERENDER_DELAY);
-};
+const setFilterClickHandler = (images) => {
+
+  const applyFilter = (selectedFilter) => {
+    switch (selectedFilter) {
+      case 'defaultFilter':
+        renderImages(images);
+        break;
+      case 'random':
+        renderRandomImages(images);
+        break;
+      case 'discussed':
+        renderMostDiscussedImages(images);
+        break;
+    }
+  };
+
+  const debouncedApplyFilter = debounce(applyFilter, RERENDER_DELAY);
 
-const setFilterClickHandler = (photos) => {
-  picturesFilter.addEventListener('click', (evt) => {
+  imagesFilter.addEventListener('click', (evt) => {
     const activeFilter = document.querySelector('.img-filters__button--active');
 
     if (evt.target === activeFilter && evt.target !== FilterButtons.random) {
@@ -49,21 +64,24 @@ const setFilterClickHandler = (photos) => {
       evt.target.classList.add('img-filters__button--active');
     }
 
+    let selectedFilter;
+
     switch (evt.target) {
       case FilterButtons.default:
-        debounceRender(() => renderPictures(photos));
+        selectedFilter = 'defaultFilter';
         break;
 
       case FilterButtons.random:
-        debounceRender(() => renderRandomPhotos(photos));
+        selectedFilter = 'random';
         break;
 
       case FilterButtons.discussed:
-        debounceRender(() => renderMostDiscussedPhotos(photos));
+        selectedFilter = 'discussed';
         break;
     }
+
+    debouncedApplyFilter(selectedFilter);
   });
 };
 
-
 export { showFilter, setFilterClickHandler };

js/images-preview-loader.js

@@ -0,0 +1,46 @@
+import { openImagePopup } from './show-image-fullscreen.js';
+
+const imagesFragment = document.createDocumentFragment();
+const imagesContainer = document.querySelector('.pictures');
+const imageTemplate = document.querySelector('#picture').content.querySelector('.picture');
+
+/**
+* Отображает превью изображений на странице.
+* @param {Array} usersImages - Массив объектов с данными изображений.
+*/
+
+const renderImages = (usersImages) => {
+  const existingImages = imagesContainer.querySelectorAll('.picture');
+  existingImages.forEach((picture) => picture.remove());
+
+  usersImages.forEach(({ id, url, description, likes, comments }) => {
+    const imageElement = imageTemplate.cloneNode(true);
+
+    imageElement.dataset.id = id;
+    imageElement.querySelector('.picture__img').src = url;
+    imageElement.querySelector('.picture__img').alt = description;
+    imageElement.querySelector('.picture__likes').textContent = likes;
+    imageElement.querySelector('.picture__comments').textContent = comments.length;
+
+    imagesFragment.appendChild(imageElement);
+  });
+
+  imagesContainer.appendChild(imagesFragment);
+};
+
+const setImagesContainerClickHandler = (images) => {
+  imagesContainer.addEventListener('click', (evt) => {
+    const currentImageNode = evt.target.closest('.picture');
+    if (currentImageNode){
+      const currentImageNodeId = currentImageNode.dataset.id;
+
+      const currentImageObject = images.find((image) => image.id === Number(currentImageNodeId));
+
+      if (currentImageObject) {
+        openImagePopup(currentImageObject);
+      }
+    }
+  });
+};
+
+export { imagesContainer, renderImages, setImagesContainerClickHandler };

js/main.js

@@ -1,4 +1,4 @@
-import { renderPictures, setPicturesContainerClickHandler } from './pictures-preview-loader.js';
+import { renderImages, setImagesContainerClickHandler } from './images-preview-loader.js';
 import { loadData, showError } from './api.js';
 import { initForm } from './image-upload.js';
 import { showFilter, setFilterClickHandler } from './image-filtration.js';
@@ -12,11 +12,11 @@ import './image-filtration.js';
 
 const init = async () => {
   try {
-    const picturesData = await loadData();
-    renderPictures(picturesData);
-    setPicturesContainerClickHandler(picturesData);
+    const imagesData = await loadData();
+    renderImages(imagesData);
+    setImagesContainerClickHandler(imagesData);
     showFilter();
-    setFilterClickHandler(picturesData);
+    setFilterClickHandler(imagesData);
   } catch {
     showError();
   }

js/pictures-preview-loader.js

@@ -1,46 +1,46 @@
 import { isEscapeKey } from './util.js';
 import { showComments, clearComments } from './comments-loader.js';
 
-const picture = document.querySelector('.big-picture');
-const pictureLikesCount = document.querySelector('.likes-count');
-const pictureCloseButton = document.querySelector('#picture-cancel');
-const pictureDescription = document.querySelector('.social__caption');
+const image = document.querySelector('.big-picture');
+const imageLikesCount = document.querySelector('.likes-count');
+const imageCloseButton = document.querySelector('#picture-cancel');
+const imageDescription = document.querySelector('.social__caption');
 
 const documentKeydownHandler = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
-    closePicturePopup();
+    closeImagePopup();
     document.removeEventListener('keydown', documentKeydownHandler);
 
     clearComments();
   }
 };
 
-function closePicturePopup() {
+function closeImagePopup() {
   document.body.classList.remove('modal-open');
 
-  picture.classList.add('hidden');
+  image.classList.add('hidden');
 
   clearComments();
 
-  pictureCloseButton.removeEventListener('click', closePicturePopup);
+  imageCloseButton.removeEventListener('click', closeImagePopup);
   document.removeEventListener('keydown', documentKeydownHandler);
 }
 
-const openPicturePopup = (pictureData) => {
+const openImagePopup = (imageData) => {
   document.body.classList.add('modal-open');
 
-  picture.classList.remove('hidden');
+  image.classList.remove('hidden');
 
-  picture.querySelector('img').src = pictureData.url;
-  pictureLikesCount.textContent = pictureData.likes;
-  pictureDescription.textContent = pictureData.description;
-  pictureCloseButton.addEventListener('click', closePicturePopup);
+  image.querySelector('img').src = imageData.url;
+  imageLikesCount.textContent = imageData.likes;
+  imageDescription.textContent = imageData.description;
+  imageCloseButton.addEventListener('click', closeImagePopup);
 
-  showComments(pictureData.comments);
+  showComments(imageData.comments);
 
   document.addEventListener('keydown', documentKeydownHandler);
 };
 
 
-export { openPicturePopup };
+export { openImagePopup };

js/show-image-fullscreen.js

@@ -5,4 +5,14 @@ const getRandomInteger = function(min, max) {
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export { getRandomInteger, isEscapeKey };
+const debounce = (callback, delayMS = 500) => {
+  let timeoutId;
+
+  return (...rest) => {
+    clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => callback.apply(this, rest), delayMS);
+  };
+};
+
+export { getRandomInteger, isEscapeKey, debounce };