Skip to content

Commit 8ee63b8

Browse files
keksobotkeksobot
authored
Merge pull request #13 from YouAreNotReady/module12-task1
2 parents add73f7 + c7c95ca commit 8ee63b8

14 files changed

+236
-148
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
3535

3636
<!-- Изначальное состояние поля для загрузки изображения -->
3737
<fieldset class="img-upload__start">
38-
<input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" required>
38+
<input type="file" id="upload-file" class="img-upload__input visually-hidden" accept="image/png, image/jpeg" name="filename" required>
3939
<label for="upload-file" class="img-upload__label img-upload__control">Загрузить</label>
4040
</fieldset>
4141

‎js/api.js

+54-33
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,92 @@
1-
import { uploadFormCloseHandler } from './image-upload.js';
1+
import { uploadFormCloseHandler, documentKeydownHandler } from './image-upload.js';
22
import { unblockSubmitButton } from './image-upload.js';
3+
import { isEscapeKey } from './util.js';
34

4-
const dataErrorTemplateNode = document.querySelector('#data-error').content.querySelector('.data-error');
5-
const successTemplateNode = document.querySelector('#success').content.querySelector('.success');
6-
const errorTemplateNode = document.querySelector('#error').content.querySelector('.error');
75
const ERROR_TIMEOUT_MS = 5000;
86
const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
97
const Route = {
108
GET_DATA: '/data',
119
SEND_DATA: '/',
1210
};
1311

12+
const dataErrorTemplateNode = document.querySelector('#data-error').content.querySelector('.data-error');
13+
const successTemplateNode = document.querySelector('#success').content.querySelector('.success');
14+
const errorTemplateNode = document.querySelector('#error').content.querySelector('.error');
15+
const errorMessage = errorTemplateNode.cloneNode(true);
16+
const successMessage = successTemplateNode.cloneNode(true);
17+
1418
const showError = () => {
15-
const errorMessage = dataErrorTemplateNode.cloneNode(true);
16-
document.body.appendChild(errorMessage);
19+
const errorMessageNode = dataErrorTemplateNode.cloneNode(true);
20+
document.body.appendChild(errorMessageNode);
1721
setTimeout(() => {
18-
errorMessage.remove();
22+
errorMessageNode.remove();
1923
}, ERROR_TIMEOUT_MS);
2024
};
2125

26+
27+
const onSuccessMessageKeydown = (evt) => {
28+
if (isEscapeKey(evt)) {
29+
evt.preventDefault();
30+
successMessageCloseHandler();
31+
successMessage.removeEventListener('click', successMessageCloseHandler);
32+
}
33+
};
34+
35+
function successMessageCloseHandler() {
36+
successMessage.remove();
37+
document.removeEventListener('keydown', onSuccessMessageKeydown);
38+
}
39+
2240
const uploadSuccessful = () => {
23-
const successMessage = successTemplateNode.cloneNode(true);
2441
document.body.appendChild(successMessage);
42+
document.addEventListener('keydown', onSuccessMessageKeydown);
2543

26-
const successTemplateNodeClickHandler = (evt) => {
44+
successMessage.addEventListener('click', (evt) => {
2745
if(!evt.target.closest('div') || evt.target.closest('button')) {
28-
successMessage.remove();
29-
document.body.removeEventListener('click', successTemplateNodeClickHandler);
46+
successMessageCloseHandler();
3047
}
31-
};
32-
document.body.addEventListener('click', successTemplateNodeClickHandler);
48+
});
3349

3450
uploadFormCloseHandler();
3551
};
3652

53+
const errorMessageCloseHandler = () => {
54+
errorMessage.remove();
55+
document.removeEventListener('keydown', errorMessageCloseHandler);
56+
document.addEventListener('keydown', documentKeydownHandler);
57+
};
58+
59+
const errorMessageKeydown = (evt) => {
60+
if (isEscapeKey(evt)) {
61+
evt.preventDefault();
62+
errorMessageCloseHandler();
63+
errorMessage.removeEventListener('click', errorMessageCloseHandler);
64+
}
65+
};
66+
3767
const uploadError = () => {
38-
const errorMessage = errorTemplateNode.cloneNode(true);
3968
document.body.appendChild(errorMessage);
69+
document.removeEventListener('keydown', documentKeydownHandler);
70+
document.addEventListener('keydown', errorMessageKeydown);
4071

41-
const errorTemplateNodeClickHandler = (evt) => {
72+
errorMessage.addEventListener('click', (evt) => {
4273
if(!evt.target.closest('div') || evt.target.closest('button')) {
43-
errorMessage.remove();
44-
document.body.removeEventListener('click', errorTemplateNodeClickHandler);
74+
errorMessageCloseHandler();
4575
}
46-
};
47-
48-
document.body.addEventListener('click', errorTemplateNodeClickHandler);
49-
50-
uploadFormCloseHandler(true);
76+
});
5177
};
5278

