Merge pull request #8 from TatianaSenatorova/module8-task2

index.html

@@ -156,14 +156,14 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
           <!-- Комментарии к изображению -->
           <div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
           <ul class="social__comments">
-            <li class="social__comment">
+            <!-- <li class="social__comment">
               <img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
               <p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
             </li>
             <li class="social__comment">
               <img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
                <p class="social__text">Да это фоташоп!!!!!!!!</p>
-            </li>
+            </li> -->
           </ul>
 
           <!-- Кнопка для загрузки новой порции комментариев -->

js/open-full-photo.js

@@ -1,6 +1,6 @@
 import { picturesContainer } from './render-photos.js';
 import {isEscapeKey} from './utils.js';
-import {renderFullPhoto} from './render-full-photo.js';
+import {renderFullPhoto, clearComments} from './render-full-photo.js';
 import { listPhotos } from './create-photos.js';
 
 const bigPicture = document.querySelector('.big-picture');
@@ -25,6 +25,7 @@ function closeFullPhoto() {
   bigPicture.classList.add('hidden');
   body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
+  clearComments();
 }
 
 picturesContainer.addEventListener('click', (evt) => {

js/render-full-photo.js

@@ -1,39 +1,81 @@
+let indexCounter = 0;
+const OPEN_COMMENTS_ON_CLICK = 5;
+let commentsData = [];
+
 const bigPicture = document.querySelector('.big-picture');
 const bigPictureImg = bigPicture.querySelector('.big-picture__img img');
 const likesCount = bigPicture.querySelector('.likes-count');
-const commentsCountFullPhoto = bigPicture.querySelector('.social__comment-count');
-const shownComments = commentsCountFullPhoto.querySelector('.social__comment-shown-count');
-const totalComments = commentsCountFullPhoto.querySelector('.social__comment-total-count');
+const commentsCountFullPhoto = bigPicture.querySelector(
+  '.social__comment-count'
+);
+const shownComments = commentsCountFullPhoto.querySelector(
+  '.social__comment-shown-count'
+);
+const totalComments = commentsCountFullPhoto.querySelector(
+  '.social__comment-total-count'
+);
 const commentsList = bigPicture.querySelector('.social__comments');
 const bigPictureDescription = bigPicture.querySelector('.social__caption');
 const buttonMoreComments = bigPicture.querySelector('.comments-loader');
 
-const renderCommentsFullPhoto = (comments) =>{
-  commentsCountFullPhoto.classList.add('hidden');
-  buttonMoreComments.classList.add('hidden');
-  comments.forEach((comment) => {
+const renderComments = (nextComments) => {
+  nextComments.forEach((comment) => {
     commentsList.insertAdjacentHTML(
-      'afterbegin',
-      `<li class="social__comment">
+      'beforeend',
+      `<li class='social__comment'>
         <img
-          class="social__picture"
-          src="${comment.avatar}"
-          alt="${comment.name}"
-          width="35" height="35">
-        <p class="social__text">${comment.message}</p>
-      </li>`,
+          class='social__picture'
+          src='${comment.avatar}'
+          alt='${comment.name}'
+          width='35' height='35'>
+        <p class='social__text'>${comment.message}</p>
+      </li>`
     );
   });
 };
 
+const disableShowcomments = (commentsLength) => {
+  buttonMoreComments.disabled = true;
+  shownComments.textContent = commentsLength;
+};
+
+const getCommentsToRender = (comments) => {
+  if(comments.length === 0) {
+    disableShowcomments(comments.length);
+    return comments;
+  }
+  indexCounter += OPEN_COMMENTS_ON_CLICK;
+  if (comments.length <= OPEN_COMMENTS_ON_CLICK) {
+    disableShowcomments(comments.length);
+    return comments;
+  }
+  if (indexCounter >= comments.length) {
+    disableShowcomments(comments.length);
+  } else {
+    shownComments.textContent = indexCounter;
+  }
+  return comments.slice(indexCounter - OPEN_COMMENTS_ON_CLICK, indexCounter);
+};
+
 const renderFullPhoto = (chosenPhotoID, listPhotos) => {
   const dataForBigPhoto = listPhotos.find((item) => item.id === chosenPhotoID);
   bigPictureImg.src = dataForBigPhoto.url;
   likesCount.textContent = dataForBigPhoto.likes;
-  shownComments.textContent = dataForBigPhoto.comments.length;
   totalComments.textContent = dataForBigPhoto.comments.length;
   bigPictureDescription.textContent = dataForBigPhoto.description;
-  renderCommentsFullPhoto(dataForBigPhoto.comments);
+  commentsData = dataForBigPhoto.comments;
+  renderComments(getCommentsToRender(commentsData));
+};
+
+buttonMoreComments.addEventListener('click', () => {
+  renderComments(getCommentsToRender(commentsData));
+});
+
+const clearComments = () => {
+  commentsList.innerHTML = '';
+  buttonMoreComments.disabled = false;
+  commentsData = [];
+  indexCounter = 0;
 };
 
-export { renderFullPhoto };
+export { renderFullPhoto, clearComments };