Skip to content

Commit e910116

Browse files
keksobotkeksobot
authored
Merge pull request #9 from Aleksandr-Anokhin/module9-task1
2 parents 192fb2e + 4ed580b commit e910116

File tree

5 files changed

+160
-23
lines changed

5 files changed

+160
-23
lines changed

‎index.html

+43-23
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
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">
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">
910
<!--<script src="/js/functions.js"></script>-->
11+
<script src="./vendor/pristine/pristine.min.js"></script>
1012
<script type="module" src="/js/main.js"></script>
1113
<title>Кекстаграм</title>
1214
</head>
@@ -18,7 +20,8 @@
1820
<section class="img-filters img-filters--inactive container">
1921
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
2022
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
21-
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По умолчанию</button>
23+
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По
24+
умолчанию</button>
2225
<button type=button class="img-filters__button" id="filter-random">Случайные</button>
2326
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
2427
</form>
@@ -32,7 +35,9 @@ <h2 class="pictures__title visually-hidden">Фотографии других
3235
<section class="img-upload">
3336
<div class="img-upload__wrapper">
3437
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
35-
<form class="img-upload__form" id="upload-select-image" autocomplete="off">
38+
<form class="img-upload__form" enctype="multipart/form-data"
39+
action="https://31.javascript.htmlacademy.pro/kekstagram" method="POST" id="upload-select-image"
40+
autocomplete="off">
3641

3742
<!-- Изначальное состояние поля для загрузки изображения -->
3843
<fieldset class="img-upload__start">
@@ -48,7 +53,8 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
4853
<!-- Изменение размера изображения -->
4954
<fieldset class="img-upload__scale scale">
5055
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
51-
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
56+
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale"
57+
name="scale" readonly>
5258
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
5359
</fieldset>
5460

@@ -71,42 +77,48 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
7177
<fieldset class="img-upload__effects effects">
7278
<ul class="effects__list">
7379
<li class="effects__item">
74-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none" checked>
80+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none"
81+
value="none" checked>
7582
<label for="effect-none" class="effects__label">
7683
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
7784
Оригинал
7885
</label>
7986
</li>
8087
<li class="effects__item">
81-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
88+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome"
89+
value="chrome">
8290
<label for="effect-chrome" class="effects__label">
8391
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
8492
Хром
8593
</label>
8694
</li>
8795
<li class="effects__item">
88-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
96+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia"
97+
value="sepia">
8998
<label for="effect-sepia" class="effects__label">
9099
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
91100
Сепия
92101
</label>
93102
</li>
94103
<li class="effects__item">
95-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
104+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin"
105+
value="marvin">
96106
<label for="effect-marvin" class="effects__label">
97107
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
98108
Марвин
99109
</label>
100110
</li>
101111
<li class="effects__item">
102-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
112+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos"
113+
value="phobos">
103114
<label for="effect-phobos" class="effects__label">
104115
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
105116
Фобос
106117
</label>
107118
</li>
108119
<li class="effects__item">
109-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat">
120+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat"
121+
value="heat">
110122
<label for="effect-heat" class="effects__label">
111123
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
112124
Зной
@@ -156,15 +168,18 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
156168
</div>
157169

158170
<!-- Комментарии к изображению -->
159-
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
171+
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span
172+
class="social__comment-total-count">125</span> комментариев</div>
160173
<ul class="social__comments">
161174
<li class="social__comment">
162-
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
175+
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35"
176+
height="35">
163177
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
164178
</li>
165179
<li class="social__comment">
166-
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
167-
<p class="social__text">Да это фоташоп!!!!!!!!</p>
180+
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35"
181+
height="35">
182+
<p class="social__text">Да это фоташоп!!!!!!!!</p>
168183
</li>
169184
</ul>
170185

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

174189
<!-- Форма для отправки комментария -->
175190
<div class="social__footer">
176-
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
191+
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35"
192+
height="35">
177193
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
178194
<button type="button" class="social__footer-btn" name="button">Отправить</button>
179195
</div>
@@ -188,11 +204,14 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
188204
<footer class="page-footer container">
189205
<div class="page-footer__wrapper">
190206
<div class="page-footer__copyright copyright">
191-
<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>
192-
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
207+
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img
208+
src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
209+
<p>Сделано в <a class="copyright__link copyright__link--text"
210+
href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
193211
</div>
194212
<ul class="page-footer__contacts contacts">
195-
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
213+
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a>
214+
</li>
196215
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
197216
</ul>
198217
</div>
@@ -229,12 +248,13 @@ <h2 class="success__title">Изображение успешно загруже
229248
</section>
230249
</template>
231250

