Skip to content

Commit 96e1aaa

Browse files
zarram89zarram89
committed
feat: adds comments render
1 parent 4b62eaf commit 96e1aaa

10 files changed

Lines changed: 168 additions & 156 deletions

File tree

‎js/main.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { getPictures } from './data/pictures.js';
2-
import { renderGallery } from './render/gallery.js';
3-
import { initBigPicture } from './render/big-picture.js';
1+
import { getPictures } from './mock/pictures.js';
2+
import { renderGallery } from './ui/gallery.js';
3+
import { initBigPicture } from './ui/big-picture/meta.js';
4+
import { initCommentsLoader } from './ui/big-picture/comments.js';
45

56
const container = document.querySelector('.pictures');
67
const template = document.querySelector('#picture')?.content?.querySelector('.picture');
78

89
initBigPicture();
10+
initCommentsLoader();
911

1012
if (container && template) {
1113
renderGallery(getPictures(), container, template);

js/data/comments.js renamed to js/mock/comments.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
1-
import {
2-
MESSAGES,
3-
NAMES,
4-
} from '../constants/mock.js';
5-
import { CONFIG } from '../constants/config.js';
6-
import {
7-
getRandomInteger,
8-
getRandomItem,
9-
} from '../utils/random.js';
1+
import { MESSAGES, NAMES } from './const/data.js';
2+
import { CONFIG } from './const/config.js';
3+
import { getRandomInteger, getRandomItem } from '../utils/random.js';
104
import { createIdGenerator, } from '../utils/id.js';
115

126
const commentIdGenerator = createIdGenerator();

js/constants/config.js renamed to js/mock/const/config.js

File renamed without changes.

js/constants/mock.js renamed to js/mock/const/data.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@ const DESCRIPTIONS = [
2121
];
2222
const NAMES = ['Николай', 'Аким', 'Ким', 'Харитон', 'Тимур', 'Степан'];
2323
const PICTURES_COUNT = 25;
24+
const COMMENTS_PER_PORTION = 5;
2425

25-
export {
26-
MESSAGES,
27-
DESCRIPTIONS,
28-
NAMES,
29-
PICTURES_COUNT,
30-
};
26+
export { MESSAGES, DESCRIPTIONS, NAMES, PICTURES_COUNT, COMMENTS_PER_PORTION };

js/data/pictures.js renamed to js/mock/pictures.js

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import {
2-
DESCRIPTIONS,
3-
PICTURES_COUNT,
4-
} from '../constants/mock.js';
5-
import {
6-
CONFIG
7-
} from '../constants/config.js';
8-
import {
9-
getRandomInteger,
10-
getRandomItem,
11-
} from '../utils/random.js';
1+
import { DESCRIPTIONS, PICTURES_COUNT } from './const/data.js';
2+
import { CONFIG } from './const/config.js';
3+
import { getRandomInteger, getRandomItem } from '../utils/random.js';
124
import { createIdGenerator } from '../utils/id.js';
135
import { getComments } from './comments.js';
146

‎js/render/big-picture.js‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎js/ui/big-picture/comments.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { COMMENTS_PER_PORTION } from '../../mock/const/data';
2+
3+
const commentsList = document.querySelector('.social__comments');
4+
const commentsLoader = document.querySelector('.comments-loader');
5+
const shownCount = document.querySelector('.social__comment-shown-count');
6+
const totalCount = document.querySelector('.social__comment-total-count');
7+
8+
let comments = [];
9+
let commentsShown = 0;
10+
let isLoaderInitialized = false;
11+
12+
const createComment = ({ avatar, name, message }) => {
13+
const li = document.createElement('li');
14+
li.className = 'social__comment';
15+
16+
const img = document.createElement('img');
17+
img.className = 'social__picture';
18+
img.src = avatar;
19+
img.alt = name;
20+
img.width = 35;
21+
img.height = 35;
22+
23+
const text = document.createElement('p');
24+
text.className = 'social__text';
25+
text.textContent = message;
26+
27+
li.append(img, text);
28+
29+
return li;
30+
};
31+
32+
const renderComments = () => {
33+
const next = Math.min(commentsShown + COMMENTS_PER_PORTION, comments.length);
34+
35+
const fragment = document.createDocumentFragment();
36+
37+
for (let i = commentsShown; i < next; i++) {
38+
fragment.append(createComment(comments[i]));
39+
}
40+
41+
commentsList.append(fragment);
42+
43+
commentsShown = next;
44+
45+
shownCount.textContent = String(commentsShown);
46+
totalCount.textContent = String(comments.length);
47+
48+
if (commentsShown >= comments.length) {
49+
commentsLoader.classList.add('hidden');
50+
} else {
51+
commentsLoader.classList.remove('hidden');
52+
}
53+
};
54+
55+
const resetComments = (newComments = []) => {
56+
comments = newComments;
57+
commentsShown = 0;
58+
59+
commentsList.innerHTML = '';
60+
commentsLoader.classList.remove('hidden');
61+
};
62+
63+
const initCommentsLoader = () => {
64+
if (isLoaderInitialized) {
65+
return;
66+
}
67+
isLoaderInitialized = true;
68+
69+
commentsLoader.addEventListener('click', renderComments);
70+
};
71+
72+
export {
73+
renderComments,
74+
resetComments,
75+
initCommentsLoader,
76+
};

‎js/ui/big-picture/meta.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { isEscapeKey } from '../../utils/common.js';
2+
import { renderComments, resetComments } from './comments.js';
3+
4+
const body = document.body;
5+
const bigPicture = document.querySelector('.big-picture');
6+
const cancelButton = bigPicture.querySelector('.big-picture__cancel');
7+
8+
const bigPictureImage = bigPicture.querySelector('.big-picture__img img');
9+
const likesCount = bigPicture.querySelector('.likes-count');
10+
const caption = bigPicture.querySelector('.social__caption');
11+
12+
let isOpen = false;
13+
let isInitialized = false;
14+
15+
const renderMeta = ({ url, likes, description }) => {
16+
bigPictureImage.src = url;
17+
bigPictureImage.alt = description;
18+
19+
likesCount.textContent = String(likes);
20+
caption.textContent = description;
21+
};
22+
23+
const open = (data) => {
24+
if (!data || isOpen) {
25+
return;
26+
}
27+
28+
isOpen = true;
29+
30+
bigPicture.classList.remove('hidden');
31+
body.classList.add('modal-open');
32+
33+
document.addEventListener('keydown', onDocumentKeydown);
34+
35+
renderMeta(data);
36+
resetComments(data.comments);
37+
renderComments();
38+
};
39+
40+
const close = () => {
41+
if (!isOpen) {
42+
return;
43+
}
44+
45+
isOpen = false;
46+
47+
bigPicture.classList.add('hidden');
48+
body.classList.remove('modal-open');
49+
50+
document.removeEventListener('keydown', onDocumentKeydown);
51+
};
52+
53+
function onDocumentKeydown(evt) {
54+
if (isEscapeKey(evt)) {
55+
evt.preventDefault();
56+
close();
57+
}
58+
}
59+
60+
function onCancelButtonClick() {
61+
close();
62+
}
63+
64+
const initBigPicture = () => {
65+
if (isInitialized) {
66+
return;
67+
}
68+
isInitialized = true;
69+
70+
cancelButton.addEventListener('click', onCancelButtonClick);
71+
};
72+
73+
export {
74+
initBigPicture,
75+
open as showBigPicture,
76+
close as hideBigPicture,
77+
};

js/render/gallery.js renamed to js/ui/gallery.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { renderThumbnails } from './thumbnail.js';
2-
import { showBigPicture } from './big-picture.js';
1+
import { renderThumbnails } from './thumbnails.js';
2+
import { showBigPicture } from './big-picture/meta.js';
33

44
const renderGallery = (pictures, container, template) => {
55
const picturesMap = new Map(pictures.map((item) => [item.id, item]));

js/render/thumbnail.js renamed to js/ui/thumbnails.js

File renamed without changes.

0 commit comments

Comments
 (0)