Merge pull request #16 from Daniil888-m/module11-task1

js/api.js

@@ -0,0 +1,29 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/'
+};
+
+const Method = {
+  GET: 'GET',
+  POST: 'POST'
+};
+
+const load = (route, method = Method.GET, body = null) => fetch(`${BASE_URL}${route}`, { body, method })
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error();
+    }
+    return response.json();
+  }).catch(() => {
+    throw new Error('Ошибка при отправке/получении данных');
+  });
+
+const getData = () => load(Route.GET_DATA);
+
+const sendData = (body) => load(Route.SEND_DATA, Method.POST, body);
+
+export { sendData, getData };
+
+

js/big-picture-popup.js

@@ -1,22 +1,20 @@
 import { COMMENTS_STEP } from './consts.js';
-import { getPhotos } from './get-photos.js';
 import { hide, show } from './utils.js';
-const photos = getPhotos();
 const bigPhotoPopup = document.querySelector('.big-picture');
 const popupCancelElement = document.querySelector('.big-picture__cancel');
 const commentsLoadBtn = bigPhotoPopup.querySelector('.comments-loader');
 
 let currentComments = null;
 let currentShownCommentsCount = 0;
 
-function onEscapeKeydown(e) {
-  if (e.key === 'Escape') {
-    hidePhotoPopup(e);
+function onEscapeKeydown(evt) {
+  if (evt.key === 'Escape') {
+    hidePhotoPopup(evt);
   }
 }
 
-function onLoadBtnClick(e) {
-  e.preventDefault();
+function onLoadBtnClick(evt) {
+  evt.preventDefault();
   loadComments();
 }
 
@@ -58,8 +56,8 @@ function renderComments(comments) {
   currentComments = comments;
   loadComments();
 }
-function hidePhotoPopup(e) {
-  e.preventDefault();
+function hidePhotoPopup(evt) {
+  evt.preventDefault();
   clearComments();
   hide(bigPhotoPopup);
   document.removeEventListener('keydown', onEscapeKeydown);
@@ -72,7 +70,7 @@ function showPhotoPopup() {
 
   document.addEventListener('keydown', onEscapeKeydown);
 }
-function openBigPhotoPopup(photoId) {
+function openBigPhotoPopup(photos, photoId) {
   showPhotoPopup();
   const currentPhoto = photos.find((photo) => photo.id === Number(photoId));
   if (currentPhoto) {

js/consts.js

@@ -1,41 +1,4 @@
-const NAMES = [
-  'Кристина',
-  'Игорь',
-  'Зина',
-  'Петруша',
-  'Макс',
-  'Кирилл',
-  'Алекс',
-  'Коля',
-  'Ксения',
-  'Алина',
-];
-const DESCRIPTIONS = [
-  'Солнечный берег с белым песком и пальмами.',
-  'Ночной город с огнями и движением автомобилей.',
-  'Улыбающиеся дети, играющие в парке.',
-  'Закат над горами с яркими оранжевыми и красными оттенками.',
-  'Стейк на гриле с овощами на стороне.',
-  'Старый замок на вершине холма, окруженный туманом.',
-  'Лесная тропинка среди осенних деревьев с разноцветной листвой.',
-  'Пара, прогуливающаяся по мосту, держа друг друга за руки.',
-  'Домашний офис с приятной атмосферой и растениями.',
-  'Уютный кафе с чашкой кофе и книгой на столе.',
-  'Дети, строящие снеговика на зимнем дворе.',
-  'Спокойное озеро с отражением облаков на воде.',
-  'Уличный рынок с яркими фруктами и овощами.',
-  'Групповой снимок друзей на пляже.',
-  'Кошка, спящая на окне в солнечный день.',
-];
-const MESSAGES = [
-  'Всё отлично!',
-  'В целом всё неплохо.Но не всё.',
-  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра.В конце концов это просто непрофессионально.',
-  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
-  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
-  'Лица у людей на фотке перекошены, как будто их избивают.Как можно было поймать такой неудачный момент ? !',
-];
-const FILTERS = {
+const Filters = {
   chrome: {
     MIN_VALUE: 0,
     MAX_VALUE: 1,
@@ -77,7 +40,12 @@ const FILTERS = {
   },
 
 };
-const SCALE = {
+
+const AlertType = {
+  ERROR: 'error',
+  SUCCESS: 'success'
+};
+const Scale = {
   MAX_SCALE: 100,
   MIN_SCALE: 25,
   SCALE_STEP: 25,
@@ -86,6 +54,6 @@ const PHOTOS_COUNT = 25;
 const COMMENTS_STEP = 5;
 
 
-export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT, COMMENTS_STEP, FILTERS, SCALE };
+export { PHOTOS_COUNT, COMMENTS_STEP, Filters, Scale, AlertType };
 
 

js/filters.js

@@ -0,0 +1,100 @@
+import { Filters, Scale } from './consts';
+import { hide, show } from './utils';
+
+const uploadForm = document.querySelector('#upload-select-image');
+const uploadFormPreviewImg = uploadForm.querySelector('.img-upload__preview');
+const scaleControl = uploadForm.querySelector('.scale__control--value');
+const effectsSlider = uploadForm.querySelector('.effect-level__slider');
+const effectsValue = uploadForm.querySelector('.effect-level__value');
+const sliderContainer = uploadForm.querySelector('.img-upload__effect-level');
+
+function onSmallerBtnClick(evt) {
+  evt.preventDefault();
+  updateScale(false);
+  changeImgScale();
+}
+function onBiggerBtnClick(evt) {
+  evt.preventDefault();
+  updateScale(true);
+  changeImgScale();
+}
+function updateScale(isIncreasing) {
+  let scaleValue = parseInt(scaleControl.value, 10);
+
+  scaleValue = isIncreasing
+    ? scaleValue + Scale.SCALE_STEP
+    : scaleValue - Scale.SCALE_STEP;
+
+  scaleValue = Math.max(Scale.MIN_SCALE, Math.min(Scale.MAX_SCALE, scaleValue));
+
+  scaleControl.value = `${scaleValue}%`;
+}
+
+function changeImgScale() {
+  uploadFormPreviewImg.style.transform = `scale(${parseFloat(scaleControl.value) / 100})`;
+
+}
+uploadForm.querySelector('.scale__control--smaller').addEventListener('click', onSmallerBtnClick);
+uploadForm.querySelector('.scale__control--bigger').addEventListener('click', onBiggerBtnClick);
+
+noUiSlider.create(effectsSlider, {
+  range: {
+    max: 1,
+    min: 0,
+  },
+  step: 0.1,
+  start: 1,
+  format: {
+    to: function (value) {
+      if (!Number.isInteger(value)) {
+        return value.toFixed(1);
+      }
+      return value;
+    },
+    from: function (value) {
+      return value;
+    }
+  }
+});
+
+function updateEffectsSlider(effect) {
+  effectsSlider.noUiSlider.updateOptions({
+    range: {
+      max: Filters[effect].MAX_VALUE,
+      min: Filters[effect].MIN_VALUE,
+    },
+    step: Filters[effect].STEP,
+    start: Filters[effect].MAX_VALUE,
+  });
+}
+
+function hideEffectsContainer() {
+  hide(sliderContainer);
+  effectsValue.value = 0;
+  uploadFormPreviewImg.style.filter = 'none';
+}
+
+effectsSlider.noUiSlider.on('update', () => {
+  effectsValue.value = effectsSlider.noUiSlider.get();
+  const currentEffect = uploadForm.querySelector('input[name="effect"]:checked').value;
+  if (!(currentEffect === 'none')) {
+    uploadFormPreviewImg.style.filter = `${Filters[currentEffect].EFFECT}(${effectsValue.value + Filters[currentEffect].UNIT_OF_MEASUREMENT}`;
+  }
+});
+
+uploadForm.querySelector('.img-upload__effects').addEventListener('change', (evt) => {
+  const currentEffect = evt.target.closest('input[name="effect"]:checked').value;
+  if (currentEffect) {
+    if (currentEffect === 'none') {
+      hideEffectsContainer();
+    } else {
+      show(sliderContainer);
+      updateEffectsSlider(currentEffect);
+      uploadFormPreviewImg.style.filter = `${Filters[currentEffect].EFFECT}(${effectsValue.value + Filters[currentEffect].UNIT_OF_MEASUREMENT}`;
+    }
+  }
+});
+
+hideEffectsContainer();
+
+export { changeImgScale };

js/main.js

@@ -1,14 +1,24 @@
-import { renderPictures } from './render-pictures.js';
 import { openBigPhotoPopup } from './big-picture-popup.js';
-import './upload-form.js';
+import { getData } from './api.js';
+import { closeUploadOverlay, setUploadFormSubmit } from './upload-form.js';
+import { renderPictures, showDataError } from './render-pictures.js';
 
-renderPictures();
+let pictures;
 
-document.addEventListener('click', (e) => {
-  const currentPicture = e.target.closest('.picture');
+getData().then((photos) => {
+  pictures = photos;
+  renderPictures(pictures);
+})
+  .catch(showDataError);
+
+document.addEventListener('click', (evt) => {
+  const currentPicture = evt.target.closest('.picture');
 
   if (currentPicture) {
-    e.preventDefault();
-    openBigPhotoPopup(currentPicture.dataset.photoId);
+    evt.preventDefault();
+    openBigPhotoPopup(pictures, currentPicture.dataset.photoId);
   }
+
 });
+
+setUploadFormSubmit(closeUploadOverlay);

js/render-pictures.js

@@ -1,7 +1,6 @@
-import { getPhotos } from './get-photos.js';
-const photos = getPhotos();
+import { showElementFromTemplate } from './utils';
 
-function renderPictures() {
+const renderPictures = (photos) => {
   const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
   const picturesList = document.querySelector('.pictures');
 
@@ -20,6 +19,11 @@ function renderPictures() {
   });
 
   picturesList.append(picturesListFragment);
-}
+};
 
-export { renderPictures };
+const showDataError = () => {
+  const dataErrorElement = showElementFromTemplate('#data-error', 'Ошибка загрузки данных, обновите страницу');
+  setTimeout(() => dataErrorElement.remove(), 5000);
+
+};
+export { renderPictures, showDataError };