Merge pull request htmlacademy-javascript#6 from MaksimRozov/module8-…

…task1

js/create-thumbnails/index.js

@@ -1,4 +1,5 @@
 import {photoItems} from '../generate-data';
+import {onOpenBigPicture } from '../showLargePicture';
 
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureList = document.querySelector('.pictures');
@@ -7,16 +8,28 @@ const createPhotoUsers = photoItems();
 const addPhotoThumbnailsUsers = () => {
   const listFragmentPhoto = document.createDocumentFragment();
 
-  createPhotoUsers.forEach(({url, description, likes, comments}) => {
+  createPhotoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');
-    pictureImage.src = url;
-    pictureImage.alt = description;
-    pictureItem.querySelector('.picture__likes').textContent = likes;
-    pictureItem.querySelector('.picture__comments').textContent = comments.length;
+    pictureImage.dataset.id = element.id;
+    pictureImage.src = element.url;
+    pictureImage.alt = element.description;
+    pictureItem.querySelector('.picture__likes').textContent = element.likes;
+    pictureItem.querySelector('.picture__comments').textContent = element.comments.length;
     listFragmentPhoto.appendChild(pictureItem);
   });
+
   return pictureList.appendChild(listFragmentPhoto);
 
 };
+
+pictureList.addEventListener('click', (evt) => {
+  const target = evt.target;
+  if (target.closest('.picture')) {
+    evt.preventDefault();
+    const elementPhoto = createPhotoUsers.find((photo) => photo.id === Number(target.dataset.id));
+    onOpenBigPicture(elementPhoto);
+  }
+});
+
 export {addPhotoThumbnailsUsers};

js/main.js

@@ -1,4 +1,3 @@
 import {addPhotoThumbnailsUsers} from './create-thumbnails';
-import './showLargePicture';
 
 addPhotoThumbnailsUsers();

js/showLargePicture/createComments.js

@@ -0,0 +1,56 @@
+import {buttonShowMore, socialCommentsList, commentShownCount, socialCommentChild} from './elementVariables';
+const LIMITED_DISPLAY_COMMENTS = 5;
+const arrayComments = [];
+
+
+const createComment = (comments) => {
+  const socialComment = document.createElement('li');
+  socialComment.classList.add('social__comment');
+
+  const socialPicture = document.createElement('img');
+  socialPicture.classList.add('social__picture');
+  socialPicture.src = comments.avatar;
+  socialPicture.alt = comments.name;
+  socialPicture.width = '35';
+  socialPicture.height = '35';
+
+  const socialText = document.createElement('p');
+  socialText.classList.add('social__text');
+  socialText.textContent = comments.message;
+  socialComment.append(socialPicture, socialText);
+  return socialComment;
+};
+
+const onShowMoreComments = () =>{
+  const currentShowedComments = socialCommentsList.childElementCount;
+  const commentsCount = currentShowedComments + LIMITED_DISPLAY_COMMENTS;
+  const commentsLimited = arrayComments.length >= commentsCount ? commentsCount : arrayComments.length;
+  const commentsList = arrayComments.slice(currentShowedComments, commentsLimited);
+
+  commentsList.forEach((item) =>{
+    const commentElement = createComment(item);
+    socialCommentsList.append(commentElement);
+    commentShownCount.textContent = socialCommentChild.length;
+  });
+
+  if(socialCommentChild.length === arrayComments.length || arrayComments.length === 0){
+    buttonShowMore.classList.add('hidden');
+  }
+
+  if(arrayComments.length === 0){
+    commentShownCount.textContent = 0;
+  }
+};
+
+
+const renderComments = (element) => {
+  arrayComments.splice(0, arrayComments.length) ;
+  arrayComments.push(...element);
+  socialCommentsList.innerHTML = '';
+
+  buttonShowMore.addEventListener('click', onShowMoreComments);
+  onShowMoreComments();
+};
+
+
+export {renderComments, onShowMoreComments};

js/showLargePicture/elementVariables.js

@@ -0,0 +1,11 @@
+export const bigPictureBlock = document.querySelector('.big-picture');
+export const bigPictureCancel = document.querySelector('.big-picture__cancel');
+export const bigPictureImg = bigPictureBlock.querySelector('.big-picture__img img');
+export const likesCount = bigPictureBlock.querySelector('.likes-count');
+export const commentTotalCount = bigPictureBlock.querySelector('.social__comment-total-count');
+export const commentShownCount = bigPictureBlock.querySelector('.social__comment-shown-count');
+export const socialCaption = bigPictureBlock.querySelector('.social__caption');
+export const socialCommentsList = bigPictureBlock.querySelector('.social__comments');
+export const buttonShowMore = bigPictureBlock.querySelector('.social__comments-loader');
+export const socialCommentChild = socialCommentsList.children;
+

js/showLargePicture/index.js

@@ -0,0 +1,47 @@
+import { bigPictureBlock, bigPictureCancel, bigPictureImg, likesCount, commentTotalCount, socialCaption, socialCommentsList, buttonShowMore} from './elementVariables';
+import {renderComments, onShowMoreComments} from './createComments';
+
+
+const toggleClass = (isOpened = true) =>{
+  document.body.classList.toggle('modal-open');
+  bigPictureBlock.classList.toggle('hidden', !isOpened);
+};
+
+const onCloseBigPicture = () => {
+  toggleClass(false);
+  socialCommentsList.innerHTML = '';
+  buttonShowMore.classList.remove('hidden');
+
+  buttonShowMore.removeEventListener('click', onShowMoreComments);
+  bigPictureCancel.removeEventListener('click', onCloseBigPicture);
+  document.removeEventListener('keydown', onCloseBigPictureEsc);
+};
+
+
+const addInformation = ({url, description, likes, comments}) =>{
+  bigPictureImg.src = url;
+  bigPictureImg.alt = description;
+  socialCaption.textContent = description;
+  likesCount.textContent = likes;
+  commentTotalCount.textContent = comments.length;
+};
+
+const onOpenBigPicture = (element) => {
+  addInformation(element);
+  toggleClass();
+  renderComments(element.comments);
+
+  document.addEventListener('keydown', onCloseBigPictureEsc);
+  bigPictureCancel.addEventListener('click', onCloseBigPicture);
+};
+
+function onCloseBigPictureEsc(evt){
+  if(evt.key === 'Escape'){
+    evt.preventDefault();
+    onCloseBigPicture();
+  }
+}
+
+
+export {onOpenBigPicture};
+