module 8 task1

js/main.js

@@ -1,4 +1,16 @@
+import './post.js';
 import { createMockPosts } from './mock.js';
+import { printThumbnails } from './thumbnails.js';
+import { picturesContainer } from './thumbnails.js';
+import { findPostContent } from './post.js';
 
-createMockPosts();
+const initApp = () => {
+  const data = createMockPosts();
+  printThumbnails(data);
+  picturesContainer.addEventListener('click', (evt) => {
+    findPostContent(evt, data);
+  });
+};
+
+document.addEventListener('DOMContentLoaded', initApp);
 

js/mock.js

@@ -1,7 +1,5 @@
-import { createRandomId, getRandomInteger } from './utils';
-import { printThumbnails } from './thumbnails';
-import { POSTS_DATA } from './data';
-
+import { createRandomId, getRandomInteger } from './utils.js';
+import { POSTS_DATA } from './data.js';
 const { POSTS_COUNT, NAMES, DESCRIPTIONS, COMMENTS } = POSTS_DATA;
 
 const generatePhotoId = createRandomId(1, POSTS_COUNT);
@@ -27,11 +25,7 @@ const createPhotoPost = () => {
   };
 };
 
-const createMockPosts = () => {
-  const data = Array.from({length: POSTS_COUNT}, createPhotoPost);
-
-  printThumbnails(data);
-};
-
+// const createMockPosts = () => Array.from({length: POSTS_COUNT}, createPhotoPost);
+const createMockPosts = () => Array.from({length: POSTS_COUNT}, createPhotoPost);
 
 export {createMockPosts};

js/post.js

@@ -0,0 +1,55 @@
+const postModal = document.querySelector('.big-picture');
+const closeModalBtn = document.querySelector('.big-picture__cancel');
+const postComments = document.querySelector('.social__comments');
+
+
+const closePostModal = () => {
+  postModal.classList.add('hidden');
+  closeModalBtn.removeEventListener('click', closePostModal);
+  document.body.classList.remove('modal-open');
+};
+
+document.addEventListener('keydown', (evt) => {
+  if (evt.key === 'Escape') {
+    closePostModal();
+  }
+});
+
+const insertPostComments = (commentsArr) => {
+  const commentsFragment = document.createDocumentFragment();
+  commentsArr.forEach((comment) => {
+    const commentNode = document.createElement('li');
+    commentNode.classList.add('social__comment');
+    commentNode.innerHTML = `
+    <img
+      class="social__picture"
+      src="${comment.avatar}"
+      alt="${comment.name}"
+      width="35" height="35">
+    <p class="social__text">${comment.message}</p>`;
+    commentsFragment.append(commentNode);
+  });
+  postComments.append(commentsFragment);
+};
+
+const openPostModal = (content) => {
+  document.body.classList.add('modal-open');
+  postModal.querySelector('img').src = content.url;
+  postModal.querySelector('.likes-count').textContent = content.likes;
+  postModal.querySelector('.social__comment-total-count').textContent = content.comments.length;
+  postModal.querySelector('.social__comment-count').classList.add('hidden');
+  postModal.querySelector('.comments-loader').classList.add('hidden');
+  postComments.innerHTML = '';
+  insertPostComments(content.comments);
+  closeModalBtn.addEventListener('click', closePostModal);
+};
+
+const findPostContent = (evt, data) => {
+  const url = evt.target.closest('.picture').querySelector('img').src;
+  const photoId = Number(url.split('/').pop().split('.')[0]);
+  const res = data.find((photo) => photo.id === photoId);
+  postModal.classList.remove('hidden');
+  openPostModal(res);
+};
+
+export {findPostContent};

js/thumbnails.js

@@ -15,4 +15,4 @@ const printThumbnails = (data) => {
   picturesContainer.append(postsFragment);
 };
 
-export {printThumbnails};
+export {printThumbnails, picturesContainer};