Skip to content

Commit b7db621

Browse files
stakeoutstakeout
authored
Merge pull request #17 from Julyova/master
вносит правки после код-ревью и теста
2 parents 4555970 + 5241475 commit b7db621

11 files changed

Lines changed: 111 additions & 54 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ node_modules/
1010
npm-debug.log*
1111
Thumbs.db
1212
.vscode/
13+
js1-kekstagram-e2e/

‎index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1">
77
<link rel="stylesheet" href="css/normalize.css">
88
<link rel="stylesheet" href="css/style.css">
9+
<link rel="stylesheet" href="vendor/nouislider/nouislider.css">
10+
<script src="vendor/nouislider/nouislider.js"></script>
11+
<script src="vendor/pristine/pristine.min.js"></script>
912
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
1013
<title>Кекстаграм</title>
1114
</head>
@@ -235,11 +238,8 @@ <h2 class="data-error__title">Не удалось загрузить данны
235238
</section>
236239
</template>
237240

238-
<link rel="stylesheet" href="vendor/nouislider/nouislider.css">
239-
<script src="vendor/nouislider/nouislider.min.js"></script>
240-
<script src="vendor/pristine/pristine.min.js"></script>
241-
<script type="module" src="js/main.js"></script>
242-
<script type="module" src="js/functions.js"></script>
241+
<script defer type="module" src="js/main.js"></script>
242+
<script defer type="module" src="js/functions.js"></script>
243243

244244
</body>
245245

‎js/api.js‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,45 @@
1-
const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
1+
const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram/';
22

