Merge pull request #13 from Alexandra0107/module8-task2

Author: keksobot

js/full-screen-vewer.js

@@ -0,0 +1,164 @@
+import { isEscapeKey } from './util.js';
+
+const COMMENTS_PER_PAGE = 5;
+let currentCommentsShown = 0;
+let escapeHandler = null;
+
+// Закрытие модального окна
+const closeFullScreen = (bigPicture, body, closeButton) => {
+  if (bigPicture) {
+    bigPicture.classList.add('hidden');
+  }
+  if (body) {
+    body.classList.remove('modal-open');
+  }
+  if (closeButton) {
+    closeButton.removeEventListener('click', closeFullScreen);
+  }
+  if (escapeHandler) {
+    document.removeEventListener('keydown', escapeHandler);
+    escapeHandler = null;
+  }
+  currentCommentsShown = 0;
+};
+
+// Настройка обработчиков закрытия
+const setupCloseHandlers = (bigPicture, body) => {
+  const closeButton = bigPicture?.querySelector('.big-picture__cancel');
+  if (!closeButton) {
+    return;
+  }
+
+  escapeHandler = (evt) => {
+    if (isEscapeKey(evt)) {
+      closeFullScreen(bigPicture, body, closeButton);
+    }
+  };
+
+  closeButton.addEventListener('click', () => closeFullScreen(bigPicture, body, closeButton));
+  document.addEventListener('keydown', escapeHandler);
+};
+
+// Обновление счётчика комментариев
+const updateCommentCount = (shown, total, bigPicture) => {
+  const el = bigPicture?.querySelector('.social__comment-count');
+  if (el) {
+    el.textContent = `${shown} из ${total} комментариев`;
+  }
+};
+
+// Создаём элемент комментария
+const createCommentElement = (comment) => {
+  const commentEl = document.createElement('li');
+  commentEl.className = 'social__comment';
+
+  const img = document.createElement('img');
+  img.className = 'social__picture';
+  img.src = comment.avatar;
+  img.alt = comment.name;
+
+  const textEl = document.createElement('p');
+  textEl.className = 'social__text';
+  textEl.textContent = comment.message;
+
+  commentEl.appendChild(img);
+  commentEl.appendChild(textEl);
+
+  return commentEl;
+};
+
+const renderComments = (comments, bigPicture) => {
+  const commentsContainer = bigPicture.querySelector('.social__comments');
+  const totalComments = comments.length;
+
+  // Определяем диапазон комментариев для текущей порции
+  const endIndex = Math.min(currentCommentsShown + COMMENTS_PER_PAGE, totalComments);
+  const commentsToShow = comments.slice(currentCommentsShown, endIndex);
+
+  // Отрисовываем новые комментарии
+  commentsToShow.forEach((comment) => {
+    const commentElement = createCommentElement(comment);
+    commentsContainer.appendChild(commentElement);
+  });
+
+  // Обновляем счётчик
+  currentCommentsShown = endIndex;
+  updateCommentCount(currentCommentsShown, totalComments, bigPicture);
+
+  // Скрываем кнопку, если все комментарии загружены
+  const commentsLoaderEl = bigPicture.querySelector('.comments-loader');
+  if (currentCommentsShown >= totalComments && commentsLoaderEl) {
+    commentsLoaderEl.classList.add('hidden');
+  }
+};
+
+const openFullScreen = (photoData) => {
+  const bigPicture = document.querySelector('.big-picture');
+  const body = document.body;
+
+  // Проверка существования bigPicture-без проверки выдавало ошибку в консоли
+  if (!bigPicture) {
+    throw new Error('Элемент .big-picture не найден в DOM');
+  }
+
+  //заполнение данных
+  const setTextContent = (selector, value) => {
+    const el = bigPicture.querySelector(selector);
+    if (el) {
+      el.textContent = value;
+    }
+  };
+  const setAttribute = (selector, attr, value) => {
+    const el = bigPicture.querySelector(selector);
+    if (el) {
+      el[attr] = value;
+    }
+  };
+
+  // Заполняем данные
+  setAttribute('.big-picture__img img', 'src', photoData.url);
+  setTextContent('.likes-count', photoData.likes);
+  setTextContent('.social__comment-total-count', photoData.comments.length);
+  setTextContent('.social__caption', photoData.descriptions || '');
+
+  // Показываем элементы интерфейса
+  const commentCountEl = bigPicture.querySelector('.social__comment-count');
+  const commentsLoaderEl = bigPicture.querySelector('.comments-loader');
+
+  if (commentCountEl) {
+    commentCountEl.classList.remove('hidden');
+  }
+  if (commentsLoaderEl) {
+    commentsLoaderEl.classList.remove('hidden');
+  }
+
+  // Очищаем комментарии и сбрасываем счётчик
+  const commentsContainer = bigPicture.querySelector('.social__comments');
+  if (commentsContainer) {
+    commentsContainer.innerHTML = '';
+  }
+  currentCommentsShown = 0;
+
+  // Отрисовываем первые комментарии
+  renderComments(photoData.comments, bigPicture);
+
+  // Настраиваем обработчик кнопки «Загрузить ещё» с удалением старого
+  if (commentsLoaderEl) {
+    // Удаляем старый обработчик, если есть
+    commentsLoaderEl.replaceWith(commentsLoaderEl.cloneNode(true));
+    // Добавляем новый
+    const newLoader = bigPicture.querySelector('.comments-loader');
+    newLoader.addEventListener('click', () => {
+      renderComments(photoData.comments, bigPicture);
+    });
+  }
+
+  // Добавляем классы
+  bigPicture.classList.remove('hidden');
+  body.classList.add('modal-open');
+
+  // Навешиваем обработчики закрытия
+  setupCloseHandlers(bigPicture, body);
+};
+
+export { openFullScreen };

