Merge pull request #7 from KateSolodchuk/module8-task1

js/data.js

@@ -94,6 +94,6 @@ const createPhoto = () => {
   };
 };
 
-const CreatePhotoList = () => Array.from({length: PHOTO_LIST_LENGTH}, createPhoto());
+const createPhotoList = () => Array.from({length: PHOTO_LIST_LENGTH}, createPhoto());
 
-export {CreatePhotoList};
+export {createPhotoList, createComment};

js/main.js

@@ -1,5 +1,12 @@
 import './util.js';
-import {CreatePhotoList} from './data.js';
-import './thumbnails.js';
+import {createPhotoList} from './data.js';
+import {renderThumbnails, picturesContainer} from './render-thumbnails.js';
+import {initClickListener} from './open-full-picture.js';
+
+const data = createPhotoList();
+
+renderThumbnails(data);
+initClickListener(data);
+
+
 
-console.log(CreatePhotoList());

js/open-full-picture.js

@@ -0,0 +1,56 @@
+import {isEscapeKey} from './util.js';
+import {picturesContainer} from './render-thumbnails.js';
+import { clearComments, renderComments } from './render-comments.js';
+
+const fullPicture = document.querySelector('.big-picture');
+const closeButton = document.querySelector('.big-picture__cancel');
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeFullPicture();
+  }
+};
+
+const onClickButtonClose = (evt) => {
+  evt.preventDefault();
+  closeFullPicture();
+};
+
+
+const openFullPicture = (pictureId, data) => {
+  const currentPhoto = data.find((photo) => photo.id === Number(pictureId));
+
+  document.querySelector('body').classList.add('modal-open');
+  fullPicture.classList.remove('hidden');
+
+  document.querySelector('.big-picture .big-picture__img img').src = currentPhoto.url;
+  document.querySelector('.likes-count').textContent = currentPhoto.likes;
+  document.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
+  document.querySelector('.social__caption').textContent = currentPhoto.description;
+
+  renderComments(currentPhoto.comments);
+
+  document.addEventListener('keydown', onDocumentKeydown);
+  closeButton.addEventListener('click', onClickButtonClose);
+};
+
+function closeFullPicture() {
+  clearComments();
+  fullPicture.classList.add('hidden');
+  document.querySelector('body').classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+const initClickListener = (data) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const currentPicture = evt.target.closest('.picture');
+
+    if (currentPicture) {
+      openFullPicture(currentPicture.dataset.pictureId, data);
+    }
+  });
+};
+
+export {openFullPicture, closeFullPicture, initClickListener};
+

js/render-comments.js

@@ -0,0 +1,53 @@
+const commentsList = document.querySelector('.social__comments');
+const commentTemplate = commentsList.querySelector('.social__comment');
+const commentCount = document.querySelector('.social__comment-count');
+const commentsLoader = document.querySelector('.social__comment-loader');
+
+const VISIBLE_COMMENTS = 5;
+let shownComments = 0;
+let comments = [];
+
+commentsList.innerHTML = '';
+
+const renderNextComments = () => {
+  const commentsFragment = document.createDocumentFragment();
+  const renderedComments = comments.slice(shownComments, shownComments + VISIBLE_COMMENTS);
+  const renderedCommentsLength = renderedComments.length + shownComments;
+
+  renderedComments.forEach ((comment) => {
+    const pictureComment = commentTemplate.cloneNode(true);
+
+    pictureComment.querySelector('.social__picture').src = comment.avatar;
+    pictureComment.querySelector('.social__picture').alt = comment.name;
+    pictureComment.querySelector('.social__text').textContent = comment.message;
+
+    commentsFragment.appendChild(pictureComment);
+  });
+
+  commentsList.appendChild(commentsFragment);
+
+  commentCount.firstChild.textContent = `${renderedCommentsLength} из `;
+  commentCount.querySelector('.comments-count').textContent = comments.length;
+
+  if (renderedCommentsLength >= comments.length) {
+    commentsLoader.classList.add('hidden');
+  }
+
+  shownComments += VISIBLE_COMMENTS;
+};
+
+const clearComments = () => {
+  shownComments = 0;
+  commentsList.innerHTML = '';
+  commentsLoader.classList.remove('hidden');
+  commentsLoader.removeEventListener('click', renderNextComments);
+};
+
+const renderComments = (currentPhotoComments) => {
+  comments = currentPhotoComments;
+  renderNextComments();
+
+  commentsLoader.addEventListener('click', renderNextComments);
+};
+
+export {clearComments, renderComments};

js/render-thumbnails.js

@@ -0,0 +1,27 @@
+import {createPhotoList} from './data.js';
+
+const picturesContainer = document.querySelector('.pictures');
+const thumbnailTemplate = document.querySelector('#picture')
+  .content
+  .querySelector('.picture');
+
+const usersThumbnails = createPhotoList ();
+
+const renderThumbnails = () => {
+  const usersThumbnailsFragment = document.createDocumentFragment();
+
+  usersThumbnails.forEach((photo) => {
+    const usersElement = thumbnailTemplate.cloneNode(true);
+    usersElement.dataset.pictureId = photo.id;
+    usersElement.querySelector('.picture__img').src = photo.url;
+    usersElement.querySelector('.picture__img').alt = photo.description;
+    usersElement.querySelector('.picture__likes').textContent = photo.likes;
+    usersElement.querySelector('.picture__comments').textContent = photo.comments.length;
+    usersThumbnailsFragment.appendChild(usersElement);
+  });
+
+  picturesContainer.appendChild(usersThumbnailsFragment);
+
+};
+
+export {renderThumbnails, picturesContainer};

js/util.js

@@ -12,4 +12,7 @@ const getRandomInteger = (a, b) => {
   };
 };
 
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
 export {getRandomInteger};
+export {isEscapeKey};