Merge pull request #8 from suntira/module8-task2

Author: keksobot

js/comments.js

@@ -0,0 +1,63 @@
+import { DATA_ELEMENTS } from './photo-modal-elements.js';
+
+const COMMENTS_PER_ITERATION = 5;
+
+let currentPhotoComments = [];
+let shownCommentsCount = 0;
+
+const renderNextComments = () => {
+  const nextIterationOfComment = currentPhotoComments.slice(shownCommentsCount, shownCommentsCount + COMMENTS_PER_ITERATION);
+
+  shownCommentsCount += nextIterationOfComment.length;
+
+  const commentsFragment = document.createDocumentFragment();
+
+  nextIterationOfComment.forEach((comment) => {
+    const newCommentsElement = DATA_ELEMENTS.commentTemplate.cloneNode(true);
+    const avatar = newCommentsElement.querySelector('.social__picture');
+
+    avatar.src = comment.avatar;
+    avatar.alt = comment.name;
+    newCommentsElement.querySelector('.social__text').textContent = comment.message;
+
+    commentsFragment.append(newCommentsElement);
+  });
+
+  DATA_ELEMENTS.commentsListElement.appendChild(commentsFragment);
+
+  DATA_ELEMENTS.commentShownCountElement.textContent = shownCommentsCount;
+
+  if (shownCommentsCount >= currentPhotoComments.length) {
+    DATA_ELEMENTS.commentsLoaderElement.classList.add('hidden');
+  }
+};
+
+const closeComments = () => {
+  shownCommentsCount = 0;
+  currentPhotoComments = [];
+
+  DATA_ELEMENTS.commentsListElement.innerHTML = '';
+  DATA_ELEMENTS.commentsLoaderElement.classList.add('hidden');
+
+  DATA_ELEMENTS.commentShownCountElement.textContent = '0';
+};
+
+
+const initComments = (comments) => {
+  closeComments();
+  currentPhotoComments = comments;
+
+  DATA_ELEMENTS.commentTotalCountElement.textContent = comments.length;
+  DATA_ELEMENTS.commentCountBlockElement.classList.remove('hidden');
+  DATA_ELEMENTS.commentsLoaderElement.classList.remove('hidden');
+
+  renderNextComments();
+};
+
+export {
+  renderNextComments,
+  closeComments,
+  initComments,
+  currentPhotoComments,
+  shownCommentsCount
+};

js/functions.js

@@ -1,4 +1,4 @@
-const getTimeInMinutes = (timeString) => {
+/*const getTimeInMinutes = (timeString) => {
   const [hours, minutes] = timeString.split(':').map(Number);
   return hours * 60 + minutes;
 };
@@ -13,7 +13,7 @@ const countingWorkingTime = (startWorking, endWorking, startMeeting, durationMee
 
   return startMeetingInMinutes >= startWorkingInMinutes && endMeetingInMinutes <= endWorkingInMinutes;
 };
-
+*/
 /*-------------Проверка функции-----------------*/
 //console.log(countingWorkingTime('08:00', '17:30', '14:00', 90)); // true
 //console.log(countingWorkingTime('8:0', '10:0', '8:0', 120)); // true

js/render-full-size-photo.js

@@ -1,65 +1,47 @@
 import { isEscapeKey } from './util.js';
 import { DATA_ELEMENTS } from './photo-modal-elements.js';
-
-const onDocumentKeydown = (evt) => {
-  if (isEscapeKey(evt)) {
-    evt.preventDefault();
-    closePhotoModal();
-  }
-};
+import { renderNextComments, closeComments, initComments } from './comments.js';
 
 const showModal = (isShown = true) => {
   if (isShown) {
     DATA_ELEMENTS.photoModalElement.classList.remove('hidden');
     document.body.classList.add('modal-open');
-  } else {
-    DATA_ELEMENTS.photoModalElement.classList.add('hidden');
-    document.body.classList.remove('modal-open');
+    return;
   }
-};
 
-const renderComments = (comments) => {
-  const commentsFragment = document.createDocumentFragment();
-  comments.forEach((comment) => {
-    const newCommentsElement = DATA_ELEMENTS.commentTemplate.cloneNode(true);
-    const avatar = newCommentsElement.querySelector('.social__picture');
-    avatar.src = comment.avatar;
-    avatar.alt = comment.name;
-    newCommentsElement.querySelector('.social__text').textContent = comment.message;
-    commentsFragment.append(newCommentsElement);
-  });
-  DATA_ELEMENTS.commentsListElement.appendChild(commentsFragment);
+  DATA_ELEMENTS.photoModalElement.classList.add('hidden');
+  document.body.classList.remove('modal-open');
 };
 
-const renderModal = (({ url, description, likes, comments}) => {
+function onDocumentKeydown(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closePhotoModal();
+  }
+}
+
+function closePhotoModal() {
+  showModal(false);
+  document.removeEventListener('keydown', onDocumentKeydown);
+  closeComments();
+}
+
+const renderModal = ({ url, description, likes, comments }) => {
   DATA_ELEMENTS.bigPhotoImgElement.src = url;
   DATA_ELEMENTS.bigPhotoImgElement.alt = description;
   DATA_ELEMENTS.likesCountElement.textContent = likes;
   DATA_ELEMENTS.socialCaptionElement.textContent = description;
 
-  DATA_ELEMENTS.commentsListElement.innerHTML = '';
-
-  DATA_ELEMENTS.commentShownCountElement.textContent = comments.length;
-  DATA_ELEMENTS.commentTotalCountElement.textContent = comments.length;
-  DATA_ELEMENTS.commentCountBlockElement.classList.add('hidden');
-  DATA_ELEMENTS.commentsLoaderElement.classList.add('hidden');
-
-  renderComments(comments);
-});
+  initComments(comments);
+};
 
 const openPhotoModal = (photo) => {
   showModal();
   renderModal(photo);
   document.addEventListener('keydown', onDocumentKeydown);
 };
 
-const closePhotoModal = () => {
-  showModal(false);
-  document.removeEventListener('keydown', onDocumentKeydown);
-};
-
-DATA_ELEMENTS.photoModalCloseElement.addEventListener('click', () => {
-  closePhotoModal();
-});
+DATA_ELEMENTS.photoModalCloseElement.addEventListener('click', closePhotoModal);
+DATA_ELEMENTS.commentsLoaderElement.addEventListener('click', renderNextComments);
 
 export { openPhotoModal, closePhotoModal };

js/util.js

@@ -12,7 +12,7 @@ function createRandomIntegerFromRangeGenerator (min, max) {
   return function () {
     let currentValue = getRandomInteger(min, max);
     if (previousValues.length >= (max - min + 1)) {
-      console.error('Перебраны все числа из диапазона от ' + min + ' до ' + max);
+      window.console.log(`Перебраны все числа из диапазона от ${min} до ${max}`);
       return null;
     }
     while (previousValues.includes(currentValue)) {