Merge pull request #7 from SergeyMedved/module8-task1

js/comment.js

@@ -0,0 +1,16 @@
+const bigPictureElement = document.querySelector('.big-picture');
+const commentTemplateElement = bigPictureElement.querySelector('.social__comment');
+
+const renderCommentItem = ({ avatar, name, message }) => {
+  const clonedCommentElement = commentTemplateElement.cloneNode(true);
+  const socialPictureElement = clonedCommentElement.querySelector('.social__picture');
+  const socialTextElement = clonedCommentElement.querySelector('.social__text');
+
+  socialPictureElement.src = avatar;
+  socialPictureElement.alt = name;
+  socialTextElement.textContent = message;
+
+  return clonedCommentElement;
+};
+
+export { renderCommentItem };

js/comments.js

@@ -0,0 +1,47 @@
+import { renderCommentItem } from './comment';
+
+const bigPictureElement = document.querySelector('.big-picture');
+const socialCommentsElement = bigPictureElement.querySelector('.social__comments');
+const commentsLoaderElement = bigPictureElement.querySelector('.comments-loader');
+const commentShownCount = bigPictureElement.querySelector('.social__comment-shown-count');
+const commentTotalElement = bigPictureElement.querySelector('.social__comment-total-count');
+
+const STEP_SHOWN_COMMENTS = 5;
+
+let counter = 0;
+let currentComments;
+
+const updateShownElement = (comments) => {
+  commentShownCount.textContent = comments.length;
+  if (commentShownCount.textContent === commentTotalElement.textContent) {
+    commentsLoaderElement.classList.add('hidden');
+  } else {
+    commentsLoaderElement.classList.remove('hidden');
+  }
+};
+
+const renderCommentsList = (comments) => {
+  const socialsFragment = new DocumentFragment();
+  const shownComments = comments.slice(0, ++counter * STEP_SHOWN_COMMENTS);
+  updateShownElement(shownComments);
+  shownComments.forEach((comment) => {
+    const commentElement = renderCommentItem(comment);
+    socialsFragment.appendChild(commentElement);
+  });
+  socialCommentsElement.appendChild(socialsFragment);
+};
+
+const renderComments = (comments) => {
+  currentComments = comments;
+  socialCommentsElement.innerHTML = '';
+  counter = 0;
+  renderCommentsList(currentComments);
+
+};
+
+commentsLoaderElement.addEventListener('click', () => {
+  socialCommentsElement.innerHTML = '';
+  renderCommentsList(currentComments);
+});
+
+export { renderComments };

js/data.js

@@ -65,11 +65,15 @@ const createComments = (quantity, dataMessage, dataName) => {
     MIN: 0,
     MAX: 7,
   };
+
+  const AvatarQty = {
+    MIN: 1,
+    MAX: 6,
+  };
   const randomId = getRandomUniqueInt(1, quantity);
-  const randomUrl = getRandomUniqueInt(1, quantity);
   return Array.from({ length: quantity }).map(() => ({
     id: randomId(),
-    avatar: createUrl(randomUrl(), true),
+    avatar: createUrl(getRandomInt(AvatarQty.MIN, AvatarQty.MAX), true),
     message: createRandomMassege(dataMessage),
     name: dataName[getRandomInt(DataNameRange.MIN, DataNameRange.MAX)],
   }));
@@ -88,10 +92,13 @@ const createPhotos = (quantity) => {
     MIN: 0,
     MAX: 30,
   };
