Merge pull request #17 from Ocupuc123/master

Author: keksobot

js/filter.js

@@ -8,7 +8,8 @@ const filterButtons = filters.querySelectorAll('.img-filters__button');
 
 const FilterType = {
   RANDOM: 'filter-random',
-  DISCUSSED: 'filter-discussed'
+  DISCUSSED: 'filter-discussed',
+  DEFAULT: 'filter-default'
 };
 
 const filterRandom = (photos) => {
@@ -38,7 +39,14 @@ const sortPhotos = (photos, filterType) => {
 const setFilter = (cb, photos) => {
   filters.classList.remove('img-filters--inactive');
 
+  let currentAppliedFilterType = FilterType.DEFAULT;
+
   const updateFilter = (filterType) => {
+    if (filterType === currentAppliedFilterType) {
+      return;
+    }
+
+    currentAppliedFilterType = filterType;
     const sortedPhotos = sortPhotos(photos, filterType);
     cb(sortedPhotos);
   };

js/upload-image.js

@@ -1,4 +1,4 @@
-import { isEscapeKey, showErrorAlert } from './util.js';
+import { isEscapeKey, showErrorAlert, showPopupMessage } from './util.js';
 import { validateReset } from './form.js';
 import { sendData } from './api.js';
 
@@ -75,40 +75,6 @@ let slider = null;
 let currentEffect = 'none';
 let currentScale = parseFloat(uploadScaleControlInput.value);
 
-const showAlert = (type) => {
-  const fragment = document.querySelector(`#${type}`).content;
-  const alert = fragment.querySelector(`.${type}`).cloneNode(true);
-  const alertCloseButton = alert.querySelector(`.${type}__button`);
-
-  const onDocumentKeydown = (evt) => {
-    if (isEscapeKey(evt)) {
-      evt.preventDefault();
-      closeAlert();
-    }
-  };
-
-  const onDocumentClick = (evt) => {
-    if (!evt.target.closest(`.${type}__inner`)) {
-      closeAlert();
-    }
-  };
-
-  const onAlertCloseButtonClick = () => {
-    closeAlert();
-  };
-
-  function closeAlert() {
-    alert.remove();
-    document.removeEventListener('keydown', onDocumentKeydown);
-    document.removeEventListener('click', onDocumentClick);
-  }
-
-  alertCloseButton.addEventListener('click', onAlertCloseButtonClick);
-  document.addEventListener('keydown', onDocumentKeydown);
-  document.addEventListener('click', onDocumentClick);
-  body.appendChild(alert);
-};
-
 const applyFilterEffect = (effect, value) => `${effectConfig[effect]?.property}(${parseFloat(value)}${effectConfig[effect]?.unit})`;
 
 const applyTransformScale = (value) => `scale(${parseFloat(value) / 100})`;
@@ -124,11 +90,7 @@ const onScaleControlClick = (direction) => {
   uploadPreview.style.transform = applyTransformScale(currentScale);
 };
 
-const onDocumentKeydownUpload = (evt) => {
-  if (document.querySelector('.success') || document.querySelector('.error')) {
-    return;
-  }
-
+const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
     closeUpload();
@@ -147,10 +109,10 @@ const onFormSubmit = async (data) => {
 
     if (request) {
       closeUpload();
-      showAlert('success');
+      showPopupMessage('success');
     }
   } catch {
-    showAlert('error');
+    showPopupMessage('error');
   }
 
   toggleSubmitButton(false);
@@ -229,7 +191,7 @@ const openUpload = () => {
     uploadOverlay.classList.remove('hidden');
     checkEffectSliderVisibility('none');
 
-    document.addEventListener('keydown', onDocumentKeydownUpload);
+    document.addEventListener('keydown', onDocumentKeydown);
   } else {
     showErrorAlert('Неверный тип файла');
   }
@@ -258,7 +220,7 @@ function closeUpload() {
   body.classList.remove('modal-open');
   uploadOverlay.classList.add('hidden');
 
-  document.removeEventListener('keydown', onDocumentKeydownUpload);
+  document.removeEventListener('keydown', onDocumentKeydown);
 }
 
 export { setUpload, onFormSubmit };

js/util.js

@@ -5,27 +5,74 @@ const errorFragment = document.querySelector('#data-error').content;
 const errorTemplate = errorFragment.querySelector('.data-error');
 const body = document.body;
 
+let currentPopup = null;
+
+const isEscapeKey = (evt) => evt.key === 'Escape';
+
 const showErrorAlert = (message) => {
   const alert = errorTemplate.cloneNode(true);
-  const title = alert.querySelector('.data-error__title');
+  const alertTitle = alert.querySelector('.data-error__title');
 
-  title.textContent = message;
+  alertTitle.textContent = message;
   body.appendChild(alert);
 
   setTimeout(() => {
     alert.remove();
   }, ALERT_SHOW_TIME);
 };
 
-const isEscapeKey = (evt) => evt.key === 'Escape';
+const showPopupMessage = (type) => {
+  if (currentPopup) {
+    return;
+  }
+
+  const fragment = document.querySelector(`#${type}`).content;
+  const popup = fragment.querySelector(`.${type}`).cloneNode(true);
+  const popupCloseButton = popup.querySelector(`.${type}__button`);
+
+  const onDocumentClick = (evt) => {
+    if (!evt.target.closest(`.${type}__inner`)) {
+      closePopup();
+    }
+  };
+
+  const onDocumentKeydown = (evt) => {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      closePopup();
+    }
+  };
 
-function debounce(callback, timeoutDelay = DEFAULT_DELAY) {
+  const onPopupCloseButtonClick = () => {
+    closePopup();
+  };
+
+  function closePopup() {
+    if (!currentPopup) {
+      return;
+    }
+
+    popup.remove();
+    document.removeEventListener('click', onDocumentClick);
+    document.removeEventListener('keydown', onDocumentKeydown);
+    currentPopup = null;
+  }
+
+  popupCloseButton.addEventListener('click', onPopupCloseButtonClick);
+  document.addEventListener('click', onDocumentClick);
+  document.addEventListener('keydown', onDocumentKeydown);
+  body.appendChild(popup);
+
+  currentPopup = popup;
+};
+
+const debounce = (callback, timeoutDelay = DEFAULT_DELAY) => {
   let timeoutId;
 
-  return (...rest) => {
+  return (...args) => {
     clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+    timeoutId = setTimeout(() => callback(...args), timeoutDelay);
   };
-}
+};
 
-export { isEscapeKey, showErrorAlert, debounce };
+export { isEscapeKey, showErrorAlert, showPopupMessage, debounce };