Вносит правки в решение

htmlacademy-javascript · Jan 13, 2025 · 071ae71 · 071ae71
1 parent 63e8bd9
commit 071ae71
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 71 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/big-photo-viewer.js b/js/big-photo-viewer.js
@@ -0,0 +1,56 @@
+import {fillCommentsList} from './comments-viewer.js';
+
+const picturesContainerElement = document.querySelector('.pictures');
+const bigPhotoElement = document.querySelector('.big-picture');
+
+const bodyElement = document.body;
+let photoData = [];
+
+picturesContainerElement.addEventListener('click', (evt) => {
+  const targetPhotoId = evt.target.closest('.picture');
+  const targetPhoto = photoData.find((photo) => photo.photoId === Number(targetPhotoId.dataset.photoId));
+  const {url, description, likes, comments} = targetPhoto;
+
+  bigPhotoElement.querySelector('.social__comment-count').classList.add('hidden');
+  bigPhotoElement.querySelector('.comments-loader').classList.add('hidden');
+
+  bigPhotoElement.querySelector('img').setAttribute('src', url);
+  bigPhotoElement.querySelector('.likes-count').textContent = likes;
+  bigPhotoElement.querySelector('.social__comment-total-count').textContent = comments.length;
+  bigPhotoElement.querySelector('.social__caption').textContent = description;
+
+  bigPhotoElement.classList.remove('hidden');
+  bodyElement.classList.add('modal-open');
+
+  fillCommentsList(targetPhoto.comments);
+
+  bigPhotoElement.querySelector('.social__comment-shown-count').textContent = comments.length;
+
+  bigPhotoElement.setAttribute('tabindex', '0');
+  bigPhotoElement.focus();
+});
+
+bigPhotoElement.addEventListener('click', (evt) => {
+  if(evt.target.closest('.big-picture__cancel')) {
+    closeBigPhoto();
+  }
+});
+
+bigPhotoElement.addEventListener('keydown', (evt) => {
+  if (evt.key === 'Escape') {
+    closeBigPhoto();
+  }
+});
+
+function closeBigPhoto() {
+  bigPhotoElement.classList.add('hidden');
+  bodyElement.classList.remove('modal-open');
+}
+
+function setPhotoData(data) {
+  photoData = data;
+}
+
+export {setPhotoData};
+
+
diff --git a/js/bigPhotoViewer.js b/js/bigPhotoViewer.js
diff --git a/js/comments.js → js/comments-data.js b/js/comments.js → js/comments-data.js
@@ -11,7 +11,7 @@ const AVATARS_COUNT = {
 };
 
 const SENTENCES_COUNT = {
-  MIN: 0,
+  MIN: 1,
   MAX: 2
 };
 

diff --git a/js/comments-viewer.js b/js/comments-viewer.js
@@ -0,0 +1,17 @@
+const socialCommentsElement = document.querySelector('.social__comments');
+const commentTemplateElement = socialCommentsElement.querySelector('.social__comment');
+
+function fillCommentsList(comments) {
+  socialCommentsElement.innerHTML = '';
+  comments.forEach((comment) => {
+    const newCommentElement = commentTemplateElement.cloneNode(true);
+    const commentPictureElement = newCommentElement.querySelector('.social__picture');
+
+    commentPictureElement.setAttribute('src', comment.avatar);
+    commentPictureElement.setAttribute('alt', comment.name);
+    newCommentElement.querySelector('.social__text').textContent = comment.commentsList;
+    socialCommentsElement.appendChild(newCommentElement);
+  });
+}
+
+export {fillCommentsList};
diff --git a/js/data.js b/js/data.js
@@ -1,5 +1,5 @@
 import {generateUniqueInteger, getRandomInteger} from './util.js';
-import {getRandomComments} from './comments.js';
+import {getRandomComments} from './comments-data.js';
 
 const LIKES_COUNT = {
   MIN: 15,
@@ -28,7 +28,34 @@ const PHOTO_DESCRIPTIONS = ['Закат над океаном',
   'Маленькая хижина в горах', 'Закат в тропиках', 'Стадо оленей на рассвете', 'Городской парк с фонтаном',
   'Облачный горизонт над мегаполисом', 'Гребной канал с лодками', 'Старинный замок в горах'];
 
-const photoData = (function getPhotoData(objectsCount) {
+let photoData = [];
+
+// const photoData = (function getPhotoData(objectsCount) {
+//   const objects = [];
+//   const getUniquePhotoIdValue = generateUniqueInteger(getRandomInteger, ID_RANGE.MIN, ID_RANGE.MAX);
+//   const getUniqueUrlValue = generateUniqueInteger(getRandomInteger, URL_RANGE.MIN, URL_RANGE.MAX);
+//
+//   for (let i = 0; i < objectsCount - 1; i++) {
+//     const comments = getRandomComments();
+//
+//     const photoId = getUniquePhotoIdValue();
+//     const url = `photos/${getUniqueUrlValue()}.jpg`;
+//     const description = PHOTO_DESCRIPTIONS[getRandomInteger(0, PHOTO_DESCRIPTIONS.length - 1)];
+//     const likes = getRandomInteger(LIKES_COUNT.MIN, LIKES_COUNT.MAX);
+//
+//     objects.push({
+//       photoId,
+//       url,
+//       description,
+//       likes,
+//       comments
+//     });
+//   }
+//
+//   return objects;
+// })(26);
+
+function getPhotoData(objectsCount) {
   const objects = [];
   const getUniquePhotoIdValue = generateUniqueInteger(getRandomInteger, ID_RANGE.MIN, ID_RANGE.MAX);
   const getUniqueUrlValue = generateUniqueInteger(getRandomInteger, URL_RANGE.MIN, URL_RANGE.MAX);
@@ -51,6 +78,10 @@ const photoData = (function getPhotoData(objectsCount) {
   }
 
   return objects;
-})(26);
+}
+
+function generateMockData(count) {
+  photoData = getPhotoData(count);
+}
 
-export {photoData};
+export {photoData, generateMockData};
diff --git a/js/main.js b/js/main.js
@@ -1,5 +1,8 @@
-import './data.js';
+import {photoData, generateMockData} from './data.js';
 import {showThumbnail} from './thumbnails.js';
-import './bigPhotoViewer.js';
+import {setPhotoData} from './big-photo-viewer.js';
+
+generateMockData(26);
+showThumbnail(photoData);
+setPhotoData(photoData);
 
-showThumbnail();
diff --git a/js/thumbnails.js b/js/thumbnails.js
@@ -1,17 +1,15 @@
-import {photoData} from './data.js';
-
 const pictureTemplateElement = document.querySelector('#picture').content.querySelector('.picture');
 const picturesContainer = document.querySelector('.pictures');
 
-function showThumbnail() {
+function showThumbnail(photoData) {
   const fragment = document.createDocumentFragment();
 
   photoData.forEach(({photoId ,url, description, likes, comments }) => {
     const pictureElement = pictureTemplateElement.cloneNode(true);
 
     pictureElement.dataset.photoId = photoId;
-    pictureElement.querySelector('img').src = url;
-    pictureElement.querySelector('img').alt = description;
+    pictureElement.querySelector('img').setAttribute('src', url);
+    pictureElement.querySelector('img').setAttribute('alt', description);
     pictureElement.querySelector('.picture__comments').textContent = comments.length;
     pictureElement.querySelector('.picture__likes').textContent = likes;
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ const AVATARS_COUNT = { @@
     };
     const SENTENCES_COUNT = {
-      MIN: 0,
+      MIN: 1,
       MAX: 2
     };
@@ Expand Down @@