Добавляет решение задания "Открывается и закрывается Ч.1"

htmlacademy-javascript · Jan 12, 2025 · 63e8bd9 · 63e8bd9
1 parent cc96486
commit 63e8bd9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <title>Кекстаграм</title>
+  <title>Кексограм</title>
 </head>
 
 <body>

diff --git a/js/bigPhotoViewer.js b/js/bigPhotoViewer.js
@@ -1,30 +1,57 @@
 import {photoData} from './data.js';
 
 const picturesContainer = document.querySelector('.pictures');
-const bigPicture = document.querySelector('.big-picture');
+const bigPhoto = document.querySelector('.big-picture');
 const socialComments = document.querySelector('.social__comments');
+const commentTemplate = socialComments.querySelector('.social__comment');
 const body = document.body;
 
+socialComments.innerHTML = '';
+
 picturesContainer.addEventListener('click', (evt) => {
   const targetPhotoId = evt.target.closest('.picture');
+  const targetPhoto = photoData.find((photo) => photo.photoId === Number(targetPhotoId.dataset.photoId));
 
-  const targetPhoto = photoData.find((picture) => picture.photoId === Number(targetPhotoId.dataset.photoId));
+  bigPhoto.querySelector('.social__comment-count').classList.add('hidden');
+  bigPhoto.querySelector('.comments-loader').classList.add('hidden');
 
-  bigPicture.querySelector('img').src = targetPhoto.url;
-  bigPicture.querySelector('.likes-count').textContent = targetPhoto.likes;
-  bigPicture.querySelector('.social__comment-total-count').textContent = targetPhoto.comments.length;
+  bigPhoto.querySelector('img').src = targetPhoto.url;
+  bigPhoto.querySelector('.likes-count').textContent = targetPhoto.likes;
+  bigPhoto.querySelector('.social__comment-total-count').textContent = targetPhoto.comments.length;
+  bigPhoto.querySelector('.social__caption').textContent = targetPhoto.description;
 
-  bigPicture.classList.remove('hidden');
+  bigPhoto.classList.remove('hidden');
   body.classList.add('modal-open');
+
+  targetPhoto.comments.forEach((comment) => {
+    const newComment = commentTemplate.cloneNode(true);
+    newComment.querySelector('.social__picture').src = comment.avatar;
+    newComment.querySelector('.social__text').textContent = comment.commentsList;
+    newComment.querySelector('.social__picture').alt = comment.name;
+    socialComments.appendChild(newComment);
+  });
+
+  bigPhoto.querySelector('.social__comment-shown-count').textContent = targetPhoto.comments.length;
+
+  bigPhoto.setAttribute('tabindex', '0');
+  bigPhoto.focus();
 });
 
-bigPicture.addEventListener('click', (evt) => {
+bigPhoto.addEventListener('click', (evt) => {
   if(evt.target.closest('.big-picture__cancel')) {
-    bigPicture.classList.add('hidden');
-    body.classList.remove('modal-open');
+    closeBigPhoto();
   }
 });
 
-function createCommentTemplate() {
+bigPhoto.addEventListener('keydown', (evt) => {
+  if (evt.key === 'Escape') {
+    closeBigPhoto();
+  }
+});
 
+function closeBigPhoto() {
+  bigPhoto.classList.add('hidden');
+  body.classList.remove('modal-open');
 }
+
+
diff --git a/js/comments.js b/js/comments.js
@@ -6,13 +6,13 @@ const COMMENTS_COUNT = {
 };
 
 const AVATARS_COUNT = {
-  MIN: 0,
+  MIN: 1,
   MAX: 6
 };
 
 const SENTENCES_COUNT = {
   MIN: 0,
-  MAX: 4
+  MAX: 2
 };
 
 const RANDOM_RANGE = {

diff --git a/js/main.js b/js/main.js
@@ -3,9 +3,3 @@ import {showThumbnail} from './thumbnails.js';
 import './bigPhotoViewer.js';
 
 showThumbnail();
-// const OBJECTS_COUNT = 26;
-//
-// const randomPhotoObjects = getPhotoData(OBJECTS_COUNT);
-// photoObjects = randomPhotoObjects;
-//
-// showThumbnail(randomPhotoObjects);
diff --git a/js/thumbnails.js b/js/thumbnails.js
@@ -2,7 +2,6 @@ import {photoData} from './data.js';
 
 const pictureTemplateElement = document.querySelector('#picture').content.querySelector('.picture');
 const picturesContainer = document.querySelector('.pictures');
-// const thumbnailsReadyEvent = new Event('thumbnailsIsReady');
 
 function showThumbnail() {
   const fragment = document.createDocumentFragment();
@@ -20,8 +19,6 @@ function showThumbnail() {
   });
 
   picturesContainer.appendChild(fragment);
-
-  // picturesContainer.dispatchEvent(thumbnailsReadyEvent);
 }
 
 export {showThumbnail};
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,13 +6,13 @@ const COMMENTS_COUNT = { @@
     };
     const AVATARS_COUNT = {
-      MIN: 0,
+      MIN: 1,
       MAX: 6
     };
     const SENTENCES_COUNT = {
       MIN: 0,
-      MAX: 4
+      MAX: 2
     };
     const RANDOM_RANGE = {
@@ Expand Down @@