53-
const loadData = (onSuccess) => {
79+
const loadData = () =>
5480
fetch(`${BASE_URL}${Route.GET_DATA}`)
5581
.then((response) => {
5682
if(!response.ok) {
5783
throw new Error();
5884
}
5985
return response.json();
6086
})
61-
.then(
62-
(picturesObjects) => {
63-
onSuccess(picturesObjects);
64-
}
65-
)
66-
.catch(showError);
67-
};
87+
.catch(() => {
88+
showError();
89+
});
6890

6991
const uploadData = (body) => {
7092
fetch(
@@ -77,10 +99,9 @@ const uploadData = (body) => {
7799
if(!response.ok) {
78100
throw new Error();
79101
}
80-
81-
return uploadSuccessful();
102+
uploadSuccessful();
82103
}).catch(uploadError)
83104
.finally(unblockSubmitButton);
84105
};
85106

86-
export { loadData, uploadData };
107+
export { loadData, uploadData, showError };

‎js/comment-validation.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
const validateComment = (value) => value.length <= 140;
2-
const validateCommentError = 'Длина комментария не может составлять больше 140 символов';
2+
const validationCommentError = 'Длина комментария не может составлять больше 140 символов';
33

4-
export { validateComment, validateCommentError };
4+
export { validateComment, validationCommentError };

‎js/comments-loader.js

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1+
const SHOW_COMMENTS_STEP = 5;
2+
13
const commentsList = document.querySelector('.social__comments');
24
const commentTemplate = commentsList.querySelector('li');
35
const pictureShownComments = document.querySelector('.social__comment-shown-count');
46
const pictureTotalComments = document.querySelector('.social__comment-total-count');
57
const commentsShowMoreButton = document.querySelector('.comments-loader');
68
let currentComments = [];
79
let currentCommentsCount = 0;
8-
const SHOW_COMMENTS_STEP = 5;
910

1011
const loadComment = (avatarSrc, author, message) => {
11-
const newComment = commentTemplate.cloneNode(true);
12+
const comment = commentTemplate.cloneNode(true);
13+
const commentPicture = comment.querySelector('.social__picture');
14+
const commentText = comment.querySelector('.social__text');
1215

13-
newComment.querySelector('.social__picture').src = avatarSrc;
14-
newComment.querySelector('.social__picture').alt = author;
15-
newComment.querySelector('.social__text').textContent = message;
16+
commentPicture.src = avatarSrc;
17+
commentPicture.alt = author;
18+
commentText.textContent = message;
1619

17-
commentsList.appendChild(newComment);
20+
commentsList.appendChild(comment);
1821
};
1922