232-
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
233-
<template id="data-error">
234-
<section class="data-error">
235-
<h2 class="data-error__title">Не удалось загрузить данные</h2>
236-
</section>
237-
</template>
251+
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
252+
<template id="data-error">
253+
<section class="data-error">
254+
<h2 class="data-error__title">Не удалось загрузить данные</h2>
255+
</section>
256+
</template>
238257

239258
</body>
259+
240260
</html>

‎js/constants.js

+6
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,9 @@ export const NAMES = [
2424
];
2525

2626
export const COMMENTS_STEP = 5;
27+
28+
export const MAX_DESCRIPTION_LENGTH = 140;
29+
30+
export const HASHTAG_FORMULA = /^#[a-zA-Zа-яА-ЯёЁ0-9]{1,19}$/;
31+
32+
export const HASHTAGS_COUNT = 5;

‎js/form.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { isValid, reset as resetValidation } from './validation.js';
2+
3+
const uploadFile = document.querySelector('#upload-file');
4+
const modal = document.querySelector('.img-upload__overlay');
5+
const body = document.body;
6+
const closeButton = document.querySelector('#upload-cancel');
7+
const form = document.querySelector('.img-upload__form');
8+
const imgPreview = document.querySelector('.img-upload__preview img');
9+
const effectsElements = document.querySelectorAll('.effects__preview');
10+
11+
const setPreviewImage = () => {
12+
const file = uploadFile.files[0];
13+
const url = URL.createObjectURL(file);
14+
imgPreview.src = url;
15+
effectsElements.forEach((item) => {
16+
item.style.backgroundImage = `url(${url})`;
17+
});
18+
};
19+
20+
const showModal = () => {
21+
modal.classList.remove('hidden');
22+
body.classList.add('modal-open');
23+
24+
setPreviewImage();
25+
};
26+
27+
const closeModal = () => {
28+
modal.classList.add('hidden');
29+
body.classList.remove('modal-open');
30+
31+
form.reset();
32+
resetValidation();
33+
};
34+
35+
uploadFile.addEventListener('change', () => {
36+
showModal();
37+
});
38+
39+
closeButton.addEventListener('click', (evt) => {
40+
evt.preventDefault();
41+
closeModal();
42+
});
43+
44+
form.addEventListener('submit', (evt) => {
45+
46+
if (!isValid()) {
47+
evt.preventDefault();
48+
}
49+
});

‎js/main.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { createPhotos } from './data.js';
22
import { renderCards } from './thumbnail.js';
33

4+
import './form.js';
5+
46
const data = createPhotos();
57
renderCards(data);

‎js/validation.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { MAX_DESCRIPTION_LENGTH, HASHTAG_FORMULA, HASHTAGS_COUNT } from './constants.js';
2+
3+
const form = document.querySelector('.img-upload__form');
4+
const hashtag = document.querySelector('.text__hashtags');
5+
const description = document.querySelector('.text__description');
6+
7+
const pristine = new Pristine(form, {
8+
classTo: 'img-upload__field-wrapper',
9+
errorTextParent: 'img-upload__field-wrapper',
10+
errorTextClass: 'img-upload__field-wrapper--error'
11+
});
12+
13+
const checkDescription = (value) => value.length <= MAX_DESCRIPTION_LENGTH;
14+
15+
const getHashtags = (text) => text.toLowerCase().split(' ').filter((item) => item.length);
16+
17+
const checkHashTags = (value) => {
18+
const hashtags = getHashtags(value);
19+
return hashtags.every((hash) => HASHTAG_FORMULA.test(hash));
20+
};
21+
22+
const checkCountHashtags = (value) => {
23+
const hashtags = getHashtags(value);
24+
return hashtags.length <= HASHTAGS_COUNT;
25+
};
26+
27+
const checkUniques = (value) => {
28+
const hashtags = getHashtags(value);
29+
return [...new Set(hashtags)].length === hashtags.length;
30+
};
31+
32+
pristine.addValidator(
33+
description,
34+
checkDescription,
35+
`Текст описания не должен превышать ${MAX_DESCRIPTION_LENGTH} символов`
36+
);
37+
38+
pristine.addValidator(
39+
hashtag,
40+
checkHashTags,
41+
'Хештег должен включать только буквы и цифры'
42+
);
43+
44+
pristine.addValidator(
45+
hashtag,
46+
checkCountHashtags,
47+
`Количество хештегов не должно превышать ${HASHTAGS_COUNT}`
48+
);
49+
50+
pristine.addValidator(
51+
hashtag,
52+
checkUniques,
53+
'Хештеги не должны повторяться'
54+
);
55+
56+
export const reset = () => {
57+
pristine.reset();
58+
};
59+
60+
export const isValid = () => pristine.validate();

0 commit comments

Comments
 (0)