From ca856352ec25ef8debeed88a4d5df28d2c768a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=BF=D0=B8=D1=87=D0=B5=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Wed, 18 Dec 2024 23:19:57 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D1=83=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D1=8F=D1=8E=D1=89=D1=83=D1=8E=20=D0=B4?= =?UTF-8?q?=D1=80=D0=B5=D0=B1=D0=B5=D0=B7=D0=B3=20=D0=B8=20=D1=84=D1=83?= =?UTF-8?q?=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC?= =?UTF-8?q?=D0=B5=D1=88=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BC=D0=B0?= =?UTF-8?q?=D1=81=D1=81=D0=B8=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/utils.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/js/utils.js b/js/utils.js index c302785..f3bea25 100644 --- a/js/utils.js +++ b/js/utils.js @@ -1,4 +1,20 @@ //Проверка на escape const isEscapeKey = (evt) => evt.key === 'Escape'; -export {isEscapeKey}; +//Устранение дребезга +const debounce = (callback, timeoutDelay = 500) => { + let timeoutId; + + return (...rest) => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay); + }; +}; + +//Перемешивает массив +const shuffleArray = (array) => { + array.sort(() => 0.5 - Math.random()); + return array; +}; + +export {isEscapeKey, debounce, shuffleArray}; From 159a6f4e0a0fc62b4ae28ae38b7cda53e0cf3c64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=BF=D0=B8=D1=87=D0=B5=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Wed, 18 Dec 2024 23:20:16 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BC?= =?UTF-8?q?=D0=B0=D0=B3=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=BE=D0=B5=20=D1=87?= =?UTF-8?q?=D0=B8=D1=81=D0=BB=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/popup-error.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/popup-error.js b/js/popup-error.js index f3521ea..18891fa 100644 --- a/js/popup-error.js +++ b/js/popup-error.js @@ -1,3 +1,5 @@ +const DELAY_TIME = 5000; + const popupErroreTemplate = document.querySelector('#data-error').content; const showPopup = (message) => { @@ -8,7 +10,7 @@ const showPopup = (message) => { document.body.append(popupError); - setTimeout(removePopup, 5000); + setTimeout(removePopup, DELAY_TIME); }; function removePopup(){ From 439cd52618a735ef8da68c3badd9f6c49c092800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=BF=D0=B8=D1=87=D0=B5=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Wed, 18 Dec 2024 23:24:35 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BC?= =?UTF-8?q?=D1=83=D1=81=D0=BE=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/form-upload.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/form-upload.js b/js/form-upload.js index 2f7d3b3..b23bfaa 100644 --- a/js/form-upload.js +++ b/js/form-upload.js @@ -52,6 +52,7 @@ const formImgUploadOpen = () => { document.addEventListener('keydown', onDocumentKeydown); }; + //Закрытие формы const formImgUploadClose = () => { imgOverlay.classList.add('hidden'); @@ -60,10 +61,6 @@ const formImgUploadClose = () => { imgUploadCancel.removeEventListener('click', onCancelClick); document.removeEventListener('keydown', onDocumentKeydown); - imgUploadInput.value = ''; - inputHashtags.value = ''; - inputDescription.value = ''; - previewImg.src = ''; pristine.reset(); imgUploadForm.reset(); imgUploadSubmit.disabled = false; @@ -71,6 +68,7 @@ const formImgUploadClose = () => { resetZoom(); }; + //обработчик клика на zoom scaleControlSmaller.addEventListener('click', () => changeZoom(-1)); scaleControlBigger.addEventListener('click', () => changeZoom()); From f9293eb44d59152e9dd03e8e65aa6afee59e6fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=BF=D0=B8=D1=87=D0=B5=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Thu, 19 Dec 2024 17:46:57 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D0=BE=D1=87?= =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=BA=D0=B8=20=D0=BC=D0=B8=D0=BD=D0=B8=D0=B0?= =?UTF-8?q?=D1=82=D1=8E=D1=80,=20=D0=B8=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B?= =?UTF-8?q?=D1=82=D0=B8=D1=8F=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/insert-thumbnails.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/js/insert-thumbnails.js b/js/insert-thumbnails.js index 9334109..7863945 100644 --- a/js/insert-thumbnails.js +++ b/js/insert-thumbnails.js @@ -1,11 +1,19 @@ import {createThumbnail} from './rendering-pictures.js'; import {getData} from './api.js'; import {showPopup} from './popup-error.js'; +import {openFilter} from './photo-filter.js'; const picturesContainer = document.querySelector('.pictures'); const fragment = document.createDocumentFragment(); +const clearThumbnails = () => { + const allPictures = picturesContainer.querySelectorAll('.picture'); + allPictures.forEach((picture) => picture.remove()); +}; + + const insertThumbnails = (pictures) => { + clearThumbnails(); pictures.forEach((photo) => { fragment.append(createThumbnail(photo)); picturesContainer.append(fragment); @@ -13,5 +21,11 @@ const insertThumbnails = (pictures) => { }; getData() - .then((pictures)=> insertThumbnails(pictures)) + .then((pictures)=> { + insertThumbnails(pictures); + openFilter(pictures); + }) .catch((err) => showPopup(err.message)); + + +export {insertThumbnails}; From 8326c85f03c71cbb1e856a2364f4564f092481d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D0=B8=D1=80=D0=BF=D0=B8=D1=87=D0=B5=D0=BD=D0=BA?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Thu, 19 Dec 2024 17:54:50 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?= =?UTF-8?q?=D0=BC=D0=BE=D0=B4=D1=83=D0=BB=D1=8C=20=D0=B4=D0=BB=D1=8F=20?= =?UTF-8?q?=D0=BE=D1=82=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D1=84?= =?UTF-8?q?=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=BE=D0=B2=20=D0=BC=D0=B8=D0=BD?= =?UTF-8?q?=D0=B8=D0=B0=D1=82=D1=8E=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/photo-filter.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 js/photo-filter.js diff --git a/js/photo-filter.js b/js/photo-filter.js new file mode 100644 index 0000000..48f4f07 --- /dev/null +++ b/js/photo-filter.js @@ -0,0 +1,51 @@ +import { insertThumbnails } from './insert-thumbnails'; +import { debounce, shuffleArray } from './utils'; + +const RANDOM_PICTURES_COUNT = 10; +let picturesFromServer = []; + +const imgFilters = document.querySelector('.img-filters'); +const imgFilterButtons = imgFilters.querySelectorAll('.img-filters__button'); + +const Filters = { + default: (pictures) => pictures, + random: (pictures) => shuffleArray(pictures).slice(0, RANDOM_PICTURES_COUNT), + discussed: (pictures) => pictures.sort((A, B) => B.comments.length - A.comments.length) +}; + +const openFilter = (pictures) => { + picturesFromServer = pictures; + if (pictures) { + imgFilters.classList.remove('img-filters--inactive'); + } +}; + +const setCurrentFilterButton = (currentFilterButton) => { + imgFilterButtons.forEach((button) => button.classList.remove('img-filters__button--active')); + currentFilterButton.classList.add('img-filters__button--active'); +}; + +const filtersClick = (cb) => { + imgFilters.addEventListener('click', (evt) => { + if (evt.target.type === 'button') { + const currentFilter = evt.target.id.replace('filter-', ''); + + setCurrentFilterButton(evt.target); + + cb(currentFilter); + } + }); +}; + +const filterPictures = (filter, pictures) => { + let filteredPictures = pictures.slice(); + filteredPictures = Filters[filter](filteredPictures); + + insertThumbnails(filteredPictures); +}; + +filtersClick( + debounce((currentFilter) => filterPictures(currentFilter, picturesFromServer)) +); + +export { openFilter };