Merge pull request #30 from 777aoksana/master

Author: keksobot

TechnicalSpecification.md

@@ -5,7 +5,7 @@
 
 Описание функциональности
 
-1. Загрузка нового изображения на сайт и заполнение информации о нём
++ 1. Загрузка нового изображения на сайт и заполнение информации о нём
 
 + 1.1. Загрузка нового изображения:
       выбор файла с изображением для загрузки;
@@ -27,7 +27,7 @@
     Элементу .img-upload__overlay возвращается класс hidden. У элемента body удаляется класс modal-open.
 
 
-2. Редактирование изображения и ограничения, накладываемые на поля
++ 2. Редактирование изображения и ограничения, накладываемые на поля
 
 + 2.1. Масштаб:
   При нажатии на кнопки .scale__control--smaller и .scale__control--bigger должно изменяться значение поля .scale__control--value;
@@ -94,37 +94,39 @@
  поля для ввода хэштегов и комментария очищаются;
  поле загрузки фотографии, стилизованное под букву «О» в логотипе, очищается.
 
-3.4. Если отправка данных прошла успешно, показывается соответствующее сообщение. Разметку сообщения, которая находится в блоке #success внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение должно удаляться со страницы после нажатия на кнопку .success__button, по нажатию на клавишу Esc и по клику на произвольную область экрана за пределами блока с сообщением.
++ 3.4. Если отправка данных прошла успешно, показывается соответствующее сообщение. Разметку сообщения, которая находится в блоке #success внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение должно удаляться со страницы после нажатия на кнопку .success__button, по нажатию на клавишу Esc и по клику на произвольную область экрана за пределами блока с сообщением.
 
-3.5. Если при отправке данных произошла ошибка запроса, нужно показать соответствующее сообщение. Разметку сообщения, которая находится в блоке #error внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение должно удаляться со страницы после нажатия на кнопку .error__button, по нажатию на клавишу Esc и по клику на произвольную область экрана за пределами блока с сообщением. В таком случае вся введённая пользователем информация сохраняется, чтобы у него была возможность отправить форму повторно.
++ 3.5. Если при отправке данных произошла ошибка запроса, нужно показать соответствующее сообщение. Разметку сообщения, которая находится в блоке #error внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение должно удаляться со страницы после нажатия на кнопку .error__button, по нажатию на клавишу Esc и по клику на произвольную область экрана за пределами блока с сообщением. В таком случае вся введённая пользователем информация сохраняется, чтобы у него была возможность отправить форму повторно.
 
 + 3.6. Нажатие на кнопку .img-upload__cancel приводит к закрытию формы и возвращению всех данных и контрола фильтра к исходному состоянию (описано в пункте 3.3). Поле загрузки фотографии, стилизованное под букву «О» в логотипе, очищается.
 
 4. Просмотр загруженных изображений
-4.1. Загрузка изображений от других пользователей производится сразу после открытия страницы с удалённого сервера: https://31.javascript.htmlacademy.pro/kekstagram/data.
++ 4.1. Загрузка изображений от других пользователей производится сразу после открытия страницы с удалённого сервера: https://31.javascript.htmlacademy.pro/kekstagram/data.
 
-4.2. Если при загрузке данных с сервера произошла ошибка запроса, нужно показать соответствующее сообщение. Разметку сообщения, которая находится в блоке #data-error внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение удаляется со страницы через 5 секунд.
++ 4.2. Если при загрузке данных с сервера произошла ошибка запроса, нужно показать соответствующее сообщение. Разметку сообщения, которая находится в блоке #data-error внутри шаблона template, нужно разместить перед закрывающим тегом </body>. Сообщение удаляется со страницы через 5 секунд.
 
-4.3. Все загруженные изображения показаны на главной странице в виде миниатюр. DOM-элемент миниатюры генерируется на основе шаблонного элемента picture, расположенного в элементе template на странице.
++ 4.3. Все загруженные изображения показаны на главной странице в виде миниатюр. DOM-элемент миниатюры генерируется на основе шаблонного элемента picture, расположенного в элементе template на странице.
 
