Merge pull request #8 from Aleksandr-Anokhin/module8-task1

js/big-picture.js

@@ -0,0 +1,107 @@
+import { COMMENTS_STEP } from './constants.js';
+import { isEscapeKey, isEnterKey } from './utils.js';
+
+const modal = document.querySelector('.big-picture');
+const userCloseWindow = modal.querySelector('.big-picture__cancel');
+const image = modal.querySelector('.big-picture__img img');
+const caption = modal.querySelector('.social__caption');
+const likesCount = modal.querySelector('.likes-count');
+const totalComments = modal.querySelector('.social__comment-total-count');
+const commentsList = modal.querySelector('.social__comments');
+const commentItem = modal.querySelector('.social__comment');
+const renderedComments = modal.querySelector('.social__comment-shown-count');
+const loaderButton = modal.querySelector('.comments-loader');
+
+let localComments;
+let commentsCount;
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeUserModal();
+  }
+};
+
+const showModal = () => {
+  modal.classList.remove('hidden');
+  document.addEventListener('keydown', onDocumentKeydown);
+  document.body.classList.add('modal-open');
+};
+
+const closeModal = () => {
+  modal.classList.add('hidden');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  document.body.classList.remove('modal-open');
+};
+
+const renderComment = ({ avatar, message, name }) => {
+  const newComment = commentItem.cloneNode(true);
+  const avatarImage = newComment.querySelector('.social__picture');
+  avatarImage.src = avatar;
+  avatarImage.alt = name;
+  newComment.querySelector('.social__text').textContent = message;
+  return newComment;
+};
+
+const renderStatistic = () => {
+  renderedComments.textContent = commentsCount;
+};
+
+const renderLoader = () => {
+  if (localComments.length) {
+    loaderButton.classList.remove('hidden');
+  } else {
+    loaderButton.classList.add('hidden');
+  }
+};
+
+const renderComments = () => {
+  const fragment = document.createDocumentFragment();
+  localComments.splice(0, COMMENTS_STEP).forEach((item) => {
+    fragment.append(renderComment(item));
+    commentsCount++;
+  });
+  commentsList.append(fragment);
+  renderStatistic();
+  renderLoader();
+};
+
+const render = ({ url, description, likes, comments }) => {
+  image.src = url;
+  caption.textContent = description;
+  likesCount.textContent = likes;
+  totalComments.textContent = comments.length;
+  localComments = [...comments];
+  commentsCount = 0;
+  renderComments();
+};
+
+export function openUserModule(photo) {
+  showModal();
+  commentsList.innerHTML = '';
+  render(photo);
+}
+
+function closeUserModal() {
+  closeModal();
+}
+
+modal.addEventListener('keydown', (evt) => {
+  if (isEnterKey(evt)) {
+    openUserModule();
+  }
+});
+
+userCloseWindow.addEventListener('click', () => {
+  closeUserModal();
+});
+
+userCloseWindow.addEventListener('keydown', (evt) => {
+  if (isEnterKey(evt)) {
+    closeUserModal();
+  }
+});
+
+loaderButton.addEventListener('click', () => {
+  renderComments();
+});

js/constants.js

@@ -1,20 +1,20 @@
-const PHOTO_COUNT = 25;
+export const PHOTO_COUNT = 25;
 
-const MESSAGES = [
+export const MESSAGES = [
   'Всё отлично!',
   'В целом всё неплохо. Но не всё.',
   'У моего кота получилась фотография лучше.',
 ];
 
-const DESCRIPTIONS = [
+export const DESCRIPTIONS = [
   'Утро!',
   'Котик',
   'Солнышко',
   'Красивое фото',
   'Что-то новенькое',
 ];
 
-const NAMES = [
+export const NAMES = [
   'Иван',
   'Себастьян',
   'Мария',
@@ -23,4 +23,4 @@ const NAMES = [
   'Юлия',
 ];
 
-export {PHOTO_COUNT, MESSAGES, DESCRIPTIONS, NAMES};
+export const COMMENTS_STEP = 5;

js/thumbnail.js

@@ -1,16 +1,29 @@
+import { openUserModule } from './big-picture.js';
+
 const containerElement = document.querySelector('.pictures');
 const cardTemplate = document.querySelector('#picture').content.querySelector('.picture');
 
+let localData;
 
 export const renderCards = (photos) => {
-  console.log(photos);
-const fragment = document.createDocumentFragment();
+  localData = [...photos];
+  const fragment = document.createDocumentFragment();
   photos.forEach((photo) => {
     const thumbnail = cardTemplate.cloneNode(true);
     thumbnail.querySelector('.picture__img').src = photo.url;
     thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
     thumbnail.querySelector('.picture__likes').textContent = photo.likes;
-    fragment.append(thumbnail)
+    thumbnail.dataset.id = photo.id;
+    fragment.append(thumbnail);
   });
   containerElement.append(fragment);
 };
+
+containerElement.addEventListener('click', ({ target }) => {
+  const card = target.closest('.picture');
+  if (card) {
+    const id = Number(card.dataset.id);
+    const photo = localData.find((item) => item.id === id);
+    openUserModule(photo);
+  }
+});

js/utils.js

@@ -25,4 +25,8 @@ const createComments = () => ({
   name: getRandomArrayElement(NAMES),
 });
 
-export {getRandomArrayElement, getRandomIntInclusive, uniquePhoto, uniqueId, createComments};
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+const isEnterKey = (evt) => evt.key === 'Enter';
+
+export {getRandomArrayElement, getRandomIntInclusive, uniquePhoto, uniqueId, createComments, isEscapeKey, isEnterKey};