Merge pull request #13 from Aleksandr-Anokhin/master

js/big-picture.js

@@ -1,5 +1,6 @@
 import { COMMENTS_STEP } from './constants.js';
-import { isEscapeKey, isEnterKey } from './utils.js';
+import { removeEscControl, setEscControl } from './escape-control.js';
+import { isEnterKey } from './utils.js';
 
 const modal = document.querySelector('.big-picture');
 const userCloseWindow = modal.querySelector('.big-picture__cancel');
@@ -15,23 +16,15 @@ const loaderButton = modal.querySelector('.comments-loader');
 let localComments;
 let commentsCount;
 
-const onDocumentKeydown = (evt) => {
-  if (isEscapeKey(evt)) {
-    evt.preventDefault();
-    closeUserModal();
-  }
+const closeModal = () => {
+  modal.classList.add('hidden');
+  document.body.classList.remove('modal-open');
 };
 
 const showModal = () => {
   modal.classList.remove('hidden');
-  document.addEventListener('keydown', onDocumentKeydown);
   document.body.classList.add('modal-open');
-};
-
-const closeModal = () => {
-  modal.classList.add('hidden');
-  document.removeEventListener('keydown', onDocumentKeydown);
-  document.body.classList.remove('modal-open');
+  setEscControl(closeModal);
 };
 
 const renderComment = ({ avatar, message, name }) => {
@@ -94,11 +87,13 @@ modal.addEventListener('keydown', (evt) => {
 
 userCloseWindow.addEventListener('click', () => {
   closeUserModal();
+  removeEscControl();
 });
 
 userCloseWindow.addEventListener('keydown', (evt) => {
   if (isEnterKey(evt)) {
     closeUserModal();
+    removeEscControl();
   }
 });
 

js/constants.js

@@ -1,28 +1,3 @@
-export const PHOTO_COUNT = 25;
-
-export const MESSAGES = [
-  'Всё отлично!',
-  'В целом всё неплохо. Но не всё.',
-  'У моего кота получилась фотография лучше.',
-];
-
-export const DESCRIPTIONS = [
-  'Утро!',
-  'Котик',
-  'Солнышко',
-  'Красивое фото',
-  'Что-то новенькое',
-];
-
-export const NAMES = [
-  'Иван',
-  'Себастьян',
-  'Мария',
-  'Кристоф',
-  'Виктор',
-  'Юлия',
-];
-
 export const COMMENTS_STEP = 5;
 
 export const MAX_DESCRIPTION_LENGTH = 140;
@@ -40,21 +15,6 @@ export const MASSAGE_TIME = 5000;
 export const GET_URL = 'https://31.javascript.htmlacademy.pro/kekstagram/data';
 export const POST_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
 
-
-/*
-Для эффекта «Хром» — filter: grayscale(0..1) с шагом 0.1;
-Для эффекта «Сепия» — filter: sepia(0..1) с шагом 0.1;
-Для эффекта «Марвин» — filter: invert(0..100%) с шагом 1%;
-Для эффекта «Фобос» — filter: blur(0..3px) с шагом 0.1px;
-Для эффекта «Зной» — filter: brightness(1..3) с шагом 0.1;
-chrome
-sepia
-marvin
-phobos
-heat
-none
-*/
-
 export const EFFECTS = {
   NONE: 'none',
   CHROME: 'chrome',
@@ -121,3 +81,8 @@ export const FILTERS = {
   RANDOM: 'filter-random',
   DISCUSSED: 'filter-discussed'
 };
+
+export const SubmitButtonTexts = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...'
+};

js/effects.js

@@ -14,6 +14,14 @@ noUiSlider.create(sliderBlock, {
     max: 100,
   },
   start: 80,
+  format: {
+    to: function (value) {
+      return parseFloat(value);
+    },
+    from: function (value) {
+      return parseFloat(value);
+    },
+  },
   connect: 'lower'
 });
 

js/escape-control.js

@@ -0,0 +1,39 @@
+import { isEscapeKey } from './utils.js';
+
+const windows = [];
+let listener = null;
+
+const onDocumentEsc = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    const index = windows.length - 1;
+    if(windows[index].condition && !windows[index].condition()){
+      return;
+    }
+    windows[index].closeWindow();
+    windows.length = windows.length - 1;
+
+    if (!windows.length) {
+      document.removeEventListener('keydown', onDocumentEsc);
+      listener = null;
+    }
+  }
+};
+
+export const setEscControl = (closeWindow, condition = null) => {
+  windows.push({
+    closeWindow,
+    condition
+  });
+  if (!listener) {
+    listener = document.addEventListener('keydown', onDocumentEsc);
+  }
+};
+
+export const removeEscControl = () => {
+  windows.length = windows.length - 1;
+  if (!windows.length) {
+    document.removeEventListener('keydown', onDocumentEsc);
+    listener = null;
+  }
+};

js/form.js

@@ -1,18 +1,21 @@
 import { isValid, reset as resetValidation } from './validation.js';
 import { reset as resetScale } from './scale.js';
 import { reset as resetEffects } from './effects.js';
-import { POPUPS_TYPES } from './constants.js';
+import { POPUPS_TYPES, SubmitButtonTexts } from './constants.js';
 import { showPopup } from './popup.js';
 import { sendData } from './api.js';
+import { removeEscControl, setEscControl } from './escape-control.js';
 
-const uploadFile = document.querySelector('#upload-file');
-const modal = document.querySelector('.img-upload__overlay');
-const body = document.body;
-const closeButton = document.querySelector('#upload-cancel');
 const form = document.querySelector('.img-upload__form');
-const imgPreview = document.querySelector('.img-upload__preview img');
-const effectsElements = document.querySelectorAll('.effects__preview');
-const submitButton = document.querySelector('#upload-submit');
+const modal = form.querySelector('.img-upload__overlay');
+const uploadFile = form.querySelector('#upload-file');
+const body = document.body;
+const closeButton = modal.querySelector('#upload-cancel');
+const imgPreview = modal.querySelector('.img-upload__preview img');
+const effectsElements = modal.querySelectorAll('.effects__preview');
+const submitButton = modal.querySelector('#upload-submit');
+const hashtag = modal.querySelector('.text__hashtags');
+const description = modal.querySelector('.text__description');
 
 const setPreviewImage = () => {
   const file = uploadFile.files[0];
@@ -23,13 +26,6 @@ const setPreviewImage = () => {
   });
 };
 
