Merge pull request #13 from IvanShapkov/module12-task2

Author: keksobot

js/api.js

@@ -1,21 +1,30 @@
-//import { showErrorMessage } from './modal-form/validation';
+// Базовый URL
 
 const BASE_URL = 'https://31.javascript.htmlacademy.pro/';
+
+// Пути для запросов
+
 const Route = {
-  GET_DATA: 'kekstagram/data',
-  SEND_DATA: 'kekstagram',
+  GET_DATA: 'kekstagram/data/',
+  SEND_DATA: 'kekstagram/',
 };
 
+// Методы запросов
+
 const Method = {
   GET: 'GET',
   POST: 'POST',
 };
 
+// Тексты ошибок в заивимости от типа запроса
+
 const ErrorText = {
   [Method.GET]: 'Не удалось загрузить данные. Попробуйте еще раз.',
   [Method.POST]: 'Не удалось отправить данные. Попробуйте еще раз',
 };
 
+// Функция для выполнения метода запроса
+
 const load = (route, method = Method.GET, body = null) =>
   fetch(`${BASE_URL}${route}`, {method, body})
     .then((response) => {
@@ -24,13 +33,16 @@ const load = (route, method = Method.GET, body = null) =>
       }
       return response.json();
     })
-    .catch(() => {
-      throw new Error(ErrorText[method]);
-      //showErrorMessage(error.message);
+    .catch((error) => {
+      throw new Error(`${ErrorText[method]} ${error.message}`);
     });
 
+// Функция для получения данных
+
 const getData = () => load(Route.GET_DATA);
 
+// Функция для отправки данных
+
 const sendData = (body) => load(Route.SEND_DATA, Method.POST, body);
 
 export {getData, sendData};

js/data.js

@@ -1,24 +1,23 @@
 import { renderBigPicture } from './pictures/big-pictures.js';
 import { renderFilters } from './pictures/sort-pictures.js';
-import { showErrorMessage } from './modal-form/validation.js';
+import { showDataError } from './utils/dom.js';
 import { getData } from './api.js';
 import './modal-form/upload-picture.js';
 import './modal-form/slider-effects.js';
 import './modal-form/upload-form.js';
 import './modal-form/scale-control.js';
 import './modal-form/validation.js';
 
-
-// Полчение изображений с сервера
+// Получение изображений с сервера
 
 const loadDataFromServer = () => {
   getData()
     .then((photos) => {
       renderFilters(photos);
       renderBigPicture(photos);
     })
-    .catch((error) => {
-      showErrorMessage(error.message);
+    .catch(() => {
+      showDataError();
     });
 };
 

js/main.js

@@ -3,7 +3,6 @@
 const MAX_SCALE = 100;
 const MIN_SCALE = 25;
 const SCALE_STEP = 25;
-let currentValue = MAX_SCALE;
 
 // Элементы управления масштабом
 
@@ -12,45 +11,45 @@ const decreaseButton = document.querySelector('.scale__control--smaller');
 const increaseButton = document.querySelector('.scale__control--bigger');
 const uploadImage = document.querySelector('.img-upload__preview img');
 
+// Текущее значение масштаба
+
+let currentValue = MAX_SCALE;
+
 // Обновление значения масштаба
 
-const changeScale = () => {
+const updateScale = () => {
   scaleValue.value = `${currentValue}%`;
   uploadImage.style.transform = `scale(${currentValue / 100})`;
 
   increaseButton.disabled = currentValue >= MAX_SCALE;
   decreaseButton.disabled = currentValue <= MIN_SCALE;
 };
 
-// Сброс масштаба
-
-const resetScale = () => {
-  currentValue = MAX_SCALE;
-  scaleValue.value = `${currentValue}%`;
-  uploadImage.style.transform = 'scale(1.00)';
-  increaseButton.disabled = false;
-  decreaseButton.disabled = false;
-  changeScale();
-};
-
-// Кнопка Увеличить
+// Увеличение масштаба
 
 const onIncreaseButtonClick = () => {
   if (currentValue < MAX_SCALE) {
     currentValue += SCALE_STEP;
-    changeScale();
+    updateScale();
   }
 };
 
-// Кнопка Уменьшить
+// Уменьшение масштаба
 
 const onDecreaseButtonClick = () => {
   if (currentValue > MIN_SCALE) {
     currentValue -= SCALE_STEP;
-    changeScale();
+    updateScale();
   }
 };
 
+// Сброс масштаба
+
+const resetScale = () => {
+  currentValue = MAX_SCALE;
+  updateScale();
+};
+
 // Добавляем обработчики для кнопок
 
 increaseButton.addEventListener('click', onIncreaseButtonClick);

js/modal-form/scale-control.js

@@ -1,13 +1,6 @@
-const uploadForm = document.querySelector('.img-upload__form');
-const uploadImage = uploadForm.querySelector('.img-upload__preview img');
-const effectLevelField = uploadForm.querySelector('.img-upload__effect-level');
-const effectLevelValue = effectLevelField.querySelector('.effect-level__value');
-const effectSlider = effectLevelField.querySelector('.effect-level__slider');
-
 // Фильтр по умолчанию
 
 const DEFAULT_EFFECT = 'none';
-let currentEffect = DEFAULT_EFFECT;
 
 // массив Фильтров
 
@@ -20,6 +13,18 @@ const effects = {
   heat: { filter: 'brightness', min: 1, max: 3, step: 0.1, unit: '' }
 };
 
+// Элементы управления слайдером
+
+const uploadForm = document.querySelector('.img-upload__form');
+const uploadImage = uploadForm.querySelector('.img-upload__preview img');
+const effectLevelField = uploadForm.querySelector('.img-upload__effect-level');
+const effectLevelValue = effectLevelField.querySelector('.effect-level__value');
+const effectSlider = effectLevelField.querySelector('.effect-level__slider');
+
+// Текущее значение эффекта
+
+let currentEffect = DEFAULT_EFFECT;
+
 // Создаем слайдер
 
 noUiSlider.create(effectSlider, {
@@ -42,11 +47,9 @@ const slider = effectSlider.noUiSlider;
 
 const applyEffect = (effect, value) => {
   const filter = effects[effect];
-
   uploadImage.style.filter = `${filter.filter}(${value}${filter.unit})`;
 };
 
-
 // Обновляем слайдер и применяем эффект
 
 const updateEffect = (effect) => {
@@ -68,7 +71,7 @@ const updateEffect = (effect) => {
   }
 };
 
-// Сбрасываем слайдер
+// Сбрасываем эффекты к значениям по умолчанию
 
 const resetEffects = () => {
   uploadImage.style.filter = 'none';
@@ -92,7 +95,7 @@ const resetEffects = () => {
 
 // Обработчик изменения радио-кнопок
 
-const onFormUpdate = (evt) => {
+const onUploadFormChange = (evt) => {
   if (evt.target.classList.contains('effects__radio')) {
     currentEffect = evt.target.value;
     updateEffect(currentEffect);
@@ -111,7 +114,7 @@ const onSliderUpdate = () => {
 // Инициализация
 
 effectLevelField.classList.add('hidden');
-uploadForm.addEventListener('change', onFormUpdate);
+uploadForm.addEventListener('change', onUploadFormChange);
 slider.on('update', onSliderUpdate);
 
 export { resetEffects };