Надо подкачаться

js/draw-fullsize-photo.js

@@ -1,4 +1,3 @@
-import {thumbnails} from './draw-thumbnails.js';
 import {isEscapeKey} from './util.js';
 
 const modal = document.querySelector('.big-picture');
@@ -13,67 +12,64 @@
 const moreComments = document.querySelector('.comments-loader');
 const commentListFragment = document.createDocumentFragment();
 
-
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
-    closeFullsizePhoto();
+    closeModal();
   }
 };
 
-function openFullsizePhoto() {
-  modal.classList.remove('hidden');
-  document.addEventListener('keydown', onDocumentKeydown);
-}
-
-function closeFullsizePhoto() {
-  modal.classList.add('hidden');
-}
-
-const showComments = (allComments) => {
-  for (let i = 0; i < allComments.length; i++) {
+const cutsComments = (comments, minCommentIndex, step) => function() {
+  if (step > comments.length) {
+    step = comments.length;
+    moreComments.classList.add('hidden');
+    shownComments.textContent = comments.length;
+  } else {
+    shownComments.textContent = step;
+    moreComments.classList.remove('hidden');
+  }
+  for (let i = minCommentIndex; i < step; i++) {
     const commentItemClone = commentItem.cloneNode(true);
-    commentItemClone.querySelector('.social__picture').src = allComments[i].avatar;
-    commentItemClone.querySelector('.social__picture').alt = allComments[i].name;
-    commentItemClone.querySelector('.social__text').textContent = allComments[i].message;
+    commentItemClone.querySelector('.social__picture').src = comments[i].avatar;
+    commentItemClone.querySelector('.social__picture').alt = comments[i].name;
+    commentItemClone.querySelector('.social__text').textContent = comments[i].message;
     commentListFragment.appendChild(commentItemClone);
   }
   commentsContainer.appendChild(commentListFragment);
+  minCommentIndex += 5;
+  step += 5;
 };
 
-
-function transferModalData(evt, photoLink) {
+let showComments;
+const transferModalData = (evt, thumbnails) => {
   modalImg.src = evt.target.src;
-  imgLikes.textContent = photoLink.querySelector('.picture__likes').textContent;
-  imgComments.textContent = photoLink.querySelector('.picture__comments').textContent;
-  shownComments.textContent = photoLink.querySelector('.picture__comments').textContent;
-  photoDescription.textContent = photoLink.querySelector('.picture__img').alt;
-  let minCommentIndex = 0;
-  let step = 5;
+  imgLikes.textContent = evt.target.parentElement.querySelector('.picture__likes').textContent;
+  imgComments.textContent = evt.target.parentElement.querySelector('.picture__comments').textContent;
+  shownComments.textContent = evt.target.parentElement.querySelector('.picture__comments').textContent;
+  photoDescription.textContent = evt.target.parentElement.querySelector('.picture__img').alt;
   thumbnails.forEach((thumbnail) => {
     if (evt.target.src.includes(thumbnail.url)) {
       commentsContainer.innerHTML = '';
-
-      showComments(thumbnail.comments.slice(minCommentIndex, step));
-      shownComments.textContent = step;
-      moreComments.addEventListener('click', () => {
-
-
-        showComments(thumbnail.comments.slice(minCommentIndex += 5, step += 5));
-        shownComments.textContent = step;
-        if (thumbnail.comments.length <= step) {
-          moreComments.classList.add('hidden');
-          shownComments.textContent = thumbnail.comments.length;
-        }
-
-      });
+      showComments = cutsComments(thumbnail.comments, 0, 5);
+      showComments();
+      moreComments.addEventListener('click', showComments);
     }
   });
+};
 
-}
+const openModal = (evt, thumbnails) => {
+  modal.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+  document.addEventListener('keydown', onDocumentKeydown);
+  transferModalData(evt, thumbnails);
+};
+const closeModal = () => {
+  modal.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentKeydown);
+  moreComments.removeEventListener('click', showComments);
+};
 
-closeButton.addEventListener('click', () => {
-  closeFullsizePhoto();
-});
+closeButton.addEventListener('click', closeModal);
 
-export {transferModalData, openFullsizePhoto};
+export {openModal};

js/draw-thumbnails.js

@@ -1,7 +1,5 @@
-import {createDataPosts} from './create-data-posts.js';
 const thumbnailsBlock = document.querySelector('.pictures');
 const thumbnailTemplate = document.querySelector('#picture').content.querySelector('.picture');
-const thumbnails = createDataPosts();
 const thumbnailsListFragment = document.createDocumentFragment();
 const displaysThumbnails = (thumbnailsList) => {
   thumbnailsList.forEach(({url, description, likes, comments}) => {
@@ -15,6 +13,6 @@ const displaysThumbnails = (thumbnailsList) => {
   thumbnailsBlock.appendChild(thumbnailsListFragment);
 };
 
-export {displaysThumbnails, thumbnails};
+export {displaysThumbnails};
 
 

js/form.js

@@ -14,6 +14,13 @@
 const sliderElement = document.querySelector('.effect-level__slider');
 const sliderEffectsList = document.querySelector('.effects__list');
 const sliderElementContainer = document.querySelector('.img-upload__effect-level');
+const successMessageTemplate = document.querySelector('#success').content;
+const successMessageClone = successMessageTemplate.cloneNode(true);
+const successMessage = document.createDocumentFragment();
+const errorMessageTemplate = document.querySelector('#error').content;
+const errorMessageClone = errorMessageTemplate.cloneNode(true);
+const errorMessage = document.createDocumentFragment();
+
 
 const scallingPhoto = () => {
   const step = 25;
@@ -53,13 +60,15 @@
   document.body.classList.remove('modal-open');
 };
 
+
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
     closePhotoEditForm();
   }
 };
 
+
 buttonCloseForm.addEventListener('click', closePhotoEditForm);
 
 buttonOpenForm.addEventListener('change', () => {
@@ -110,11 +119,79 @@
 
 const getSpaceError = () => ('Поставьте пробел между хэштегами!');
 
+const clearModalData = () => {
+  photoForm.style.transform = `scale(${1})`;
+  photoForm.style.filter = 'none';
+  photoScaleValue.value = `${100}%`;
+  sliderElement.classList.add('hidden');
+  sliderElementContainer.classList.add('hidden');
+  inputHashtagsText.value = '';
+  commentArea.value = '';
+  buttonOpenForm.value = '';
+};
 
-photoEditForm.addEventListener('submit', (evt) => {
-  evt.preventDefault();
-  pristine.validate();
-});
+const setUserFormSubmit = (onSuccess) => {
+  photoEditForm.addEventListener('submit', (evt) => {
+    evt.preventDefault();
+    const isValid = pristine.validate();
+    if (isValid) {
+      const formData = new FormData(evt.target);
+      fetch(
+        'https://32.javascript.htmlacademy.pro/kekstagram',
+        {
+          method: 'POST',
+          body: formData,
+        },
+      ).then((response) => {
+        if (response.ok) {
+          onSuccess();
+          clearModalData();
+          successMessage.appendChild(successMessageClone);
+          document.body.appendChild(successMessage);
+          const successModal = document.querySelector('.success');
+          const successButton = document.querySelector('.success__button');
+          // const successInner = document.querySelector('.success__inner');
+          successButton.addEventListener('click', () => {
+            successModal.classList.add('hidden');
+          });
+          document.addEventListener('keydown', (evt) => {
+            if (isEscapeKey(evt)) {
+              successModal.classList.add('hidden');
+            }
+          });
+          document.addEventListener('click', (evt) => {
+            if (evt.target.className !== 'success__inner') {
+              successModal.classList.add('hidden');
+            }
+          });
+          successModal.classList.remove('hidden');
+        }
+      })
+        .catch(() => {
+          errorMessage.appendChild(errorMessageClone);
+          document.body.appendChild(errorMessage);
+          const errorModal = document.querySelector('.error');
+          const errorButton = document.querySelector('.error__button');
+          errorButton.addEventListener('click', () => {
+            errorModal.classList.add('hidden');
+          });
+          document.addEventListener('keydown', (evt) => {
+            if (isEscapeKey(evt)) {
+              errorModal.classList.add('hidden');
+            }
+          });
+          document.addEventListener('click', (evt) => {
+            if (evt.target.className !== 'error__inner') {
+              errorModal.classList.add('hidden');
+            }
+          });
+          errorModal.classList.remove('hidden');
+        });
+    }
+  });
+};
+
+buttonCloseForm.addEventListener('click', clearModalData);
 
 const compareHastags = (value) => {
   let flag = true;
@@ -282,6 +359,4 @@
   }
 });
 
-export {validateForm, blockEscapeAction, scallingPhoto};
-
-
+export {validateForm, blockEscapeAction, scallingPhoto, closePhotoEditForm, setUserFormSubmit};