From 5a0425aded3a19c702620cba0a2e68d0ff13d4ac Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Thu, 14 Mar 2024 19:21:16 +0300 Subject: [PATCH 01/12] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20Fu?= =?UTF-8?q?nction+=20const=20=D0=B8=D0=B5=D1=80=D0=B0=D1=80=D1=85=D0=B8?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 - js/components/render-pictures.js | 11 ++++--- js/components/show-big-picture.js | 10 +++---- js/functions.js | 48 ------------------------------- 4 files changed, 12 insertions(+), 58 deletions(-) delete mode 100644 js/functions.js diff --git a/index.html b/index.html index 09d5e84..3aee8cc 100644 --- a/index.html +++ b/index.html @@ -234,6 +234,5 @@

Не удалось загрузить данны - diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 3161560..33238ad 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,18 +1,21 @@ import { showBigPicture } from './show-big-picture'; -const pictureTemplate = document - .querySelector('#picture') +const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); const container = document.querySelector('.pictures'); const createPicture = (data) => { const { comments, description, likes, url } = data; + const picture = pictureTemplate.cloneNode(true); const img = picture.querySelector('.picture__img'); + const pictureComment = picture.querySelector('.picture__comments'); + const pictureLikes = picture.querySelector('.picture__likes'); + img.src = url; img.alt = description; - picture.querySelector('.picture__comments').textContent = comments.length; - picture.querySelector('.picture__likes').textContent = likes; + pictureComment.textContent = comments.length; + pictureLikes.textContent = likes; picture.addEventListener('click', () => { showBigPicture(data); diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index 7eda9ab..1b8d11e 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,9 +1,9 @@ -const bigPicture = document.querySelector('.big-picture'); -const commentCount = document.querySelector('.social__comment-count'); -const commentList = document.querySelector('.social__comments'); -const commentsLoader = document.querySelector('.comments-loader'); const body = document.querySelector('body'); -const cancelButton = document.querySelector('.big-picture__cancel'); +const bigPicture = document.querySelector('.big-picture'); +const commentCount = bigPicture.querySelector('.social__comment-count'); +const commentList = bigPicture.querySelector('.social__comments'); +const commentsLoader = bigPicture.querySelector('.comments-loader'); +const cancelButton = bigPicture.querySelector('.big-picture__cancel'); const createComment = ({ url, name, message }) => { const comment = document.createElement('li'); diff --git a/js/functions.js b/js/functions.js deleted file mode 100644 index 0170a26..0000000 --- a/js/functions.js +++ /dev/null @@ -1,48 +0,0 @@ -const checkStringLength = (string = '', maxSymbols = 1) => string.length <= maxSymbols; -checkStringLength('проверяемая строка', 20); - -const testPolyndrome = (string = '') => { - string = string.replaceAll(' ', '').toLowerCase(); - let reversal = ''; - - for (let i = string.length - 1; i >= 0; i--) { - reversal += string[1]; - } - return string === reversal; -}; -testPolyndrome('Лёша на полке клопа нашёл '); - -const extractNumber = (string) => { - let result = ''; - - string = string.toString(); - - for (let i = 0; i <= string.length; i++) { - if (Number.isNaN(parseInt(string[i], 10)) === false) { - result += string[i]; - } - } - return result === '' ? NaN : Number(result); -}; -extractNumber('извлекает содержащиеся в ней цифры от 0 до 9'); - -const checkMeetingTime = (startDayTime, endDayTime, startmeetingTime, duration) => { - - function countMinutes(time) { - const [hours, minutes] = time.split(':'); - return hours * 60 + parseInt(minutes, 10); - } - - const startDayminutes = countMinutes(startDayTime); - const endDayMinutes = countMinutes(endDayTime); - const startMeetingminutes = countMinutes(startmeetingTime); - const endMeetingMinutes = startMeetingminutes + duration; - - return startDayminutes <= startMeetingminutes && endMeetingMinutes <= endDayMinutes; -}; - -checkMeetingTime('08:00', '17:30', '14:00', 90); -checkMeetingTime('8:0', '10:0', '8:0', 120); -checkMeetingTime('08:00', '14:30', '14:00', 90); -checkMeetingTime('14:00', '17:30', '08:0', 90); -checkMeetingTime('8:00', '17:30', '08:00', 900); From 7bc781ac98c0b5828cb06c4908ed300e2d94ddb0 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Thu, 14 Mar 2024 20:51:29 +0300 Subject: [PATCH 02/12] likes --- js/data/generated-object.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/data/generated-object.js b/js/data/generated-object.js index 55210e7..6657e3a 100644 --- a/js/data/generated-object.js +++ b/js/data/generated-object.js @@ -87,7 +87,7 @@ const photoDescription = () => ({ id: createId(), url: `photos/${createPhotoid()}.jpg`, description: DESCRIPTIONS[getRandomInteger(0, DESCRIPTIONS.length - 1)], - likes: getRandomInteger(LIKES.min, LIKES.min), + likes: getRandomInteger(LIKES.min, LIKES.max), comments: Array.from({ length: getRandomInteger(COMMENTS.min, COMMENTS.max) }, commentInformation) From 0ec252c4e748badb9c4b80fe0e17c1bdd938709b Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 16 Mar 2024 17:47:18 +0300 Subject: [PATCH 03/12] =?UTF-8?q?=D0=9E=D1=80=D0=B3=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BE=D0=B4=D0=B0+?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "js/components/render-\321\201omments.js" | 28 ++++++++++++ js/components/show-big-picture.js | 55 +++++++---------------- 2 files changed, 44 insertions(+), 39 deletions(-) create mode 100644 "js/components/render-\321\201omments.js" diff --git "a/js/components/render-\321\201omments.js" "b/js/components/render-\321\201omments.js" new file mode 100644 index 0000000..558c693 --- /dev/null +++ "b/js/components/render-\321\201omments.js" @@ -0,0 +1,28 @@ +const createComment = ({ url, name, message }, template) => { + const comment = template.cloneNode(true); + const image = comment.querySelector('.social__picture'); + const socialText = comment.querySelector('.social__text'); + + image.src = url; + image.alt = name; + socialText.textContent = message; + + return comment; +}; + +const renderComments = (comments) => { + const commentList = document.querySelector('.social__comments'); + const template = commentList.children[0]; + + commentList.innerHTML = ''; + + const fragment = document.createDocumentFragment(); + comments.forEach((comment) => { + const commentElement = createComment(comment, template); + fragment.append(commentElement); + }); + + commentList.append(fragment); +}; + +export { renderComments }; diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index 1b8d11e..4fd13ef 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,34 +1,11 @@ -const body = document.querySelector('body'); -const bigPicture = document.querySelector('.big-picture'); -const commentCount = bigPicture.querySelector('.social__comment-count'); -const commentList = bigPicture.querySelector('.social__comments'); -const commentsLoader = bigPicture.querySelector('.comments-loader'); -const cancelButton = bigPicture.querySelector('.big-picture__cancel'); - -const createComment = ({ url, name, message }) => { - const comment = document.createElement('li'); - comment.innerHTML = - '

'; - comment.classList.add('social__comment'); - const image = comment.querySelector('.social__picture'); - image.src = url; - image.alt = name; - comment.querySelector('.social__text').textContent = message; - - return comment; -}; +import { + renderComments +} from '../components/render-сomments'; -const renderComments = (comments) => { - commentList.innerHTML = ''; - const fragment = document.createDocumentFragment(); - comments.forEach((comment) => { - const commentElement = createComment(comment); - fragment.append(commentElement); - }); - - commentList.append(fragment); -}; +const body = document.body; +const bigPicture = body.querySelector('.big-picture'); +const cancelButton = bigPicture.querySelector('.big-picture__cancel'); const hideBigPicture = () => { bigPicture.classList.add('hidden'); @@ -47,23 +24,23 @@ const onCancelButtonClick = () => { hideBigPicture(); }; -const renderPictureDetails = ({ url, likes, description }) => { + +const showBigPicture = ({ url, likes, description, comments }) => { const img = bigPicture.querySelector('.big-picture__img img'); + const likesCount = bigPicture.querySelector('.likes-count'); + const socialCaption = bigPicture.querySelector('.social__caption'); + img.src = url; img.alt = description; - bigPicture.querySelector('.likes-count').textContent = likes; - bigPicture.querySelector('.social__caption').textContent = description; -}; + likesCount.textContent = likes; + socialCaption.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', onEscKeyDown); - renderPictureDetails(data); - renderComments(data.comments); + renderComments(comments, bigPicture); + + document.addEventListener('keydown', onEscKeyDown); }; cancelButton.addEventListener('click', onCancelButtonClick); From 466f3b4e07935fd63ce11a807043c7175abc0e1c Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 16 Mar 2024 19:08:58 +0300 Subject: [PATCH 04/12] =?UTF-8?q?bigPicture=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/big-picture.js | 90 +++++++++++++++++++++++ js/components/render-pictures.js | 2 +- "js/components/render-\321\201omments.js" | 28 ------- js/components/show-big-picture.js | 48 ------------ js/data/generated-object.js | 2 +- 5 files changed, 92 insertions(+), 78 deletions(-) create mode 100644 js/components/big-picture.js delete mode 100644 "js/components/render-\321\201omments.js" delete mode 100644 js/components/show-big-picture.js diff --git a/js/components/big-picture.js b/js/components/big-picture.js new file mode 100644 index 0000000..204a6c0 --- /dev/null +++ b/js/components/big-picture.js @@ -0,0 +1,90 @@ +const body = document.body; +const bigPicture = body.querySelector('.big-picture'); +const commentCount = bigPicture.querySelector('.social__comment-count'); +const commentList = bigPicture.querySelector('.social__comments'); +const commentsLoader = bigPicture.querySelector('.comments-loader'); + +const cancelButton = bigPicture.querySelector('.big-picture__cancel'); + +const COMMENTS_PER_PORTION = 5; +let commentsShown = 0; +let comments = []; + +const createComment = ({ avatar, name, message }) => { + const comment = document.createElement('li'); + comment.innerHTML = + '

'; + comment.classList.add('social__comment'); + + comment.querySelector('.social__picture').src = avatar; + comment.querySelector('.social__picture').alt = name; + comment.querySelector('.social__text').textContent = message; + + return comment; +}; + +const renderComments = () => { + commentsShown += COMMENTS_PER_PORTION; + + if (commentsShown >= comments.length) { + commentsLoader.classList.add('hidden'); + commentsShown = comments.length; + } else { + commentsLoader.classList.remove('hidden'); + } + + const fragment = document.createDocumentFragment(); + for (let i = 0; i < commentsShown; i++) { + const commentElement = createComment(comments[i]); + fragment.append(commentElement); + } + + commentList.innerHTML = ''; + commentList.append(fragment); + commentCount.innerHTML = `${commentsShown} из ${comments.length} комментариев`; +}; + +const hideBigPicture = () => { + bigPicture.classList.add('hidden'); + body.classList.remove('modal-open'); + document.removeEventListener('keydown', onEscKeyDown); + commentsShown = 0; +}; + +function onEscKeyDown(evt) { + if (evt.key === 'Escape') { + evt.preventDefault(); + hideBigPicture(); + } +} + +const onCancelButtonClick = () => { + hideBigPicture(); +}; + +const onCommentsLoaderClick = () => renderComments(); + +const renderPictureDetails = ({ url, likes, description }) => { + bigPicture.querySelector('.big-picture__img img').src = url; + bigPicture.querySelector('.big-picture__img img').alt = description; + 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'); + document.addEventListener('keydown', onEscKeyDown); + + renderPictureDetails(data); + comments = data.comments; + if (comments.length > 0) { + renderComments(); + } +}; + +cancelButton.addEventListener('click', onCancelButtonClick); +commentsLoader.addEventListener('click', onCommentsLoaderClick); + +export { showBigPicture }; diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 33238ad..06b24b0 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,4 +1,4 @@ -import { showBigPicture } from './show-big-picture'; +import { showBigPicture } from './big-picture'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); diff --git "a/js/components/render-\321\201omments.js" "b/js/components/render-\321\201omments.js" deleted file mode 100644 index 558c693..0000000 --- "a/js/components/render-\321\201omments.js" +++ /dev/null @@ -1,28 +0,0 @@ -const createComment = ({ url, name, message }, template) => { - const comment = template.cloneNode(true); - const image = comment.querySelector('.social__picture'); - const socialText = comment.querySelector('.social__text'); - - image.src = url; - image.alt = name; - socialText.textContent = message; - - return comment; -}; - -const renderComments = (comments) => { - const commentList = document.querySelector('.social__comments'); - const template = commentList.children[0]; - - commentList.innerHTML = ''; - - const fragment = document.createDocumentFragment(); - comments.forEach((comment) => { - const commentElement = createComment(comment, template); - fragment.append(commentElement); - }); - - commentList.append(fragment); -}; - -export { renderComments }; diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js deleted file mode 100644 index 4fd13ef..0000000 --- a/js/components/show-big-picture.js +++ /dev/null @@ -1,48 +0,0 @@ -import { - renderComments -} from '../components/render-сomments'; - - -const body = document.body; -const bigPicture = body.querySelector('.big-picture'); -const cancelButton = bigPicture.querySelector('.big-picture__cancel'); - -const hideBigPicture = () => { - bigPicture.classList.add('hidden'); - body.classList.remove('modal-open'); - document.removeEventListener('keydown', onEscKeyDown); -}; - -function onEscKeyDown(evt) { - if (evt.key === 'Escape') { - evt.preventDefault(); - hideBigPicture(); - } -} - -const onCancelButtonClick = () => { - hideBigPicture(); -}; - - -const showBigPicture = ({ url, likes, description, comments }) => { - const img = bigPicture.querySelector('.big-picture__img img'); - const likesCount = bigPicture.querySelector('.likes-count'); - const socialCaption = bigPicture.querySelector('.social__caption'); - - img.src = url; - img.alt = description; - likesCount.textContent = likes; - socialCaption.textContent = description; - - bigPicture.classList.remove('hidden'); - body.classList.add('modal-open'); - - renderComments(comments, bigPicture); - - document.addEventListener('keydown', onEscKeyDown); -}; - -cancelButton.addEventListener('click', onCancelButtonClick); - -export { showBigPicture }; diff --git a/js/data/generated-object.js b/js/data/generated-object.js index 6657e3a..1e7c397 100644 --- a/js/data/generated-object.js +++ b/js/data/generated-object.js @@ -78,7 +78,7 @@ const DESCRIPTIONS = [ const commentInformation = () => ({ id: generateCommentId(), - url: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`, + avatar: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`, message: MESSAGES[getRandomInteger(0, MESSAGES.length - 1)], name: `${NAMES[getRandomInteger(0, NAMES.length - 1)] } ${ SURNAMES[getRandomInteger(0, SURNAMES.length - 1)]}` }); From 3c99be02bd76ea11fcc5eacf93d3c1f861d2cd09 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 16 Mar 2024 19:19:25 +0300 Subject: [PATCH 05/12] createComment --- js/components/big-picture.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/js/components/big-picture.js b/js/components/big-picture.js index 204a6c0..dbb4dcb 100644 --- a/js/components/big-picture.js +++ b/js/components/big-picture.js @@ -16,9 +16,12 @@ const createComment = ({ avatar, name, message }) => { '

'; comment.classList.add('social__comment'); - comment.querySelector('.social__picture').src = avatar; - comment.querySelector('.social__picture').alt = name; - comment.querySelector('.social__text').textContent = message; + const image = comment.querySelector('.social__picture'); + const text = comment.querySelector('.social__text'); + + image.src = avatar; + image.alt = name; + text.textContent = message; return comment; }; @@ -65,10 +68,14 @@ const onCancelButtonClick = () => { const onCommentsLoaderClick = () => renderComments(); const renderPictureDetails = ({ url, likes, description }) => { - bigPicture.querySelector('.big-picture__img img').src = url; - bigPicture.querySelector('.big-picture__img img').alt = description; - bigPicture.querySelector('.likes-count').textContent = likes; - bigPicture.querySelector('.social__caption').textContent = description; + const img = bigPicture.querySelector('.big-picture__img img'); + const likesCount = bigPicture.querySelector('.likes-count'); + const social = bigPicture.querySelector('.social__caption'); + + img.src = url; + img.alt = description; + likesCount.textContent = likes; + social.textContent = description; }; const showBigPicture = (data) => { From 2264c54f003f07b9794b9478902c1bd92b1b9fc2 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 11:41:10 +0300 Subject: [PATCH 06/12] =?UTF-8?q?Revert=20"=D0=9E=D1=80=D0=B3=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BE=D0=B4=D0=B0?= =?UTF-8?q?+"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 0ec252c4e748badb9c4b80fe0e17c1bdd938709b. From 9122f5e567e7735d53d8e94ffab7b466a30b884f Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 11:46:09 +0300 Subject: [PATCH 07/12] =?UTF-8?q?-=D0=BD=D0=B5=20=D1=83=D0=B4=D0=B0=D1=87?= =?UTF-8?q?=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/big-picture.js | 97 +++++++++++++++++++++++ js/components/render-pictures.js | 2 +- "js/components/render-\321\201omments.js" | 28 ------- js/components/show-big-picture.js | 48 ----------- js/data/generated-object.js | 2 +- 5 files changed, 99 insertions(+), 78 deletions(-) create mode 100644 js/components/big-picture.js delete mode 100644 "js/components/render-\321\201omments.js" delete mode 100644 js/components/show-big-picture.js diff --git a/js/components/big-picture.js b/js/components/big-picture.js new file mode 100644 index 0000000..dbb4dcb --- /dev/null +++ b/js/components/big-picture.js @@ -0,0 +1,97 @@ +const body = document.body; +const bigPicture = body.querySelector('.big-picture'); +const commentCount = bigPicture.querySelector('.social__comment-count'); +const commentList = bigPicture.querySelector('.social__comments'); +const commentsLoader = bigPicture.querySelector('.comments-loader'); + +const cancelButton = bigPicture.querySelector('.big-picture__cancel'); + +const COMMENTS_PER_PORTION = 5; +let commentsShown = 0; +let comments = []; + +const createComment = ({ avatar, name, message }) => { + const comment = document.createElement('li'); + comment.innerHTML = + '

'; + comment.classList.add('social__comment'); + + const image = comment.querySelector('.social__picture'); + const text = comment.querySelector('.social__text'); + + image.src = avatar; + image.alt = name; + text.textContent = message; + + return comment; +}; + +const renderComments = () => { + commentsShown += COMMENTS_PER_PORTION; + + if (commentsShown >= comments.length) { + commentsLoader.classList.add('hidden'); + commentsShown = comments.length; + } else { + commentsLoader.classList.remove('hidden'); + } + + const fragment = document.createDocumentFragment(); + for (let i = 0; i < commentsShown; i++) { + const commentElement = createComment(comments[i]); + fragment.append(commentElement); + } + + commentList.innerHTML = ''; + commentList.append(fragment); + commentCount.innerHTML = `${commentsShown} из ${comments.length} комментариев`; +}; + +const hideBigPicture = () => { + bigPicture.classList.add('hidden'); + body.classList.remove('modal-open'); + document.removeEventListener('keydown', onEscKeyDown); + commentsShown = 0; +}; + +function onEscKeyDown(evt) { + if (evt.key === 'Escape') { + evt.preventDefault(); + hideBigPicture(); + } +} + +const onCancelButtonClick = () => { + hideBigPicture(); +}; + +const onCommentsLoaderClick = () => renderComments(); + +const renderPictureDetails = ({ url, likes, description }) => { + const img = bigPicture.querySelector('.big-picture__img img'); + const likesCount = bigPicture.querySelector('.likes-count'); + const social = bigPicture.querySelector('.social__caption'); + + img.src = url; + img.alt = description; + likesCount.textContent = likes; + social.textContent = description; +}; + +const showBigPicture = (data) => { + bigPicture.classList.remove('hidden'); + body.classList.add('modal-open'); + commentsLoader.classList.add('hidden'); + document.addEventListener('keydown', onEscKeyDown); + + renderPictureDetails(data); + comments = data.comments; + if (comments.length > 0) { + renderComments(); + } +}; + +cancelButton.addEventListener('click', onCancelButtonClick); +commentsLoader.addEventListener('click', onCommentsLoaderClick); + +export { showBigPicture }; diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 33238ad..06b24b0 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,4 +1,4 @@ -import { showBigPicture } from './show-big-picture'; +import { showBigPicture } from './big-picture'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); diff --git "a/js/components/render-\321\201omments.js" "b/js/components/render-\321\201omments.js" deleted file mode 100644 index 558c693..0000000 --- "a/js/components/render-\321\201omments.js" +++ /dev/null @@ -1,28 +0,0 @@ -const createComment = ({ url, name, message }, template) => { - const comment = template.cloneNode(true); - const image = comment.querySelector('.social__picture'); - const socialText = comment.querySelector('.social__text'); - - image.src = url; - image.alt = name; - socialText.textContent = message; - - return comment; -}; - -const renderComments = (comments) => { - const commentList = document.querySelector('.social__comments'); - const template = commentList.children[0]; - - commentList.innerHTML = ''; - - const fragment = document.createDocumentFragment(); - comments.forEach((comment) => { - const commentElement = createComment(comment, template); - fragment.append(commentElement); - }); - - commentList.append(fragment); -}; - -export { renderComments }; diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js deleted file mode 100644 index 4fd13ef..0000000 --- a/js/components/show-big-picture.js +++ /dev/null @@ -1,48 +0,0 @@ -import { - renderComments -} from '../components/render-сomments'; - - -const body = document.body; -const bigPicture = body.querySelector('.big-picture'); -const cancelButton = bigPicture.querySelector('.big-picture__cancel'); - -const hideBigPicture = () => { - bigPicture.classList.add('hidden'); - body.classList.remove('modal-open'); - document.removeEventListener('keydown', onEscKeyDown); -}; - -function onEscKeyDown(evt) { - if (evt.key === 'Escape') { - evt.preventDefault(); - hideBigPicture(); - } -} - -const onCancelButtonClick = () => { - hideBigPicture(); -}; - - -const showBigPicture = ({ url, likes, description, comments }) => { - const img = bigPicture.querySelector('.big-picture__img img'); - const likesCount = bigPicture.querySelector('.likes-count'); - const socialCaption = bigPicture.querySelector('.social__caption'); - - img.src = url; - img.alt = description; - likesCount.textContent = likes; - socialCaption.textContent = description; - - bigPicture.classList.remove('hidden'); - body.classList.add('modal-open'); - - renderComments(comments, bigPicture); - - document.addEventListener('keydown', onEscKeyDown); -}; - -cancelButton.addEventListener('click', onCancelButtonClick); - -export { showBigPicture }; diff --git a/js/data/generated-object.js b/js/data/generated-object.js index 6657e3a..1e7c397 100644 --- a/js/data/generated-object.js +++ b/js/data/generated-object.js @@ -78,7 +78,7 @@ const DESCRIPTIONS = [ const commentInformation = () => ({ id: generateCommentId(), - url: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`, + avatar: `img/avatar-${getRandomInteger(AVATARS.min, AVATARS.max)}.svg`, message: MESSAGES[getRandomInteger(0, MESSAGES.length - 1)], name: `${NAMES[getRandomInteger(0, NAMES.length - 1)] } ${ SURNAMES[getRandomInteger(0, SURNAMES.length - 1)]}` }); From b019859ac7c522be5b57c729e50c998ecc8c5345 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 11:55:31 +0300 Subject: [PATCH 08/12] BigPicture --- js/components/big-picture.js | 97 ------------------------------- js/components/render-pictures.js | 2 +- js/components/show-big-picture.js | 77 ++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 98 deletions(-) delete mode 100644 js/components/big-picture.js create mode 100644 js/components/show-big-picture.js diff --git a/js/components/big-picture.js b/js/components/big-picture.js deleted file mode 100644 index dbb4dcb..0000000 --- a/js/components/big-picture.js +++ /dev/null @@ -1,97 +0,0 @@ -const body = document.body; -const bigPicture = body.querySelector('.big-picture'); -const commentCount = bigPicture.querySelector('.social__comment-count'); -const commentList = bigPicture.querySelector('.social__comments'); -const commentsLoader = bigPicture.querySelector('.comments-loader'); - -const cancelButton = bigPicture.querySelector('.big-picture__cancel'); - -const COMMENTS_PER_PORTION = 5; -let commentsShown = 0; -let comments = []; - -const createComment = ({ avatar, name, message }) => { - const comment = document.createElement('li'); - comment.innerHTML = - '

'; - comment.classList.add('social__comment'); - - const image = comment.querySelector('.social__picture'); - const text = comment.querySelector('.social__text'); - - image.src = avatar; - image.alt = name; - text.textContent = message; - - return comment; -}; - -const renderComments = () => { - commentsShown += COMMENTS_PER_PORTION; - - if (commentsShown >= comments.length) { - commentsLoader.classList.add('hidden'); - commentsShown = comments.length; - } else { - commentsLoader.classList.remove('hidden'); - } - - const fragment = document.createDocumentFragment(); - for (let i = 0; i < commentsShown; i++) { - const commentElement = createComment(comments[i]); - fragment.append(commentElement); - } - - commentList.innerHTML = ''; - commentList.append(fragment); - commentCount.innerHTML = `${commentsShown} из ${comments.length} комментариев`; -}; - -const hideBigPicture = () => { - bigPicture.classList.add('hidden'); - body.classList.remove('modal-open'); - document.removeEventListener('keydown', onEscKeyDown); - commentsShown = 0; -}; - -function onEscKeyDown(evt) { - if (evt.key === 'Escape') { - evt.preventDefault(); - hideBigPicture(); - } -} - -const onCancelButtonClick = () => { - hideBigPicture(); -}; - -const onCommentsLoaderClick = () => renderComments(); - -const renderPictureDetails = ({ url, likes, description }) => { - const img = bigPicture.querySelector('.big-picture__img img'); - const likesCount = bigPicture.querySelector('.likes-count'); - const social = bigPicture.querySelector('.social__caption'); - - img.src = url; - img.alt = description; - likesCount.textContent = likes; - social.textContent = description; -}; - -const showBigPicture = (data) => { - bigPicture.classList.remove('hidden'); - body.classList.add('modal-open'); - commentsLoader.classList.add('hidden'); - document.addEventListener('keydown', onEscKeyDown); - - renderPictureDetails(data); - comments = data.comments; - if (comments.length > 0) { - renderComments(); - } -}; - -cancelButton.addEventListener('click', onCancelButtonClick); -commentsLoader.addEventListener('click', onCommentsLoaderClick); - -export { showBigPicture }; diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 06b24b0..33238ad 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,4 +1,4 @@ -import { showBigPicture } from './big-picture'; +import { showBigPicture } from './show-big-picture'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js new file mode 100644 index 0000000..d742bfa --- /dev/null +++ b/js/components/show-big-picture.js @@ -0,0 +1,77 @@ +const body = document.body; +const bigPicture = body.querySelector('.big-picture'); +const commentsLoader = bigPicture.querySelector('.comments-loader'); +const cancelButton = bigPicture.querySelector('.big-picture__cancel'); + + +const createComment = ({ avatar, name, message }, template) => { + const comment = template.cloneNode(true); + + const image = comment.querySelector('.social__picture'); + const socialText = comment.querySelector('.social__text'); + + image.src = avatar; + image.alt = name; + socialText.textContent = message; + + return comment; +}; + +const renderComments = (comments) => { + const commentList = document.querySelector('.social__comments'); + const template = commentList.children[0]; + + commentList.innerHTML = ''; + + const fragment = document.createDocumentFragment(); + comments.forEach((comment) => { + const commentElement = createComment(comment, template); + fragment.append(commentElement); + }); + + commentList.append(fragment); +}; + +export { renderComments }; + +const hideBigPicture = () => { + bigPicture.classList.add('hidden'); + body.classList.remove('modal-open'); + document.removeEventListener('keydown', onEscKeyDown); +}; + +function onEscKeyDown(evt) { + if (evt.key === 'Escape') { + evt.preventDefault(); + hideBigPicture(); + } +} + +const onCancelButtonClick = () => { + hideBigPicture(); +}; + +const onCommentsLoaderClick = () => renderComments(); + +const showBigPicture = ({ url, likes, description, comments }) => { + const img = bigPicture.querySelector('.big-picture__img img'); + const likesCount = bigPicture.querySelector('.likes-count'); + const socialCaption = bigPicture.querySelector('.social__caption'); + + img.src = url; + img.alt = description; + likesCount.textContent = likes; + socialCaption.textContent = description; + + bigPicture.classList.remove('hidden'); + body.classList.add('modal-open'); + + renderComments(comments, bigPicture); + + document.addEventListener('keydown', onEscKeyDown); +}; + +cancelButton.addEventListener('click', onCancelButtonClick); +commentsLoader.addEventListener('click', onCommentsLoaderClick); + +export { showBigPicture }; From b1860c1815249d996cada58bad82add8d3559f8f Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 12:00:37 +0300 Subject: [PATCH 09/12] =?UTF-8?q?=D0=BE=D1=82=D0=BA=D0=B0=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/show-big-picture.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index d742bfa..0fd6a68 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,6 +1,5 @@ const body = document.body; const bigPicture = body.querySelector('.big-picture'); -const commentsLoader = bigPicture.querySelector('.comments-loader'); const cancelButton = bigPicture.querySelector('.big-picture__cancel'); @@ -51,8 +50,6 @@ const onCancelButtonClick = () => { hideBigPicture(); }; -const onCommentsLoaderClick = () => renderComments(); - const showBigPicture = ({ url, likes, description, comments }) => { const img = bigPicture.querySelector('.big-picture__img img'); const likesCount = bigPicture.querySelector('.likes-count'); @@ -72,6 +69,5 @@ const showBigPicture = ({ url, likes, description, comments }) => { }; cancelButton.addEventListener('click', onCancelButtonClick); -commentsLoader.addEventListener('click', onCommentsLoaderClick); export { showBigPicture }; From 2f15f753ad736f5b25749b20f2aa05f5d3fa5c1b Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 15:30:36 +0300 Subject: [PATCH 10/12] =?UTF-8?q?=D0=A1=D1=82=D0=B0=D1=80=D1=82=20=20?= =?UTF-8?q?=D0=9E=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81?= =?UTF-8?q?=D1=8F=20=D0=B8=20=D0=B7=D0=B0=D0=BA=D1=80=D1=8B=D0=B2=D0=B0?= =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20(=D1=87=D0=B0=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/render-comments.js | 36 ++++++++++++++++++++ js/components/render-pictures.js | 4 +-- js/components/show-big-picture.js | 55 +++++++++++-------------------- 3 files changed, 57 insertions(+), 38 deletions(-) create mode 100644 js/components/render-comments.js diff --git a/js/components/render-comments.js b/js/components/render-comments.js new file mode 100644 index 0000000..8e9e51a --- /dev/null +++ b/js/components/render-comments.js @@ -0,0 +1,36 @@ +import { bigPicture } from './show-big-picture'; + +const createComment = ({ + avatar, + name, + message +}, template) => { + + const comment = template.cloneNode(true); + const image = comment.querySelector('.social__picture'); + const socialText = comment.querySelector('.social__text'); + + image.src = avatar; + image.alt = name; + socialText.textContent = message; + + return comment; +}; + +const renderComments = (comments) => { + const commentList = bigPicture.querySelector('.social__comments'); + const template = commentList.children[0]; + const fragment = document.createDocumentFragment(); + + comments.forEach((comment) => { + const commentElement = createComment(comment, template); + fragment.append(commentElement); + }); + + commentList.innerHTML = ''; + commentList.append(fragment); +}; + +export { + renderComments +}; diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 33238ad..2d13019 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,11 +1,11 @@ -import { showBigPicture } from './show-big-picture'; +import { showBigPicture} from './show-big-picture'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); const container = document.querySelector('.pictures'); const createPicture = (data) => { - const { comments, description, likes, url } = data; + const {url , description, comments, likes, } = data; const picture = pictureTemplate.cloneNode(true); const img = picture.querySelector('.picture__img'); diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index 0fd6a68..b37ef8c 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,41 +1,14 @@ +import { renderComments} from './render-comments.js'; + const body = document.body; const bigPicture = body.querySelector('.big-picture'); const cancelButton = bigPicture.querySelector('.big-picture__cancel'); - - -const createComment = ({ avatar, name, message }, template) => { - const comment = template.cloneNode(true); - - const image = comment.querySelector('.social__picture'); - const socialText = comment.querySelector('.social__text'); - - image.src = avatar; - image.alt = name; - socialText.textContent = message; - - return comment; -}; - -const renderComments = (comments) => { - const commentList = document.querySelector('.social__comments'); - const template = commentList.children[0]; - - commentList.innerHTML = ''; - - const fragment = document.createDocumentFragment(); - comments.forEach((comment) => { - const commentElement = createComment(comment, template); - fragment.append(commentElement); - }); - - commentList.append(fragment); -}; - -export { renderComments }; +const commentsLoader = bigPicture.querySelector('.comments-loader'); const hideBigPicture = () => { bigPicture.classList.add('hidden'); body.classList.remove('modal-open'); + commentsLoader.classList.remove('hidden'); document.removeEventListener('keydown', onEscKeyDown); }; @@ -50,15 +23,23 @@ const onCancelButtonClick = () => { hideBigPicture(); }; -const showBigPicture = ({ url, likes, description, comments }) => { +const showBigPicture = ({ + url, + description, + comments, + likes +}) => { + const img = bigPicture.querySelector('.big-picture__img img'); - const likesCount = bigPicture.querySelector('.likes-count'); const socialCaption = bigPicture.querySelector('.social__caption'); + const socialComment = bigPicture.querySelector('.social__comment-total-count'); + const likesCount = bigPicture.querySelector('.likes-count'); img.src = url; - img.alt = description; + socialCaption.alt = description; + socialComment.textContent = comments.length; likesCount.textContent = likes; - socialCaption.textContent = description; + bigPicture.classList.remove('hidden'); body.classList.add('modal-open'); @@ -70,4 +51,6 @@ const showBigPicture = ({ url, likes, description, comments }) => { cancelButton.addEventListener('click', onCancelButtonClick); -export { showBigPicture }; +export { + showBigPicture, bigPicture +}; From f4e6379a89c38e0f977b3aa6698cc46194cdc6cf Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 16:13:27 +0300 Subject: [PATCH 11/12] ++ --- js/components/render-comments.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/components/render-comments.js b/js/components/render-comments.js index 8e9e51a..7b47070 100644 --- a/js/components/render-comments.js +++ b/js/components/render-comments.js @@ -19,9 +19,15 @@ const createComment = ({ const renderComments = (comments) => { const commentList = bigPicture.querySelector('.social__comments'); + const commentsLoader = bigPicture.querySelector('.comments-loader'); + const commentShowCount = bigPicture.querySelector('.social__comment-shown-count'); + let commentsShown = 0; + const template = commentList.children[0]; const fragment = document.createDocumentFragment(); + + comments.forEach((comment) => { const commentElement = createComment(comment, template); fragment.append(commentElement); From 29e655b6cabb88a6d1f00c7d30ce19b0f64cd7e1 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sun, 17 Mar 2024 19:46:17 +0300 Subject: [PATCH 12/12] =?UTF-8?q?=D0=9E=D1=82=D0=BA=D1=80=D1=8B=D0=B2?= =?UTF-8?q?=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=B8=20=D0=B7=D0=B0=D0=BA?= =?UTF-8?q?=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20(=D1=87?= =?UTF-8?q?=D0=B0=D1=81=D1=82=D1=8C=202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/render-comments.js | 42 +++++++++++++++++++++++-------- js/components/show-big-picture.js | 2 +- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/js/components/render-comments.js b/js/components/render-comments.js index 7b47070..5cf1d24 100644 --- a/js/components/render-comments.js +++ b/js/components/render-comments.js @@ -1,4 +1,4 @@ -import { bigPicture } from './show-big-picture'; +const COMMENTS_PORTION = 5; const createComment = ({ avatar, @@ -17,24 +17,44 @@ const createComment = ({ return comment; }; -const renderComments = (comments) => { + +const renderComments = (comments, bigPicture) => { const commentList = bigPicture.querySelector('.social__comments'); const commentsLoader = bigPicture.querySelector('.comments-loader'); const commentShowCount = bigPicture.querySelector('.social__comment-shown-count'); let commentsShown = 0; const template = commentList.children[0]; - const fragment = document.createDocumentFragment(); - - + commentList.innerHTML = ''; - comments.forEach((comment) => { - const commentElement = createComment(comment, template); - fragment.append(commentElement); + const shownComments = () => { + const startIndex = commentsShown * COMMENTS_PORTION; + commentsShown++; + const endIndex = Math.min( + startIndex + COMMENTS_PORTION, + comments.length + ); + + const slicedComments = comments.slice(startIndex, endIndex); + + slicedComments.forEach((comment) => { + commentList.append(createComment(comment, template)); + }); + + if (startIndex >= comments.length) { + commentsLoader.classList.add('hidden'); + commentsShown = comments.length; + } else { + commentsLoader.classList.remove('hidden'); + } + commentShowCount.textContent = endIndex; + + }; + shownComments(); + + commentsLoader.addEventListener('click', () => { + shownComments(); }); - - commentList.innerHTML = ''; - commentList.append(fragment); }; export { diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index b37ef8c..8d9c300 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -52,5 +52,5 @@ const showBigPicture = ({ cancelButton.addEventListener('click', onCancelButtonClick); export { - showBigPicture, bigPicture + showBigPicture };