Открывается и закрывается (часть 2)

index.html

@@ -234,6 +234,5 @@ <h2 class="data-error__title">Не удалось загрузить данны
       </section>
     </template>
     <script src="js/main.js" type="module"></script>
-    <script src="js/functions.js"></script>
 </body>
 </html>

js/components/render-comments.js

@@ -0,0 +1,62 @@
+const COMMENTS_PORTION = 5;
+
+const createComment = ({
+  avatar,
+  name,
+  message
+}, template) => {
+
+  const comment = template.cloneNode(true);
+  const image = comment.querySelector('.social__picture');
+  const socialText = comment.querySelector('.social__text');
+
+  image.src = avatar;
+  image.alt = name;
+  socialText.textContent = message;
+
+  return comment;
+};
+
+
+const renderComments = (comments, bigPicture) => {
+  const commentList = bigPicture.querySelector('.social__comments');
+  const commentsLoader = bigPicture.querySelector('.comments-loader');
+  const commentShowCount = bigPicture.querySelector('.social__comment-shown-count');
+  let commentsShown = 0;
+
+  const template = commentList.children[0];
+  commentList.innerHTML = '';
+
+  const shownComments = () => {
+    const startIndex = commentsShown * COMMENTS_PORTION;
+    commentsShown++;
+    const endIndex = Math.min(
+      startIndex + COMMENTS_PORTION,
+      comments.length
+    );
+
+    const slicedComments = comments.slice(startIndex, endIndex);
+
+    slicedComments.forEach((comment) => {
+      commentList.append(createComment(comment, template));
+    });
+
+    if (startIndex >= comments.length) {
+      commentsLoader.classList.add('hidden');
+      commentsShown = comments.length;
+    } else {
+      commentsLoader.classList.remove('hidden');
+    }
+    commentShowCount.textContent = endIndex;
+
+  };
+  shownComments();
+
+  commentsLoader.addEventListener('click', () => {
+    shownComments();
+  });
+};
+
+export {
+  renderComments
+};

js/components/render-pictures.js

@@ -1,18 +1,21 @@
-import { showBigPicture } from './show-big-picture';
+import { showBigPicture} from './show-big-picture';
 
-const pictureTemplate = document
-  .querySelector('#picture')
+const pictureTemplate = document.querySelector('#picture')
   .content.querySelector('.picture');
 const container = document.querySelector('.pictures');
 
 const createPicture = (data) => {
-  const { comments, description, likes, url } = data;
+  const {url , description, comments, likes, } = data;
+
   const picture = pictureTemplate.cloneNode(true);
   const img = picture.querySelector('.picture__img');
+  const pictureComment = picture.querySelector('.picture__comments');
+  const pictureLikes = picture.querySelector('.picture__likes');
+
   img.src = url;
   img.alt = description;
-  picture.querySelector('.picture__comments').textContent = comments.length;
-  picture.querySelector('.picture__likes').textContent = likes;
+  pictureComment.textContent = comments.length;
+  pictureLikes.textContent = likes;
 
   picture.addEventListener('click', () => {
     showBigPicture(data);

js/components/show-big-picture.js

@@ -1,38 +1,14 @@
-const bigPicture = document.querySelector('.big-picture');
-const commentCount = document.querySelector('.social__comment-count');
-const commentList = document.querySelector('.social__comments');
-const commentsLoader = document.querySelector('.comments-loader');
-const body = document.querySelector('body');
-const cancelButton = document.querySelector('.big-picture__cancel');
+import { renderComments} from './render-comments.js';
 
-const createComment = ({ url, name, message }) => {
-  const comment = document.createElement('li');
-  comment.innerHTML =
-    '<img class="social__picture" src="" alt="" width="35" height="35"><p class="social__text"></p>';
-  comment.classList.add('social__comment');
-  const image = comment.querySelector('.social__picture');
-  image.src = url;
-  image.alt = name;
-  comment.querySelector('.social__text').textContent = message;
-
-  return comment;
-};
-
-const renderComments = (comments) => {
-  commentList.innerHTML = '';
-
-  const fragment = document.createDocumentFragment();
-  comments.forEach((comment) => {
-    const commentElement = createComment(comment);
-    fragment.append(commentElement);
-  });
-
-  commentList.append(fragment);
-};
+const body = document.body;
+const bigPicture = body.querySelector('.big-picture');
+const cancelButton = bigPicture.querySelector('.big-picture__cancel');
+const commentsLoader = bigPicture.querySelector('.comments-loader');
 
 const hideBigPicture = () => {
   bigPicture.classList.add('hidden');
   body.classList.remove('modal-open');
+  commentsLoader.classList.remove('hidden');
   document.removeEventListener('keydown', onEscKeyDown);
 };
 
@@ -47,25 +23,34 @@ const onCancelButtonClick = () => {
   hideBigPicture();
 };
 
-const renderPictureDetails = ({ url, likes, description }) => {
+const showBigPicture = ({
+  url,
+  description,
+  comments,
+  likes
+}) => {
+
   const img = bigPicture.querySelector('.big-picture__img img');
+  const socialCaption = bigPicture.querySelector('.social__caption');
+  const socialComment = bigPicture.querySelector('.social__comment-total-count');
+  const likesCount = bigPicture.querySelector('.likes-count');
+
   img.src = url;
-  img.alt = description;
-  bigPicture.querySelector('.likes-count').textContent = likes;
-  bigPicture.querySelector('.social__caption').textContent = description;
-};
+  socialCaption.alt = description;
+  socialComment.textContent = comments.length;
+  likesCount.textContent = likes;
+
 
-const showBigPicture = (data) => {
   bigPicture.classList.remove('hidden');
   body.classList.add('modal-open');
-  commentsLoader.classList.add('hidden');
-  commentCount.classList.add('hidden');
-  document.addEventListener('keydown', onEscKeyDown);
 
-  renderPictureDetails(data);
-  renderComments(data.comments);
+  renderComments(comments, bigPicture);
+
+  document.addEventListener('keydown', onEscKeyDown);
 };
 
 cancelButton.addEventListener('click', onCancelButtonClick);
 
-export { showBigPicture };
+export {
+  showBigPicture
+};

js/data/generated-object.js

@@ -78,7 +78,7 @@ const DESCRIPTIONS = [
 
 const commentInformation = () => ({
   id: generateCommentId(),
-  url: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`,
+  avatar: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`,
   message: MESSAGES[getRandomInteger(0, MESSAGES.length - 1)],
   name: `${NAMES[getRandomInteger(0, NAMES.length - 1)] } ${ SURNAMES[getRandomInteger(0, SURNAMES.length - 1)]}`
 });
@@ -87,7 +87,7 @@ const photoDescription = () => ({
   id: createId(),
   url: `photos/${createPhotoid()}.jpg`,
   description: DESCRIPTIONS[getRandomInteger(0, DESCRIPTIONS.length - 1)],
-  likes: getRandomInteger(LIKES.min, LIKES.min),
+  likes: getRandomInteger(LIKES.min, LIKES.max),
   comments: Array.from({
     length: getRandomInteger(COMMENTS.min, COMMENTS.max)
   }, commentInformation)