Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Открывается и закрывается (часть 2) #10

Merged
merged 4 commits into from
Nov 29, 2024
Merged

Открывается и закрывается (часть 2) #10

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1dc287f
Открывается и закрывается (часть 2)
marijachernova Nov 28, 2024
e168afe
исправления от бота
marijachernova Nov 28, 2024
542d45b
исправления от бота
marijachernova Nov 28, 2024
cf37038
теперь кол-во комментариев обновляется
marijachernova Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions js/big-picture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { isEscapeKey } from './util.js';

const COMMENTS_STEP = 5;
const bigPictureElement = document.querySelector('.big-picture');
const bodyElement = document.querySelector('body');
const commentCountElement = bigPictureElement.querySelector('.social__comment-count');
const commentListElement = bigPictureElement.querySelector('.social__comments');
const commentsLoaderElement = bigPictureElement.querySelector('.comments-loader');
const commentsLoader = document.querySelector('.comments-loader');
const cancelButtonElement = bigPictureElement.querySelector('.big-picture__cancel');
const liElement = commentListElement.querySelector('li');

let currentCount = 0;
let comments = [];

const createComment = ({ avatar, message, name}) => {
const comment = liElement.cloneNode(true);

Expand All @@ -18,16 +21,30 @@ const createComment = ({ avatar, message, name}) => {
return comment;
};

const showComments = (comments) => {
commentListElement.innerHTML = '';
const showComments = () => {
currentCount += COMMENTS_STEP;
if (currentCount >= comments.length) {
commentsLoader.classList.add('hidden');
currentCount = comments.length;
} else {
commentsLoader.classList.remove('hidden');
}

const fragment = document.createDocumentFragment();
comments.forEach ((item) => {
const comment = createComment(item);
for (let i = 0; i < currentCount; i++) {
const comment = createComment(comments[i]);
fragment.append(comment);
});
}

commentListElement.innerHTML = '';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут можно использовать replaceChildren()

const showComments = () => {
  currentCount += COMMENTS_STEP;
  if (currentCount >= comments.length) {
    commentsLoader.classList.add('hidden');
    currentCount = comments.length;
  } else {
    commentsLoader.classList.remove('hidden');
  }

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < currentCount; i++) {
    const comment = createComment(comments[i]);
    fragment.append(comment);
  }

  commentListElement.replaceChildren(); // Заменяем innerHTML на replaceChildren
  commentListElement.append(fragment);
  commentCountElement.innerHTML =
    `${currentCount} из <span class="comments-count">${comments.length}</span> комментариев`;
};

commentListElement.append(fragment);
bigPictureElement.querySelector('.social__comment-count').innerHTML =
`${currentCount} из <span class="comments-count">${comments.length}</span> комментариев`;

};

const onCommentsLoaderClick = () => {
showComments(comments);
};

const onDocumentKeydown = (evt) => {
Expand All @@ -41,6 +58,7 @@ function hideBigPicture () {
bigPictureElement.classList.add('hidden');
bodyElement.classList.remove('modal-open');
document.removeEventListener('keydown', onDocumentKeydown);
currentCount = 0;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

вот тут удалять

  bigPictureElement.classList.add('hidden');
  bodyElement.classList.remove('modal-open');
  document.removeEventListener('keydown', onDocumentKeydown);
  commentsLoader.removeEventListener('click', onCommentsLoaderClick);
  currentCount = 0;

}

const onCancelButtonClick = () => {
Expand All @@ -56,14 +74,17 @@ const showPictureDetails = ({ url, likes, description }) => {
const showBigPicture = (data) => {
bigPictureElement.classList.remove('hidden');
bodyElement.classList.add('modal-open');
commentsLoaderElement.classList.add('hidden');
commentCountElement.classList.add('hidden');
commentsLoader.classList.add('hidden');
document.addEventListener('keydown', onDocumentKeydown);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут можно перенести внутрь addEventListener
а сверху его убирать уже, тогда он будет изолирован внутри и всегда удалятся (сейчас ты его не чистишь из памяти нигде)

  document.addEventListener('keydown', onDocumentKeydown);
  commentsLoader.addEventListener('click', onCommentsLoaderClick);


showPictureDetails(data);
showComments(data.comments);
comments = data.comments;
if (comments.length >= 0) {
Copy link

@kultism kultism Nov 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тут всегда true будет с такой проверкой
if (comments.length > 0) чтобы только если есть комменты то что-то с ними делать
для проверки можно ещё написать вот так вообще

  if (comments?.length > 0) { // сразу проверяем что comments существует и дальше уже от него length делаем
    showComments(comments);
  }

showComments(comments);
}
};

cancelButtonElement.addEventListener('click', onCancelButtonClick);
commentsLoader.addEventListener('click', onCommentsLoaderClick);

export { showBigPicture };