Skip to content

Commit 224e4d9

Browse files
keksobotkeksobot
authored
Merge pull request #10 from bearBenjamin/module9-task2
2 parents f09fadc + 03bd0d1 commit 224e4d9

File tree

9 files changed

+275
-120
lines changed

9 files changed

+275
-120
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="stylesheet" href="vendor/nouislider/nouislider.css">
67
<link rel="stylesheet" href="css/normalize.css">
78
<link rel="stylesheet" href="css/style.css">
89
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
@@ -240,6 +241,7 @@ <h2 class="success__title">Изображение успешно загруже
240241
<h2 class="data-error__title">Не удалось загрузить данные</h2>
241242
</section>
242243
</template>
244+
<script src="vendor/nouislider/nouislider.js"></script>
243245
<script src="vendor/pristine/pristine.min.js"></script>
244246
<script src="js/main.js" type="module"></script>
245247

‎js/data.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const parameter = {
7676
descriptions: DESCRIPTIONS,
7777
};
7878

79-
function getComments (commentsSum, idComments, avatarStartNum, avatarEndNum, message, name) {
79+
const getComments = (commentsSum, idComments, avatarStartNum, avatarEndNum, message, name) => {
8080
const comments = Array.from({ length: commentsSum }, () => {
8181
const uniqueCommentId = idComments.pop();
8282
return {
@@ -87,9 +87,9 @@ function getComments (commentsSum, idComments, avatarStartNum, avatarEndNum, mes
8787
};
8888
});
8989
return comments;
90-
}
90+
};
9191

92-
function getDataPhotos (parametres) {
92+
const getDataPhotos = (parametres) => {
9393
const {
9494
lengthArr,
9595
avatarStartNum,
@@ -128,7 +128,7 @@ function getDataPhotos (parametres) {
128128
});
129129

130130
return photoDatas;
131-
}
131+
};
132132

133133

134134
export const dataPhotos = getDataPhotos(parameter);

‎js/form.js‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { isEscapeKey, isHashtag, isDubleHashtags, isLengthHashtags, isCommentLength } from './utils';
1+
import { isEscapeKey, isHashtag, isDubleHashtags, isLengthHashtags, isCommentLength } from './utils.js';
2+
import { initScale } from './scalle-photo.js';
3+
import { initSlaider } from './slider-effects.js';
24

35
const formLoad = document.querySelector('#upload-select-image');
46

57
const loadFile = formLoad.querySelector('#upload-file');
68
const modalEditing = formLoad.querySelector('.img-upload__overlay');
79

8-
const fieldScaleControl = formLoad.querySelector('.scale__control--value');
9-
const fieldEffectPhoto = formLoad.querySelector('.effect-level__value');
1010
const fieldHashtag = formLoad.querySelector('.text__hashtags');
1111
const fieldDescription = formLoad.querySelector('.text__description');
1212

@@ -22,26 +22,20 @@ const pristine = new Pristine(formLoad, {
2222
});
2323

2424
pristine.addValidator(fieldHashtag, isHashtag, 'Неверный хэш-тег', 1, false);
25-
pristine.addValidator(fieldHashtag, isDubleHashtags, 'Хэш-теги не дублируются', 2, false);
25+
pristine.addValidator(fieldHashtag, isDubleHashtags, 'Хэш-теги дублируются', 2, false);
2626
pristine.addValidator(fieldHashtag, isLengthHashtags, 'Не более пяти хэш-тегов', 3, false);
2727

2828
pristine.addValidator(fieldDescription, isCommentLength, false);
2929

30-
export function sendData() {
31-
loadFile.addEventListener('change', handleChangeField);
32-
33-
formLoad.addEventListener('submit', (evt) => {
34-
const isValid = pristine.validate();
35-
36-
if (!isValid) {
37-
evt.preventDefault();
38-
}
39-
});
40-
41-
btnCloseForm.addEventListener('click', closeModalEditing);
42-
}
30+
const showModalEditing = () => {
31+
modalEditing.classList.remove('hidden');
32+
document.body.classList.add('modal-open');
33+
initScale();
34+
initSlaider();
35+
document.addEventListener('keydown', onModalEditingEscKeydown);
36+
};
4337

44-
function handleChangeField(evt) {
38+
const handleChangeField = (evt) => {
4539
evt.preventDefault();
4640

4741
/* const file = evt.target.files[0];
@@ -62,27 +56,33 @@ function handleChangeField(evt) {
6256
} */
6357

6458
showModalEditing();
65-
}
59+
};
6660

67-
function showModalEditing () {
68-
modalEditing.classList.remove('hidden');
69-
document.body.classList.add('modal-open');
70-
document.addEventListener('keydown', onModalEditingEscKeydown);
71-
}
72-
73-
function closeModalEditing () {
74-
loadFile.value = '';
75-
fieldScaleControl.value = '100%';
76-
fieldEffectPhoto.value = '';
77-
fieldHashtag.value = '';
78-
fieldDescription.value = '';
61+
const closeModalEditing = () => {
62+
formLoad.reset();
7963

8064
pristine.reset();
8165

8266
modalEditing.classList.add('hidden');
8367
document.body.classList.remove('modal-open');
8468
document.removeEventListener('keydown', onModalEditingEscKeydown);
85-
}
69+
};
70+
71+
const initForm = () => {
72+
loadFile.addEventListener('change', handleChangeField);
73+
};
74+
75+
const sendData = () => {
76+
formLoad.addEventListener('submit', (evt) => {
77+
const isValid = pristine.validate();
78+
79+
if (!isValid) {
80+
evt.preventDefault();
81+
}
82+
});
83+
84+
btnCloseForm.addEventListener('click', closeModalEditing);
85+
};
8686

8787
function onModalEditingEscKeydown (evt) {
8888
if (fieldHashtag === document.activeElement || fieldDescription === document.activeElement) {
@@ -94,3 +94,5 @@ function onModalEditingEscKeydown (evt) {
9494
closeModalEditing();
9595
}
9696
}
97+
98+
export { initForm, sendData };

‎js/full-photo.js‎

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

3+
const NUMBER_COMMENT = 5;
4+
35
const fullPhotoSection = document.querySelector('.big-picture');
46

57
const fullPhotoContainer = fullPhotoSection.querySelector('.big-picture__img');
@@ -19,53 +21,54 @@ const listComment = fullPhotoSection.querySelector('.social__comments');
1921
const btnLoadComment = fullPhotoSection.querySelector('.comments-loader');
2022
const btnClose = fullPhotoSection.querySelector('.big-picture__cancel');
2123

22-
const NUMBER_COMMENT = 5;
23-
2424
let allComments = [];
2525
let countComment = 0;
2626

27-
export function renderFullPhoto(data) {
28-
const photoContainer = document.querySelector('.pictures');
29-
30-
photoContainer.addEventListener('click', (evt) => {
31-
const photo = evt.target.closest('.picture');
32-
33-
if (photo) {
34-
evt.preventDefault();
35-
const src = photo.querySelector('.picture__img').getAttribute('src');
36-
const dataPhoto = data.find((item) => item.url === src);
37-
38-
const { url, description, like, comments } = dataPhoto;
39-
40-
openModal();
41-
createFullPhoto(url, description, like);
42-
clearComments();
43-
showCommentsPhoto(allComments = comments);
44-
}
45-
46-
// eslint-disable-next-line no-useless-return
47-
return;
48-
});
49-
}
50-
51-
function openModal() {
27+
const openModal = () => {
5228
fullPhotoSection.classList.remove('hidden');
5329
document.body.classList.add('modal-open');
5430

5531
btnClose.addEventListener('click', handleCloseClick);
5632
document.addEventListener('keydown', handleCloseKey);
57-
}
33+
};
5834

59-
function createFullPhoto (url, description, like) {
35+
const createFullPhoto = (url, description, like) => {
6036
fullPhoto.src = url;
6137
fullPhoto.alt = description;
6238

6339
photoAuthor.src = `img/avatar-${getRandomNumber(1, 6)}.svg`;
6440
photoDescription.textContent = description;
6541
photoSumLike.textContent = like;
66-
}
42+
};
43+
44+
const clearComments = () => {
45+
listComment.innerHTML = '';
46+
};
47+
48+
const renderCommentsPhoto = (comments, fragment) => {
49+
comments.forEach((comment) => {
50+
const li = document.createElement('li');
51+
li.classList.add('social__comment');
52+
53+
const img = document.createElement('img');
54+
img.classList.add('social__picture');
55+
img.src = comment.avatar;
56+
img.alt = comment.name;
57+
img.width = 35;
58+
img.height = 35;
59+
li.append(img);
60+
61+
const text = document.createElement('p');
62+
text.classList.add('social__text');
63+
text.textContent = comment.message;
64+
li.append(text);
65+
66+
fragment.append(li);
67+
});
68+
return fragment;
69+
};
6770

68-
function showCommentsPhoto() {
71+
const showCommentsPhoto = () => {
6972
const fragment = document.createDocumentFragment();
7073
const startIndex = countComment;
7174
countComment += NUMBER_COMMENT;
@@ -86,43 +89,40 @@ function showCommentsPhoto() {
8689
const currentComment = renderCommentsPhoto(allComments.slice(startIndex, endIndex), fragment);
8790
listComment.append(currentComment);
8891
}
89-
}
92+
};
9093

91-
function renderCommentsPhoto(comments, fragment) {
92-
comments.forEach((comment) => {
93-
const li = document.createElement('li');
94-
li.classList.add('social__comment');
94+
const renderFullPhoto = (data) => {
95+
const photoContainer = document.querySelector('.pictures');
9596

96-
const img = document.createElement('img');
97-
img.classList.add('social__picture');
98-
img.src = comment.avatar;
99-
img.alt = comment.name;
100-
img.width = 35;
101-
img.height = 35;
102-
li.append(img);
97+
photoContainer.addEventListener('click', (evt) => {
98+
const photo = evt.target.closest('.picture');
10399

104-
const text = document.createElement('p');
105-
text.classList.add('social__text');
106-
text.textContent = comment.message;
107-
li.append(text);
100+
if (photo) {
101+
evt.preventDefault();
102+
const src = photo.querySelector('.picture__img').getAttribute('src');
103+
const dataPhoto = data.find((item) => item.url === src);
108104

109-
fragment.append(li);
110-
});
111-
return fragment;
112-
}
105+
const { url, description, like, comments } = dataPhoto;
113106

114-
function clearComments() {
115-
listComment.innerHTML = '';
116-
}
107+
openModal();
108+
createFullPhoto(url, description, like);
109+
clearComments();
110+
showCommentsPhoto(allComments = comments);
111+
}
117112

118-
function closeModelOpen () {
113+
// eslint-disable-next-line no-useless-return
114+
return;
115+
});
116+
};
117+
118+
const closeModelOpen = () => {
119119
fullPhotoSection.classList.add('hidden');
120120
document.body.classList.remove('modal-open');
121121
btnClose.removeEventListener('click', handleCloseClick); // можно удалить, при закрытии модального окна обработчик все равно удалится
122122
btnLoadComment.removeEventListener('click', handleLoadClick); // можно удалить, при закрытии модального окна обработчик все равно удалится
123123
document.removeEventListener('keydown', handleCloseKey);
124124
countComment = 0;
125-
}
125+
};
126126

127127
function handleLoadClick() {
128128
showCommentsPhoto();
@@ -138,3 +138,5 @@ function handleCloseKey(evt) {
138138
closeModelOpen();
139139
}
140140
}
141+
142+
export { renderFullPhoto };

‎js/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import './utils.js';
2-
import { sendData } from './form.js';
1+
import { initForm, sendData } from './form.js';
32
import { renderPreview } from './preview-photo.js';
43
import { renderFullPhoto } from './full-photo.js';
54
import { dataPhotos } from './data.js';
@@ -8,6 +7,7 @@ import { dataPhotos } from './data.js';
87
const init = () => {
98
renderPreview(dataPhotos);
109
renderFullPhoto(dataPhotos);
10+
initForm();
1111
sendData();
1212
};
1313

‎js/preview-photo.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const containerPreview = document.querySelector('.pictures');
22
const pictureTemplate = document.querySelector('#picture').content;
33
const picturesFragment = document.createDocumentFragment();
44

5-
export const renderPreview = (dataPictures) => {
5+
const renderPreview = (dataPictures) => {
66
dataPictures.forEach((data) => {
77
const { url, description, like, comments } = data;
88

@@ -22,3 +22,5 @@ export const renderPreview = (dataPictures) => {
2222

2323
containerPreview.append(picturesFragment);
2424
};
25+
26+
export { renderPreview };

‎js/scalle-photo.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const DEFAULT_SCALE = 100;
2+
const MIN_SCALE = 25;
3+
const MAX_SCALE = 100;
4+
const STEP_SCALE = 25;
5+
6+
const imgScale = document.querySelector('.img-upload__scale');
7+
8+
const btnSmaller = imgScale.querySelector('.scale__control--smaller');
9+
const btnBigger = imgScale.querySelector('.scale__control--bigger');
10+
const scaleInput = imgScale.querySelector('.scale__control--value');
11+
12+
const previewPhoto = document.querySelector('.img-upload__preview img');
13+
14+
const applyScaleToPhoto = (scaleValue = DEFAULT_SCALE) => {
15+
previewPhoto.setAttribute('style', `transform: scale(${scaleValue / 100})`);
16+
};
17+
18+
const updateScaleInput = (scaleValue = DEFAULT_SCALE) => {
19+
scaleInput.value = `${scaleValue}%`;
20+
};
21+
22+
const handleBtnSmallerClick = () => {
23+
let currentValue = parseInt(scaleInput.value, 10);
24+
currentValue = Math.max(MIN_SCALE, currentValue - STEP_SCALE);
25+
26+
updateScaleInput(currentValue);
27+
applyScaleToPhoto(currentValue);
28+
};
29+
30+
const handleBtnBiggerClick = () => {
31+
let currentValue = parseInt(scaleInput.value, 10);
32+
currentValue = Math.min(MAX_SCALE, currentValue + STEP_SCALE);
33+
34+
updateScaleInput(currentValue);
35+
applyScaleToPhoto(currentValue);
36+
};
37+
38+
btnSmaller.addEventListener('click', handleBtnSmallerClick);
39+
btnBigger.addEventListener('click', handleBtnBiggerClick);
40+
41+
const initScale = () => {
42+
applyScaleToPhoto();
43+
updateScaleInput();
44+
};
45+
46+
export { initScale };

0 commit comments

Comments
 (0)