Merge pull request #7 from AnastasiiaXX/module8-task1

Author: keksobot

js/helpers.js

@@ -54,3 +54,5 @@ export const checkWorkingTime = (workDayStart, workDayEnd, meetingStartTime, mee
 
   return meetingStart >= workStart && meetingEnd <= workEnd;
 };
+
+export const isEscapeKey = (evt) => evt.key === 'Escape';

js/main.js

@@ -1,4 +1,6 @@
 import { renderThumbnails } from './thumbnails.js';
+import { showFullPhoto } from './show-full-photo.js';
 
 renderThumbnails();
+showFullPhoto();
 

js/modal.js

@@ -0,0 +1,19 @@
+import { isEscapeKey } from './helpers.js';
+let currentHandler = null;
+
+export const closeModal = (modalElement, bodyElement) => {
+  modalElement.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+  document.removeEventListener('keydown', currentHandler);
+};
+export const openModal = (modalElement, bodyElement) => {
+  currentHandler = (evt) => {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      closeModal(modalElement, bodyElement);
+    }
+  };
+  modalElement.classList.remove('hidden');
+  bodyElement.classList.add('modal-open');
+  document.addEventListener('keydown', currentHandler);
+};

js/show-full-photo.js

@@ -0,0 +1,63 @@
+import { createPhotos } from './generate-data';
+import { closeModal, openModal } from './modal.js';
+
+const fullPhotoModal = document.querySelector('.big-picture');
+const comments = document.querySelector('.social__comments');
+const body = document.querySelector('body');
+const closeModalButton = document.querySelector('.big-picture__cancel');
+
+const renderComments = (mockedComments) => {
+  mockedComments.forEach((commentData) => {
+    const comment = document.createElement('li');
+    const avatar = document.createElement('img');
+    const commentText = document.createElement('p');
+
+    comment.classList.add('social__comment');
+    avatar.classList.add('social__picture');
+    avatar.alt = commentData.name;
+    avatar.src = commentData.avatar;
+    avatar.width = 35;
+    avatar.height = 35;
+    commentText.classList.add('social__text');
+    commentText.textContent = commentData.message;
+
+    comment.append(avatar);
+    comment.append(commentText);
+
+    comments.append(comment);
+  });
+};
+
+const fillPhotoData = (currentPhoto) => {
+  const fullPhotoImage = document.querySelector('.big-picture__img img');
+  const fullPhotoDescription = document.querySelector('.social__caption');
+  const fullPhotoLikes = document.querySelector('.likes-count');
+  const shownCommentsCount = document.querySelector('.social__comment-shown-count');
+  fullPhotoImage.src = currentPhoto.url;
+  fullPhotoImage.alt = currentPhoto.description;
+  fullPhotoLikes.textContent = currentPhoto.likes;
+  fullPhotoDescription.textContent = currentPhoto.description;
+  shownCommentsCount.textContent = currentPhoto.comments.length;
+  comments.innerHTML = '';
+  renderComments(currentPhoto.comments);
+};
+
+export const showFullPhoto = () => {
+  const photos = createPhotos();
+  const thumbnails = document.querySelectorAll('.picture');
+  const commentsCount = document.querySelector('.social__comment-count');
+  const commentsLoaderBtn = document.querySelector('.comments-loader');
+
+  thumbnails.forEach((thumbnail) => {
+    thumbnail.addEventListener('click', () => {
+      openModal(fullPhotoModal, body);
+      commentsCount.classList.add('hidden');
+      commentsLoaderBtn.classList.add('hidden');
+      const photoId = Number(thumbnail.dataset.id);
+      const currentPhoto = photos.find((photo) => photo.id === photoId);
+      fillPhotoData(currentPhoto);
+    });
+  });
+
+  closeModalButton.addEventListener('click', () => closeModal(fullPhotoModal, body));
+};

js/thumbnails.js

@@ -7,6 +7,8 @@ export const renderThumbnails = () => {
 
   const renderPhoto = (element) => {
     const newPhotoTemplate = photoTemplate.cloneNode(true);
+    const link = newPhotoTemplate.querySelector('a');
+    link.dataset.id = element.id;
     const image = newPhotoTemplate.querySelector('.picture__img');
     image.src = element.url;
     image.alt = element.description;