From 5e58131ace102a6b9adfce09d1f91b8a933f5ca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC?= Date: Mon, 25 Mar 2024 16:32:18 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=B4=D0=BE=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D0=BA=D0=B0=D1=87=D0=B0=D1=82=D1=8C=D1=81=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.js | 0 js/create-thumbnails/index.js | 14 ++- js/get-data/index.js | 105 ++++++++++++++++++ js/main.js | 12 +- js/slider-effects/effect-data.js | 12 +- js/upload-photo/index.js | 10 +- js/validation-form/index.js | 31 +++++- 7 files changed, 162 insertions(+), 22 deletions(-) rename js/{add-effects => add-effects-scale}/index.js (100%) create mode 100644 js/get-data/index.js diff --git a/js/add-effects/index.js b/js/add-effects-scale/index.js similarity index 100% rename from js/add-effects/index.js rename to js/add-effects-scale/index.js diff --git a/js/create-thumbnails/index.js b/js/create-thumbnails/index.js index f37f71a..c067632 100644 --- a/js/create-thumbnails/index.js +++ b/js/create-thumbnails/index.js @@ -1,13 +1,18 @@ -import {photoItems} from '../generate-data'; +// import {dataUserPhoto} from '../generate-data'; import {onOpenBigPicture } from '../show-large-picture'; const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture'); const pictureList = document.querySelector('.pictures'); -const createPhotoUsers = photoItems(); +// const createPhotoUsers = dataUserPhoto; -const addPhotoThumbnailsUsers = () => { +// const getPhoto = (photoUsers) => photoUsers; + +// console.log(getPhoto(photoUsers)); +let createPhotoUsers = ''; +const addPhotoThumbnailsUsers = (photoUsers) => { const listFragmentPhoto = document.createDocumentFragment(); - createPhotoUsers.forEach((element) => { + createPhotoUsers = photoUsers; + photoUsers.forEach((element) => { const pictureItem = pictureTemplate.cloneNode(true); const pictureImage = pictureItem.querySelector('.picture__img'); pictureImage.dataset.id = element.id; @@ -17,6 +22,7 @@ const addPhotoThumbnailsUsers = () => { pictureItem.querySelector('.picture__comments').textContent = element.comments.length; listFragmentPhoto.appendChild(pictureItem); }); + return pictureList.appendChild(listFragmentPhoto); }; diff --git a/js/get-data/index.js b/js/get-data/index.js new file mode 100644 index 0000000..39c6355 --- /dev/null +++ b/js/get-data/index.js @@ -0,0 +1,105 @@ +import {onCloseChangePhotoEsc} from '../upload-photo'; + +const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram'; +const Route = { + GET_DATA: '/data', + SEND_DATA: '/', +}; + +const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error'); +const sendErrorTemplate = document.querySelector('#error').content.querySelector('.error'); +const sendFormErrorTemplate = document.querySelector('#success').content.querySelector('.success'); +const SHOW_ERROR_TIME = 5000; + +const sendSuccessClose = () => { + const successMessage = document.querySelector('.success'); + successMessage.remove(); + document.removeEventListener('click', clickOutModalSuccess); +}; + +const sendErrorMessageClose = () => { + const errorMessage = document.querySelector('.error'); + errorMessage.remove(); + document.removeEventListener('click', clickOutModalError); + document.addEventListener('keydown', onCloseChangePhotoEsc); + document.removeEventListener('keydown', sendErrorMessageCloseEsc); +}; + +function clickOutModalSuccess (evt) { + if(evt.target.closest('.success__inner')){ + return; + } + sendSuccessClose(); +} + +function clickOutModalError (evt) { + if(evt.target.closest('.error__inner')){ + return; + } + sendErrorMessageClose(); +} + +function sendErrorMessageCloseEsc (evt) { + if (evt.key === 'Escape') { + sendErrorMessageClose(); + } +} + +function sendSuccessMessageCloseEsc (evt) { + if (evt.key === 'Escape') { + sendSuccessClose(); + } +} + +const sendErrorMessage = () => { + const errorFragmentSend = document.createDocumentFragment(); + const errorItemSend = sendErrorTemplate.cloneNode(true); + const sendButttonClose = errorItemSend.querySelector('.error__button'); + sendButttonClose.addEventListener('click', sendErrorMessageClose); + errorFragmentSend.append(errorItemSend); + document.body.append(errorFragmentSend); + document.addEventListener('keydown', sendErrorMessageCloseEsc); + document.addEventListener('click', clickOutModalError); + document.removeEventListener('keydown', onCloseChangePhotoEsc); + +}; + +const showErrorGetData = () => { + const errorFragment = document.createDocumentFragment(); + const errorItem = dataErrorTemplate.cloneNode(true); + errorFragment.append(errorItem); + document.body.append(errorFragment); + const dataError = document.querySelector('.data-error'); + + setTimeout(() => { + dataError.remove(); + }, SHOW_ERROR_TIME); +}; + +const sendSuccessMessage = () => { + const errorFragmentSend = document.createDocumentFragment(); + const errorItemSend = sendFormErrorTemplate.cloneNode(true); + const closeButton = errorItemSend.querySelector('.success__button'); + errorFragmentSend.append(errorItemSend); + document.body.append(errorFragmentSend); + closeButton.addEventListener('click', sendSuccessClose); + document.addEventListener('click', clickOutModalSuccess); + document.addEventListener('keydown', sendSuccessMessageCloseEsc); +}; + +const getData = () => fetch( + `${BASE_URL}${Route.GET_DATA}`) + .then((response) => { + if (!response.ok) { + throw new Error(); + } + return response.json(); + }) + .catch(() => { + throw new Error( + showErrorGetData() + ); + }); + + +export {getData, sendSuccessMessage, sendErrorMessage}; diff --git a/js/main.js b/js/main.js index 5cd9076..ffa81a5 100644 --- a/js/main.js +++ b/js/main.js @@ -1,11 +1,17 @@ -import {addPhotoThumbnailsUsers} from './create-thumbnails'; import {onOpenChangePhotoListener} from './upload-photo'; import {validateListener} from './validation-form'; -import {scaleListener} from './add-effects'; +import {scaleListener} from './add-effects-scale'; import {effectCheckedListener} from './slider-effects'; +import {getData} from './get-data'; +import {addPhotoThumbnailsUsers} from './create-thumbnails'; effectCheckedListener(); scaleListener(); validateListener(); onOpenChangePhotoListener(); -addPhotoThumbnailsUsers(); + + +getData() + .then((photos) => { + addPhotoThumbnailsUsers(photos); + }); diff --git a/js/slider-effects/effect-data.js b/js/slider-effects/effect-data.js index 537ffd9..055bb8f 100644 --- a/js/slider-effects/effect-data.js +++ b/js/slider-effects/effect-data.js @@ -10,7 +10,7 @@ export const EFFECTS = [ max: 1, step: 0.1, start: 1, - unit: '', + unit: '' }, { name: 'sepia', @@ -19,7 +19,7 @@ export const EFFECTS = [ max: 1, step: 0.1, start: 1, - unit: '', + unit: '' }, { name: 'marvin', @@ -28,7 +28,7 @@ export const EFFECTS = [ max: 100, step: 1, start: 100, - unit: '%', + unit: '%' }, { name: 'phobos', @@ -37,7 +37,7 @@ export const EFFECTS = [ max: 3, step: 0.1, start: 3, - unit: 'px', + unit: 'px' }, { name: 'heat', @@ -46,7 +46,7 @@ export const EFFECTS = [ max: 3, step: 0.1, start: 3, - unit: '', - }, + unit: '' + } ]; diff --git a/js/upload-photo/index.js b/js/upload-photo/index.js index 5a3e5c8..3ca0c14 100644 --- a/js/upload-photo/index.js +++ b/js/upload-photo/index.js @@ -1,19 +1,18 @@ import {toggleClass} from '../util'; import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables'; -import {inputTextHashtag, commentForm} from '../validation-form'; -const effectsPreview = document.querySelectorAll('.effects__preview'); +import {inputTextHashtag, commentForm, imgUploadForm} from '../validation-form'; +const effectsPreview = document.querySelectorAll('.effects__preview'); const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level'); const uploaPreviewImage = document.querySelector('.img-upload__preview img'); const onCloseChangePhoto = () => { toggleClass(imgUpoadOverlay, false); - imgUploadInput.value = ''; + imgUploadForm.reset(); uploaPreviewImage.style.removeProperty('filter'); uploaPreviewImage.style.removeProperty('transform'); document.removeEventListener('keydown', onCloseChangePhotoEsc); imgUploadancel.removeEventListener('click', onCloseChangePhoto); - }; function onCloseChangePhotoEsc(evt){ @@ -54,11 +53,10 @@ const onOpenChangePhoto = (evt) => { effectLevelSliderParrent.classList.add('hidden'); document.addEventListener('keydown', onCloseChangePhotoEsc); imgUploadancel.addEventListener('click', onCloseChangePhoto); - }; const onOpenChangePhotoListener = () => { imgUploadInput.addEventListener('change', onOpenChangePhoto); }; -export {onOpenChangePhotoListener}; +export {onOpenChangePhotoListener, onCloseChangePhoto, onCloseChangePhotoEsc}; diff --git a/js/validation-form/index.js b/js/validation-form/index.js index 740c1eb..1aa4208 100644 --- a/js/validation-form/index.js +++ b/js/validation-form/index.js @@ -1,4 +1,7 @@ -const imgUploadForm = document.querySelector('.img-upload__form'); +import {sendSuccessMessage, sendErrorMessage} from '../get-data'; +import {onCloseChangePhoto} from '../upload-photo'; + +export const imgUploadForm = document.querySelector('.img-upload__form'); export const inputTextHashtag = imgUploadForm.querySelector('.text__hashtags'); export const commentForm = imgUploadForm.querySelector('.text__description'); @@ -40,12 +43,34 @@ pristine.addValidator(inputTextHashtag, onHashtagLimitLength, 'Превышен pristine.addValidator(commentForm, onValidateCommentForm, 'Длина комментария больше 140 символов'); const validateListener = () => { + imgUploadForm.addEventListener('submit', (evt) => { + evt.preventDefault(); if(pristine.validate()) { - imgUploadForm.submit(); + fetch( + 'https://31.javascript.htmlacademy.pro/kekstagram', + { + method: 'POST', + body: new FormData(evt.target), + }) + .then((response) => { + if (response.ok) { + sendSuccessMessage(); + onCloseChangePhoto(); + }else{ + throw new Error (); + } + }) + .catch(() => { + throw new Error( + sendErrorMessage() + ); + } + ); } - evt.preventDefault(); }); }; export {validateListener}; + +