Merge pull request #7 from dennyhappysomuch/module8-task1

Module8 task1

index.html

@@ -208,6 +208,14 @@ <h2 class="big-picture__title  visually-hidden">Просмотр фотогра
     </a>
   </template>
 
+  <!-- Шаблон комментария -->
+  <template id="comment">
+    <li class="social__comment">
+      <img class="social__picture" src="" alt="" width="35" height="35">
+      <p class="social__text"></p>
+    </li>
+  </template>
+
   <!-- Сообщение с ошибкой загрузки изображения -->
   <template id="error">
     <section class="error">

js/data.js

@@ -31,13 +31,12 @@ const PHOTO_ID = createRandomIdFromRangeGenerator(1, 25);
 const PHOTO_URL = createRandomIdFromRangeGenerator(1, 25);
 const PHOTO_LIKES = createRandomIdFromRangeGenerator(15, 200);
 const COMMENTS = createRandomIdFromRangeGenerator(0, 30);
-const AVATAR_COMMENTS = createRandomIdFromRangeGenerator(1, 6);
 const ID_COMMMENTS = createRandomIdFromRangeGenerator(1, 999);
 
 function createComments() {
   return {
     id: ID_COMMMENTS(),
-    avatar: `img/avatar-${AVATAR_COMMENTS()}.svg`,
+    avatar: `img/avatar-${getRandomInteger(1, 6)}.svg`,
     message: MESSAGE_COMMENTS[getRandomInteger(0, MESSAGE_COMMENTS.length - 1)],
     name: NICKNAME_COMMENTS[getRandomInteger(0, NICKNAME_COMMENTS.length - 1)]
   };
@@ -58,4 +57,6 @@ function createArrayPhoto() {
   return Array.from({length: 25}, describePhoto);
 }
 
-export {createArrayPhoto};
+const dataPhoto = createArrayPhoto();
+
+export {dataPhoto};

js/main.js

@@ -1,6 +1,6 @@
 import './utils.js';
 import './pictures.js';
-import {createArrayPhoto} from './data.js';
-import { renderPosts } from './pictures.js';
+import {dataPhoto} from './data.js';
+import { randerGallery } from './modal-picture.js';
 
-renderPosts(createArrayPhoto());
+randerGallery(dataPhoto);

js/modal-picture.js

@@ -0,0 +1,101 @@
+import { renderPosts } from './pictures.js';
+
+const body = document.querySelector('body');
+
+const picturesContainer = document.querySelector('.pictures');
+const bigPicture = document.querySelector('.big-picture');
+
+const commentCount = bigPicture.querySelector('.social__comment-count');
+const commentsList = bigPicture.querySelector('.social__comments');
+const commentElement = document.querySelector('#comment').content.querySelector('.social__comment');
+const commentsLoader = bigPicture.querySelector('.social__comments-loader');
+
+const buttonClose = bigPicture.querySelector('.big-picture__cancel');
+
+const createComment = ({avatar, name, message}) => {
+  const clonedComment = commentElement.cloneNode(true);
+
+  clonedComment.querySelector('.social__picture').src = avatar;
+  clonedComment.querySelector('.social__picture').alt = name;
+  clonedComment.querySelector('.social__text').textContent = message;
+
+  return clonedComment;
+};
+
+const renderComments = (comments) => {
+  const fragment = document.createDocumentFragment();
+
+  commentsList.innerHTML = '';
+
+  comments.forEach((item) => {
+    const clonedComment = createComment(item);
+
+    fragment.append(clonedComment);
+  });
+
+  commentsList.append(fragment);
+};
+
+function onDocumentKeydown(evt) {
+  if (evt.key === 'Escape') {
+    evt.preventDefault();
+
+    removeBigPicture();
+  }
+}
+
+function onButtonCloseClick() {
+  removeBigPicture();
+}
+
+function removeBigPicture() {
+  bigPicture.classList.add('hidden');
+  body.classList.remove('modal-open');
+
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+
+const renderPictureDetails = ({url, likes, description}) => {
+  bigPicture.querySelector('.big-picture__img img').alt = description;
+  bigPicture.querySelector('.big-picture__img img').src = url;
+  bigPicture.querySelector('.likes-count').textContent = likes;
+  bigPicture.querySelector('.social__caption').textContent = description;
+};
+
+const showBigPicture = (data) => {
+  bigPicture.classList.remove('hidden');
+  body.classList.add('modal-open');
+
+  commentsLoader.classList.add('hidden');
+  commentCount.classList.add('hidden');
+
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  renderPictureDetails(data);
+  renderComments(data.comments);
+};
+
+buttonClose.addEventListener('click', onButtonCloseClick);
+
+const randerGallery = (pictures) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const clonedPicture = evt.target.closest('.picture');
+
+    if (!clonedPicture) {
+      return;
+    }
+
+    const picture = pictures.find(
+      (item) => item.id === +clonedPicture.dataset.pictureId
+    );
+
+    if (picture) {
+      showBigPicture(picture);
+    }
+  });
+
+  renderPosts(pictures, picturesContainer);
+};
+
+export {randerGallery, showBigPicture};

js/pictures.js

@@ -10,6 +10,7 @@ function renderPosts (posts) {
     clonedPicture.querySelector('.picture__img').alt = picture.description;
     clonedPicture.querySelector('.picture__likes').textContent = picture.likes;
     clonedPicture.querySelector('.picture__comments').textContent = picture.comments.length;
+    clonedPicture.dataset.pictureId = picture.id;
 
     fragment.appendChild(clonedPicture);
   });

js/utils.js

@@ -9,22 +9,23 @@ function getRandomInteger (min, max) {
 
 //Генератор случаных чисел
 function createRandomIdFromRangeGenerator (min, max) {
-  const previousValues = [];
+  const previousNumbs = [];
+  const totalNumbers = max - min + 1;
 
   return function () {
-    let currentValue = getRandomInteger(min, max);
-
-    if (previousValues.length >= (max - min + 1)) {
-      return null;
+    if (previousNumbs.length >= totalNumbers) {
+      return;
     }
 
-    while (previousValues.includes(currentValue)) {
-      currentValue = getRandomInteger(min, max);
-    }
+    let currentNum;
+
+    do {
+      currentNum = getRandomInteger(min, max);
+    } while (previousNumbs.includes(currentNum));
 
-    previousValues.push(currentValue);
+    previousNumbs.push(currentNum);
 
-    return currentValue;
+    return currentNum;
   };
 }