Resolve the tasks from module11-task1

js/alerts.js

@@ -0,0 +1,71 @@
+import {isEscKeyDown} from './util.js';
+
+const successUploadContainer = document.querySelector('#success').content.querySelector('.success').cloneNode(true);
+const errorUploadContainer = document.querySelector('#error').content.querySelector('.error').cloneNode(true);
+const dataAlertContainer = document.querySelector('#data-error').content.querySelector('.data-error').cloneNode(true);
+const successButton = successUploadContainer.querySelector('.success__button');
+const errorButton = errorUploadContainer.querySelector('.error__button');
+
+successUploadContainer.addEventListener('keydown', (evt) =>
+  onKeyDownEsc(evt, successUploadContainer));
+
+successUploadContainer.addEventListener('click', (evt) =>
+  onClick(evt, successUploadContainer, 'success'));
+
+successButton.addEventListener('click', () => {
+  successUploadContainer.remove();
+});
+
+successButton.addEventListener('blur', () => {
+  successButton.focus();
+});
+
+errorUploadContainer.addEventListener('keydown', (evt) =>
+  onKeyDownEsc(evt, errorUploadContainer));
+
+errorUploadContainer.addEventListener('click', (evt) =>
+  onClick(evt, errorUploadContainer, 'error'));
+
+errorButton.addEventListener('click', () => {
+  errorUploadContainer.remove();
+});
+
+errorButton.addEventListener('blur', () => {
+  errorButton.focus();
+});
+
+function onKeyDownEsc(evt, container) {
+  if (isEscKeyDown(evt)) {
+    evt.stopPropagation();
+    container.remove();
+  }
+}
+
+function onClick(evt, container, evtClass) {
+  if (evt.target.classList.contains(evtClass)) {
+    container.remove();
+  }
+}
+
+function showSuccessAlert() {
+  addAlertElement(successUploadContainer, successButton);
+}
+
+function showErrorAlert(cb) {
+  return function () {
+    addAlertElement(errorUploadContainer, errorButton);
+    cb();
+  };
+}
+
+function showDataAlert() {
+  document.body.appendChild(dataAlertContainer);
+  setTimeout(() => dataAlertContainer.remove(), 5000);
+}
+
+function addAlertElement(element, elementButton) {
+  document.body.appendChild(element);
+  elementButton.focus();
+}
+
+export {showSuccessAlert, showErrorAlert, showDataAlert};

js/api.js

@@ -0,0 +1,37 @@
+import {showDataAlert} from './alerts.js';
+
+function getData() {
+  return fetch('https://31.javascript.htmlacademy.pro/kekstagram/data')
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        throw new Error('Неуспешный ответ от сервера');
+      }
+    })
+    .catch(() => {
+      showDataAlert();
+    });
+}
+
+function sendData(onSuccess, onFail, body) {
+  fetch('https://31.javascript.htmlacademy.pro/kekstagram', {
+    method: 'POST',
+    body: body
+  }).then((response) => {
+    if (response.ok) {
+      onSuccess();
+    } else {
+      throw new Error('Неуспешный ответ от сервера');
+    }
+  }).catch(() => onFail());
+}
+
+function showData(onSuccess) {
+  getData().then((data) => {
+    onSuccess(data);
+  });
+}
+
+export {getData, sendData, showData};
+

js/showBigPicture.js → js/big-picture.js

@@ -1,6 +1,6 @@
-import {photos} from './miniatureCreate.js';
 import {isEscKeyDown} from './util.js';
 import {addHidden, removeHidden} from './util.js';
+import {getData} from './api.js';
 
 const COMMENTS_AMOUNT = 5;
 
@@ -12,6 +12,16 @@ const buttonCansel = document.querySelector('.big-picture__cancel');
 const buttonLoad = document.querySelector('.social__comments-loader');
 let shownCommentsCounter = 0;
 
