Merge pull request #7 from AleksandrEV/module8-task1

index.html

@@ -233,6 +233,19 @@ <h2 class="success__title">Изображение успешно загруже
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
       </section>
     </template>
+
+    <!-- Шаблон комментария под фотографией -->
+    <template id="user-comments">
+      <li class="social__comment">
+        <img
+          class= "social__picture"
+          src=""
+          alt=""
+          width="35" height="35">
+        <p class="social__text"></p>
+      </li>
+    </template>
+
     <script src="/js/functions.js"></script>
     <script src="/js/main.js" type="module"></script>
 </body>

js/fullScreenViewer.js

@@ -0,0 +1,73 @@
+import { photoGallery, photos } from './rendering-images';
+
+const pictures = photoGallery.querySelectorAll('.picture');
+const modalBigPicture = document.querySelector('.big-picture');
+const buttonBigPictureCancel = modalBigPicture.querySelector('.big-picture__cancel');
+
+const exampleComment = document.querySelector('#user-comments').content.querySelector('.social__comment');
+
+const onDocumentKeydown = (evt) => {
+  if (evt.key === 'Escape') {
+    evt.preventDefault();
+    modalBigPicture.classList.add('hidden');
+
+    document.querySelector('body').classList.remove('modal-open');
+
+    modalBigPicture.querySelector('.social__comment-count').classList.remove('hidden');
+    modalBigPicture.querySelector('.comments-loader').classList.remove('hidden');
+  }
+};
+
+for (let i = 0; i < pictures.length; i++) {
+  pictures[i].addEventListener('click', () => {
+    openModalBigPicture(pictures[i]);
+  });
+
+  buttonBigPictureCancel.addEventListener('click', () => {
+    closeModalBigPicture();
+  });
+}
+
+function openModalBigPicture(link) {
+  modalBigPicture.classList.remove('hidden');
+  document.addEventListener('keydown', onDocumentKeydown);
+
+  const elem = photos.find((el) => el.id === Number(link.dataset.id));
+
+  // Устанавливаем данные в модальное окно
+  modalBigPicture.querySelector('.big-picture__img img').src = elem.url;
+  modalBigPicture.querySelector('.likes-count').textContent = elem.likes;
+  modalBigPicture.querySelector('.social__caption').textContent = elem.description;
+  modalBigPicture.querySelector('.social__comment-shown-count').textContent = elem.comments.length;
+  modalBigPicture.querySelector('.social__comment-total-count').textContent = elem.comments.length;
+
+  // Очищаем старые комментарии
+  const commentsContainer = modalBigPicture.querySelector('.social__comments');
+  commentsContainer.innerHTML = '';
+
+  // Генерируем и добавляем новые комментарии
+  const commentsFragment = document.createDocumentFragment();
+  elem.comments.forEach(({ name, avatar, message }) => {
+    const comment = exampleComment.cloneNode(true);
+    comment.querySelector('.social__picture').alt = name;
+    comment.querySelector('.social__picture').src = avatar;
+    comment.querySelector('.social__text').textContent = message;
+    commentsFragment.appendChild(comment);
+  });
+  commentsContainer.appendChild(commentsFragment);
+
+  document.querySelector('body').classList.add('modal-open');
+}
+
+
+function closeModalBigPicture (){
+  modalBigPicture.classList.add('hidden');
+  document.removeEventListener('keydown', onDocumentKeydown);
+
+  document.querySelector('body').classList.remove('modal-open');
+
+  modalBigPicture.querySelector('.social__comment-count').classList.remove('hidden');
+  modalBigPicture.querySelector('.comments-loader').classList.remove('hidden');
+}
+
+export {openModalBigPicture};

js/main.js

@@ -1 +1,2 @@
-import {} from './rendering-images';
+import {} from './rendering-images.js';
+import {} from './fullScreenViewer';

js/rendering-images → js/rendering-images.js

@@ -1,19 +1,20 @@
-import { generatedPhotos } from './until';
+import { generatedPhotos } from './untils';
 
 const photoGallery = document.querySelector('.pictures');
 const exampleImage = document.querySelector('#picture').content.querySelector('.picture');
-const photo = generatedPhotos();
+const photos = generatedPhotos();
 const photoGenerated = document.createDocumentFragment();
 
-photo.forEach(({url, description, likes, comments}) => {
+photos.forEach(({id, url, description, likes, comments}) => {
   const element = exampleImage.cloneNode(true);
   element.querySelector('.picture__img').src = url;
   element.querySelector('.picture__img').alt = description;
   element.querySelector('.picture__likes').textContent = likes;
   element.querySelector('.picture__comments').textContent = comments.length;
+  element.dataset.id = id;
   photoGenerated.appendChild(element);
 });
 photoGallery.appendChild(photoGenerated);
 
 
-export { photoGallery };
+export { photoGallery, photos };