Merge pull request #11 from TatianaSenatorova/module11-task1

js/api.js

@@ -0,0 +1,35 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+
+const ErrorIdTemplates = {
+  LOAD_ERROR: 'data-error',
+  SEND_ERROR: 'error',
+  SUCCESS: 'success',
+};
+
+const load = (route, method = Method.GET, body = null) =>
+  fetch(`${BASE_URL}${route}`, { method, body })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    })
+    .catch((err) => {
+      throw new Error(err);
+    });
+
+const getData = () => load(Route.GET_DATA);
+
+const sendData = (body) => load(Route.SEND_DATA, Method.POST, body);
+
+export { getData, sendData, ErrorIdTemplates };

js/effects-photo.js

@@ -11,6 +11,17 @@ const sliderElement = imgUploadForm.querySelector('.effect-level__slider');
 
 const SCALE_STEP = 25;
 
+const ScaleMaxMin = {
+  SCALE_MIN: '25%',
+  SCALE_MAX: '100%',
+};
+
+const SliderDefaultValues = {
+  SLIDER_MIN: 0,
+  SLIDER_MAX: 100,
+  SLIDER_START: 100
+};
+
 const FILTER_EFFECTS = {
   chrome: {
     filter: 'grayscale',
@@ -44,35 +55,40 @@ const FILTER_EFFECTS = {
   },
 };
 
+const ScaleAction = {
+  INCREASE: '+',
+  DECREASE: '-'
+};
+
 sliderElement.classList.add('hidden');
 
 const changePhotoSize = (action, scaleData) => {
   const newScaleValue =
-    action === '+' ? scaleData + SCALE_STEP : scaleData - SCALE_STEP;
+  action === ScaleAction.INCREASE ? scaleData + SCALE_STEP : scaleData - SCALE_STEP ;
   imgUploadPreview.style.transform = `scale(${newScaleValue * 0.01})`;
   scaleValue.setAttribute('value', `${newScaleValue}%`);
 };
 
 scale.addEventListener('click', (evt) => {
   if (
     evt.target.classList.contains('scale__control--smaller') &&
-    scaleValue.value !== '25%'
+    scaleValue.value !== ScaleMaxMin.SCALE_MIN
   ) {
-    changePhotoSize('-', parseInt(scaleValue.value, 10));
+    changePhotoSize(ScaleAction.DECREASE, parseInt(scaleValue.value, 10));
   } else if (
     evt.target.classList.contains('scale__control--bigger') &&
-    scaleValue.value !== '100%'
+    scaleValue.value !== ScaleMaxMin.SCALE_MAX
   ) {
-    changePhotoSize('+', parseInt(scaleValue.value, 10));
+    changePhotoSize(ScaleAction.INCREASE, parseInt(scaleValue.value, 10));
   }
 });
 
 noUiSlider.create(sliderElement, {
   range: {
-    min: 0,
-    max: 100,
+    min: SliderDefaultValues.SLIDER_MIN,
+    max: SliderDefaultValues.SLIDER_MAX,
   },
-  start: 100,
+  start: SliderDefaultValues.SLIDER_START
 });
 
 const updateSliderData = (effect) => {

js/main.js

@@ -1,8 +1,19 @@
-import { listPhotos } from './create-photos.js';
-import {renderThumbnails} from './render-photos.js';
-import './open-full-photo.js';
+import { renderThumbnails } from './render-photos.js';
+import { getBigPicture } from './open-full-photo.js';
+import { renderFullPhoto } from './render-full-photo.js';
 import './validate-form.js';
 import './effects-photo.js';
+import { getData, ErrorIdTemplates } from './api.js';
+import { showRequestInfoTimeout } from './utils.js';
 
-renderThumbnails(listPhotos);
+const PHOTO_ITEMS_NUMBER = 25;
 
+getData()
+  .then((photos) => {
+    const newPhotos = photos.slice(0, PHOTO_ITEMS_NUMBER);
+    renderThumbnails(newPhotos);
+    getBigPicture((chosenPhotoID) => renderFullPhoto(chosenPhotoID, newPhotos));
+  })
+  .catch(() => {
+    showRequestInfoTimeout(ErrorIdTemplates.LOAD_ERROR);
+  });

js/open-form.js

@@ -1,6 +1,7 @@
 import { body } from './open-full-photo.js';
 import { isEscapeKey } from './utils.js';
 import './validate-form.js';
+import { pristine } from './validate-form.js';
 
 const imgUploadForm = document.querySelector('.img-upload__form');
 const imgUploadInput = imgUploadForm.querySelector('.img-upload__input');
@@ -18,9 +19,7 @@ const onDocumentKeydown = (evt) => {
 };
 
 const clearForm = () => {
-  imgUploadInput.value = '';
-  imgHashtags.value = '';
-  imgDescription.value = '';
+  imgUploadForm.reset();
 };
 
 function openUploadForm() {
@@ -35,9 +34,9 @@ function closeUploadForm() {
   body.classList.remove('modal-open');
   document.removeEventListener('keydown', onDocumentKeydown);
   imgUploadClose.removeEventListener('click', closeUploadForm);
+  pristine.reset();
   clearForm();
 }
 
 imgUploadInput.addEventListener('change', openUploadForm);
-
-export { imgUploadForm, imgHashtags };
+export { imgUploadForm, imgHashtags, closeUploadForm };

js/open-full-photo.js

@@ -1,13 +1,11 @@
 import { picturesContainer } from './render-photos.js';
 import {isEscapeKey} from './utils.js';
-import {renderFullPhoto, clearComments} from './render-full-photo.js';
-import { listPhotos } from './create-photos.js';
+import {clearComments} from './render-full-photo.js';
 
 const bigPicture = document.querySelector('.big-picture');
 const bigPictureClose = bigPicture.querySelector('.big-picture__cancel');
 const body = document.body;
 
-
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
@@ -28,16 +26,19 @@ function closeFullPhoto() {
   clearComments();
 }
 
-picturesContainer.addEventListener('click', (evt) => {
-  const chosenPhoto = evt.target.closest('.picture');
-  if (chosenPhoto) {
-    evt.preventDefault();
-    const chosenPhotoID = chosenPhoto.getAttribute('data-id');
-    renderFullPhoto(chosenPhotoID, listPhotos);
-    openFullPhoto();
+const getBigPicture = (cb) => {
+  picturesContainer.addEventListener('click', (evt) => {
+    const chosenPhoto = evt.target.closest('.picture');
+    if (chosenPhoto) {
+      evt.preventDefault();
+      const chosenPhotoID = chosenPhoto.getAttribute('data-id');
+      openFullPhoto();
+      (cb(chosenPhotoID));
+    }
   }
-});
+  );
+};
 
 bigPictureClose.addEventListener('click', closeFullPhoto);
 
-export { body };
+export { body, closeFullPhoto, getBigPicture };

js/render-full-photo.js

@@ -58,7 +58,7 @@ const getCommentsToRender = (comments) => {
 };
 
 const renderFullPhoto = (chosenPhotoID, listPhotos) => {
-  const dataForBigPhoto = listPhotos.find((item) => item.id === chosenPhotoID);
+  const dataForBigPhoto = listPhotos.find((item) => item.id === parseInt(chosenPhotoID, 10));
   bigPictureImg.src = dataForBigPhoto.url;
   likesCount.textContent = dataForBigPhoto.likes;
   totalComments.textContent = dataForBigPhoto.comments.length;

js/utils.js

@@ -1,23 +1,25 @@
+const ALERT_SHOW_TIME = 5000;
+
 const getRandomInteger = (a, b) => {
   const lower = Math.ceil(Math.min(a, b));
   const upper = Math.floor(Math.max(a, b));
   const result = Math.random() * (upper - lower + 1) + lower;
   return Math.floor(result);
 };
 
-function getIndexIncrement () {
+function getIndexIncrement() {
   let count = 0;
   return function () {
     return ++count;
   };
 }
 
-const findTemplate = (id) =>{
+const findTemplate = (id) => {
   const template = document.getElementById(id);
-  if(!template) {
+  if (!template) {
     throw new Error(`Template not found: #${id}`);
   }
-  if(!(template instanceof HTMLTemplateElement)) {
+  if (!(template instanceof HTMLTemplateElement)) {
     throw new Error(`Element is not template: #${id}`);
   }
   return template.content.firstElementChild;
@@ -27,5 +29,29 @@ const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const isEnterKey = (evt) => evt.key === 'Enter';
 
-export {getRandomInteger, getIndexIncrement, findTemplate, isEscapeKey, isEnterKey};
+const showRequestInfo = (templateId) => {
+  const template = findTemplate(templateId);
+  const errorElement = template.cloneNode(true);
+  document.body.append(errorElement);
+};
+
+
+const showRequestInfoTimeout = (templateId) => {
+  const template = findTemplate(templateId);
+  const errorElement = template.cloneNode(true);
+  document.body.append(errorElement);
 
+  setTimeout(() => {
+    errorElement.remove();
+  }, ALERT_SHOW_TIME);
+};
+
+export {
+  getRandomInteger,
+  getIndexIncrement,
+  findTemplate,
+  isEscapeKey,
+  isEnterKey,
+  showRequestInfo,
+  showRequestInfoTimeout,
+};