33
const getData = () =>
4-
fetch(`${BASE_URL}/data`)
5-
.then((response) => {
6-
if (!response.ok) {
7-
throw new Error('Не удалось загрузить данные');
4+
new Promise((resolve, reject) => {
5+
const xhr = new XMLHttpRequest();
6+
xhr.open('GET', `${BASE_URL}/data`);
7+
xhr.addEventListener('load', () => {
8+
if (xhr.status === 200) {
9+
try {
10+
resolve(JSON.parse(xhr.response));
11+
} catch (e) {
12+
reject(new Error('Не удалось загрузить данные'));
13+
}
14+
} else {
15+
reject(new Error('Не удалось загрузить данные'));
816
}
9-
return response.json();
1017
});
18+
xhr.addEventListener('error', () => {
19+
reject(new Error('Не удалось загрузить данные'));
20+
});
21+
xhr.send();
22+
});
1123

1224
const sendData = (formData) =>
13-
fetch(BASE_URL, {
14-
method: 'POST',
15-
body: formData,
16-
})
17-
.then((response) => {
18-
if (!response.ok) {
19-
throw new Error('Не удалось отправить данные');
25+
new Promise((resolve, reject) => {
26+
const xhr = new XMLHttpRequest();
27+
xhr.open('POST', BASE_URL);
28+
xhr.addEventListener('load', () => {
29+
if (xhr.status === 200) {
30+
try {
31+
resolve(JSON.parse(xhr.response));
32+
} catch (e) {
33+
reject(new Error('Не удалось отправить данные'));
34+
}
35+
} else {
36+
reject(new Error('Не удалось отправить данные'));
2037
}
21-
return response.json();
2238
});
39+
xhr.addEventListener('error', () => {
40+
reject(new Error('Не удалось отправить данные'));
41+
});
42+
xhr.send(formData);
43+
});
2344

2445
export { getData, sendData };

‎js/debounce.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const debounce = (callback, timeoutDelay = DEBOUNCE_DELAY) => {
55

66
return (...rest) => {
77
clearTimeout(timeoutId);
8-
timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
8+
timeoutId = setTimeout(() => callback(...rest), timeoutDelay);
99
};
1010
};
1111

‎js/effect.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const effectLevelValue = document.querySelector('.effect-level__value');
33
const effectsRadioList = document.querySelectorAll('.effects__radio');
44
const imgUploadPreview = document.querySelector('.img-upload__preview img');
55
const effectLevelContainer = document.querySelector('.img-upload__effect-level');
6+
const effectsPreviewList = document.querySelectorAll('.effects__preview');
67

78
const EFFECTS = {
89
none: {
@@ -77,7 +78,7 @@ const applyEffect = (value) => {
7778

7879
const onSliderUpdate = () => {
7980
const value = effectLevelSlider.noUiSlider.get();
80-
effectLevelValue.value = value;
81+
effectLevelValue.value = parseFloat(value);
8182
applyEffect(value);
8283
};
8384

@@ -92,6 +93,13 @@ const resetEffect = () => {
9293
document.querySelector('#effect-none').checked = true;
9394
imgUploadPreview.style.filter = '';
9495
effectLevelContainer.classList.add('hidden');
96+
updateSliderOptions(EFFECTS['none']);
97+
};
98+
99+
const updateEffectsPreview = (imageUrl) => {
100+
effectsPreviewList.forEach((preview) => {
101+
preview.style.backgroundImage = `url('${imageUrl}')`;
102+
});
95103
};
96104

97105
const initEffect = () => {
@@ -114,4 +122,4 @@ const initEffect = () => {
114122
effectLevelContainer.classList.add('hidden');
115123
};
116124

117-
export { initEffect, resetEffect };
125+
export { initEffect, resetEffect, updateEffectsPreview };

‎js/filters.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,17 @@ const FilterType = {
1515
let currentFilter = FilterType.DEFAULT;
1616
let pictures = [];
1717

18-
const getRandomPictures = (data) => {
19-
const shuffled = [...data].sort(() => Math.random() - 0.5);
20-
return shuffled.slice(0, RANDOM_PICTURES_COUNT);
18+
const shuffleArray = (array) => {
19+
const shuffled = [...array];
20+
for (let i = shuffled.length - 1; i > 0; i--) {
21+
const j = Math.floor(Math.random() * (i + 1));
22+
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
23+
}
24+
return shuffled;
2125
};
2226

27+
const getRandomPictures = (data) => shuffleArray(data).slice(0, RANDOM_PICTURES_COUNT);
28+
2329
const getDiscussedPictures = (data) =>
2430
[...data].sort((a, b) => b.comments.length - a.comments.length);
2531

‎js/form-upload.js‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { initScale, resetScale } from './scale.js';
2-
import { initEffect, resetEffect } from './effect.js';
2+
import { initEffect, resetEffect, updateEffectsPreview } from './effect.js';
33
import { sendData } from './api.js';
44
import { showSuccessMessage, showErrorMessage } from './messages.js';
55

@@ -16,7 +16,7 @@ const DEFAULT_PREVIEW_SRC = 'img/upload-default-image.jpg';
1616

1717
const MAX_HASHTAGS = 5;
1818
const MAX_HASHTAG_LENGTH = 20;
19-
const VALID_HASHTAG_REGEX = /^#[a-яёa-z0-9]{1,19}$/i;
19+
const VALID_HASHTAG_REGEX = /^#[a-яёa-z0-9]{1,19}$/iu;
2020

2121
const pristine = new Pristine(uploadForm, {
2222
classTo: 'img-upload__field-wrapper',
@@ -87,28 +87,43 @@ const getHashtagErrorMessage = (value) => {
8787

8888
const validateDescription = (value) => value.length <= 140;
8989

90-
pristine.addValidator(hashtagsInput, validateHashtags, getHashtagErrorMessage);
91-
pristine.addValidator(descriptionInput, validateDescription, 'Комментарий не должен быть длинее 140 символов');
92-
93-
const openForm = () => {
94-
uploadOverlay.classList.remove('hidden');
95-
document.body.classList.add('modal-open');
96-
};
97-
98-
const closeForm = () => {
90+
function closeForm() {
9991
uploadOverlay.classList.add('hidden');
10092
document.body.classList.remove('modal-open');
93+
document.removeEventListener('keydown', onDocumentKeydown);
10194
uploadForm.reset();
10295
pristine.reset();
10396
resetScale();
10497
resetEffect();
10598
imgUploadPreview.src = DEFAULT_PREVIEW_SRC;
99+
}
100+
101+
function onDocumentKeydown(evt) {
102+
if (evt.key === 'Escape' && !uploadOverlay.classList.contains('hidden')) {
103+
const activeElement = document.activeElement;
104+
const isErrorMessageOpen = document.querySelector('.error');
105+
const isSuccessMessageOpen = document.querySelector('.success');
106+
if (activeElement !== hashtagsInput && activeElement !== descriptionInput && !isErrorMessageOpen && !isSuccessMessageOpen) {
107+
closeForm();
108+
}
109+
}
110+
}
111+
112+
const openForm = () => {
113+
uploadOverlay.classList.remove('hidden');
114+
document.body.classList.add('modal-open');
115+
document.addEventListener('keydown', onDocumentKeydown);
106116
};
107117

118+
pristine.addValidator(hashtagsInput, validateHashtags, getHashtagErrorMessage);
119+
pristine.addValidator(descriptionInput, validateDescription, 'Комментарий не должен быть длинее 140 символов');
120+
108121
const onUploadFileInputChange = () => {
109122
const file = uploadFileInput.files[0];
110123
if (file) {
111-
imgUploadPreview.src = URL.createObjectURL(file);
124+
const imageUrl = URL.createObjectURL(file);
125+
imgUploadPreview.src = imageUrl;
126+
updateEffectsPreview(imageUrl);
112127
}
113128
openForm();
114129
};
@@ -143,22 +158,12 @@ const onUploadFormSubmit = (evt) => {
143158
}
144159
};
145160

146-
const onDocumentKeydown = (evt) => {
147-
if (evt.key === 'Escape' && !uploadOverlay.classList.contains('hidden')) {
148-
const activeElement = document.activeElement;
149-
if (activeElement !== hashtagsInput && activeElement !== descriptionInput) {
150-
closeForm();
151-
}
152-
}
153-
};
154-
155161
const initFormUpload = () => {
156162
initScale();
157163
initEffect();
158164
uploadFileInput.addEventListener('change', onUploadFileInputChange);
159165
uploadCancel.addEventListener('click', onUploadCancelClick);
160166
uploadForm.addEventListener('submit', onUploadFormSubmit);
161-
document.addEventListener('keydown', onDocumentKeydown);
162167
};
163168

164169
export { initFormUpload };

‎js/main.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* eslint-disable no-console */
2-
31
import { renderPictures } from './pictures.js';
42
import { initBigPictureHandlers } from './big-picture.js';
53
import { initFormUpload } from './form-upload.js';

‎js/messages.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,11 @@ const showErrorMessage = () => {
6262
};
6363

6464
const showDataError = () => {
65-
const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
65+
const dataErrorTemplate = document.querySelector('#data-error').content;
6666
const dataErrorElement = dataErrorTemplate.cloneNode(true);
67-
6867
document.body.appendChild(dataErrorElement);
69-
7068
setTimeout(() => {
71-
dataErrorElement.remove();
69+
document.querySelector('.data-error').remove();
7270
}, DATA_ERROR_SHOW_TIME);
7371
};
7472

‎js/scale.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const SCALE_MAX = 100;
99
const SCALE_DEFAULT = 100;
1010

1111
let currentScale = SCALE_DEFAULT;
12+
let isInitialized = false;
1213

1314
const updateScale = () => {
1415
scaleControlValue.value = `${currentScale}%`;
@@ -35,8 +36,12 @@ const resetScale = () => {
3536
};
3637

3738
const initScale = () => {
39+
if (isInitialized) {
40+
return;
41+
}
3842
scaleControlSmaller.addEventListener('click', onScaleSmallerClick);
3943
scaleControlBigger.addEventListener('click', onScaleBiggerClick);
44+
isInitialized = true;
4045
};
4146

4247
export { initScale, resetScale };

0 commit comments

Comments
 (0)