Skip to content

Commit ecb88c0

Browse files
AnastasiiaXXAnastasiiaXX
committed
fix naming and file extensions check
1 parent eca24e6 commit ecb88c0

9 files changed

Lines changed: 123 additions & 107 deletions

‎js/comments.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const COMMENTS_PER_PAGE = 5;
1+
export const COMMENTS_PER_PAGE = 5;
22
export const renderComments = (commentsData, container) => {
33
commentsData.forEach((commentData) => {
44
const comment = document.createElement('li');

‎js/image-filters.js‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
const SLIDER_DEFAULT_MIN = 0;
2+
const SLIDER_DEFAULT_MAX = 100;
3+
const SLIDER_DEFAULT_START = 50;
4+
const SLIDER_DEFAULT_STEP = 1;
5+
const DEFAULT_EFFECT = 'none';
6+
17
const effects = {
28
chrome: { filter: 'grayscale', min: 0, max: 1, step: 0.1, unit: ''},
39
sepia: { filter: 'sepia', min: 0, max: 1, step: 0.1, unit: ''},
@@ -6,64 +12,65 @@ const effects = {
612
heat: { filter: 'brightness', min: 1, max: 3, step: 0.1, unit: ''}
713
};
814

9-
const DEFAULT_EFFECT = 'none';
10-
1115
const form = document.querySelector('.img-upload__form');
1216
const slider = form.querySelector('.effect-level__slider');
13-
const sliderContainer = form.querySelector('.img-upload__effect-level');
17+
const sliderWrapper = form.querySelector('.img-upload__effect-level');
1418
const uploadedImage = form.querySelector('.img-upload__preview img');
1519
const effectRadios = form.querySelectorAll('input[name="effect"]');
1620
const inputValue = form.querySelector('.effect-level__value');
17-
const noneRadioBtn = form.querySelector('input[value="none"]');
21+
const noneRadio = form.querySelector('input[value="none"]');
1822

1923
const initImageEffects = () => {
20-
let selectedFilter = 'none';
24+
let selectedFilter = DEFAULT_EFFECT;
2125
noUiSlider.create(slider, {
2226
range: {
23-
min: 0,
24-
max: 100,
27+
min: SLIDER_DEFAULT_MIN,
28+
max: SLIDER_DEFAULT_MAX,
2529
},
26-
start: 50,
27-
step: 1,
30+
start: SLIDER_DEFAULT_START,
31+
step: SLIDER_DEFAULT_STEP,
2832
connect: 'lower'
2933
});
3034

31-
sliderContainer.classList.add('hidden');
35+
sliderWrapper.classList.add('hidden');
3236

33-
slider.noUiSlider.on('update', () => {
34-
if (selectedFilter === 'none') {
37+
const onSliderUpdate = () => {
38+
if (selectedFilter === DEFAULT_EFFECT) {
3539
return;
3640
}
3741
const value = parseFloat(slider.noUiSlider.get());
3842
const effect = effects[selectedFilter];
3943
const filterStyle = `${effect.filter}(${value}${effect.unit})`;
4044
uploadedImage.style.filter = filterStyle;
4145
inputValue.value = value;
42-
});
46+
};
4347

44-
effectRadios.forEach((radio) => {
45-
radio.addEventListener('change', () => {
46-
selectedFilter = radio.value;
47-
if (selectedFilter === DEFAULT_EFFECT) {
48-
sliderContainer.classList.add('hidden');
49-
uploadedImage.style.filter = '';
50-
} else {
51-
sliderContainer.classList.remove('hidden');
48+
slider.noUiSlider.on('update', onSliderUpdate);
49+
50+
const onEffectRadioChange = (evt) => {
51+
selectedFilter = evt.target.value;
52+
if (selectedFilter === DEFAULT_EFFECT) {
53+
sliderWrapper.classList.add('hidden');
54+
uploadedImage.style.filter = '';
55+
} else {
56+
sliderWrapper.classList.remove('hidden');
57+
const effect = effects[selectedFilter];
58+
slider.noUiSlider.updateOptions({
59+
range: { min: effect.min, max: effect.max },
60+
start: effect.max,
61+
step: effect.step
62+
});
63+
}
64+
};
5265

53-
const effect = effects[selectedFilter];
54-
slider.noUiSlider.updateOptions({
55-
range: { min: effect.min, max: effect.max },
56-
start: effect.max,
57-
step: effect.step
58-
});
59-
}
60-
});
66+
effectRadios.forEach((radio) => {
67+
radio.addEventListener('change', onEffectRadioChange);
6168
});
6269
};
6370

6471
const resetImageEffects = () => {
65-
noneRadioBtn.checked = true;
66-
sliderContainer.classList.add('hidden');
72+
noneRadio.checked = true;
73+
sliderWrapper.classList.add('hidden');
6774
uploadedImage.style.filter = '';
6875
};
6976

‎js/image-scale.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ const SCALE_STEP = 25;
44
const PERCENT_DIVIDER = 100;
55

66
const form = document.querySelector('.img-upload__form');
7-
const scaleSmallerBtn = form.querySelector('.scale__control--smaller');
8-
const scaleBiggerBtn = form.querySelector('.scale__control--bigger');
7+
const scaleSmaller = form.querySelector('.scale__control--smaller');
8+
const scaleBigger = form.querySelector('.scale__control--bigger');
99
const scaleControlValue = form.querySelector('.scale__control--value');
1010
const uploadedImage = form.querySelector('.img-upload__preview img');
1111

1212
let currentScale = MAX_SCALE;
1313
const initImageScale = () => {
14-
scaleSmallerBtn.addEventListener('click', () => {
14+
scaleSmaller.addEventListener('click', () => {
1515
if (currentScale > MIN_SCALE) {
1616
currentScale -= SCALE_STEP;
1717
scaleControlValue.value = `${currentScale}%`;
1818
uploadedImage.style.transform = `scale(${currentScale / PERCENT_DIVIDER})`;
1919
}
2020
});
2121

22-
scaleBiggerBtn.addEventListener('click', () => {
22+
scaleBigger.addEventListener('click', () => {
2323
if (currentScale < MAX_SCALE) {
2424
currentScale += SCALE_STEP;
2525
scaleControlValue.value = `${currentScale}%`;

‎js/modal.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import { isEscapeKey } from './helpers.js';
2-
let currentHandler = null;
2+
let onDocumentKeydown = null;
33

44
export const closeModal = (modalElement, bodyElement, onClose = null) => {
55
modalElement.classList.add('hidden');
66
bodyElement.classList.remove('modal-open');
7-
document.removeEventListener('keydown', currentHandler);
7+
document.removeEventListener('keydown', onDocumentKeydown);
88

99
if (onClose) {
1010
onClose();
1111
}
1212
};
1313
export const openModal = (modalElement, bodyElement, onClose = null) => {
14-
currentHandler = (evt) => {
14+
onDocumentKeydown = (evt) => {
1515
if (isEscapeKey(evt)) {
1616
evt.preventDefault();
1717
closeModal(modalElement, bodyElement, onClose);
1818
}
1919
};
2020
modalElement.classList.remove('hidden');
2121
bodyElement.classList.add('modal-open');
22-
document.addEventListener('keydown', currentHandler);
22+
document.addEventListener('keydown', onDocumentKeydown);
2323
};

‎js/notifications.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,35 @@ const showDataError = () => {
1313
}, ERROR_SHOW_TIME);
1414
};
1515
const showMessage = (templateId, buttonClass) => {
16-
let handleEscape = null;
17-
let handleOutsideClick = null;
16+
let onDocumentKeydown = null;
17+
let onMessageDivClick = null;
1818

1919
const template = document.querySelector(templateId).content.cloneNode(true);
2020
const messageDiv = template.firstElementChild;
2121
const messageButton = messageDiv.querySelector(buttonClass);
2222
body.append(template);
2323

24-
const closeMessage = () => {
24+
const onMessageButtonClick = () => {
2525
messageDiv.remove();
26-
document.removeEventListener('keydown', handleEscape, true);
27-
messageDiv.removeEventListener('click', handleOutsideClick);
26+
document.removeEventListener('keydown', onDocumentKeydown, true);
27+
messageDiv.removeEventListener('click', onMessageDivClick);
2828
};
2929

30-
handleEscape = (evt) => {
30+
onDocumentKeydown = (evt) => {
3131
evt.stopPropagation();
3232
if (isEscapeKey(evt)) {
33-
closeMessage();
33+
onMessageButtonClick();
3434
}
3535
};
3636

37-
handleOutsideClick = (evt) => {
37+
onMessageDivClick = (evt) => {
3838
if (evt.target === messageDiv) {
39-
closeMessage();
39+
onMessageButtonClick();
4040
}
4141
};
42-
messageButton.addEventListener('click', closeMessage);
43-
document.addEventListener('keydown', handleEscape, true);
44-
messageDiv.addEventListener('click', handleOutsideClick);
42+
messageButton.addEventListener('click', onMessageButtonClick);
43+
document.addEventListener('keydown', onDocumentKeydown, true);
44+
messageDiv.addEventListener('click', onMessageDivClick);
4545
};
4646

4747
const showSuccessMessage = () => showMessage('#success', '.success__button');

‎js/photos-filters.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const filtersBlock = document.querySelector('.img-filters');
2-
const filterDefaultBtn = document.querySelector('#filter-default');
3-
const filterRandomBtn = document.querySelector('#filter-random');
4-
const filterDiscussedBtn = document.querySelector('#filter-discussed');
2+
const filterDefault = document.querySelector('#filter-default');
3+
const filterRandom = document.querySelector('#filter-random');
4+
const filterDiscussed = document.querySelector('#filter-discussed');
55

66
const showFilters = () => {
77
filtersBlock.classList.remove('img-filters--inactive');
@@ -16,23 +16,25 @@ const toggleActiveBtn = (btnClicked, activeClass) => {
1616
void btnClicked.offsetWidth;
1717
};
1818
const initPhotosFiltering = (photos, onRender) => {
19-
20-
filterDefaultBtn.addEventListener('click', () => {
21-
toggleActiveBtn(filterDefaultBtn, 'img-filters__button--active');
19+
const onFilterDefaultClick = () => {
20+
toggleActiveBtn(filterDefault, 'img-filters__button--active');
2221
onRender(photos);
23-
});
22+
};
2423

25-
filterRandomBtn.addEventListener('click', () => {
26-
toggleActiveBtn(filterRandomBtn, 'img-filters__button--active');
24+
const onFilterRandomClick = () => {
25+
toggleActiveBtn(filterRandom, 'img-filters__button--active');
2726
const randomPhotos = photos.slice().sort(() => 0.5 - Math.random()).slice(0, 10);
2827
onRender(randomPhotos);
29-
});
28+
};
3029

31-
filterDiscussedBtn.addEventListener('click', () => {
32-
toggleActiveBtn(filterDiscussedBtn, 'img-filters__button--active');
30+
const onFilterDiscussedClick = () => {
31+
toggleActiveBtn(filterDiscussed, 'img-filters__button--active');
3332
const discussedPhotos = photos.slice().sort((a, b) => b.comments.length - a.comments.length);
3433
onRender(discussedPhotos);
35-
});
36-
};
34+
};
3735

36+
filterDefault.addEventListener('click', onFilterDefaultClick);
37+
filterRandom.addEventListener('click', onFilterRandomClick);
38+
filterDiscussed.addEventListener('click', onFilterDiscussedClick);
39+
};
3840
export { showFilters, initPhotosFiltering };

‎js/show-full-photo.js‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import { closeModal, openModal } from './modal.js';
2-
import { paginateComments } from './comments.js';
2+
import { COMMENTS_PER_PAGE, paginateComments } from './comments.js';
33

44
const fullPhotoModal = document.querySelector('.big-picture');
55
const body = document.querySelector('body');
6-
const closeModalButton = document.querySelector('.big-picture__cancel');
6+
const closeButton = document.querySelector('.big-picture__cancel');
77
const comments = document.querySelector('.social__comments');
88
const pictureContainer = document.querySelector('.pictures');
9+
const fullPhotoImage = document.querySelector('.big-picture__img img');
10+
const fullPhotoDescription = document.querySelector('.social__caption');
11+
const fullPhotoLikes = document.querySelector('.likes-count');
12+
const commentsCount = document.querySelector('.social__comment-total-count');
13+
const commentsLoader = document.querySelector('.comments-loader');
14+
const shownCommentsCount = document.querySelector('.social__comment-shown-count');
915

10-
const fillPhotoData = (currentPhoto) => {
11-
const fullPhotoImage = document.querySelector('.big-picture__img img');
12-
const fullPhotoDescription = document.querySelector('.social__caption');
13-
const fullPhotoLikes = document.querySelector('.likes-count');
14-
const commentsCount = document.querySelector('.social__comment-total-count');
16+
let currentCommentsHandler = null;
1517

18+
const fillPhotoData = (currentPhoto) => {
1619
fullPhotoImage.src = currentPhoto.url;
1720
fullPhotoImage.alt = currentPhoto.description;
1821
fullPhotoLikes.textContent = currentPhoto.likes;
@@ -22,10 +25,7 @@ const fillPhotoData = (currentPhoto) => {
2225
};
2326

2427
export const showFullPhoto = (photos) => {
25-
const commentsLoaderBtn = document.querySelector('.comments-loader');
26-
const shownCommentsCount = document.querySelector('.social__comment-shown-count');
27-
28-
pictureContainer.addEventListener('click', (evt) => {
28+
const onPictureContainerClick = (evt) => {
2929
const thumbnail = evt.target.closest('.picture');
3030
if (!thumbnail) {
3131
return;
@@ -36,16 +36,23 @@ export const showFullPhoto = (photos) => {
3636
const currentPhoto = photos.find((photo) => photo.id === photoId);
3737
fillPhotoData(currentPhoto);
3838

39-
commentsLoaderBtn.classList.toggle('hidden', currentPhoto.comments.length <= 5);
39+
commentsLoader.classList.toggle('hidden', currentPhoto.comments.length <= COMMENTS_PER_PAGE);
4040
const pagination = paginateComments(currentPhoto.comments, comments);
4141
shownCommentsCount.textContent = pagination.getShownCount();
4242

43-
commentsLoaderBtn.onclick = () => {
43+
const onCommentsLoaderClick = () => {
4444
pagination.loadMore();
4545
shownCommentsCount.textContent = pagination.getShownCount();
46-
commentsLoaderBtn.classList.toggle('hidden', pagination.getShownCount() >= currentPhoto.comments.length);
46+
commentsLoader.classList.toggle('hidden', pagination.getShownCount() >= currentPhoto.comments.length);
4747
};
48-
});
49-
50-
closeModalButton.addEventListener('click', () => closeModal(fullPhotoModal, body));
48+
if (currentCommentsHandler) {
49+
commentsLoader.removeEventListener('click', currentCommentsHandler);
50+
currentCommentsHandler = null;
51+
}
52+
currentCommentsHandler = onCommentsLoaderClick;
53+
commentsLoader.addEventListener('click', onCommentsLoaderClick);
54+
};
55+
pictureContainer.addEventListener('click', onPictureContainerClick);
56+
const onCloseModalButtonClick = () => closeModal(fullPhotoModal, body);
57+
closeButton.addEventListener('click', onCloseModalButtonClick);
5158
};

‎js/thumbnails.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
const photoTemplate = document.querySelector('#picture').content;
2+
const photoContainer = document.querySelector('.pictures');
13
export const renderThumbnails = (photos) => {
2-
const photoTemplate = document.querySelector('#picture').content;
3-
const photoContainer = document.querySelector('.pictures');
4-
54
const renderPhoto = (element) => {
65
const newPhotoTemplate = photoTemplate.cloneNode(true);
76
const link = newPhotoTemplate.querySelector('a');

0 commit comments

Comments
 (0)