Skip to content

Commit 6b06504

Browse files
keksobotkeksobot
authored
Merge pull request #12 from Despair322/module12-task2
2 parents 7905ec6 + 1b503a5 commit 6b06504

11 files changed

Lines changed: 76 additions & 85 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
3737

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

@@ -250,7 +250,6 @@ <h2 class="success__title">Изображение успешно загруже
250250
<h2 class="data-error__title">Не удалось загрузить данные</h2>
251251
</section>
252252
</template>
253-
<script src="js/functions.js"></script>
254253
<script src="vendor/pristine/pristine.min.js" type="text/javascript"></script>
255254
<script src="vendor/nouislider/nouislider.js" type="text/javascript"></script>
256255
<script type="module" src="js/main.js"></script>

‎js/filters.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { renderPictures } from './pictures-renderer.js';
21
import { debounce } from './util.js';
32

43
const RANDOM_COUNT = 10;
@@ -9,13 +8,15 @@ const Filters = {
98
'filter-random': (elements) => elements.toSorted(() => Math.random() - 0.5).slice(0, RANDOM_COUNT),
109
'filter-discussed': (elements) => elements.toSorted((a, b) => b.comments - a.comments),
1110
};
12-
const debouncedRenderPictures = debounce(renderPictures, RERENDER_DELAY);
11+
let debouncedRenderPictures;
1312

1413
const filters = document.querySelector('.img-filters');
1514
const filtersForm = filters.querySelector('.img-filters__form');
16-
const buttons = filtersForm.querySelectorAll('.img-filters__button');
1715