-4.4. При нажатии на любую из миниатюр, показывается блок .big-picture, содержащий полноэкранное изображение с количеством лайков и комментариев. Элементу body задаётся класс modal-open. Данные, описывающие изображение, должны подставляться в соответствующие элементы в разметке.
++ 4.4. При нажатии на любую из миниатюр, показывается блок .big-picture, содержащий полноэкранное изображение с количеством лайков и комментариев. Элементу body задаётся класс modal-open. Данные, описывающие изображение, должны подставляться в соответствующие элементы в разметке.
 
-4.5. Выход из полноэкранного режима просмотра фотографии осуществляется либо нажатием на иконку крестика .big-picture__cancel в правом верхнем углу блока .big-picture, либо нажатием на клавишу Esc. У элемента body удаляется класс modal-open.
++ 4.5. Выход из полноэкранного режима просмотра фотографии осуществляется либо нажатием на иконку крестика .big-picture__cancel в правом верхнем углу блока .big-picture, либо нажатием на клавишу Esc. У элемента body удаляется класс modal-open.
 
-4.6. Все комментарии к изображению выводятся в блок .social__comments. Сразу после открытия изображения в полноэкранном режиме отображается не более 5 комментариев. Количество показанных комментариев и общее число комментариев отображается в блоке .social__comment-count. Пример разметки списка комментариев приведён в блоке .social__comments. Комментарий оформляется отдельным элементом списка li с классом social__comment. Аватарка автора комментария отображается в блоке .social__picture. Имя автора комментария отображается в атрибуте alt его аватарки. Текст комментария выводится в блоке .social__text.
++ 4.6. Все комментарии к изображению выводятся в блок .social__comments. Сразу после открытия изображения в полноэкранном режиме отображается не более 5 комментариев. Количество показанных комментариев и общее число комментариев отображается в блоке .social__comment-count. Пример разметки списка комментариев приведён в блоке .social__comments. Комментарий оформляется отдельным элементом списка li с классом social__comment. Аватарка автора комментария отображается в блоке .social__picture. Имя автора комментария отображается в атрибуте alt его аватарки. Текст комментария выводится в блоке .social__text.
 
-4.7. Отображение дополнительных комментариев происходит при нажатии на кнопку .comments-loader. При нажатии на кнопку отображается не более 5 новых комментариев. При изменении количества показанных комментариев число показанных комментариев в блоке .social__comment-count также изменяется.
++ 4.7. Отображение дополнительных комментариев происходит при нажатии на кнопку .comments-loader. При нажатии на кнопку отображается не более 5 новых комментариев. При изменении количества показанных комментариев число показанных комментариев в блоке .social__comment-count также изменяется.
 
-4.8. Если все комментарии показаны, кнопку .comments-loader следует скрыть, добавив класс hidden.
++ 4.8. Если все комментарии показаны, кнопку .comments-loader следует скрыть, добавив класс hidden.
 
 5. Фильтрация изображений от других пользователей
-5.1. Доступные фильтры:
+
++ 5.1. Доступные фильтры:
 «По умолчанию» — фотографии в изначальном порядке с сервера;
 «Случайные» — 10 случайных, не повторяющихся фотографий;
 «Обсуждаемые» — фотографии, отсортированные в порядке убывания количества комментариев.
-5.2. Блок, с помощью которого производится фильтрация фотографий, скрыт изначально и показывается только после получения от сервера данных об изображениях других пользователей.
 
-5.3. При переключении фильтров, отрисовка изображений, подходящих под новый фильтр, должна производиться не чаще, чем один раз 500 мс (устранение дребезга).
++ 5.2. Блок, с помощью которого производится фильтрация фотографий, скрыт изначально и показывается только после получения от сервера данных об изображениях других пользователей.
+
++ 5.3. При переключении фильтров, отрисовка изображений, подходящих под новый фильтр, должна производиться не чаще, чем один раз 500 мс (устранение дребезга).
 
 
   Дополнительные задания:

js/create-photos/comments-photo.js

@@ -1,11 +1,14 @@
 import {
   openModal
 } from '../rendering-big-photos/modal-window.js';
-import {
-  pictureTemplate,
-  picturesContainer
-} from '../create-photos/create-data.js';
 
+const pictureTemplate = document
+  .querySelector('#picture')
+  .content
+  .querySelector('.picture');
+
+const picturesContainer = document
+  .querySelector('.pictures');
 
 let localPictures;
 
@@ -15,21 +18,25 @@ const clearPictures = () => {
     .forEach((picture) => picture.remove());
 };
 
