Merge pull request #8 from lenapokrovskaya/module8-task1

js/comments.js

@@ -0,0 +1,31 @@
+const сommentsListElement = document.querySelector('.social__comments');
+const socialCommentElement = сommentsListElement.querySelector('.social__comment');
+const fragmentElement = document.createDocumentFragment();
+
+//Функция создания комментария
+const renderComment = ({avatar, name, message}) => {
+  const clonedCommentElement = socialCommentElement.cloneNode(true);
+  const commentPictureElement = clonedCommentElement.querySelector('.social__picture');
+  const commentText = clonedCommentElement.querySelector('.social__text');
+  commentPictureElement.src = avatar;
+  commentPictureElement.alt = name;
+  commentText.textContent = message;
+  return clonedCommentElement;
+};
+
+//Отрисуем массив комментариев для каждого поста
+const renderComments = (comments) => {
+  const postСomments = comments;
+  postСomments.forEach((comment) => {
+    const commentElement = renderComment(comment);
+    сommentsListElement.appendChild(commentElement);
+    fragmentElement.appendChild(commentElement);
+  });
+
+  сommentsListElement.innerHTML = '';
+  сommentsListElement.appendChild(fragmentElement);
+};
+
+
+export {renderComments};
+

js/data.js

@@ -113,5 +113,5 @@ const createPost = () => {
 const createPosts = () =>
   Array.from({length: POST_COUNT}, createPost);
 
-export {createPosts};
+export {createPosts, createComment};
 

js/full-size-picture.js

@@ -0,0 +1,18 @@
+import {renderComments} from './comments.js';
+const bigPictureElement = document.body.querySelector('.big-picture');
+const imageElement = bigPictureElement.querySelector('img');
+const likesElement = bigPictureElement.querySelector('.likes-count');
+const descriptionElement = bigPictureElement.querySelector('.social__caption');
+const commentTotalCountElement = bigPictureElement.querySelector('.social__comment-total-count');
+
+
+//Функция отрисовки поста в молаьном окне
+const renderBigPicture = ({url, likes, comments, description}) => {
+  imageElement.src = url;
+  likesElement.textContent = likes;
+  commentTotalCountElement.textContent = comments.length;
+  descriptionElement.textContent = description;
+  renderComments(comments);
+};
+
+export {renderBigPicture};

js/main.js

@@ -1,5 +1,9 @@
 import {createPosts} from './data.js';
 import {createFragment} from './thumbnails.js';
+import {renderModal} from './modal.js';
+
 
 const posts = createPosts();
 createFragment(posts);
+renderModal(posts);
+

js/modal.js

@@ -0,0 +1,65 @@
+import {isEscapeKey} from './util.js';
+import {renderBigPicture} from './full-size-picture.js';
+
+const renderModal = (posts) => {
+  const bigPictureElement = document.body.querySelector('.big-picture');
+  const picturesParentElement = document.querySelector('.pictures');
+  const pictureCloseButton = bigPictureElement.querySelector('.big-picture__cancel');
+  const socialCommentCount = bigPictureElement.querySelector('.social__comment-count');
+  const commentsLoader = bigPictureElement.querySelector('.comments-loader');
+
+  //Функция-обработчик закрытия модалки ESC
+  const onModalEscKeyDown = (evt) => {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      closeMоdal();
+    }
+  };
+
+  //Функция закрытия модалки
+  function closeMоdal () {
+    bigPictureElement.classList.add('hidden');
+    //Удаляем обработчик закрытия превью ESC
+    document.removeEventListener('keydown', onModalEscKeyDown);
+    //Удаляем класс,  чтобы контейнер с фото прокручивался
+    document.body.classList.remove('modal-open');
+  }
+
+  //Функция закрытия модалки по нажатию на кнопку
+  const onCloseButtonClick = (button) => {
+    button.addEventListener('click', (evt) => {
+      evt.preventDefault();
+      closeMоdal();
+    });
+  };
+
+  onCloseButtonClick(pictureCloseButton);
+
+  //Функция открытия модалки
+  const openModal = () => {
+    bigPictureElement.classList.remove('hidden');
+    //Добавляем обработчик закрытия превью ESC
+    document.addEventListener('keydown', onModalEscKeyDown);
+    //Добавляем класс, чтобы контейнер с фото не прокручивался
+    document.body.classList.add('modal-open');
+  };
+
+  //Функция обработчика клика, показывает модалку
+  const onThumbnailClick = (evt) => {
+    const currentPictureElement = evt.target.closest('.picture');
+    if (currentPictureElement) {
+      evt.preventDefault();
+      //Находим элемент из массива постов с таким же id как у текущего элемента
+      const foundedPictureByIdElement = posts.find((picture) => picture.id === Number(currentPictureElement.dataset.pictureId));
+      renderBigPicture(foundedPictureByIdElement);
+      openModal();
+      // Скрываем блоки счетчика комментариев и загрузки новых комментариев
+      socialCommentCount.classList.add('hidden');
+      commentsLoader.classList.add('hidden');
+    }
+  };
+
+  picturesParentElement.addEventListener('click', onThumbnailClick);
+};
+
+export {renderModal};

js/thumbnails.js

@@ -3,21 +3,21 @@ const containerElement = document.querySelector('.pictures');
 const fragmentElement = document.createDocumentFragment();
 
 //Функция создания перевью
-const createThumbnail = (picture) => {
+const createThumbnail = ({id, url, description, likes, comments}) => {
   const thumbnailElement = templateElement.cloneNode(true);
   const imageElement = thumbnailElement.querySelector('.picture__img');
-  thumbnailElement.href = picture.url;
-  thumbnailElement.dataset.id = picture.id;
-  imageElement.src = picture.url;
-  imageElement.alt = picture.description;
-  thumbnailElement.querySelector('.picture__likes').textContent = picture.likes;
-  thumbnailElement.querySelector('.picture__comments').textContent = picture.comments.length;
+  thumbnailElement.href = '#';
+  thumbnailElement.dataset.pictureId = id;//Записываем id из данных в data-атрибут
+  imageElement.src = url;
+  imageElement.alt = description;
+  thumbnailElement.querySelector('.picture__likes').textContent = likes;
+  thumbnailElement.querySelector('.picture__comments').textContent = comments.length;
   return thumbnailElement;
 };
 
 //Проходимся по массиву данных и создадим первью для каждого элемента функцией
-const createFragment = (data) => {
-  data.forEach((picture) => {
+const createFragment = (posts) => {
+  posts.forEach((picture) => {
     const thumbnailElement = createThumbnail(picture);
     fragmentElement.appendChild(thumbnailElement);
   });

js/util.js

@@ -21,4 +21,7 @@ const createUniqueRandomInteger = (min, max) => {
   };
 };
 
-export {getRandomInteger, createUniqueRandomInteger};
+//Функция проверяющая клавиша esc или нет
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export {getRandomInteger, createUniqueRandomInteger, isEscapeKey};