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-comments.js b/js/components/render-comments.js new file mode 100644 index 0000000..5cf1d24 --- /dev/null +++ b/js/components/render-comments.js @@ -0,0 +1,62 @@ +const COMMENTS_PORTION = 5; + +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, 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]; + commentList.innerHTML = ''; + + 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(); + }); +}; + +export { + renderComments +}; diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 3161560..2d13019 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,18 +1,21 @@ -import { showBigPicture } from './show-big-picture'; +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 {url , description, comments, likes, } = 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..8d9c300 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,38 +1,14 @@ -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'); +import { renderComments} from './render-comments.js'; -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; -}; - -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 commentsLoader = bigPicture.querySelector('.comments-loader'); const hideBigPicture = () => { bigPicture.classList.add('hidden'); body.classList.remove('modal-open'); + commentsLoader.classList.remove('hidden'); document.removeEventListener('keydown', onEscKeyDown); }; @@ -47,25 +23,34 @@ const onCancelButtonClick = () => { hideBigPicture(); }; -const renderPictureDetails = ({ url, likes, description }) => { +const showBigPicture = ({ + url, + description, + comments, + likes +}) => { + const img = bigPicture.querySelector('.big-picture__img img'); + 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; - bigPicture.querySelector('.likes-count').textContent = likes; - bigPicture.querySelector('.social__caption').textContent = description; -}; + socialCaption.alt = description; + socialComment.textContent = comments.length; + likesCount.textContent = likes; + -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); -export { showBigPicture }; +export { + showBigPicture +}; diff --git a/js/data/generated-object.js b/js/data/generated-object.js index 55210e7..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)]}` }); @@ -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) 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);