-  const randomId = getRandomUniqueInt(1, quantity);
-  const randomUrl = getRandomUniqueInt(1, quantity);
+  const GetRandomUrlRange = {
+    MIN: 1,
+    MAX: quantity,
+  };
+
+  const randomUrl = getRandomUniqueInt(GetRandomUrlRange.MIN, GetRandomUrlRange.MAX);
   return Array.from({ length: quantity }).map(() => ({
-    id: randomId(),
     url: createUrl(randomUrl()),
     description: descriptions[getRandomInt(DescriptionsRange.MIN, DescriptionsRange.MAX)],
     likes: getRandomInt(LikesRange.MIN, LikesRange.MAX),

js/main.js

@@ -1,4 +1,7 @@
 import { createPhotos } from './data.js';
-import { appendPhotos } from './preview.js';
+import { renderPhotos } from './preview.js';
+import { renderModal } from './modal.js';
 
-appendPhotos(createPhotos(25));
+const data = createPhotos(25);
+renderPhotos(data);
+renderModal(data);

js/modal.js

@@ -0,0 +1,55 @@
+import { isEscKey } from './utils';
+import { renderComments } from './comments';
+
+const picturesElement = document.querySelector('.pictures');
+const bigPictureElement = document.querySelector('.big-picture');
+const imgElement = bigPictureElement.querySelector('.big-picture__img img');
+const socialCaptionElement = bigPictureElement.querySelector('.social__caption');
+const likesCountElement = bigPictureElement.querySelector('.likes-count');
+const commentTotalElement = bigPictureElement.querySelector('.social__comment-total-count');
+
+const closeModal = () => {
+  document.body.classList.remove('modal-open');
+  bigPictureElement.classList.add('hidden');
+};
+
+const onDocumentKeydown = (evt) => {
+  if (isEscKey(evt)) {
+    closeModal();
+  }
+};
+
+const onBigPictureElementClick = (evt) => {
+  if ((evt.target.closest('.big-picture') && !evt.target.closest('.big-picture__preview')) || evt.target.classList.contains('big-picture__cancel')) {
+    closeModal();
+  }
+};
+
+bigPictureElement.addEventListener('click', onBigPictureElementClick);
+document.addEventListener('keydown', onDocumentKeydown);
+
+const renderModal = (photos) => {
+
+  const onPictureElementClick = (event) => {
+    const parentLink = event.target.closest('a.picture');
+    const pictures = Array.from(picturesElement.querySelectorAll('.picture'));
+    if (parentLink) {
+      event.preventDefault();
+      const index = pictures.indexOf(parentLink);
+      bigPictureElement.classList.remove('hidden');
+      document.body.classList.add('modal-open');
+
+      const { url, description, likes, comments } = photos[index];
+      imgElement.src = url;
+      socialCaptionElement.textContent = description;
+      likesCountElement.textContent = likes;
+      commentTotalElement.textContent = comments.length;
+      renderComments(comments);
+    }
+  };
+
+  picturesElement.addEventListener('click', onPictureElementClick);
+};
+
+export { renderModal };
+

js/preview.js

@@ -1,24 +1,25 @@
-const appendPhotos = (data) => {
+const renderPhotos = (data) => {
 
   const picturesElement = document.querySelector('.pictures');
   const pictureTemplate = document.querySelector('#picture').content;
   const photosFragment = new DocumentFragment();
 
   data.forEach(({id, url, description, likes, comments}) => {
-    const clonedPicture = pictureTemplate.cloneNode(true);
-    const imgElement = clonedPicture.querySelector('.picture__img');
-    const likesElement = clonedPicture.querySelector('.picture__likes');
-    const commentsElement = clonedPicture.querySelector('.picture__comments');
-    imgElement.dataset.id = id;
+    const clonedPictureTemplate = pictureTemplate.cloneNode(true);
+    const pictureElement = clonedPictureTemplate.querySelector('a.picture');
+    const imgElement = clonedPictureTemplate.querySelector('.picture__img');
+    const likesElement = clonedPictureTemplate.querySelector('.picture__likes');
+    const commentsElement = clonedPictureTemplate.querySelector('.picture__comments');
+    pictureElement.dataset.id = id;
     imgElement.src = url;
     imgElement.alt = description;
     likesElement.textContent = likes;
     commentsElement.textContent = comments.length;
-    photosFragment.appendChild(clonedPicture);
+    photosFragment.appendChild(clonedPictureTemplate);
   });
 
   picturesElement.appendChild(photosFragment);
 
 };
 
-export { appendPhotos };
+export { renderPhotos };

js/utils.js

@@ -13,4 +13,6 @@ const getRandomUniqueInt = (min, max) => {
   };
 };
 
-export {getRandomInt, getRandomUniqueInt};
+const isEscKey = (event) => event.keyCode === 27;
+
+export {getRandomInt, getRandomUniqueInt, isEscKey};