+picturesContainer.addEventListener('click', (evt) => {
+  if (evt.target.classList.contains('picture__img')) {
+    openBigPicture(evt);
+  }
+});
+
+buttonCansel.addEventListener('click', () => {
+  closeBigPicture();
+});
+
 function onBigPictureEscKeyDown(evt) {
   if (isEscKeyDown(evt)) {
     addHidden(bigPicture);
@@ -27,25 +37,29 @@ function onButtonLoadClick() {
   getCommentsShown();
 }
 
-function createBigPictureData(evt) {
-  const miniature = evt.target.closest('.picture');
-  if (miniature.classList.contains('picture')) {
-    const photoId = miniature.querySelector('.picture__img').dataset.photoId;
-    const currentPhoto = getPhotoById(photoId);
-    bigPicture.querySelector('.big-picture__img').querySelector('img').src =
-      currentPhoto.url;
-    bigPicture.querySelector('.big-picture__img').querySelector('img').dataset.photoId = currentPhoto.id;
-    bigPicture.querySelector('.likes-count').textContent =
-      currentPhoto.likes;
-    bigPicture.querySelector('.social__comment-total-count').textContent =
-      currentPhoto.comments.length.toString();
+function createBigPicture(evt) {
+  getData().then((photos) => {
+    const photoId = evt.target.dataset.photoId;
+    const currentPhoto = getPhotoById(photos, photoId);
+    updateBigPicture(currentPhoto);
     addComments(currentPhoto, COMMENTS_AMOUNT);
     getCommentsShown();
-  }
+  });
+}
+
+function updateBigPicture(currentPhoto) {
+  bigPicture.querySelector('.big-picture__img').querySelector('img').src =
+    currentPhoto.url;
+  bigPicture.querySelector('.big-picture__img').querySelector('img').dataset.photoId =
+    currentPhoto.id;
+  bigPicture.querySelector('.likes-count').textContent =
+    currentPhoto.likes;
+  bigPicture.querySelector('.social__comment-total-count').textContent =
+    currentPhoto.comments.length.toString();
 }
 
 function openBigPicture(evt) {
-  createBigPictureData(evt);
+  createBigPicture(evt);
   removeHidden(bigPicture);
   buttonLoad.addEventListener('click', onButtonLoadClick);
   document.addEventListener('keydown', onBigPictureEscKeyDown);
@@ -89,17 +103,6 @@ function getCommentsShown() {
     shownCommentsCounter.toString();
 }
 
-function getPhotoById(id) {
-  return photos.find((photo) => photo.id === Number(id));
+function getPhotoById(data, id) {
+  return data.find((photo) => photo.id === Number(id));
 }
-
-picturesContainer.addEventListener('click', (evt) => {
-  if(evt.target.classList.contains('picture__img')) {
-    openBigPicture(evt);
-  }
-});
-
-buttonCansel.addEventListener('click', () => {
-  closeBigPicture();
-});
-

js/effects.js

@@ -0,0 +1,78 @@
+import {createSlider, resetSlider, updateSlider, onUpdateSlider} from './slider-bar.js';
+
+const effectLevelValue = document.querySelector('.effect-level__value');
+const imgUploadEffects = document.querySelector('.img-upload__effects');
+const imgUploadPreview = document.querySelector('.img-upload__preview');
+const sliderBar = document.querySelector('.effect-level__slider');
+const sliderContainer = document.querySelector('.img-upload__effect-level');
+
+const effects = {
+  none: {filter: 'none', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1},
+  chrome: {filter: 'grayscale', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1},
+  sepia: {filter: 'sepia', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1},
+  marvin: {filter: 'invert', start: 100, minSliderValue: 0, maxSliderValue: 100, step: 1},
+  phobos: {filter: 'blur', start: 3, minSliderValue: 0, maxSliderValue: 3, step: 0.1},
+  heat: {filter: 'brightness', start: 3, minSliderValue: 0, maxSliderValue: 3, step: 0.1},
+};
+
+createSlider(sliderBar,
+  effects.none.start,
+  effects.none.minSliderValue,
+  effects.none.maxSliderValue,
+  effects.none.step);
+
+onUpdateSlider(sliderBar, () => {
+  effectLevelValue.value = sliderBar.noUiSlider.get();
+});
+
+sliderContainer.style.visibility = 'hidden';
+
+imgUploadEffects.addEventListener('change', (evt) => {
+  if (evt.target.value === 'none') {
+    sliderContainer.style.visibility = 'hidden';
+  } else {
+    sliderContainer.style.visibility = 'visible';
+  }
+  resetSlider(sliderBar);
+  applyEffectLevel(imgUploadPreview, evt.target.value);
+});
+
+function applyEffectLevel(image, effectName) {
+  updateSliderOptions(effectName);
+  if (effectName === 'none') {
+    image.style.filter = effects[effectName].filter;
+  } else {
+    onUpdateSlider(sliderBar, () => {
+      image.style.filter = `${effects[effectName].filter}(${getFilterValue(effectName)})`;
+    });
+  }
+}
+
+function updateSliderOptions(effectName) {
+  const {filter, ...sliderParameters} = effects[effectName];
+  switch (effectName) {
+    case 'marvin': {
+      updateSlider(sliderBar, ...Object.values(sliderParameters));
+    }
+      break;
+    case 'phobos':
+    case 'heat': {
+      updateSlider(sliderBar, ...Object.values(sliderParameters));
+    }
+      break;
+    default: {
+      updateSlider(sliderBar, ...Object.values(sliderParameters));
+    }
+  }
+}
+
+function getFilterValue(effectName) {
+  let value = effectLevelValue.value;
+  if (effectName === 'marvin') {
+    value += '%';
+  } else if (effectName === 'phobos') {
+    value += 'px';
+  }
+  return value;
+}
+