js/fullScreenViewer.js

@@ -1,17 +1,12 @@
 import { getThumbs } from './thumbs.js';
-import { renderThumbs } from './renderer.js';
-import { openFullScreen } from './fullScreenViewer.js';
+import { renderThumbs } from './render.js';
+import { openFullScreen } from './full-screen-vewer.js';
 
 // Получаем данные
 const thumbsList = getThumbs();
 
-// Находим шаблон и контейнер
-const templateFragment = document.querySelector('#picture').content;
-const template = templateFragment.querySelector('a');
-const picturesContainer = document.querySelector('.pictures');
-
-// Вызываем функцию для отрисовки
-renderThumbs(thumbsList, template, picturesContainer);
+// получаем контейнер после отрисвки в render и вызываем функцию
+const picturesContainer = renderThumbs(thumbsList);
 // Добавляем обработчики клика на миниатюры
 picturesContainer.addEventListener('click', (evt) => {
   const thumbnail = evt.target.closest('.picture');

js/main.js

@@ -1,9 +1,18 @@
-const renderThumbs = (thumbsList, template, picturesContainer) => {
+const renderThumbs = (thumbsList) => {
+  // Находим шаблон
+  const templateFragment = document.querySelector('#picture').content;
+  const template = templateFragment.querySelector('a');
+
+  // Находим контейнер
+  const picturesContainer = document.querySelector('.pictures');
+
+  // Создаём фрагмент для эффективной отрисовки
   const fragment = document.createDocumentFragment();
 
   thumbsList.forEach((data, index) => {
     // Клонируем шаблон
     const element = template.cloneNode(true);
+
     // Находим нужные элементы внутри клона
     const img = element.querySelector('.picture__img');
     const likes = element.querySelector('.picture__likes');
@@ -16,12 +25,13 @@ const renderThumbs = (thumbsList, template, picturesContainer) => {
     comments.textContent = data.comments.length;
     element.dataset.id = index;
 
-    // Добавляем элемент во fragment
+    // Добавляем элемент во фрагмент
     fragment.appendChild(element);
   });
 
   // Добавляем фрагмент в контейнер
   picturesContainer.appendChild(fragment);
+  return picturesContainer;
 };
 
 export { renderThumbs };

js/renderer.js js/render.jsjs/renderer.js renamed to js/render.js

@@ -4,4 +4,7 @@ const getRandomInt = (min, max)=> Math.floor(Math.random() * (max - min + 1)) +
 // Функция: рандомный выбор случайного индекса из массива
 const getRandomArrayName = (array) => array[getRandomInt(0, array.length - 1)];
 
+//проверка нажатия esc
+export const isEscapeKey = (evt) => evt.key === 'Escape';
+
 export {getRandomInt,getRandomArrayName};