Merge pull request #6 from vikkont79/module8-task1

js/comments.js

@@ -0,0 +1,20 @@
+const renderComments = (comments) => {
+  const commentsContainerElement = document.querySelector('.social__comments');
+  const commentTemplateElement = document.querySelector('.social__comment');
+  const commentFragment = document.createDocumentFragment();
+
+  comments.forEach(({ avatar, name, message }) => {
+    const commentElement = commentTemplateElement.cloneNode(true);
+    const commentImgElement = commentElement.querySelector('.social__picture');
+    const commentText = commentElement.querySelector('.social__text');
+    commentImgElement.src = avatar;
+    commentImgElement.alt = name;
+    commentText.textContent = message;
+    commentFragment.appendChild(commentElement);
+  });
+
+  commentsContainerElement.innerHTML = '';
+  commentsContainerElement.appendChild(commentFragment);
+};
+
+export { renderComments };

js/main.js

@@ -1,6 +1,8 @@
 import { createGallery } from './data.js';
 import { renderGallery } from './view.js';
+import { renderPost } from './post.js';
 
 const photosPreview = createGallery(25);
 
 renderGallery(photosPreview);
+renderPost(photosPreview);

js/modal.js

@@ -0,0 +1,28 @@
+import { isEscKey } from './utils.js';
+
+/*const userModalElement = document.body.querySelector('.big-picture');
+const userModalOpenElement = document.querySelector('.pictures');
+const userModalCloseElement = userModalElement.querySelector(
+  '.big-picture__cancel'
+);*/
+
+const onDocumentEscKeydown = (evt) => {
+  if (isEscKey(evt)) {
+    evt.preventDefault();
+    closeUserMоdal();
+  }
+};
+
+function openUserModal(element) {
+  document.body.classList.add('modal-open');
+  element.classList.remove('.hidden');
+  document.addEventListener('keydown', onDocumentEscKeydown);
+}
+
+function closeUserMоdal(element) {
+  document.body.classList.remove('modal-open');
+  element.classList.add('hidden');
+  document.removeEventListener('keydown', onDocumentEscKeydown);
+}
+
+export { onDocumentEscKeydown, openUserModal, closeUserMоdal };

js/picture.js

@@ -0,0 +1,20 @@
+import { renderComments } from './comments';
+
+const bigPictureElement = document.body.querySelector('.big-picture');
+const imgElement = 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 }) => {
+  imgElement.src = url;
+  imgElement.alt = description;
+  likesElement.textContent = likes;
+  commentTotalCountElement.textContent = comments.length;
+  descriptionElement.textContent = description;
+  renderComments(comments);
+};
+
+export { renderBigPicture };

js/post.js

@@ -0,0 +1,59 @@
+import { isEscKey } from './utils.js';
+import { renderBigPicture } from './picture.js';
+//import { onDocumentEscKeydown, openUserModal } from './modal.js';
+
+const renderPost = (posts) => {
+  const userModalElement = document.body.querySelector('.big-picture');
+  const userModalOpenElement = document.querySelector('.pictures');
+  const userModalCloseElement = userModalElement.querySelector(
+    '.big-picture__cancel'
+  );
+  const socialCommentCount = userModalElement.querySelector(
+    '.social__comment-count'
+  );
+  const commentsLoader = userModalElement.querySelector('.comments-loader');
+
+  const onDocumentEscKeydown = (evt) => {
+    if (isEscKey(evt)) {
+      evt.preventDefault();
+      closeUserMоdal();
+    }
+  };
+
+  const openUserModal = () => {
+    document.body.classList.add('modal-open');
+    userModalElement.classList.remove('hidden');
+    document.addEventListener('keydown', onDocumentEscKeydown);
+  };
+
+  const onPreviewClick = (evt) => {
+    const currentPictureElement = evt.target.closest('.picture');
+    if (currentPictureElement) {
+      evt.preventDefault();
+      const currentPreview = posts.find(
+        (picture) =>
+          picture.id === Number(currentPictureElement.dataset.pictureId)
+      );
+      renderBigPicture(currentPreview);
+      openUserModal();
+
+      // Скрываем блоки счетчика комментариев и загрузки новых комментариев
+      socialCommentCount.classList.add('hidden');
+      commentsLoader.classList.add('hidden');
+    }
+  };
+
+  userModalOpenElement.addEventListener('click', onPreviewClick);
+
+  function closeUserMоdal() {
+    document.body.classList.remove('modal-open');
+    userModalElement.classList.add('hidden');
+    document.removeEventListener('keydown', onDocumentEscKeydown);
+  }
+
+  userModalCloseElement.addEventListener('click', () => {
+    closeUserMоdal();
+  });
+};
+
+export { renderPost };

js/utils.js

@@ -27,9 +27,14 @@ const getRandomUniqueInteger = (min, max) => {
 const getRandomArrayElement = (elements) =>
   elements[getRandomInteger(0, elements.length - 1)];
 
+// Проверяем является ли клавиша "Escape"
+
+const isEscKey = (evt) => evt.key === 'Escape';
+
 export {
   getRandomInteger,
   checkStringLength,
   getRandomUniqueInteger,
   getRandomArrayElement,
+  isEscKey,
 };

js/view.js

@@ -11,7 +11,7 @@ const renderGallery = (gallery) => {
     const likesElement = pictureElement.querySelector('.picture__likes');
     const commentsElement = pictureElement.querySelector('.picture__comments');
     pictureElement.href = url;
-    pictureElement.dataset.id = id;
+    pictureElement.dataset.pictureId = id;
     imgElement.src = url;
     imgElement.alt = description;
     likesElement.textContent = likes;