-export const renderPictures = (pictures) => {
+const renderPictures = (pictures) => {
   localPictures = [...pictures];
   clearPictures();
-  const documentFragment = document.createDocumentFragment();
+  const documentFragment = document
+    .createDocumentFragment();
 
   pictures.forEach(({ id, url, description, likes, comments }) => {
-    const pictureElement = pictureTemplate.cloneNode(true);
+    const pictureElement = pictureTemplate
+      .cloneNode(true);
 
     pictureElement.dataset.id = id;
 
-    const isImage = pictureElement.querySelector('.picture__img');
+    const isImage = pictureElement
+      .querySelector('.picture__img');
     isImage.src = url;
     isImage.alt = description;
 
-    const pictureElementInfo = pictureElement.querySelector('.picture__info');
+    const pictureElementInfo = pictureElement
+      .querySelector('.picture__info');
 
     pictureElementInfo
       .querySelector('.picture__likes')
@@ -48,13 +55,19 @@ export const renderPictures = (pictures) => {
 };
 
 const onPictureClick = (evt) => {
-  const card = evt.target.closest('.picture');
+  const card = evt.target
+    .closest('.picture');
   if (card) {
     const id = Number(card.dataset.id);
-    const photo = localPictures.find((item) => item.id === id);
+    const photo = localPictures
+      .find((item) => item.id === id);
     openModal(photo);
   }
 };
 
 picturesContainer
   .addEventListener('click', onPictureClick);
+
+export {
+  renderPictures
+};

js/create-photos/create-data.js

@@ -1,5 +1,3 @@
-const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
-
 const Routes = {
   GET_DATA: '/data',
   SEND_DATA: '/',
@@ -15,7 +13,12 @@ const ErrorTexts = {
   POST: 'Ошибка отправки данных. Попробуйте ещё раз',
 };
 
-const pageBody = document.querySelector('body');
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const ALERT_SHOW_TIME = 5000;
+
+const pageBody = document
+  .querySelector('body');
 
 const alertTemplate = document
   .querySelector('#data-error')
@@ -38,16 +41,14 @@ const templateError = document
 const errorElement = templateError
   .querySelector('.error');
 
-const ALERT_SHOW_TIME = 5000;
-
 export {
-  BASE_URL,
   Routes,
   Methods,
   ErrorTexts,
+  BASE_URL,
+  ALERT_SHOW_TIME,
   pageBody,
   alertTemplate,
   successElement,
-  errorElement,
-  ALERT_SHOW_TIME
+  errorElement
 };

js/create-photos/thumbnails.js

@@ -1,16 +1,15 @@
-import {
-  isEscapeKeydown
-} from '../utils.js';
 import {
   ALERT_SHOW_TIME,
   pageBody,
   alertTemplate,
   successElement,
   errorElement
 } from '../fetch/api-data.js';
+import {
+  registerWindow,
+  removeRegistrationWindow } from '../keydown-controller.js';
 
-
-export const MESSAGE_TYPES = {
+const MESSAGE_TYPES = {
   SUCCESS: 'success',
   ERROR: 'error'
 };
@@ -34,23 +33,20 @@ const showMessage = (type) => {
 
   const close = () => {
     message.remove();
-    document.removeEventListener('keydown', onEscape);
   };
 
-  function onEscape(evt) {
-    if (isEscapeKeydown(evt)) {
-      close();
-    }
-  }
-
-  message.addEventListener('click', ({target}) => {
+  message.addEventListener('click', ({ target }) => {
     if (target.classList.contains(type) || target.classList.contains(`${type}__button`)) {
       close();
+      removeRegistrationWindow();
     }
   });
-
-  document.addEventListener('keydown', onEscape);
+  registerWindow(close);
   pageBody.appendChild(message);
 };
 
-export { showAlert, showMessage };
+export {
+  MESSAGE_TYPES,
+  showAlert,
+  showMessage
+};

js/fetch/api-data.js

@@ -1,11 +1,10 @@
 import {
-  BASE_URL,
   Routes,
   Methods,
-  ErrorTexts
+  ErrorTexts,
+  BASE_URL
 } from '../fetch/api-data.js';
 
-
 const processPromise = (route, method = Methods.GET, errorText = null, body = null) =>
   fetch(`${BASE_URL}${route}`, { method, body })
     .then((response) => {