Merge pull request #7 from TatianaSenatorova/module8-task1

js/main.js

@@ -1,4 +1,6 @@
 import { listPhotos } from './create-photos.js';
 import {renderThumbnails} from './render-photos.js';
+import './open-full-photo.js';
 
 renderThumbnails(listPhotos);
+

js/open-full-photo.js

@@ -0,0 +1,41 @@
+import { picturesContainer } from './render-photos.js';
+import {isEscapeKey} from './utils.js';
+import {renderFullPhoto} from './render-full-photo.js';
+import { listPhotos } from './create-photos.js';
+
+const bigPicture = document.querySelector('.big-picture');
+const bigPictureClose = bigPicture.querySelector('.big-picture__cancel');
+const body = document.body;
+
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeFullPhoto();
+  }
+};
+
+function openFullPhoto() {
+  bigPicture.classList.remove('hidden');
+  body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+}
+
+function closeFullPhoto() {
+  bigPicture.classList.add('hidden');
+  body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+picturesContainer.addEventListener('click', (evt) => {
+  const chosenPhoto = evt.target.closest('.picture');
+  if (chosenPhoto) {
+    evt.preventDefault();
+    const chosenPhotoID = chosenPhoto.getAttribute('data-id');
+    renderFullPhoto(chosenPhotoID, listPhotos);
+    openFullPhoto();
+  }
+});
+
+bigPictureClose.addEventListener('click', closeFullPhoto);
+

js/render-full-photo.js

@@ -0,0 +1,39 @@
+const bigPicture = document.querySelector('.big-picture');
+const bigPictureImg = bigPicture.querySelector('.big-picture__img img');
+const likesCount = bigPicture.querySelector('.likes-count');
+const commentsCountFullPhoto = bigPicture.querySelector('.social__comment-count');
+const shownComments = commentsCountFullPhoto.querySelector('.social__comment-shown-count');
+const totalComments = commentsCountFullPhoto.querySelector('.social__comment-total-count');
+const commentsList = bigPicture.querySelector('.social__comments');
+const bigPictureDescription = bigPicture.querySelector('.social__caption');
+const buttonMoreComments = bigPicture.querySelector('.comments-loader');
+
+const renderCommentsFullPhoto = (comments) =>{
+  commentsCountFullPhoto.classList.add('hidden');
+  buttonMoreComments.classList.add('hidden');
+  comments.forEach((comment) => {
+    commentsList.insertAdjacentHTML(
+      'afterbegin',
+      `<li class="social__comment">
+        <img
+          class="social__picture"
+          src="${comment.avatar}"
+          alt="${comment.name}"
+          width="35" height="35">
+        <p class="social__text">${comment.message}</p>
+      </li>`,
+    );
+  });
+};
+
+const renderFullPhoto = (chosenPhotoID, listPhotos) => {
+  const dataForBigPhoto = listPhotos.find((item) => item.id === chosenPhotoID);
+  bigPictureImg.src = dataForBigPhoto.url;
+  likesCount.textContent = dataForBigPhoto.likes;
+  shownComments.textContent = dataForBigPhoto.comments.length;
+  totalComments.textContent = dataForBigPhoto.comments.length;
+  bigPictureDescription.textContent = dataForBigPhoto.description;
+  renderCommentsFullPhoto(dataForBigPhoto.comments);
+};
+
+export { renderFullPhoto };

js/render-photos.js

@@ -21,4 +21,4 @@ const renderThumbnails = (photos) => {
   picturesContainer.append(...photos.map((item) =>(createThumbnail(item))));
 };
 
-export {renderThumbnails};
+export {renderThumbnails, picturesContainer};

js/utils.js

@@ -23,5 +23,9 @@ const findTemplate = (id) =>{
   return template.content.firstElementChild;
 };
 
-export {getRandomInteger, getIndexIncrement, findTemplate};
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+const isEnterKey = (evt) => evt.key === 'Enter';
+
+export {getRandomInteger, getIndexIncrement, findTemplate, isEscapeKey, isEnterKey};