18-
const buttonClickHandler = (evt, gallery) => {
16+
const filtersFormClickHandler = (evt, gallery) => {
17+
if(!evt.target.classList.contains('img-filters__button')) {
18+
return;
19+
}
1920
evt.preventDefault();
2021
const targetButton = evt.target;
2122
const activeButton = filtersForm.querySelector(`.${BUTTON_ACTIVE_CLASS}`);
@@ -29,15 +30,14 @@ const buttonClickHandler = (evt, gallery) => {
2930
};
3031

3132
const buttonsAttachHandlers = (gallery) => {
32-
buttons.forEach((button) => {
33-
button.addEventListener('click', (evt) => {
34-
buttonClickHandler(evt, gallery);
35-
});
33+
filtersForm.addEventListener('click', (evt) => {
34+
filtersFormClickHandler(evt, gallery);
3635
});
3736
};
38-
const showFilters = (gallery) => {
37+
const showFilters = (gallery, callback) => {
38+
debouncedRenderPictures = debounce(callback, RERENDER_DELAY);
3939
filters.classList.remove('img-filters--inactive');
4040
buttonsAttachHandlers(gallery);
4141
};
4242

43-
export { showFilters, buttonsAttachHandlers };
43+
export { showFilters };

‎js/form.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { isEscapeKey } from './util.js';
22
import { pristine } from './validator.js';
33
import { sendData } from './api.js';
4-
import './image-editor.js';
54
import { createNotification } from './notification.js';
65
import { editorReset } from './image-editor.js';
76

7+
const FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
88
const SendButtonText = {
99
DEFAULT: 'Опубликовать',
1010
SENDING: 'Публикация...',
@@ -17,6 +17,8 @@ const sendButton = form.querySelector('.img-upload__submit');
1717
const sliderContainer = form.querySelector('.effect-level');
1818
const successTemplate = document.querySelector('#success');
1919
const errorTemplate = document.querySelector('#error');
20+
const uploadPreview = form.querySelector('.img-upload__preview').querySelector('img');
21+
const uploadPreviewEffects = form.querySelectorAll('.effects__preview');
2022

2123
const closeForm = () => {
2224
imgUploadOverlay.classList.add('hidden');
@@ -42,7 +44,20 @@ const closeButtonClickHandler = (evt) => {
4244
closeForm();
4345
};
4446

45-
const imgUploadChangeHandler = () => {
47+
const updatePreview = (target) => {
48+
const file = target.files[0];
49+
if (FILE_TYPES.includes(file.type)) {
50+
const url = URL.createObjectURL(file);
51+
uploadPreview.src = url;
52+
53+
uploadPreviewEffects.forEach((effectPreview) => {
54+
effectPreview.style.backgroundImage = `url(${url})`;
55+
});
56+
}
57+
};
58+
59+
const imgUploadChangeHandler = (evt) => {
60+
updatePreview(evt.target);
4661
imgUploadOverlay.classList.remove('hidden');
4762
body.classList.add('modal-open');
4863
document.addEventListener('keydown', documentKeydownHandler);
@@ -61,9 +76,9 @@ const toggleButtonState = (state) => {
6176
sendButton.textContent = state ? SendButtonText.SENDING : SendButtonText.DEFAULT;
6277
};
6378

64-
const sendFormData = async (formElement) => {
79+
const sendFormData = async () => {
6580
if (pristine.validate()) {
66-
const formData = new FormData(formElement);
81+
const formData = new FormData(form);
6782
toggleButtonState(true);
6883
try {
6984
await sendData(formData);
@@ -78,7 +93,7 @@ const sendFormData = async (formElement) => {
7893

7994
const formSubmitHandler = (evt) => {
8095
evt.preventDefault();
81-
sendFormData(evt.target);
96+
sendFormData();
8297
};
8398

8499
form.querySelector('.img-upload__input').addEventListener('change', imgUploadChangeHandler);

‎js/functions.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎js/image-editor.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ const scaleValue = form.querySelector('.scale__control--value');
4545
const imgPreview = form.querySelector('.img-upload__preview').querySelector('img');
4646

4747
const sliderContainer = form.querySelector('.effect-level');
48-
const sliderElement = sliderContainer.querySelector('.effect-level__slider');
48+
const slider = sliderContainer.querySelector('.effect-level__slider');
4949
const sliderValue = sliderContainer.querySelector('.effect-level__value');
50-
const effectsContainer = form.querySelector('.effects__list');
50+
const effectsContainer = form.querySelector('.effects');
5151
let currentScale = 100;
5252
let currentEffect = 'none';
5353
let currentStyle = 'none';
@@ -56,6 +56,7 @@ sliderContainer.classList.add('hidden');
5656
const editorReset = () => {
5757
currentScale = 100;
5858
imgPreview.style = '';
59+
imgPreview.src = '';
5960
};
6061

6162
const updateScale = (modifier) => {
@@ -78,22 +79,23 @@ const bigBtnClickHandler = () => {
7879
smallBtn.addEventListener('click', smallBtnClickHandler);
7980
bigBtn.addEventListener('click', bigBtnClickHandler);
8081

81-
noUiSlider.create(sliderElement, {
82+
noUiSlider.create(slider, {
8283
range: {
8384
min: 0,
8485
max: 100,
8586
},
8687
start: 100,
8788
step: 1,
89+
connect: 'lower',
8890
format: {
8991
to: (value) => Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1),
9092
from: (value) => parseFloat(value),
9193
},
9294
});
9395

94-
sliderElement.noUiSlider.on('update', () => {
96+
slider.noUiSlider.on('update', () => {
9597
if (currentEffect !== 'none') {
96-
sliderValue.value = sliderElement.noUiSlider.get();
98+
sliderValue.value = slider.noUiSlider.get();
9799
imgPreview.style.filter = `${currentStyle.effect}(${sliderValue.value}${currentStyle.units ?? ''})`;
98100
}
99101
});
@@ -106,14 +108,14 @@ effectsContainer.addEventListener('change', (evt) => {
106108
return;
107109
}
108110
currentStyle = SliderInfo[currentEffect];
109-
sliderElement.noUiSlider.updateOptions({
111+
slider.noUiSlider.updateOptions({
110112
range: {
111113
min: currentStyle.min,
112114
max: currentStyle.max,
113115
},
114116
step: currentStyle.step,
115117
});
116-
sliderElement.noUiSlider.set(currentStyle.max);
118+
slider.noUiSlider.set(currentStyle.max);
117119
sliderContainer.classList.remove('hidden');
118120
});
119121

‎js/main.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// import { createPhotos } from './data.js';
21
import { renderPictures } from './pictures-renderer.js';
32
import { Popup } from './popup.js';
43
import { Gallery } from './gallery.js';
@@ -8,9 +7,9 @@ import { showFilters } from './filters.js';
87
import './form.js';
98

109
try {
11-
const data = await getData();
12-
const gallery = new Gallery(data);
13-
showFilters(gallery);
10+
const photos = await getData();
11+
const gallery = new Gallery(photos);
12+
showFilters(gallery, renderPictures);
1413
renderPictures(gallery);
1514
new Popup(gallery);
1615
} catch (error) {

‎js/notification.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ const body = document.body;
44

55
const closeNotification = (evt) => {
66
evt.stopPropagation();
7-
const element = document.querySelector('.success') || document.querySelector('.error');
8-
const closeButton = element.querySelector('.success__button') || element.querySelector('.error__button');
9-
if (evt.target === element || evt.target === closeButton || isEscapeKey(evt)) {
10-
element.remove();
7+
const notification = document.querySelector('.success') || document.querySelector('.error');
8+
const closeButton = notification.querySelector('.success__button') || notification.querySelector('.error__button');
9+
if (evt.target === notification || evt.target === closeButton || isEscapeKey(evt)) {
10+
notification.remove();
1111
body.removeEventListener('click', bodyClickHandler);
1212
body.removeEventListener('keydown', bodyKeydownHandler);
1313
}

‎js/pictures-renderer.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
1-
21
const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
32
const pictureContainer = document.querySelector('.pictures');
43
let picturesFragment;
5-
const createPictureElement = (photo) => {
6-
const pictureElement = pictureTemplate.cloneNode(true);
7-
const img = pictureElement.querySelector('.picture__img');
4+
const createPicture = (photo) => {
5+
const picture = pictureTemplate.cloneNode(true);
6+
const img = picture.querySelector('.picture__img');
87
img.src = photo.src;
98
img.alt = photo.alt;
10-
pictureElement.querySelector('.picture__comments').textContent = photo.comments;
11-
pictureElement.querySelector('.picture__likes').textContent = photo.likes;
12-
pictureElement.dataset.id = photo.id;
13-
return pictureElement;
9+
picture.querySelector('.picture__comments').textContent = photo.comments;
10+
picture.querySelector('.picture__likes').textContent = photo.likes;
11+
picture.dataset.id = photo.id;
12+
return picture;
1413
};
1514

1615
const createPictures = (photos) => {
1716
const fragment = document.createDocumentFragment();
1817
photos.forEach((photo) => {
19-
const pictureElement = createPictureElement(photo);
20-
fragment.appendChild(pictureElement);
18+
const picture = createPicture(photo);
19+
fragment.appendChild(picture);
2120
});
2221
return fragment;
2322
};

‎js/popup.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,30 @@ class Popup {
1313
this.caption = this.popup.querySelector('.social__caption');
1414
this.commentsContainer = this.popup.querySelector('.social__comments');
1515
this.commentsLoader = this.popup.querySelector('.social__comments-loader');
16+
this.commentTemplate = this.popup.querySelector('.social__comment');
1617
this.closeButton = this.popup.querySelector('.big-picture__cancel');
1718
this.commentsCount = 0;
19+
this.comments = [];
1820
this.photo = {};
1921
this.attachHandlers();
2022
}
2123

22-
comments = [];
23-
24-
createComment = (comment) => `<li class="social__comment"><img class="social__picture" alt="${comment.name}" src="${comment.avatar}"><p class="social__text">${comment.message}</p></li>`;
24+
createComment = (comment) => {
25+
const commentTemplate = this.commentTemplate.cloneNode(true);
26+
const socialPicture = commentTemplate.querySelector('.social__picture');
27+
socialPicture.src = comment.avatar;
28+
socialPicture.alt = comment.name;
29+
commentTemplate.querySelector('.social__text').textContent = comment.message;
30+
return commentTemplate;
31+
};
2532

2633
addComments = () => {
27-
this.commentsContainer.insertAdjacentHTML(
28-
'beforeend',
29-
this.comments.slice(this.commentsCount, this.commentsCount + 5)
30-
.reduce((acc, comment) => {
31-
acc += this.createComment(comment);
32-
return acc;
33-
}, '')
34-
);
34+
const fragment = document.createDocumentFragment();
35+
this.comments.slice(this.commentsCount, this.commentsCount + 5)
36+
.forEach((comment) => {
37+
fragment.appendChild(this.createComment(comment));
38+
});
39+
this.commentsContainer.appendChild(fragment);
3540
this.commentsCount += 5;
3641
if (this.commentsCount >= this.comments.length) {
3742
this.commentsLoader.classList.add('hidden');

‎js/util.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,17 @@ const isEscapeKey = (evt) => evt.key === 'Escape';
44

55
const showErrorMessage = () => {
66
const errorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
7-
const errorElement = errorTemplate.cloneNode(true);
8-
document.body.append(errorElement);
9-
setTimeout(() => errorElement.remove(), REMOVE_MESSAGE_TIMEOUT);
7+
const error = errorTemplate.cloneNode(true);
8+
document.body.append(error);
9+
setTimeout(() => error.remove(), REMOVE_MESSAGE_TIMEOUT);
1010
};
1111

1212
function debounce (callback, timeoutDelay = 500) {
1313
let timeoutId;
1414

1515
return (...rest) => {
16-
console.log(timeoutId);
1716
clearTimeout(timeoutId);
1817
timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
19-
console.log(timeoutId);
20-
2118
};
2219
}
2320

0 commit comments

Comments
 (0)