Skip to content

Commit 8753245

Browse files
author
Keks
committed
✔️ Сборка #14 
1 parent edc1645 commit 8753245

File tree

8 files changed

+58
-111
lines changed

8 files changed

+58
-111
lines changed

‎14/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -211,19 +211,19 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
211211
<!-- Сообщение с ошибкой загрузки изображения -->
212212
<template id="error">
213213
<section class="error">
214-
<div class="error__inner">
214+
<div class="error__inner" data-dialog-content>
215215
<h2 class="error__title">Ошибка загрузки файла</h2>
216-
<button type="button" class="error__button">Попробовать ещё раз</button>
216+
<button type="button" class="error__button" data-dialog-close>Попробовать ещё раз</button>
217217
</div>
218218
</section>
219219
</template>
220220

221221
<!-- Сообщение об успешной загрузке изображения -->
222222
<template id="success">
223223
<section class="success">
224-
<div class="success__inner">
224+
<div class="success__inner" data-dialog-content>
225225
<h2 class="success__title">Изображение успешно загружено</h2>
226-
<button type="button" class="success__button">Круто!</button>
226+
<button type="button" class="success__button" data-dialog-close>Круто!</button>
227227
</div>
228228
</section>
229229
</template>

‎14/js/api.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
1+
const BASE_URL = 'https://31.javascript.htmlыacademy.pro/kekstagram';
22
const Route = {
33
GET_DATA: '/data',
44
SEND_DATA: '/',

‎14/js/dialogs.js‎

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,58 @@
11
import { isEscapeKey } from './utils.js';
22

33
let currentDialog = null;
4-
let currentEscapeHandler = null;
5-
let currentOutsideClickHandler = null;
64

75
const errorTemplate = document.querySelector('#error');
86
const successTemplate = document.querySelector('#success');
97
const dataErrorTemplate = document.querySelector('#data-error');
108

11-
const descriptionInput = document.querySelector('.text__description');
12-
const imgHashtags = document.querySelector('.text__hashtags');
13-
14-
const canCloseModal = () => {
15-
const activeElement = document.activeElement;
16-
const isInputFocused = activeElement === descriptionInput || activeElement === imgHashtags;
17-
return !isInputFocused && !document.querySelector('.error');
18-
};
19-
209
const createEscapeHandler = (closeCallback) => (evt) => {
21-
if (isEscapeKey(evt.key) && canCloseModal()) {
10+
if (isEscapeKey(evt.key) && currentDialog) {
2211
evt.preventDefault();
2312
closeCallback();
13+
evt.stopPropagation();
2414
}
2515
};
2616

2717
const createOutsideClickHandler = (closeCallback) => (evt) => {
28-
if (currentDialog && !currentDialog.contains(evt.target)) {
18+
if (evt.target.closest('[data-dialog-close]') || !evt.target.closest('[data-dialog-content]')) {
2919
closeCallback();
3020
}
3121
};
3222

33-
const cleanupEventListeners = () => {
34-
if (currentEscapeHandler) {
35-
document.removeEventListener('keydown', currentEscapeHandler);
36-
currentEscapeHandler = null;
37-
}
38-
39-
if (currentOutsideClickHandler) {
40-
document.removeEventListener('click', currentOutsideClickHandler);
41-
currentOutsideClickHandler = null;
42-
}
43-
};
44-
4523
const closeDialog = () => {
4624
if (currentDialog) {
4725
currentDialog.remove();
4826
currentDialog = null;
49-
cleanupEventListeners();
5027
}
5128
};
5229

53-
const openDialog = (template, className, closeCallback = closeDialog) => {
54-
closeDialog();
55-
30+
const openDialog = (template) => {
5631
const dialogElement = template.content.cloneNode(true);
57-
document.body.appendChild(dialogElement);
58-
currentDialog = document.querySelector(`.${className}`);
32+
const dialogMainElement = dialogElement.children[0];
5933

60-
const dialogButton = currentDialog.querySelector(`.${className}__button`);
61-
62-
currentEscapeHandler = createEscapeHandler(closeCallback);
63-
currentOutsideClickHandler = createOutsideClickHandler(closeCallback);
34+
document.body.appendChild(dialogElement);
6435

65-
document.addEventListener('keydown', currentEscapeHandler);
66-
document.addEventListener('click', currentOutsideClickHandler);
67-
dialogButton.addEventListener('click', closeCallback);
36+
currentDialog = dialogMainElement;
6837
};
38+
document.addEventListener('keydown', createEscapeHandler(closeDialog), { capture: true });
39+
document.addEventListener('click', createOutsideClickHandler(closeDialog));
6940

7041
export const showError = () => {
71-
openDialog(errorTemplate, 'error');
42+
openDialog(errorTemplate);
7243
};
7344

7445
export const showSuccess = () => {
75-
openDialog(successTemplate, 'success');
46+
openDialog(successTemplate);
7647
};
7748

7849
export const showDataError = () => {
7950
const errorElement = dataErrorTemplate.content.cloneNode(true);
51+
const errorMainElement = errorElement.children[0];
52+
8053
document.body.appendChild(errorElement);
8154

82-
const errorMessage = document.querySelector('.data-error');
55+
const errorMessage = errorMainElement;
8356

8457
setTimeout(() => {
8558
if (errorMessage) {

‎14/js/filter.js‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,51 @@
1-
import { getRandomInteger } from './utils.js';
21
import { renderGallery, clearGallery, getGalleryData } from './gallery.js';
32

4-
const MAX_RANDOM_PHOTO = 10;
3+
const filtersContainer = document.querySelector('.img-filters');
4+
let activeFilterButton = filtersContainer.querySelector('.img-filters__button--active');
55

6-
const shuffleArray = (array) => {
7-
const shuffled = [...array];
6+
const shuffleArray = (data) =>
7+
data.toSorted(() => Math.random() - 0.5);
88

9-
for (let i = shuffled.length - 1; i > 0; i--) {
10-
const randomIndex = getRandomInteger(0, i);
11-
[shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
12-
}
13-
14-
return shuffled.slice(0, MAX_RANDOM_PHOTO);
15-
};
9+
const sortByCommentsCount = (data) =>
10+
data.toSorted((a, b) => b.comments.length - a.comments.length);
1611

17-
const sortedByArray = (data) =>
18-
[...data].sort((a, b) => b.comments.length - a.comments.length);
12+
const getFilteredData = (filterId) => {
13+
const galleryData = getGalleryData();
1914

20-
export const initFilters = () => {
21-
const filtersContainer = document.querySelector('.img-filters');
22-
23-
let activeFilterButton = filtersContainer.querySelector('.img-filters__button--active');
24-
25-
filtersContainer.classList.remove('img-filters--inactive');
15+
switch (filterId) {
16+
case 'filter-random':
17+
return shuffleArray([...galleryData]);
2618

27-
filtersContainer.addEventListener('click', (evt) => {
28-
const button = evt.target.closest('.img-filters__button');
19+
case 'filter-discussed':
20+
return sortByCommentsCount([...galleryData]);
2921

30-
if (!button || button === activeFilterButton) {
31-
return;
32-
}
22+
case 'filter-default':
23+
default:
24+
return galleryData;
25+
}
26+
};
3327

34-
if (activeFilterButton) {
35-
activeFilterButton.classList.remove('img-filters__button--active');
36-
}
28+
const handleFilterClick = (evt) => {
29+
const button = evt.target.closest('.img-filters__button');
3730

38-
button.classList.add('img-filters__button--active');
39-
activeFilterButton = button;
31+
if (!button || button === activeFilterButton) {
32+
return;
33+
}
4034

41-
const galleryData = getGalleryData();
42-
let filteredData = [];
35+
if (activeFilterButton) {
36+
activeFilterButton.classList.remove('img-filters__button--active');
37+
}
4338

44-
switch (button.id) {
45-
case 'filter-random':
46-
filteredData = shuffleArray(galleryData);
47-
break;
39+
button.classList.add('img-filters__button--active');
40+
activeFilterButton = button;
4841

49-
case 'filter-discussed':
50-
filteredData = sortedByArray(galleryData);
51-
break;
42+
const filteredData = getFilteredData(button.id);
5243

53-
case 'filter-default':
54-
default:
55-
filteredData = galleryData;
56-
break;
57-
}
44+
clearGallery();
45+
renderGallery(filteredData);
46+
};
5847

59-
clearGallery();
60-
renderGallery(filteredData);
61-
});
48+
export const initFilters = () => {
49+
filtersContainer.classList.remove('img-filters--inactive');
50+
filtersContainer.addEventListener('click', handleFilterClick);
6251
};

‎14/js/form.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,16 +68,12 @@ imgUploadForm.addEventListener('submit', async (evt) => {
6868
toggleSubmitButton(true);
6969

7070
await sendPhoto(new FormData(evt.target));
71-
onCloseImageEditor();
7271
showSuccess();
72+
onCloseImageEditor();
7373
} catch (err) {
7474
showError(err.message);
7575
} finally {
7676
toggleSubmitButton(false);
7777
}
78-
} else {
79-
hashtagsInput.style.borderColor = 'red';
80-
81-
hashtagsInput.focus();
8278
}
8379
});

‎14/js/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import './form.js';
55
import './api.js';
66

77
import { showDataError } from './dialogs.js';
8-
import {renderGallery, setGalleryData} from './gallery.js';
8+
import { renderGallery, setGalleryData } from './gallery.js';
99
import { getPhotos } from './api.js';
1010
import { initFilters } from './filter.js';
1111

@@ -14,7 +14,7 @@ try {
1414
renderGallery(gallery);
1515
setGalleryData(gallery);
1616

17-
initFilters(gallery);
17+
initFilters();
1818
} catch (err) {
1919
showDataError(err.message);
2020
}

‎14/js/upload-picture.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,8 @@ imgUploadInput.addEventListener('change', onOpenImageEditor);
9191

9292
imgUploadCancel.addEventListener('click', onCloseImageEditor);
9393

94-
const canCloseModal = () =>
95-
!isInputFocused() && !document.querySelector('.error');
96-
9794
function onDocumentKeydown (evt) {
98-
if (isEscapeKey(evt.key) && canCloseModal()) {
95+
if (isEscapeKey(evt.key) && !isInputFocused()) {
9996
evt.preventDefault();
10097
onCloseImageEditor();
10198
}

‎14/js/utils.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1 @@
11
export const isEscapeKey = (key) => key === 'Escape';
2-
3-
export const getRandomInteger = (a, b) => {
4-
const lower = Math.ceil(Math.min(a, b));
5-
const upper = Math.floor(Math.max(a, b));
6-
const result = Math.random() * (upper - lower + 1) + lower;
7-
8-
return Math.floor(result);
9-
};

0 commit comments

Comments
 (0)