Merge pull request #7 from zarram89/module8-task1

Author: keksobot

js/main.js

@@ -1,9 +1,12 @@
 import { getPictures } from './data/pictures.js';
-import { renderPictures } from './render/gallery.js';
+import { renderGallery } from './render/gallery.js';
+import { initBigPicture } from './render/big-picture.js';
 
 const container = document.querySelector('.pictures');
 const template = document.querySelector('#picture')?.content?.querySelector('.picture');
 
+initBigPicture();
+
 if (container && template) {
-  renderPictures(getPictures(), container, template);
+  renderGallery(getPictures(), container, template);
 }

js/render/big-picture.js

@@ -0,0 +1,125 @@
+import { isEscapeKey } from '../utils/common.js';
+
+const bigPicture = document.querySelector('.big-picture');
+const body = document.querySelector('body');
+const cancelButton = bigPicture.querySelector('.big-picture__cancel');
+
+const bigPictureImage = bigPicture.querySelector('.big-picture__img img');
+const likesCount = bigPicture.querySelector('.likes-count');
+const caption = bigPicture.querySelector('.social__caption');
+
+const commentsList = bigPicture.querySelector('.social__comments');
+const commentCountBlock = bigPicture.querySelector('.social__comment-count');
+const commentsLoader = bigPicture.querySelector('.comments-loader');
+
+const shownCount = bigPicture.querySelector('.social__comment-shown-count');
+const totalCount = bigPicture.querySelector('.social__comment-total-count');
+
+let isOpen = false;
+let isInitialized = false;
+
+const createComment = ({ avatar, name, message }) => {
+  const li = document.createElement('li');
+  li.className = 'social__comment';
+
+  const img = document.createElement('img');
+  img.className = 'social__picture';
+  img.src = avatar;
+  img.alt = name;
+  img.width = 35;
+  img.height = 35;
+
+  const text = document.createElement('p');
+  text.className = 'social__text';
+  text.textContent = message;
+
+  li.append(img, text);
+
+  return li;
+};
+
+const renderComments = (comments = []) => {
+  commentsList.innerHTML = '';
+
+  const fragment = document.createDocumentFragment();
+
+  comments.forEach((comment) => {
+    const commentElement = createComment(comment);
+    fragment.append(commentElement);
+  });
+
+  commentsList.append(fragment);
+
+  shownCount.textContent = String(comments.length);
+  totalCount.textContent = String(comments.length);
+};
+
+const close = () => {
+  if (!isOpen) {
+    return;
+  }
+
+  isOpen = false;
+
+  bigPicture.classList.add('hidden');
+  body.classList.remove('modal-open');
+
+  document.removeEventListener('keydown', onDocumentKeydown);
+};
+
+const renderMeta = ({ url, likes, description }) => {
+  bigPictureImage.src = url;
+  bigPictureImage.alt = description;
+
+  likesCount.textContent = String(likes);
+  caption.textContent = description;
+};
+
+const renderBigPicture = ({ comments, ...rest }) => {
+  renderMeta(rest);
+  renderComments(comments);
+};
+
+const open = (data) => {
+  if (!data || isOpen) {
+    return;
+  }
+
+  isOpen = true;
+
+  bigPicture.classList.remove('hidden');
+  body.classList.add('modal-open');
+
+  commentCountBlock.classList.add('hidden');
+  commentsLoader.classList.add('hidden');
+
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  renderBigPicture(data);
+};
+
+const initBigPicture = () => {
+  if (isInitialized) {
+    return;
+  }
+  isInitialized = true;
+
+  cancelButton.addEventListener('click', onCancelButtonClick);
+};
+
+function onDocumentKeydown(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    close();
+  }
+}
+
+function onCancelButtonClick() {
+  close();
+}
+
+export {
+  initBigPicture,
+  open as showBigPicture,
+  close as hideBigPicture,
+};

js/render/gallery.js

@@ -1,28 +1,21 @@
-const createPictureElement = ({ url, description, likes, comments }, template) => {
-  const element = template.cloneNode(true);
+import { renderThumbnails } from './thumbnail.js';
+import { showBigPicture } from './big-picture.js';
 
-  const elementImage = element.querySelector('.picture__img');
-  elementImage.src = url;
-  elementImage.alt = description;
+const renderGallery = (pictures, container, template) => {
+  const picturesMap = new Map(pictures.map((item) => [item.id, item]));
 
-  element.querySelector('.picture__likes').textContent = String(likes);
-  element.querySelector('.picture__comments').textContent = String(comments?.length ?? 0);
+  container.addEventListener('click', (evt) => {
+    const thumbnail = evt.target.closest('[data-thumbnail-id]');
+    if (!thumbnail) {
+      return;
+    }
 
-  return element;
-};
-
-const renderPictures = (pictures, container, template) => {
-  if (!Array.isArray(pictures)) {
-    throw new TypeError('Pictures must be an array');
-  }
-
-  const fragment = document.createDocumentFragment();
-
-  pictures.forEach((picture) => {
-    fragment.append(createPictureElement(picture, template));
+    evt.preventDefault();
+    const picture = picturesMap.get(Number(thumbnail.dataset.thumbnailId));
+    showBigPicture(picture);
   });
 
-  container.append(fragment);
+  renderThumbnails(pictures, container, template);
 };
 
-export { renderPictures };
+export { renderGallery };

js/render/thumbnail.js

@@ -0,0 +1,29 @@
+const createThumbnail = ({ id, url, description, likes, comments }, template) => {
+  const thumbnail = template.cloneNode(true);
+
+  const thumbnailImage = thumbnail.querySelector('.picture__img');
+  thumbnailImage.src = url;
+  thumbnailImage.alt = description;
+
+  thumbnail.querySelector('.picture__likes').textContent = String(likes);
+  thumbnail.querySelector('.picture__comments').textContent = String(comments?.length ?? 0);
+  thumbnail.dataset.thumbnailId = id;
+
+  return thumbnail;
+};
+
+const renderThumbnails = (pictures, container, template) => {
+  if (!Array.isArray(pictures)) {
+    throw new TypeError('Pictures must be an array');
+  }
+
+  const fragment = document.createDocumentFragment();
+
+  pictures.forEach((picture) => {
+    fragment.append(createThumbnail(picture, template));
+  });
+
+  container.append(fragment);
+};
+
+export { renderThumbnails };

js/utils/common.js

@@ -0,0 +1,3 @@
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export { isEscapeKey };