2023
const showNextComments = () => {

‎js/functions.js

-32
This file was deleted.

‎js/hashtag-validation.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
const hashtag = /^#[a-zа-яё0-9]{1,19}$/i;
22

33
const validateHashtag = (value) => {
4-
const hashtagArray = value.split(' ');
4+
const hashtagArray = value.split(/\s+/);
55
return hashtagArray.every((el) => hashtag.test(el));
66
};
77

88
const checkForRepeatingHashtag = (value) => {
9-
const hashtagArray = value.toLowerCase().split(' ');
9+
const hashtagArray = value.toLowerCase().split(/\s+/);
1010
const checkSet = new Set(hashtagArray);
1111
return checkSet.size === hashtagArray.length;
1212
};
1313

1414
const checkForHashtagCount = (value) => {
15-
const hashtagArray = value.split(' ');
15+
const hashtagArray = value.split(/\s+/);
1616
return hashtagArray.length <= 5;
1717
};
1818

‎js/image-effect.js

+30-29
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import { imagePreview } from './image-scaling.js';
22

3-
const sliderElementWrapper = document.querySelector('.img-upload__effect-level');
4-
const sliderElement = sliderElementWrapper.querySelector('.effect-level__slider');
5-
const valueElement = document.querySelector('.effect-level__value');
6-
const chromeValue = document.querySelector('#effect-chrome');
7-
const sepiaValue = document.querySelector('#effect-sepia');
8-
const marvinValue = document.querySelector('#effect-marvin');
9-
const phobosValue = document.querySelector('#effect-phobos');
10-
const heatValue = document.querySelector('#effect-heat');
11-
const radioInputElements = document.querySelector('.img-upload__effects');
3+
const sliderNodeWrapper = document.querySelector('.img-upload__effect-level');
4+
const sliderNode = sliderNodeWrapper.querySelector('.effect-level__slider');
5+
const valueNode = document.querySelector('.effect-level__value');
6+
const chromeEffectNode = document.querySelector('#effect-chrome');
7+
const sepiaEffectNode = document.querySelector('#effect-sepia');
8+
const marvinEffectNode = document.querySelector('#effect-marvin');
9+
const phobosEffectNode = document.querySelector('#effect-phobos');
10+
const heatEffectNode = document.querySelector('#effect-heat');
11+
const radioInputSection = document.querySelector('.img-upload__effects');
12+
const effectPreviewElements = radioInputSection.querySelectorAll('.effects__preview');
1213
let currentSliderValue = 0;
1314

14-
sliderElementWrapper.classList.add('hidden');
15+
sliderNodeWrapper.classList.add('hidden');
1516

16-
noUiSlider.create(sliderElement, {
17+
noUiSlider.create(sliderNode, {
1718
range: {
1819
min: 0,
1920
max: 0,
@@ -34,53 +35,53 @@ noUiSlider.create(sliderElement, {
3435
});
3536

3637
const applyFilter = () => {
37-
if (chromeValue.checked) {
38+
if (chromeEffectNode.checked) {
3839
imagePreview.style.filter = `grayscale(${currentSliderValue})`;
39-
} else if (sepiaValue.checked) {
40+
} else if (sepiaEffectNode.checked) {
4041
imagePreview.style.filter = `sepia(${currentSliderValue})`;
41-
} else if (marvinValue.checked) {
42+
} else if (marvinEffectNode.checked) {
4243
imagePreview.style.filter = `invert(${currentSliderValue}%)`;
43-
} else if (phobosValue.checked) {
44+
} else if (phobosEffectNode.checked) {
4445
imagePreview.style.filter = `blur(${currentSliderValue}px)`;
45-
} else if (heatValue.checked) {
46+
} else if (heatEffectNode.checked) {
4647
imagePreview.style.filter = `brightness(${currentSliderValue})`;
4748
} else {
4849
imagePreview.style.filter = '';
4950
}
5051
};
5152

52-
sliderElement.noUiSlider.on('update', () => {
53-
currentSliderValue = sliderElement.noUiSlider.get();
54-
valueElement.value = currentSliderValue;
53+
sliderNode.noUiSlider.on('update', () => {
54+
currentSliderValue = sliderNode.noUiSlider.get();
55+
valueNode.value = currentSliderValue;
5556
applyFilter();
5657
});
5758

58-
radioInputElements.addEventListener('click', (evt) => {
59+
radioInputSection.addEventListener('click', (evt) => {
5960
if (evt.target.matches('input[type="radio"]')) {
6061
let options = {};
61-
sliderElementWrapper.classList.remove('hidden');
62+
sliderNodeWrapper.classList.remove('hidden');
6263
switch (evt.target) {
63-
case chromeValue:
64-
case sepiaValue:
64+
case chromeEffectNode:
65+
case sepiaEffectNode:
6566
options = { range: { min: 0, max: 1 }, start: 1, step: 0.1 };
6667
break;
67-
case marvinValue:
68+
case marvinEffectNode:
6869
options = { range: { min: 0, max: 100 }, start: 100, step: 1 };
6970
break;
70-
case phobosValue:
71+
case phobosEffectNode:
7172
options = { range: { min: 0, max: 3 }, start: 3, step: 0.1 };
7273
break;
73-
case heatValue:
74+
case heatEffectNode:
7475
options = { range: { min: 1, max: 3 }, start: 3, step: 0.1 };
7576
break;
7677
default:
7778
options = { range: { min: 0, max: 0 }, start: 0};
7879
applyFilter();
79-
sliderElementWrapper.classList.add('hidden');
80+
sliderNodeWrapper.classList.add('hidden');
8081
}
8182

82-
sliderElement.noUiSlider.updateOptions(options);
83+
sliderNode.noUiSlider.updateOptions(options);
8384
}
8485
});
8586

86-
export { sliderElementWrapper };
87+
export { sliderNodeWrapper, effectPreviewElements };

0 commit comments

Comments
 (0)