Открывается и закрывается

js/functions.js

@@ -46,4 +46,4 @@ const isInWorkingTime = function (workStart, workEnd, meetingStart, meetingTime)
 
   return workStartInMinute < meetingStartInMinute && meetingEnd <= workEndInMinute;
 };
-isInWorkingTime();
+isInWorkingTime('1:1', '1:1', '1:1', 90);

js/gallery.js

@@ -0,0 +1,63 @@
+import { openPreview } from './preview.js';
+
+const template = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
+
+// создает миниатюру
+
+const createThumbnail = ({url, description, likes, comments, id}) => {
+  const thumbnail = template.cloneNode(true);
+
+  const thumbnailImage = thumbnail.querySelector('.picture__img');
+
+  thumbnailImage.src = url;
+  thumbnailImage.alt = description;
+  thumbnail.querySelector('.picture__likes').textContent = likes;
+  thumbnail.querySelector('.picture__comments').textContent = comments.length ?? 0;
+  thumbnail.dataset.id = id;
+
+  return thumbnail;
+};
+
+// создает блок миниатюр
+
+const renderThumbnails = (photosArray) => {
+  photosArray.forEach((photo) => {
+    container.append(createThumbnail(photo));
+  });
+};
+
+// находит в массиве данные нажатой миниатюры
+
+const findPhotoById = (selectedThumbnail, photosArray) => {
+  const thumbnailId = Number(selectedThumbnail.dataset.id);
+
+  return photosArray.find((photo) => photo.id === thumbnailId);
+};
+
+// передает данные нажатой миниатюры
+
+const getSelectedThumbnailData = (photosArray) => {
+  container.addEventListener('click', (evt) => {
+    const selectedThumbnail = evt.target.closest('.picture');
+    if (!selectedThumbnail) {
+      return;
+    }
+
+    evt.preventDefault();
+
+    const selectedThumbnailData = findPhotoById(selectedThumbnail, photosArray);
+    openPreview(selectedThumbnailData);
+  });
+
+};
+
+// передает исходные данные
+
+const initGallery = (photosArray) => {
+
+  renderThumbnails(photosArray);
+  getSelectedThumbnailData(photosArray);
+};
+
+export { initGallery };

js/main.js

@@ -1,4 +1,4 @@
 import { getPhotos } from './photo-description.js';
-import { createThumbnails } from './thumbnails.js';
+import { initGallery } from './gallery.js';
 
-createThumbnails(getPhotos());
+initGallery(getPhotos());

js/preview-comments.js

@@ -0,0 +1,70 @@
+const COMMENTS_NUMBER = 5;
+
+const previewShownComments = document.querySelector('.social__comment-shown-count');
+const previewMoreButton = document.querySelector('.comments-loader');
+const previewCommentsList = document.querySelector('.social__comments');
+
+let comments = [];
+let commentsShown = 0;
+
+// создает элемент комментария
+
+const getPreviewComments = (commentData) => {
+  const previewComment = document.createElement('li');
+  previewComment.classList.add('social__comment');
+
+  previewComment.innerHTML = `
+  <img
+    class="social__picture"
+    src="${commentData.avatar}"
+    alt="${commentData.name}"
+    width="35" height="35">
+  <p class="social__text">${commentData.message}</p>`;
+
+  return previewComment;
+};
+
+// добавляет комментарии в список
+
+const addComment = (commentsBlock) => {
+  commentsBlock.forEach((comment) => {
+    previewCommentsList.append(getPreviewComments(comment));
+  });
+};
+
+// скрывает кнопку превью "загрузить еще" если комментариев больше нет
+
+const checkButtonClass = () => {
+  previewMoreButton.classList.toggle('hidden',(commentsShown >= comments.length));
+};
+
+// создает список комментариев для превью
+
+const renderNextComment = () => {
+
+  const nextComments = comments.slice(commentsShown, commentsShown + COMMENTS_NUMBER);
+  addComment(nextComments);
+  commentsShown += nextComments.length;
+
+  checkButtonClass();
+  previewShownComments.textContent = commentsShown;
+};
+
+// очищает комментарии и удаляет обработчик
+
+const clearComments = () => {
+  commentsShown = 0;
+  previewCommentsList.innerHTML = '';
+  previewMoreButton.removeEventListener('click', renderNextComment);
+};
+
+// добавляет комментарии по клику
+
+const createCommentsList = (newComments) => {
+  clearComments();
+  comments = newComments;
+  previewMoreButton.addEventListener('click', renderNextComment);
+  renderNextComment();
+};
+
+export { createCommentsList, clearComments };

js/preview.js

@@ -0,0 +1,58 @@
+import { isEscapeKey } from './util.js';
+import { createCommentsList, clearComments } from './preview-comments.js';
+
+
+const preview = document.querySelector('.big-picture');
+const previewImg = preview.querySelector('.big-picture__img img');
+const previewLikesCount = preview.querySelector('.likes-count');
+const previewCommentsCount = preview.querySelector('.social__comment-total-count');
+const previewDescription = preview.querySelector('.social__caption');
+const previewCloseButton = document.querySelector('.big-picture__cancel');
+
+
+// создает превью по клику на миниатюру
+
+const createPreview = ({url, likes, comments, description}) => {
+  previewImg.src = url;
+  previewLikesCount.textContent = likes;
+  previewCommentsCount.textContent = comments.length;
+  previewDescription.textContent = description;
+
+  createCommentsList(comments);
+};
+
+// Логика открытия превью
+
+const openPreview = (pictureData) => {
+  preview.classList.remove('hidden');
+  createPreview(pictureData);
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  document.body.classList.add('modal-open');
+
+};
+
+// Логика закрытия превью
+
+const closePreview = () => {
+  preview.classList.add('hidden');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  document.body.classList.remove('modal-open');
+  clearComments();
+};
+
+// функция закрытия превью по нажатию escape
+
+function onDocumentKeydown(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closePreview();
+  }
+}
+
+// обработчик клика на кнопку закрытия превью
+
+previewCloseButton.addEventListener('click', closePreview);
+
+
+export { openPreview };

js/util.js

@@ -1,3 +1,4 @@
+const ESCAPE = 'Escape';
 
 const getRandomInteger = (min, max) => {
   const lower = Math.ceil(Math.min(min, max));
@@ -13,6 +14,9 @@ const getId = () => {
 const getCommentId = getId();
 const getPhotoId = getId();
 
-export { getRandomInteger, getCommentId, getPhotoId };
+// Проверка нажатой клавиши
 
+const isEscapeKey = (evt) => evt.key === ESCAPE;
+
+export { getRandomInteger, getCommentId, getPhotoId, isEscapeKey };