Merge pull request #7 from natalya87324/module8-task1

Author: keksobot

js/full-size-photo.js

@@ -0,0 +1,79 @@
+import { toggleClass, isEscapeKey } from './util.js';
+
+const fullSizePhotoContainer = document.querySelector('.big-picture');
+const fullSizePhoto = fullSizePhotoContainer.querySelector('.big-picture__img img');
+const likesCount = document.querySelector('.likes-count');
+const commentCount = document.querySelector('.social__comment-count');
+const userCommentsContainer = document.querySelector('.social__comments');
+const userComment = userCommentsContainer.querySelector('.social__comment');
+const commentsLoader = document.querySelector('.comments-loader');
+const caption = document.querySelector('.social__caption');
+const closeBtn = document.querySelector('#picture-cancel');
+
+const commentFragment = document.createDocumentFragment();
+let currentComments = [];
+
+const toggleModal = () => {
+  toggleClass(fullSizePhotoContainer, 'hidden');
+  toggleClass(document.body, 'modal-open');
+};
+
+const show = (photo) => {
+  const { url, likes, description } = photo;
+  fullSizePhoto.src = url;
+  likesCount.textContent = likes;
+  caption.textContent = description;
+};
+
+const renderComment = (comment) => {
+  const newComment = userComment.cloneNode(true);
+  const avatar = newComment.querySelector('.social__picture');
+
+  avatar.src = comment.avatar;
+  avatar.alt = comment.name;
+  newComment.querySelector('.social__text').textContent = comment.message;
+
+  return newComment;
+};
+
+const renderComments = () => {
+  userCommentsContainer.innerHTML = '';
+  commentCount.innerHTML = '';
+
+  commentCount.innerHTML = `${currentComments.length} из <span class="social__comment-total-count">${currentComments.length}</span> комментариев`;
+
+  currentComments.forEach((comment) => {
+    commentFragment.appendChild(renderComment(comment));
+  });
+
+  userCommentsContainer.appendChild(commentFragment);
+};
+
+function closeFullSizePhoto() {
+  document.removeEventListener('keydown', onFullSizePhotoEscKey);
+  toggleModal();
+}
+
+const onCloseFullSizePhoto = () => {
+  closeFullSizePhoto();
+};
+
+function onFullSizePhotoEscKey(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeFullSizePhoto();
+  }
+}
+
+const renderFullSizePhoto = (photo) => {
+  currentComments = photo.comments.slice();
+  show(photo);
+  renderComments();
+  document.addEventListener('keydown', onFullSizePhotoEscKey);
+  toggleModal();
+  commentsLoader.classList.add('hidden');
+};
+
+closeBtn.addEventListener('click', onCloseFullSizePhoto);
+
+export { renderFullSizePhoto };

js/main.js

@@ -1,3 +1,4 @@
-import './display-photos.js';
-
+import { addPhotos } from './data.js';
+import { renderPhotos } from './photos.js';
 
+renderPhotos(addPhotos());

js/display-photos.js js/photos.jsjs/display-photos.js renamed to js/photos.js

@@ -1,20 +1,30 @@
-import {addPhotos} from './data.js';
+import { renderFullSizePhoto } from './full-size-photo.js';
 
 const userPhotosContainer = document.querySelector('.pictures');
 const userPhotoTemplate = document.querySelector('#picture').content.querySelector('.picture');
-
-const userPhotos = addPhotos();
-
 const userPhotosFragment = document.createDocumentFragment();
 
-userPhotos.forEach((photo) => {
+const renderPhoto = (photo) => {
   const photoElement = userPhotoTemplate.cloneNode(true);
   photoElement.querySelector('.picture__img').src = photo.url;
   photoElement.querySelector('.picture__img').alt = photo.description;
   photoElement.querySelector('.picture__likes').textContent = photo.likes;
   photoElement.querySelector('.picture__comments').textContent = photo.comments.length;
 
-  userPhotosFragment.appendChild(photoElement);
-});
+  photoElement.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    renderFullSizePhoto(photo);
+  });
+
+  return photoElement;
+};
+
+const renderPhotos = (photos) => {
+  photos?.forEach((photo) => {
+    userPhotosFragment.appendChild(renderPhoto(photo));
+  });
+  userPhotosContainer.appendChild(userPhotosFragment);
+};
+
 
-userPhotosContainer.appendChild(userPhotosFragment);
+export { renderPhotos };

js/util.js

@@ -1,5 +1,14 @@
 const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
 
-const getRandomArrayItem = (items) => items[getRandomNumber(0 , items.length - 1)];
+const getRandomArrayItem = (items) => items[getRandomNumber(0, items.length - 1)];
 
-export {getRandomNumber, getRandomArrayItem};
+const toggleClass = (element, className = '') => {
+  if (element) {
+    element.classList.toggle(className);
+  }
+};
+
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+
+export { getRandomNumber, getRandomArrayItem, toggleClass, isEscapeKey };