From c4680936e57a565562b50cfab379fff6d7180f44 Mon Sep 17 00:00:00 2001 From: Aleksandr Anokhin Date: Mon, 25 Nov 2024 22:10:55 +0300 Subject: [PATCH 1/5] make open close function --- js/big-picture.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ js/utils.js | 6 +++++- 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 js/big-picture.js diff --git a/js/big-picture.js b/js/big-picture.js new file mode 100644 index 0000000..722003e --- /dev/null +++ b/js/big-picture.js @@ -0,0 +1,44 @@ +import {isEscapeKey, isEnterKey} from './utils.js'; + +const userOpenWindow = document.querySelector('.big-picture'); +const userCloseWindow = userOpenWindow.document.querySelector('.big-picture__cancel'); + +const onDocumentKeydown = (evt) => { + if (isEscapeKey(evt)) { + evt.preventDefault(); + closeUserModule(); + } +}; + +function openUserModule () { + userOpenWindow.classList.remove('hidden'); + + document.addEventListener('keydown', onDocumentKeydown); +} + +function closeUserModule () { + userOpenWindow.classList.add('hidden'); + + document.removeEventListener('keydown', onDocumentKeydown); +} + +userOpenWindow.addEventListener('click', () => { + openUserModule(); +}); + +userOpenWindow.addEventListener('keydown', (evt) => { + if (isEnterKey(evt)) { + openUserModule(); + } +}); + +userCloseWindow.addEventListener('click', () => { + closeUserModule(); +}); + +userCloseWindow.addEventListener('keydown', (evt) => { + if (isEnterKey(evt)) { + closeUserModule(); + } +}); + diff --git a/js/utils.js b/js/utils.js index 0eb5303..2569c1c 100644 --- a/js/utils.js +++ b/js/utils.js @@ -25,4 +25,8 @@ const createComments = () => ({ name: getRandomArrayElement(NAMES), }); -export {getRandomArrayElement, getRandomIntInclusive, uniquePhoto, uniqueId, createComments}; +const isEscapeKey = (evt) => evt.key === 'Escape'; + +const isEnterKey = (evt) => evt.key === 'Enter'; + +export {getRandomArrayElement, getRandomIntInclusive, uniquePhoto, uniqueId, createComments, isEscapeKey, isEnterKey}; From a67005cf821a2a9dc26c58394ae6c14c7db4697b Mon Sep 17 00:00:00 2001 From: Aleksandr Anokhin Date: Mon, 9 Dec 2024 21:56:44 +0300 Subject: [PATCH 2/5] upgrate big picture --- js/big-picture.js | 70 ++++++++++++++++++++++++++++++++++++----------- js/thumbnail.js | 19 +++++++++++-- 2 files changed, 70 insertions(+), 19 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 722003e..bd742dd 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -1,44 +1,82 @@ import {isEscapeKey, isEnterKey} from './utils.js'; -const userOpenWindow = document.querySelector('.big-picture'); -const userCloseWindow = userOpenWindow.document.querySelector('.big-picture__cancel'); +const modal = document.querySelector('.big-picture'); +const userCloseWindow = modal.document.querySelector('.big-picture__cancel'); +const image = modal.querySelector('.big-picture_img img'); +const caption = modal.querySelector('.social__caption'); +const likesCount = modal.querySelector('.likes-count'); +const totalComments = modal.querySelector('.social__comment-total-count'); +const commentsList = modal.querySelector('.social__comments'); +const commentItem = modal.querySelector('.social__comment'); const onDocumentKeydown = (evt) => { if (isEscapeKey(evt)) { evt.preventDefault(); - closeUserModule(); + closeUserModal(); } }; -function openUserModule () { - userOpenWindow.classList.remove('hidden'); - +const showModal = () => { + modal.classList.remove('hidden'); document.addEventListener('keydown', onDocumentKeydown); -} - -function closeUserModule () { - userOpenWindow.classList.add('hidden'); + document.body.classList.add('modal-open'); +}; +const closeModal = () => { + modal.classList.add('hidden'); document.removeEventListener('keydown', onDocumentKeydown); + document.body.classList.remove('modal-open'); +}; + +const renderComment = ({ avatar, message, name }) => { + const newComment = commentItem.cloneNode(true); + const avatarImage = newComment.querySelector('.social__picture'); + avatarImage.src = avatar; + avatarImage.alt = name; + newComment.querySelector('.social__text').textContent = message; + return newComment; +}; + +const renderComments = (comments) => { + const fragment = document.createDocumentFragment(); + comments.forEach((item) => { + fragment.append(renderComment(item)); + }); + commentsList.append(fragment); +}; + +const render = ({ url, description, likes, comments }) => { + image.src = url; + caption.textContent = description; + likesCount.textContent = likes; + totalComments.textContent = comments.length; + renderComments(comments); +}; + +export function openUserModule(photo) { + showModal(); + commentsList.innerHTML = ''; + render(photo); } -userOpenWindow.addEventListener('click', () => { - openUserModule(); -}); +function closeUserModal() { + closeModal(); +} -userOpenWindow.addEventListener('keydown', (evt) => { +modal.addEventListener('keydown', (evt) => { if (isEnterKey(evt)) { openUserModule(); } }); userCloseWindow.addEventListener('click', () => { - closeUserModule(); + closeUserModal(); }); userCloseWindow.addEventListener('keydown', (evt) => { if (isEnterKey(evt)) { - closeUserModule(); + closeUserModal(); } }); +export {modal, userCloseWindow,image, caption, likesCount, totalComments, commentsList,commentItem}; diff --git a/js/thumbnail.js b/js/thumbnail.js index bf63684..7b0862e 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -1,16 +1,29 @@ +import { openUserModule } from "./big-picture.js"; + const containerElement = document.querySelector('.pictures'); const cardTemplate = document.querySelector('#picture').content.querySelector('.picture'); +let localData; export const renderCards = (photos) => { - console.log(photos); -const fragment = document.createDocumentFragment(); + localData = [...photos]; + const fragment = document.createDocumentFragment(); photos.forEach((photo) => { const thumbnail = cardTemplate.cloneNode(true); thumbnail.querySelector('.picture__img').src = photo.url; thumbnail.querySelector('.picture__comments').textContent = photo.comments.length; thumbnail.querySelector('.picture__likes').textContent = photo.likes; - fragment.append(thumbnail) + thumbnail.dataset.id = photo.id; + fragment.append(thumbnail); }); containerElement.append(fragment); }; + +containerElement.addEventListener('click', ({ target }) => { + const card = target.closest('.picture'); + if (card) { + const id = Number(card.dataset.id); + const photo = localData.find((item) => item.id === id); + openUserModule(photo); + } +}); From 83d0eb0f2b17babe99588e212c6068f594b3d376 Mon Sep 17 00:00:00 2001 From: Aleksandr Anokhin Date: Wed, 11 Dec 2024 22:02:39 +0300 Subject: [PATCH 3/5] delete document from big-picture --- js/big-picture.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/big-picture.js b/js/big-picture.js index bd742dd..32822e4 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -1,7 +1,7 @@ import {isEscapeKey, isEnterKey} from './utils.js'; const modal = document.querySelector('.big-picture'); -const userCloseWindow = modal.document.querySelector('.big-picture__cancel'); +const userCloseWindow = modal.querySelector('.big-picture__cancel'); const image = modal.querySelector('.big-picture_img img'); const caption = modal.querySelector('.social__caption'); const likesCount = modal.querySelector('.likes-count'); From 5f538f6a0e42100f4aad1250f7777731452d74d2 Mon Sep 17 00:00:00 2001 From: Aleksandr Anokhin Date: Thu, 12 Dec 2024 19:10:37 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BD=D0=B5=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D1=8B=D0=B5?= =?UTF-8?q?=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 4 +++- js/thumbnail.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 32822e4..9970d36 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -2,7 +2,7 @@ import {isEscapeKey, isEnterKey} from './utils.js'; const modal = document.querySelector('.big-picture'); const userCloseWindow = modal.querySelector('.big-picture__cancel'); -const image = modal.querySelector('.big-picture_img img'); +const image = modal.querySelector('.big-picture__img img'); const caption = modal.querySelector('.social__caption'); const likesCount = modal.querySelector('.likes-count'); const totalComments = modal.querySelector('.social__comment-total-count'); @@ -46,6 +46,8 @@ const renderComments = (comments) => { }; const render = ({ url, description, likes, comments }) => { + console.log(image); + console.log(url); image.src = url; caption.textContent = description; likesCount.textContent = likes; diff --git a/js/thumbnail.js b/js/thumbnail.js index 7b0862e..dfbe42b 100644 --- a/js/thumbnail.js +++ b/js/thumbnail.js @@ -1,4 +1,4 @@ -import { openUserModule } from "./big-picture.js"; +import { openUserModule } from './big-picture.js'; const containerElement = document.querySelector('.pictures'); const cardTemplate = document.querySelector('#picture').content.querySelector('.picture'); From c15bff385dc624233da273e30528fa5d0fb6da13 Mon Sep 17 00:00:00 2001 From: Aleksandr Anokhin Date: Thu, 19 Dec 2024 21:43:32 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8,=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=BD=D0=BE=D0=B2=D0=BE=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/big-picture.js | 37 ++++++++++++++++++++++++++++++------- js/constants.js | 10 +++++----- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/js/big-picture.js b/js/big-picture.js index 9970d36..5b1a981 100644 --- a/js/big-picture.js +++ b/js/big-picture.js @@ -1,4 +1,5 @@ -import {isEscapeKey, isEnterKey} from './utils.js'; +import { COMMENTS_STEP } from './constants.js'; +import { isEscapeKey, isEnterKey } from './utils.js'; const modal = document.querySelector('.big-picture'); const userCloseWindow = modal.querySelector('.big-picture__cancel'); @@ -8,6 +9,11 @@ const likesCount = modal.querySelector('.likes-count'); const totalComments = modal.querySelector('.social__comment-total-count'); const commentsList = modal.querySelector('.social__comments'); const commentItem = modal.querySelector('.social__comment'); +const renderedComments = modal.querySelector('.social__comment-shown-count'); +const loaderButton = modal.querySelector('.comments-loader'); + +let localComments; +let commentsCount; const onDocumentKeydown = (evt) => { if (isEscapeKey(evt)) { @@ -37,22 +43,37 @@ const renderComment = ({ avatar, message, name }) => { return newComment; }; -const renderComments = (comments) => { +const renderStatistic = () => { + renderedComments.textContent = commentsCount; +}; + +const renderLoader = () => { + if (localComments.length) { + loaderButton.classList.remove('hidden'); + } else { + loaderButton.classList.add('hidden'); + } +}; + +const renderComments = () => { const fragment = document.createDocumentFragment(); - comments.forEach((item) => { + localComments.splice(0, COMMENTS_STEP).forEach((item) => { fragment.append(renderComment(item)); + commentsCount++; }); commentsList.append(fragment); + renderStatistic(); + renderLoader(); }; const render = ({ url, description, likes, comments }) => { - console.log(image); - console.log(url); image.src = url; caption.textContent = description; likesCount.textContent = likes; totalComments.textContent = comments.length; - renderComments(comments); + localComments = [...comments]; + commentsCount = 0; + renderComments(); }; export function openUserModule(photo) { @@ -81,4 +102,6 @@ userCloseWindow.addEventListener('keydown', (evt) => { } }); -export {modal, userCloseWindow,image, caption, likesCount, totalComments, commentsList,commentItem}; +loaderButton.addEventListener('click', () => { + renderComments(); +}); diff --git a/js/constants.js b/js/constants.js index 97ec59a..dafa053 100644 --- a/js/constants.js +++ b/js/constants.js @@ -1,12 +1,12 @@ -const PHOTO_COUNT = 25; +export const PHOTO_COUNT = 25; -const MESSAGES = [ +export const MESSAGES = [ 'Всё отлично!', 'В целом всё неплохо. Но не всё.', 'У моего кота получилась фотография лучше.', ]; -const DESCRIPTIONS = [ +export const DESCRIPTIONS = [ 'Утро!', 'Котик', 'Солнышко', @@ -14,7 +14,7 @@ const DESCRIPTIONS = [ 'Что-то новенькое', ]; -const NAMES = [ +export const NAMES = [ 'Иван', 'Себастьян', 'Мария', @@ -23,4 +23,4 @@ const NAMES = [ 'Юлия', ]; -export {PHOTO_COUNT, MESSAGES, DESCRIPTIONS, NAMES}; +export const COMMENTS_STEP = 5;