diff --git a/9/js/data-error.js b/9/js/data-error.js index 477f30f..d40dac4 100644 --- a/9/js/data-error.js +++ b/9/js/data-error.js @@ -1,15 +1,15 @@ const ALERT_SHOW_TIME = 5000; const showAlert = (message) => { - const alertContainer = document.createElement('div'); - alertContainer.style.zIndex = '100'; - alertContainer.style.position = 'absolute'; - alertContainer.style.left = '0'; - alertContainer.style.top = '0'; - alertContainer.style.right = '0'; - alertContainer.style.padding = '10px 3px'; - alertContainer.style.fontSize = '30px'; - alertContainer.style.textAlign = 'center'; - alertContainer.style.backgroundColor = 'red'; + const alertContainer = document.createElement("div"); + alertContainer.style.zIndex = "100"; + alertContainer.style.position = "absolute"; + alertContainer.style.left = "0"; + alertContainer.style.top = "0"; + alertContainer.style.right = "0"; + alertContainer.style.padding = "10px 3px"; + alertContainer.style.fontSize = "30px"; + alertContainer.style.textAlign = "center"; + alertContainer.style.backgroundColor = "red"; alertContainer.textContent = message; diff --git a/9/js/form-filling.js b/9/js/form-filling.js index 4667714..eb21ce5 100644 --- a/9/js/form-filling.js +++ b/9/js/form-filling.js @@ -1,6 +1,5 @@ import {isEscapeKey} from"./util.js"; import {sendData} from "./interact-with-data.js"; -import {showAlert} from "./data-error.js"; const imgInput = document.querySelector(".img-upload__input"); const body = document.body; const imgOverlay = document.querySelector(".img-upload__overlay"); @@ -13,24 +12,33 @@ const pristine = new Pristine(postForm, { }); const regexp = /^#[^\s#]+$/i; -imgInput.addEventListener("change", (evt) => { - evt.preventDefault(); - imgOverlay.classList.remove("hidden"); - body.classList.add("modal-open"); - pristine.validate(); - closeFormClick(); - // eslint-disable-next-line no-shadow +const sendDataFromForm = () => { postForm.addEventListener("submit",(evt) => { evt.preventDefault(); formButton.disabled = true; if(pristine.validate()){ - const formData = new FormData(evt.target); - sendData(showAlert,formData,openSuccess)(); + sendData( + openError, + new FormData(evt.target), + () => { + openSuccess(); + postForm.reset(); + })(); }else { openError(); } formButton.disabled = false; }); +}; + + +imgInput.addEventListener("change", (evt) => { + evt.preventDefault(); + imgOverlay.classList.remove("hidden"); + body.classList.add("modal-open"); + pristine.validate(); + closeFormClick(); + formButton.disabled = false; }); function validateHashtags (value) { @@ -94,6 +102,7 @@ function openSuccess (){ document.body.append(successElement); hastags.value = ""; postText.value = ""; + imgInput.value = ""; successButton.addEventListener("click", closeSuccess); document.addEventListener("keydown", closeSuccessEscape); @@ -162,17 +171,20 @@ function closeForm(){ imgOverlay.classList.add("hidden"); body.classList.remove("modal-open"); postForm.reset(); - document.removeEventListener(closeFormClick); + closeImg.removeEventListener("click", closeForm); + document.removeEventListener("keydown", closeFormEscape); } function closeFormClick (){ closeImg.addEventListener("click",closeForm); - document.addEventListener("keydown", (evt) => { - if (isEscapeKey(evt)) { - evt.preventDefault(); - closeForm(); - } - }); + document.addEventListener("keydown", closeFormEscape); } +function closeFormEscape(evt) { + if (isEscapeKey(evt)) { + evt.preventDefault(); + closeForm(); + } +} +export {sendDataFromForm}; diff --git a/9/js/interact-with-data.js b/9/js/interact-with-data.js index 8ed45f4..f55e4dc 100644 --- a/9/js/interact-with-data.js +++ b/9/js/interact-with-data.js @@ -1,3 +1,5 @@ +import {renderPosts} from"./posts-rendering.js"; +import {showAlert} from "./data-error.js"; const getData = (onSuccess, onError) => () => fetch( "https://29.javascript.htmlacademy.pro/kekstagram/data", @@ -33,9 +35,9 @@ const sendData = (onError,body,onSuccess) => () => if (!response.ok) { throw new Error("Не удалось отправить форму. Попробуйте ещё раз"); } - onSuccess(); + return onSuccess(); }) - .catch(() => { - onError("Не удалось отправить форму. Попробуйте ещё раз"); - }); -export{getData,sendData}; + .catch(onError); + +const getPostsFromServer = getData(renderPosts, showAlert); +export{getPostsFromServer,sendData}; diff --git a/9/js/main.js b/9/js/main.js index dfc8f36..cac9ef0 100644 --- a/9/js/main.js +++ b/9/js/main.js @@ -1,10 +1,6 @@ -import {renderPosts} from"./posts-rendering.js"; -import {showAlert} from "./data-error.js"; -import "./form-filling.js"; import {loadPhoto} from "./photo-load.js"; -import {getData} from "./interact-with-data.js"; +import {getPostsFromServer} from "./interact-with-data.js"; +import {sendDataFromForm} from "./form-filling.js"; loadPhoto(); -getData(renderPosts, showAlert)(); - -//const sendData = postData(console.log, console.error); -//sendData(); +getPostsFromServer(); +sendDataFromForm();