Merge pull request #7 from Tikud11/module8-task1

Author: keksobot

js/big-picture.js

@@ -0,0 +1,38 @@
+// import { photosData } from './mock.js';
+import { initComments } from './comments.js';
+
+const body = document.querySelector('body');
+const bigPicture = document.querySelector('.big-picture');
+const image = bigPicture.querySelector('.big-picture__preview img');
+const likesCount = bigPicture.querySelector('.likes-count');
+const socialCaption = bigPicture.querySelector('.social__caption');
+const cancelBtn = bigPicture.querySelector('.big-picture__cancel');
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+const closeBigPicture = () => {
+  bigPicture.classList.add('hidden');
+  body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+function onDocumentKeydown(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeBigPicture();
+  }
+}
+
+cancelBtn.addEventListener('click', closeBigPicture);
+
+export const renderBigPicture = (photo) => {
+
+  image.src = photo.url;
+  likesCount.textContent = photo.likes;
+  socialCaption.textContent = photo.description;
+
+  initComments(photo.comments);
+
+  bigPicture.classList.remove('hidden');
+  body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+};

js/comments.js

@@ -0,0 +1,66 @@
+import { getPluralWord } from './utils.js';
+
+const MAX_COMMENTS_VIEW = 5;
+
+const bigPicture = document.querySelector('.big-picture');
+const commentsLoader = bigPicture.querySelector('.comments-loader');
+const socialCommentsContainer = bigPicture.querySelector('.social__comments');
+const socialComment = bigPicture.querySelector('.social__comment');
+const commentCountContainer = bigPicture.querySelector('.social__comment-count');
+const commentShownCount = bigPicture.querySelector('.social__comment-shown-count');
+const commentTotalCount = bigPicture.querySelector('.social__comment-total-count');
+
+let currentListComments = [];
+let currentCommentsCount = 0;
+
+const renderOneComment = ({ avatar, name, message }) => {
+  const newComment = socialComment.cloneNode(true);
+  const authorsImage = newComment.querySelector('.social__picture');
+
+  authorsImage.src = avatar;
+  authorsImage.alt = name;
+  newComment.querySelector('.social__text').textContent = message;
+  return newComment;
+};
+
+const renderComments = (comments) => {
+  comments.forEach((comment) => {
+    socialCommentsContainer.append(renderOneComment(comment));
+  });
+};
+
+export const initComments = (comments) => {
+  const showCommentText = commentCountContainer.childNodes[4];
+  const word = getPluralWord(comments.length, ['комментарий', 'комментария', 'комментариев']);
+
+  if (comments.length <= MAX_COMMENTS_VIEW) {
+    commentsLoader.classList.add('hidden');
+  } else {
+    commentsLoader.classList.remove('hidden');
+  }
+
+  commentTotalCount.textContent = comments.length;
+  showCommentText.textContent = `${word.padStart(word.length + 1)}`;
+  socialCommentsContainer.innerHTML = '';
+
+  currentListComments = comments;
+  currentCommentsCount = Math.min(comments.length, MAX_COMMENTS_VIEW);
+  commentShownCount.textContent = currentCommentsCount;
+
+  renderComments(currentListComments.slice(0, currentCommentsCount));
+};
+
+commentsLoader.addEventListener('click', () => {
+  let previousCommentsCount = currentCommentsCount;
+
+  currentCommentsCount = Math.min(currentListComments.length, currentCommentsCount + MAX_COMMENTS_VIEW);
+
+  const newCommentsBatch = currentListComments.slice(previousCommentsCount, currentCommentsCount);
+
+  renderComments(newCommentsBatch);
+  commentShownCount.textContent = currentCommentsCount;
+
+  if (currentCommentsCount >= currentListComments.length) {
+    commentsLoader.classList.add('hidden');
+  }
+});

js/main.js

@@ -1,6 +1,23 @@
 import { photosData } from './mock';
-import { setThumbnails } from './photos';
+import { renderThumbnails } from './photos';
+import { renderBigPicture } from './big-picture';
 
-const container = document.querySelector('.pictures');
+renderThumbnails(photosData);
 
-setThumbnails(photosData, container);
+document.body.addEventListener('click', (evt) => {
+  const pictureNode = evt.target.closest('.picture');
+
+  if (!pictureNode) {
+    return;
+  }
+
+  evt.preventDefault();
+
+  const photoId = pictureNode.dataset.id;
+  const currentPhoto = photosData.find((photo) => photo.id === Number(photoId));
+
+  if (currentPhoto) {
+    renderBigPicture(currentPhoto);
+  }
+
+});

js/photos.js

@@ -1,27 +1,29 @@
-const template = document.querySelector('#picture').content;
+const template = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
 
-const createThumbnail = ({ id, comments, likes, url, description }) => {
+const createThumbnail = ({ id, url, description, comments, likes }) => {
   const thumbnail = template.cloneNode(true);
-
-  const commentsContainer = thumbnail.querySelector('.picture__comments');
-  const likesContainer = thumbnail.querySelector('.picture__likes');
   const image = thumbnail.querySelector('.picture__img');
 
-  thumbnail.children[0].dataset.id = id;
-  commentsContainer.textContent = comments.length;
-  likesContainer.textContent = likes;
   image.src = url;
   image.alt = description;
+  thumbnail.dataset.id = id;
+  thumbnail.href = url;
+  thumbnail.querySelector('.picture__comments').textContent = comments.length;
+  thumbnail.querySelector('.picture__likes').textContent = likes;
 
   return thumbnail;
 };
 
-export const setThumbnails = (photos, container) => {
+export const renderThumbnails = (photos) => {
   const fragment = document.createDocumentFragment();
-  photos.forEach((photoItem) => {
-    const thumbnail = createThumbnail(photoItem);
-    fragment.appendChild(thumbnail);
+
+  photos.forEach((photo) => {
+    const thumbnail = createThumbnail(photo);
+    fragment.append(thumbnail);
   });
 
-  container.appendChild(fragment);
+  container.append(fragment);
 };
+
+

js/utils.js

@@ -16,5 +16,16 @@ export const getRandomNumber = (max, min = 0) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
+export const getPluralWord = (count, [one, two, five]) => {
+  const someNum = Math.abs(count) % 100;
+  const oneNum = someNum % 10;
+
+  if (someNum > 10 && someNum < 20) { return five };
+  if (oneNum > 1 && oneNum < 5) { return two };
+  if (oneNum == 1) { return one };
+
+  return five;
+};
+
 export const getRandomArrayElement = (arr) =>
   arr[getRandomNumber(arr.length - 1)];