-const showModal = () => {
-  modal.classList.remove('hidden');
-  body.classList.add('modal-open');
-
-  setPreviewImage();
-};
-
 const closeModal = () => {
   modal.classList.add('hidden');
   body.classList.remove('modal-open');
@@ -40,20 +36,26 @@ const closeModal = () => {
   resetEffects();
 };
 
+const canCloseModal = () => !(document.activeElement === hashtag || document.activeElement === description);
+
+const showModal = () => {
+  modal.classList.remove('hidden');
+  body.classList.add('modal-open');
+
+  setPreviewImage();
+  setEscControl(closeModal, canCloseModal);
+};
+
 uploadFile.addEventListener('change', () => {
   showModal();
 });
 
 closeButton.addEventListener('click', (evt) => {
   evt.preventDefault();
   closeModal();
+  removeEscControl();
 });
 
-const SubmitButtonTexts = {
-  IDLE: 'Опубликовать',
-  SENDING: 'Публикую...'
-};
-
 const disableSubmitButton = (isDisabled = true) => {
   submitButton.disabled = isDisabled;
   submitButton.textContent = isDisabled ? SubmitButtonTexts.SENDING : SubmitButtonTexts.IDLE;
@@ -64,13 +66,13 @@ form.addEventListener('submit', (evt) => {
   if (isValid()) {
     disableSubmitButton();
 
-
     sendData(new FormData(form))
       .then((response) => {
         if (!response.ok) {
           throw new Error();
         }
         closeModal();
+        removeEscControl();
         showPopup(POPUPS_TYPES.SUCCESS);
       })
       .catch(() => {
@@ -79,6 +81,5 @@ form.addEventListener('submit', (evt) => {
       .finally(() => {
         disableSubmitButton(false);
       });
-
   }
 });

js/main.js

@@ -1,12 +1,9 @@
-
 import { renderCards } from './thumbnail.js';
-
 import './form.js';
 import { showErrorMessage } from './utils.js';
 import { getData } from './api.js';
 import { initFilter } from './filter.js';
 
-
 getData()
   .then((data) => {
     renderCards(data);

js/popup.js

@@ -1,4 +1,5 @@
 import { POPUPS_TYPES } from './constants.js';
+import { removeEscControl, setEscControl } from './escape-control.js';
 
 const successTemplate = document.querySelector('#success').content.querySelector('.success');
 const errorTemplate = document.querySelector('#error').content.querySelector('.error');
@@ -12,9 +13,15 @@ const templates = {
 export const showPopup = (type) => {
   const newPopup = templates[type].cloneNode(true);
   body.append(newPopup);
+
+  setEscControl(()=>{
+    newPopup.remove();
+  });
+
   newPopup.addEventListener('click', ({ target }) => {
     if (target.classList.contains(type) || target.classList.contains(`${type}__button`)) {
       newPopup.remove();
+      removeEscControl();
     }
   });
 };

js/thumbnail.js

@@ -5,7 +5,6 @@ const cardTemplate = document.querySelector('#picture').content.querySelector('.
 
 let localData;
 
-
 const clear = () => {
   document.querySelectorAll('.picture').forEach((item) => item.remove());
 };
@@ -16,7 +15,9 @@ export const renderCards = (photos) => {
   const fragment = document.createDocumentFragment();
   photos.forEach((photo) => {
     const thumbnail = cardTemplate.cloneNode(true);
-    thumbnail.querySelector('.picture__img').src = photo.url;
+    const image = thumbnail.querySelector('.picture__img');
+    image.src = photo.url;
+    image.alt = photo.description;
     thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
     thumbnail.querySelector('.picture__likes').textContent = photo.likes;
     thumbnail.dataset.id = photo.id;