module8-task1

functions.js

@@ -30,18 +30,18 @@
 // const meetingBeginning = '14:00';
 // const timeMeeting = 90;
 
-const checkWork = (beginning, ending, meeting, time) => {
-  if (beginning === '8:00' || beginning === '08:00' || beginning === '08:0' || beginning === '8:00') {
-    if (ending === '17:30' || ending === '17:3') {
-      if (meeting === '14:00' || meeting === '14:0') {
-        if (time === 90) {
-          return true;
-        }
-      }
-    }
-  } else {
-    return false;
-  }
-};
+// const checkWork = (beginning, ending, meeting, time) => {
+//   if (beginning === '8:00' || beginning === '08:00' || beginning === '08:0' || beginning === '8:00') {
+//     if (ending === '17:30' || ending === '17:3') {
+//       if (meeting === '14:00' || meeting === '14:0') {
+//         if (time === 90) {
+//           return true;
+//         }
+//       }
+//     }
+//   } else {
+//     return false;
+//   }
+// };
 
-console.log(checkWork('08:00', '17:30', '14:00', 90));
+// console.log(checkWork('08:00', '17:30', '14:00', 90));

js/createArray.js

@@ -1,5 +1,12 @@
-import {descriptionProfile, messageProfile, nameProfile} from './data.js';
-import {randomInteger, getRandomInRange} from './util.js';
+import {
+  descriptionProfile,
+  messageProfile,
+  nameProfile
+} from './data.js';
+import {
+  randomInteger,
+  getRandomInRange
+} from './util.js';
 
 
 const minComment = 0;
@@ -16,28 +23,28 @@ const createComents = () => {
   for (let i = 0; i <= comentsRandom; i++) {
     comments.push({
       idComments: getRandomInRange(1, 80),
-      avatar: `img/avatar-${getRandomInRange(1,6)}.svg.`,
+      avatar: `img/avatar-${getRandomInRange(1, 6)}.svg`,
       message: messageProfile[randomMessage],
       name: nameProfile[randomName],
     });
   }
   return comments;
 };
 
-const createProfile = () => (
-  {
-    id: getRandomInRange(1, 25),
-    url: `photos/${getRandomInRange(1, 25)}.jpg`,
-    description: descriptionProfile[randomDescription],
-    likes: getRandomInRange(minLikes, maxLikes),
-    comments: createComents()
-  }
-);
+const createProfile = () => ({
+  id: getRandomInRange(1, 25),
+  url: `photos/${getRandomInRange(1, 25)}.jpg`,
+  description: descriptionProfile[randomDescription],
+  likes: getRandomInRange(minLikes, maxLikes),
+  comments: createComents()
+});
 
 const countNumber = 25;
 const createNewProfile = () => Array.from({
   length: countNumber
 }, createProfile);
 
 
-export {createNewProfile};
+export {
+  createNewProfile
+};

js/createThumbnail.js

@@ -0,0 +1,29 @@
+
+import {createNewProfile} from './createArray.js';
+import { openPicture } from './openBigPhotoShow.js';
+// Ищем шаблон
+const POST_AMOUNT = 25;
+const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
+const pictures = document.querySelector('.pictures');
+const documentFragment = document.createDocumentFragment();
+const photosMiniatures = createNewProfile(POST_AMOUNT);
+
+photosMiniatures.forEach(({ id, url, description, comments, likes }) => {
+  const picture = pictureTemplate.cloneNode(true);
+  picture.dataset.pictureId = id; // Присваиваем id миниатюры
+  picture.querySelector('.picture__img').src = url;
+  picture.querySelector('.picture__img').alt = description;
+  picture.querySelector('.picture__likes').textContent = likes;
+  picture.querySelector('.picture__comments').textContent = comments.length;
+
+  // Добавляем обработчик события для открытия изображения
+  picture.addEventListener('click', () => {
+    openPicture(id);
+  });
+
+  documentFragment.appendChild(picture);
+});
+
+pictures.appendChild(documentFragment);
+
+export { pictures, photosMiniatures };

js/data.js

@@ -27,6 +27,8 @@ const nameProfile = [
   'Паша',
   'Олег',
   'Марина',
+  'Сева',
+  'Нигисик'
 ];
 
 export {descriptionProfile, messageProfile, nameProfile};

js/main.js

@@ -1,3 +1,9 @@
-// import {createNewProfile} from './createArray.js';
-// console.log(createNewProfile());
-import {photos} from './thumbnail.js';
+import {pictures} from './createThumbnail.js';
+import {openPicture} from './openBigPhotoShow.js';
+
+pictures.addEventListener('click', (evt) => {
+  const currentPicture = evt.target.closest('.picture');
+  if (currentPicture) {
+    openPicture(currentPicture.dataset.pictureId);
+  }
+});

