Skip to content

Commit ef9ba84

Browse files
Vip2045Vip2045
authored
Merge branch 'htmlacademy-javascript:master' into master
2 parents f479952 + 281a808 commit ef9ba84

6 files changed

Lines changed: 152 additions & 35 deletions

File tree

‎.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
* text eol=lf
22
* text=auto
33
*.js text eol=lf
4+
*.css text eol=lf
5+
*.html text eol=lf
46
*.jpg -text
57
*.png -text
68
*.gif -text

‎index.html‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="ru">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width,initial-scale=1">
@@ -16,7 +17,8 @@
1617
<section class="img-filters img-filters--inactive container">
1718
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
1819
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
19-
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По умолчанию</button>
20+
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По
21+
умолчанию</button>
2022
<button type=button class="img-filters__button" id="filter-random">Случайные</button>
2123
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
2224
</form>
@@ -30,7 +32,8 @@ <h2 class="pictures__title visually-hidden">Фотографии других
3032
<section class="img-upload">
3133
<div class="img-upload__wrapper">
3234
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
33-
<form class="img-upload__form" id="upload-select-image" autocomplete="off">
35+
<form class="img-upload__form" id="upload-select-image" method="post" enctype="multipart/form-data"
36+
action="https://31.javascript.htmlacademy.pro/kekstagram" autocomplete="off">
3437

3538
<!-- Изначальное состояние поля для загрузки изображения -->
3639
<fieldset class="img-upload__start">
@@ -46,7 +49,8 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
4649
<!-- Изменение размера изображения -->
4750
<fieldset class="img-upload__scale scale">
4851
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
49-
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
52+
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale"
53+
name="scale" readonly>
5054
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
5155
</fieldset>
5256

@@ -69,42 +73,48 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
6973
<fieldset class="img-upload__effects effects">
7074
<ul class="effects__list">
7175
<li class="effects__item">
72-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none" checked>
76+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none"
77+
value="none" checked>
7378
<label for="effect-none" class="effects__label">
7479
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
7580
Оригинал
7681
</label>
7782
</li>
7883
<li class="effects__item">
79-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
84+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome"
85+
value="chrome">
8086
<label for="effect-chrome" class="effects__label">
8187
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
8288
Хром
8389
</label>
8490
</li>
8591
<li class="effects__item">
86-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
92+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia"
93+
value="sepia">
8794
<label for="effect-sepia" class="effects__label">
8895
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
8996
Сепия
9097
</label>
9198
</li>
9299
<li class="effects__item">
93-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
100+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin"
101+
value="marvin">
94102
<label for="effect-marvin" class="effects__label">
95103
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
96104
Марвин
97105
</label>
98106
</li>
99107
<li class="effects__item">
100-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
108+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos"
109+
value="phobos">
101110
<label for="effect-phobos" class="effects__label">
102111
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
103112
Фобос
104113
</label>
105114
</li>
106115
<li class="effects__item">
107-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat">
116+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat"
117+
value="heat">
108118
<label for="effect-heat" class="effects__label">
109119
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
110120
Зной
@@ -132,7 +142,7 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
132142
</section>
133143

134144
<!-- Здесь будут изображения других пользователей -->
135-
145+
136146
</section>
137147

138148
<!-- Полноэкранный показ изображения -->
@@ -154,15 +164,18 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
154164
</div>
155165

156166
<!-- Комментарии к изображению -->
157-
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
167+
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span
168+
class="social__comment-total-count">125</span> комментариев</div>
158169
<ul class="social__comments">
159170
<li class="social__comment">
160-
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
171+
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35"
172+
height="35">
161173
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
162174
</li>
163175
<li class="social__comment">
164-
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
165-
<p class="social__text">Да это фоташоп!!!!!!!!</p>
176+
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35"
177+
height="35">
178+
<p class="social__text">Да это фоташоп!!!!!!!!</p>
166179
</li>
167180
</ul>
168181

@@ -171,7 +184,8 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
171184

172185
<!-- Форма для отправки комментария -->
173186
<div class="social__footer">
174-
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
187+
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35"
188+
height="35">
175189
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
176190
<button type="button" class="social__footer-btn" name="button">Отправить</button>
177191
</div>
@@ -186,11 +200,14 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
186200
<footer class="page-footer container">
187201
<div class="page-footer__wrapper">
188202
<div class="page-footer__copyright copyright">
189-
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
190-
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
203+
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img
204+
src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
205+
<p>Сделано в <a class="copyright__link copyright__link--text"
206+
href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
191207
</div>
192208
<ul class="page-footer__contacts contacts">
193-
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
209+
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a>
210+
</li>
194211
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
195212
</ul>
196213
</div>
@@ -227,16 +244,17 @@ <h2 class="success__title">Изображение успешно загруже
227244
</section>
228245
</template>
229246

230-
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
231-
<template id="data-error">
232-
<section class="data-error">
233-
<h2 class="data-error__title">Не удалось загрузить данные</h2>
234-
</section>
235-
</template>
236-
247+
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
248+
<template id="data-error">
249+
<section class="data-error">
250+
<h2 class="data-error__title">Не удалось загрузить данные</h2>
251+
</section>
252+
</template>
237253

