Merge pull request #7 from Amilotxak/module8-task1

js/bigPosts.js

@@ -0,0 +1,79 @@
+const bigPicture = document.querySelector('.big-picture');
+const commentsContainer = bigPicture.querySelector('.social__comments');
+const closeBigPicture = bigPicture.querySelector('.big-picture__cancel');
+const container = document.querySelector('.pictures');
+
+//отрисовка комментариев
+const renderComments = (comments) => {
+  commentsContainer.innerHTML = ''; // Очищаем предыдущие комментарии
+  const fragment = document.createDocumentFragment();
+
+  comments.forEach((comment) => {
+    const commentElement = document.createElement('li');
+    commentElement.classList.add('social__comment');
+
+    const pictureNode = document.createElement('img');
+    pictureNode.classList.add('social__picture');
+    pictureNode.src = comment.avatar;
+    pictureNode.alt = comment.name;
+
+    const textNode = document.createElement('p');
+    textNode.classList.add('social__text');
+    textNode.textContent = comment.message;
+
+    commentElement.appendChild(pictureNode);
+    commentElement.appendChild(textNode);
+    fragment.appendChild(commentElement);
+  });
+
+  commentsContainer.appendChild(fragment);
+};
+
+const openBigPicture = (currentPicture) => {
+  bigPicture.classList.remove('hidden');
+  bigPicture.querySelector('.big-picture__img img').src = currentPicture.url;
+  bigPicture.querySelector('.likes-count').textContent = currentPicture.likes;
+  bigPicture.querySelector('.social__comment-shown-count').textContent = currentPicture.comments.length;
+  bigPicture.querySelector('.social__comment-total-count').textContent = currentPicture.comments.length;
+
+  renderComments(currentPicture.comments);
+  bigPicture.querySelector('.social__caption').textContent = currentPicture.description;
+
+  bigPicture.querySelector('.social__comment-count').classList.add('hidden');
+  bigPicture.querySelector('.comments-loader').classList.add('hidden');
+  document.body.classList.add('modal-open');
+};
+
+const closeBigPictureHandler = () => {
+  bigPicture.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+};
+
+const closeBigPictureOnEsc = (event) => {
+  if (event.key === 'Escape') {
+    closeBigPictureHandler();
+  }
+};
+
+const initBigPictureEvents = () => {
+  closeBigPicture.addEventListener('click', closeBigPictureHandler);
+  document.addEventListener('keydown', closeBigPictureOnEsc);
+};
+
+const bigPictureHandler = (generatedPosts) => {
+  initBigPictureEvents();
+
+  container.addEventListener('click', (evt) => {
+    const currentPictures = evt.target.closest('.picture');
+
+    if (currentPictures) {
+      const pictureId = Number(currentPictures.dataset.pictureId);
+      const currentPicture = generatedPosts.find((photo) => photo.id === pictureId);
+      if (currentPicture) {
+        openBigPicture(currentPicture);
+      }
+    }
+  });
+};
+
+export { bigPictureHandler };

js/functions.js

@@ -71,23 +71,23 @@
 //   '14:00' - начало встречи
 //   90 - продолжительность встречи в минутах
 
-const isMeetingWithinWorkday = (startOfWorkday, endOfWorkday, meetingStart, meetingDuration) => {
-
-  const timeToMinutes = (time) => {
-    const [hours, minutes] = time.split(':').map(Number);
-    return hours * 60 + minutes;
-  };
-
-  const startMinutes = timeToMinutes(startOfWorkday);
-  const endMinutes = timeToMinutes(endOfWorkday);
-  const meetingStartMinutes = timeToMinutes(meetingStart);
-  const meetingEndMinutes = meetingStartMinutes + meetingDuration;
-
-  if (startMinutes <= meetingStartMinutes && meetingEndMinutes <= endMinutes) {
-    return true;
-  } {
-    return false;
-  }
-};
-
-console.log(isMeetingWithinWorkday());
+// const isMeetingWithinWorkday = (startOfWorkday, endOfWorkday, meetingStart, meetingDuration) => {
+
+//   const timeToMinutes = (time) => {
+//     const [hours, minutes] = time.split(':').map(Number);
+//     return hours * 60 + minutes;
+//   };
+
+//   const startMinutes = timeToMinutes(startOfWorkday);
+//   const endMinutes = timeToMinutes(endOfWorkday);
+//   const meetingStartMinutes = timeToMinutes(meetingStart);
+//   const meetingEndMinutes = meetingStartMinutes + meetingDuration;
+
+//   if (startMinutes <= meetingStartMinutes && meetingEndMinutes <= endMinutes) {
+//     return true;
+//   } {
+//     return false;
+//   }
+// };
+
+// console.log(isMeetingWithinWorkday());

js/main.js

@@ -1,8 +1,12 @@
 import { getPosts } from './data.js';
 import { render } from './posts.js';
+import { bigPictureHandler } from './bigPosts.js';
 
 // получаю данные
 const postsList = getPosts();
 
-//отрисовываю посты
+// Отрисовываю посты
 render(postsList);
+
+//открытие большого поста
+bigPictureHandler(postsList);

js/posts.js

@@ -10,6 +10,8 @@ const render = (dataList) => {
     image.src = photo.url;
     image.alt = photo.description;
 
+    thumbnail.dataset.pictureId = photo.id;
+
     thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
     thumbnail.querySelector('.picture__likes').textContent = photo.likes;