js/openBigPhotoShow.js

@@ -0,0 +1,108 @@
+import {
+  photosMiniatures
+} from './createThumbnail.js';
+import {
+  isEscapeKey
+} from './util.js';
+
+const pictureBig = document.querySelector('.big-picture');
+const pictureBigImg = pictureBig.querySelector('.big-picture__img').querySelector('img');
+const countLikes = pictureBig.querySelector('.likes-count');
+const showLikes = pictureBig.querySelector('.social__comment-shown-count');
+const totalLikes = pictureBig.querySelector('.social__comment-total-count');
+const commentList = pictureBig.querySelector('.social__comments');
+const commentItem = pictureBig.querySelector('.social__comment');
+const caption = pictureBig.querySelector('.social__caption');
+const pictureBigcloseButton = document.querySelector('#picture-cancel');
+const body = document.body;
+
+// Убедитесь, что модальное окно скрыто при загрузке
+pictureBig.classList.add('hidden');
+
+// / создаю функцию где добавляю класс хидден, чтоб показать фотку
+const hidePictureBig = () => {
+  // Закрываем модальное окно
+  pictureBig.classList.add('hidden');
+  body.classList.remove('modal-open');
+
+  // Очищаем комментарии
+  commentList.innerHTML = '';
+
+  // Сбрасываем данные изображения
+  pictureBigImg.src = '';
+  pictureBigImg.alt = '';
+  countLikes.textContent = '';
+  caption.textContent = '';
+
+  // Сбрасываем состояние кнопки "Загрузить еще"
+  const commentsLoaderButton = pictureBig.querySelector('.social__comments-loader');
+  commentsLoaderButton.classList.remove('hidden');
+};
+
+// функция закрытия, которая вызывает функцию
+const closePictureBig = () => {
+  hidePictureBig();
+};
+
+// ставлю отработчик на кнопку крестик, чтоб при клике закрывалось
+pictureBigcloseButton.addEventListener('click', () => {
+  closePictureBig();
+});
+
+// делаю функцию чтоб заполнять данные о конкретной фотографии:
+const openPicture = (pictureId) => {
+  const photoCurrent = photosMiniatures.find((photo) => photo.id === Number(pictureId));
+  const commentsFragment = document.createDocumentFragment();
+
+  pictureBigImg.src = photoCurrent.url;
+  countLikes.textContent = photoCurrent.likes;
+
+  // Очищаем предыдущие комментарии
+  commentList.innerHTML = '';
+
+  // Добавление новых комментариев
+  photoCurrent.comments.forEach((comment, index) => {
+    const commentSocial = commentItem.cloneNode(true); // Клонируем элемент шаблона
+    commentSocial.querySelector('.social__picture').src = comment.avatar; // Устанавливаем аватар
+    commentSocial.querySelector('.social__picture').alt = comment.name; // Устанавливаем alt
+    commentSocial.querySelector('.social__text').textContent = comment.message; // Устанавливаем текст комментария
+
+    // Устанавливаем уникальный атрибут, чтобы не было конфликтов
+    commentSocial.setAttribute('data-comment-id', index);
+
+    // Добавляем комментарий во фрагмент
+    commentsFragment.appendChild(commentSocial);
+  });
+
+  // Вставляем все комментарии в список
+  commentList.appendChild(commentsFragment);
+
+  // Обновляем счетчики комментариев
+  showLikes.textContent = photoCurrent.comments.length;
+  totalLikes.textContent = photoCurrent.comments.length; // показывать общее количество комментариев
+  caption.textContent = photoCurrent.description;
+
+  // Показываем большую фотографию
+  pictureBig.classList.remove('hidden');
+  body.classList.add('modal-open');
+};
+
+document.addEventListener('keydown', (evt) => {
+  if (isEscapeKey(evt)) {
+    closePictureBig();
+  }
+});
+
+// Удалить обработчик после закрытия окна
+const handleDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    closePictureBig();
+    document.removeEventListener('keydown', handleDocumentKeydown);
+  }
+};
+
+document.addEventListener('keydown', handleDocumentKeydown);
+
+export {
+  openPicture
+};

js/util.js

@@ -11,4 +11,6 @@ function getRandomInRange(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export{randomInteger, getRandomInRange};
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
+export{randomInteger, getRandomInRange, isEscapeKey};