238-
<script src="./js/main.js" type="module"></script>
254+
<script src="./vendor/pristine/pristine.min.js"></script>
255+
<script src="./js/main.js" type="module"></script>
239256

240257

241258
</body>
242-
</html>
259+
260+
</html>

‎js/form.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { isValid, resetValidation } from './validation.js';
2+
3+
const formNode = document.querySelector('#upload-select-image');
4+
const inputFileNode = document.querySelector('#upload-file');
5+
const modalNode = document.querySelector('.img-upload__overlay');
6+
const closeButtonNode = document.querySelector('#upload-cancel');
7+
8+
const closeModal = () => {
9+
modalNode.classList.add('hidden');
10+
11+
resetValidation();
12+
};
13+
14+
inputFileNode.addEventListener('change', () => {
15+
modalNode.classList.remove('hidden');
16+
});
17+
18+
closeButtonNode.addEventListener('click', () => {
19+
closeModal();
20+
});
21+
22+
formNode.addEventListener('submit', (evt) => {
23+
if (!isValid()) {
24+
evt.preventDefault();
25+
}
26+
});
27+

‎js/main.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import { getPhotos } from './data.js';
22
import { renderCards } from './render-cards.js';
3+
import './form.js';
34

45
// eslint-disable-next-line no-unused-vars
56
const photos = getPhotos(25);
67
renderCards(photos);
7-
// console.log(photos);
8-
9-
// отрисовка миниатюр
10-
//блоки счётчика комментариев
11-

‎js/render-cards.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { openModal } from './big-picture.js';
33

44
/* eslint-disable no-console */
55
const cardTemplate = document.querySelector('#picture').content.querySelector('.picture');
6-
const cardsContainer = document.querySelector('.pictures');
6+
const cardsContainerNode = document.querySelector('.pictures');
77

88
let localPhotos;
99

@@ -20,10 +20,10 @@ export const renderCards = (pictures) => {
2020
card.dataset.id = id;
2121
fragment.append(card);
2222
});
23-
cardsContainer.append(fragment);
23+
cardsContainerNode.append(fragment);
2424
};
2525

26-
cardsContainer.addEventListener('click', (evt) => {
26+
cardsContainerNode.addEventListener('click', (evt) => {
2727
const card = evt.target.closest('.picture');
2828
if (card) {
2929
const id = Number(card.dataset.id);

‎js/validation.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* eslint-disable no-unused-vars */
2+
const formNode = document.querySelector('#upload-select-image');
3+
const descriptionNode = formNode.querySelector('.text__description');
4+
const hashtagsNode = formNode.querySelector('.text__hashtags');
5+
6+
const MAX_DESCRIPTION = 140;
7+
const HASHTAG_FORMULA = /^#[a-zа-я0-9]{1,19}$/i;
8+
const MAX_HASHTAGS = 5;
9+
10+
const validation = new Pristine(formNode, {
11+
classTo: 'img-upload__field-wrapper',
12+
errorClass: 'img-upload__field-wrapper--error',
13+
errorTextParent: 'img-upload__field-wrapper',
14+
});
15+
16+
const getHashtags = (text) => text.trim().toLowerCase().split(' ').filter((item) => item.length);
17+
18+
const checkDescription = (value) => value.length <= MAX_DESCRIPTION;
19+
20+
const checkHashtags = (value) => {
21+
if (!value.trim().length) {
22+
return true;
23+
}
24+
25+
const hashtags = getHashtags(value);
26+
return hashtags.every((item) => HASHTAG_FORMULA.test(item));
27+
};
28+
29+
const checkHashtagsLength = (value) => {
30+
if (!value.trim().length) {
31+
return true;
32+
}
33+
const hashtags = getHashtags(value);
34+
return hashtags.length <= MAX_HASHTAGS;
35+
};
36+
37+
const checkUniquesHashtags = (value) => {
38+
if (!value.trim().length) {
39+
return true;
40+
}
41+
const hashtags = getHashtags(value);
42+
const uniques = [...new Set(hashtags)];
43+
return hashtags.length === uniques.length;
44+
};
45+
46+
validation.addValidator (
47+
descriptionNode,
48+
checkDescription,
49+
`Длина описания фотографии не должна превышать ${MAX_DESCRIPTION}`
50+
);
51+
52+
validation.addValidator (
53+
hashtagsNode,
54+
checkHashtags,
55+
'Невалидный хештег'
56+
);
57+
58+
validation.addValidator(
59+
hashtagsNode,
60+
checkHashtagsLength,
61+
`Количество хештегов не должно превышать ${MAX_HASHTAGS}`,
62+
);
63+
64+
validation.addValidator(
65+
hashtagsNode,
66+
checkUniquesHashtags,
67+
'Хештеги не должны повторяться',
68+
);
69+
70+
export const isValid = () => validation.validate();
71+
export const resetValidation = () => {
72+
validation.reset();
73+
};
74+

0 commit comments

Comments
 (0)