Merge pull request #14 from Ayronhayd/master

js/components/filter.js

@@ -8,8 +8,7 @@ const Filter = {
 };
 
 const filtersElement = document.querySelector('.img-filters');
-const picturesContainer = document.querySelector('.pictures');
-const picturesUploadForm = document.querySelector('.img-upload');
+
 
 let currentFilter = '';
 let pictures = [];
@@ -48,8 +47,6 @@ const setOnFilterClick = (cb) => {
     if (clickedButton.id === currentFilter) {
       return;
     }
-    picturesContainer.innerHTML = '';
-    picturesContainer.append(picturesUploadForm);
     filtersElement
       .querySelector('.img-filters__button--active')
       .classList.remove('img-filters__button--active');

js/components/form.js

@@ -103,7 +103,7 @@ const hideModal = () => {
   form.reset();
   resetScale();
   resetEffects();
-
+  pristine.reset();
   document.removeEventListener('keydown', onEscapeKeydown);
 };
 

js/components/message.js

@@ -6,31 +6,26 @@ const showSuccessMessage = () => {
   body.append(successMessage);
   body.addEventListener('keydown', onEscDown);
   body.addEventListener('click', onBodyClick);
-  successMessage
-    .querySelector('.success__button')
-    .addEventListener('click', hideMessage);
+  successMessage.querySelector('.success__button').addEventListener('click', hideMessage);
 };
 
 const showErrorMessage = () => {
   body.append(errorMessage);
   body.addEventListener('keydown', onEscDown);
-  errorMessage
-    .querySelector('.error__button')
-    .addEventListener('click', hideMessage);
+  body.addEventListener('click', onBodyClick);
+  errorMessage.querySelector('.error__button').addEventListener('click', hideMessage);
 };
 
 function hideMessage() {
-  const messageElement =
-    document.querySelector('.success') || document.querySelector('.error');
+  const messageElement = document.querySelector('.success') || document.querySelector('.error');
   messageElement.remove();
   body.removeEventListener('keydown', onEscDown);
   body.removeEventListener('click', onBodyClick);
 }
 
 function onBodyClick(evt) {
   if (
-    evt.target.closest('.success__inner') ||
-    evt.target.closest('.error__inner')
+    evt.target.closest('.success__inner') || evt.target.closest('.error__inner')
   ) {
     return;
   }

js/components/photo-filters.js

@@ -1,7 +1,8 @@
 const form = document.querySelector('.img-upload__form');
-const image = document.querySelector('.img-upload__preview img');
-const sliderElement = document.querySelector('.effect-level__slider');
-const effectLevel = document.querySelector('.effect-level__value');
+const image = form.querySelector('.img-upload__preview img');
+const sliderUpload = form.querySelector('.img-upload__effect-level');
+const sliderElement = form.querySelector('.effect-level__slider');
+const effectLevel = form.querySelector('.effect-level__value');
 
 const EFFECTS = [
   {
@@ -57,6 +58,7 @@ let chosenEffect = DEFAULT_EFFECT;
 const isDefault = () => chosenEffect === DEFAULT_EFFECT;
 
 const updateSlider = () => {
+  sliderUpload.classList.remove('hidden');
   sliderElement.classList.remove('hidden');
   sliderElement.noUiSlider.updateOptions({
     range: {
@@ -68,6 +70,7 @@ const updateSlider = () => {
   });
 
   if (isDefault()) {
+    sliderUpload.classList.add('hidden');
     sliderElement.classList.add('hidden');
   }
 };
@@ -87,7 +90,7 @@ const onSliderUpdate = () => {
   if (isDefault()) {
     return;
   }
-  const sliderValue = sliderElement.noUiSlider.get();
+  const sliderValue = Number(sliderElement.noUiSlider.get());
   image.style.filter = `${chosenEffect.style}(${sliderValue}${chosenEffect.unit})`;
   image.classList.add(`effects__preview--${chosenEffect.name}`);
   effectLevel.value = sliderValue;

js/data/render-comments.js → js/components/render-comments.js

@@ -30,23 +30,20 @@ const renderComments = (comments, bigPicture) => {
   const shownComments = () => {
     const startIndex = commentsShown * COMMENTS_PORTION;
     commentsShown++;
+
     const endIndex = Math.min(
       startIndex + COMMENTS_PORTION,
       comments.length
     );
 
     const slicedComments = comments.slice(startIndex, endIndex);
 
+    commentsLoader.classList.toggle('hidden', endIndex === comments.length);
+
     slicedComments.forEach((comment) => {
       commentList.append(createComment(comment, template));
     });
 
-    if (startIndex >= comments.length) {
-      commentsLoader.classList.add('hidden');
-      commentsShown = comments.length;
-    } else {
-      commentsLoader.classList.remove('hidden');
-    }
     commentShowCount.textContent = endIndex;
 
   };

js/data/render-pictures.js → js/components/render-pictures.js

@@ -1,17 +1,19 @@
-import { showBigPicture} from '../components/show-big-picture.js';
+import { showBigPicture} from './show-big-picture.js';
 
 const pictureTemplate = document.querySelector('#picture')
   .content.querySelector('.picture');
 const container = document.querySelector('.pictures');
 
+
 const createPicture = (data) => {
-  const {url , description, comments, likes, } = data;
+  const { id, url , description, comments, likes, } = data;
 
   const picture = pictureTemplate.cloneNode(true);
   const img = picture.querySelector('.picture__img');
   const pictureComment = picture.querySelector('.picture__comments');
   const pictureLikes = picture.querySelector('.picture__likes');
 
+  picture.setAttribute('id', id);
   img.src = url;
   img.alt = description;
   pictureComment.textContent = comments.length;
@@ -24,7 +26,9 @@ const createPicture = (data) => {
   return picture;
 };
 
+
 const renderPictures = (pictures) => {
+  container.querySelectorAll('.picture').forEach((picture) => picture.remove());
   const fragment = document.createDocumentFragment();
   pictures.forEach((picture) => {
     const pictureElement = createPicture(picture);

js/components/show-big-picture.js

@@ -1,4 +1,4 @@
-import { renderComments} from '../data/render-comments.js';
+import { renderComments} from './render-comments.js';
 import {
   isEscKeyDown
 } from '../utils/is-esc-key-down.js';
@@ -40,7 +40,7 @@ const showBigPicture = ({
   const likesCount = bigPicture.querySelector('.likes-count');
 
   img.src = url;
-  socialCaption.alt = description;
+  socialCaption.textContent = description;
   socialComment.textContent = comments.length;
   likesCount.textContent = likes;
 

js/components/api.js → js/data/api.js

@@ -18,7 +18,7 @@ const getData = async (onSuccess, onFail) => {
 const sendData = async (onSuccess, onFail, body) => {
   try {
     const response = await fetch(
-      'https://31.javascript.htmlacademy.pro/kekstagram',
+      'https://31.javascript.htmlacademy.pro/kekstagram/',
       {
         method: 'POST',
         body,

js/main.js

@@ -1,10 +1,10 @@
 import {
   renderPictures
-} from './data/render-pictures.js';
+} from './components/render-pictures.js';
 import {
   getData,
   sendData
-} from './components/api.js';
+} from './data/api.js';
 import {
   showAlert
 } from './utils/show-alert';

js/utils/show-alert.js

@@ -2,8 +2,9 @@ const ALERT_SHOW_TIME = 5000;
 
 const showAlert = (message) => {
   const alert = document.createElement('div');
+  alert.classList.add('data-error');
   alert.style.position = 'absolute';
-  alert.style.zIndex = '100';
+  alert.style.zIndex = '3';
   alert.style.left = '0';
   alert.style.top = '0';
   alert.style.right = '0';