Merge pull request #11 from AnastasiiaXX/module11-task1

Author: keksobot

js/api.js

@@ -0,0 +1,25 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+
+const load = (route, method = Method.GET, body = null) => fetch(`${BASE_URL}${route}`, { method, body})
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`Ошибка ${response.status}`);
+    }
+    return response.json();
+  });
+
+const getData = () => load(Route.GET_DATA);
+
+const sendData = (formData) => load(Route.SEND_DATA, Method.POST, formData);
+
+export { getData, sendData };

js/data.js

@@ -14,7 +14,7 @@ const uploadedImage = form.querySelector('.img-upload__preview img');
 const effectRadios = form.querySelectorAll('input[name="effect"]');
 const inputValue = form.querySelector('.effect-level__value');
 
-export const initImageEffects = () => {
+const initImageEffects = () => {
   let selectedFilter = 'none';
   noUiSlider.create(slider, {
     range: {
@@ -58,3 +58,12 @@ export const initImageEffects = () => {
     });
   });
 };
+
+const resetImageEffects = () => {
+  const noneRadioBtn = form.querySelector('input[value="none"]');
+  noneRadioBtn.checked = true;
+  sliderContainer.classList.add('hidden');
+  uploadedImage.style.filter = '';
+};
+
+export { resetImageEffects, initImageEffects};

js/generate-data.js

@@ -5,7 +5,7 @@ const scaleControlValue = form.querySelector('.scale__control--value');
 const uploadedImage = form.querySelector('.img-upload__preview img');
 
 let currentScale = 100;
-export const initImageScale = () => {
+const initImageScale = () => {
   scaleSmallerBtn.addEventListener('click', () => {
     if (currentScale > 25) {
       currentScale -= 25;
@@ -22,3 +22,11 @@ export const initImageScale = () => {
     }
   });
 };
+
+const resetImageScale = () => {
+  currentScale = 100;
+  scaleControlValue.value = `${currentScale}%`;
+  uploadedImage.style.transform = 'scale(1)';
+};
+
+export { resetImageScale, initImageScale};

js/image-filters.js

@@ -1,7 +1,26 @@
 import { renderThumbnails } from './thumbnails.js';
 import { showFullPhoto } from './show-full-photo.js';
-import { initUploadForm } from './upload-form.js';
+import { initUploadForm, resetUploadForm } from './upload-form.js';
+import { getData } from './api';
+import { showDataError, showSuccessMessage, showErrorMessage } from './notifications.js';
+import { setUploadFormSubmit } from './upload-form.js';
 
-renderThumbnails();
-showFullPhoto();
 initUploadForm();
+getData()
+  .then((photos) => {
+    renderThumbnails(photos);
+    showFullPhoto(photos);
+  })
+  .catch((e)=> {
+    showDataError(e);
+  });
+
+setUploadFormSubmit({
+  onSuccess: () => {
+    resetUploadForm();
+    showSuccessMessage();
+  },
+  onError: () => {
+    showErrorMessage();
+  }
+});

js/image-scale.js

@@ -0,0 +1,49 @@
+import { isEscapeKey } from './helpers.js';
+
+const ERROR_SHOW_TIME = 5000;
+
+const dataErrorTemplate = document.querySelector('#data-error');
+const body = document.querySelector('body');
+const showDataError = () => {
+  const template = dataErrorTemplate.content.cloneNode(true);
+  const errorDiv = template.firstElementChild;
+  body.append(template);
+  setTimeout(() => {
+    errorDiv.remove();
+  }, ERROR_SHOW_TIME);
+};
+const showMessage = (templateId, buttonClass) => {
+  let handleEscape = null;
+  let handleOutsideClick = null;
+
+  const template = document.querySelector(templateId).content.cloneNode(true);
+  const messageDiv = template.firstElementChild;
+  const messageButton = messageDiv.querySelector(buttonClass);
+  body.append(template);
+
+  const closeMessage = () => {
+    messageDiv.remove();
+    document.removeEventListener('keydown', handleEscape);
+    messageDiv.removeEventListener('click', handleOutsideClick);
+  };
+
+  handleEscape = (evt) => {
+    if (isEscapeKey(evt)) {
+      closeMessage();
+    }
+  };
+
+  handleOutsideClick = (evt) => {
+    if (evt.target === messageDiv) {
+      closeMessage();
+    }
+  };
+  messageButton.addEventListener('click', closeMessage);
+  document.addEventListener('keydown', handleEscape);
+  messageDiv.addEventListener('click', handleOutsideClick);
+};
+
+const showSuccessMessage = () => showMessage('#success', '.success__button');
+const showErrorMessage = () => showMessage('#error', '.error__button');
+
+export { showDataError, showSuccessMessage, showErrorMessage };

js/main.js

@@ -1,4 +1,3 @@
-import { photos } from './generate-data';
 import { closeModal, openModal } from './modal.js';
 import { paginateComments } from './comments.js';
 
@@ -22,7 +21,7 @@ const fillPhotoData = (currentPhoto) => {
   comments.innerHTML = '';
 };
 
-export const showFullPhoto = () => {
+export const showFullPhoto = (photos) => {
   const commentsLoaderBtn = document.querySelector('.comments-loader');
   const shownCommentsCount = document.querySelector('.social__comment-shown-count');
   pictureContainer.addEventListener('click', (evt) => {

js/notifications.js

@@ -1,5 +1,4 @@
-import { photos } from './generate-data';
-export const renderThumbnails = () => {
+export const renderThumbnails = (photos) => {
   const photoTemplate = document.querySelector('#picture').content;
   const photoContainer = document.querySelector('.pictures');