Skip to content

Commit b7de376

Browse files
keksobotkeksobot
authored
Merge pull request #14 from khepriKreator/module9-task2
2 parents 733dd32 + 3e42a8d commit b7de376

10 files changed

Lines changed: 298 additions & 93 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,9 @@ <h2 class="success__title">Изображение успешно загруже
233233
<h2 class="data-error__title">Не удалось загрузить данные</h2>
234234
</section>
235235
</template>
236-
<script src='./vendor/pristine/pristine.min.js' type="text/javascript"></script>
236+
<script src="./vendor/nouislider/nouislider.js" type="text/javascript"></script>
237+
<link rel="stylesheet" href="./vendor/nouislider/nouislider.css">
238+
<script src="./vendor/pristine/pristine.min.js" type="text/javascript"></script>
237239
<script src="./js/main.js" type="module"></script>
238240
</body>
239241
</html>

‎js/constants.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// DATA
2+
const PHOTOS_COUNT = 25;
3+
const Likes = {
4+
MIN: 15,
5+
MAX: 200
6+
};
7+
const CommentsCount = {
8+
MIN: 0,
9+
MAX: 30
10+
};
11+
12+
// SCALE
13+
14+
const SCALE_STEP = 25;
15+
const MIN_SCALE = 25;
16+
const MAX_SCALE = 100;
17+
18+
// EFFECTS
19+
20+
const EFFECTS = {
21+
NONE: 'none',
22+
CHROME: 'chrome',
23+
SEPIA: 'sepia',
24+
MARVIN: 'marvin',
25+
PHOBOS: 'phobos',
26+
HEAT: 'heat'
27+
};
28+
const DEFAULT_EFFECT = EFFECTS.NONE;
29+
const EffectsSettings = {
30+
[EFFECTS.NONE]: {
31+
slider: {
32+
range: {
33+
min: 0,
34+
max: 100,
35+
},
36+
start: 80,
37+
step: 1,
38+
connect: 'lower',
39+
},
40+
style: '',
41+
units: ''
42+
},
43+
[EFFECTS.CHROME]: {
44+
slider: {
45+
range: {
46+
min: 0,
47+
max: 1,
48+
},
49+
start: 1,
50+
step: 0.1,
51+
},
52+
style: 'grayscale',
53+
units: ''
54+
},
55+
[EFFECTS.SEPIA]: {
56+
slider: {
57+
range: {
58+
min: 0,
59+
max: 1,
60+
},
61+
start: 1,
62+
step: 0.1,
63+
},
64+
style: 'sepia',
65+
units: ''
66+
},
67+
[EFFECTS.MARVIN]: {
68+
slider: {
69+
range: {
70+
min: 0,
71+
max: 100,
72+
},
73+
start: 100,
74+
step: 1,
75+
},
76+
style: 'invert',
77+
units: '%'
78+
},
79+
[EFFECTS.PHOBOS]: {
80+
slider: {
81+
range: {
82+
min: 0,
83+
max: 3,
84+
},
85+
start: 3,
86+
step: 0.1,
87+
},
88+
style: 'blur',
89+
units: 'px'
90+
},
91+
[EFFECTS.HEAT]: {
92+
slider: {
93+
range: {
94+
min: 1,
95+
max: 3,
96+
},
97+
start: 3,
98+
step: 0.1,
99+
},
100+
style: 'brightness',
101+
units: ''
102+
}
103+
};
104+
105+
export {
106+
PHOTOS_COUNT,
107+
Likes,
108+
CommentsCount,
109+
EFFECTS,
110+
DEFAULT_EFFECT,
111+
EffectsSettings,
112+
SCALE_STEP,
113+
MIN_SCALE,
114+
MAX_SCALE
115+
};

‎js/data.js‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
const PHOTOS_COUNT = 25;
2-
const Likes = {
3-
MIN: 15,
4-
MAX: 200
5-
};
6-
const CommentsCount = {
7-
MIN: 0,
8-
MAX: 30
9-
};
10-
const Names = ['Dan', 'John', 'Dmitriy', 'Endy', 'Keks', 'Html', 'Lebovsky', 'Artem', 'Yana', 'Svetlana'];
11-
const DescriptionArray = ['Rocks', 'Blood and Thunder', 'Great Keksby', 'React', 'Html Academy', 'Hexlet', 'Big and ugly'];
12-
const MessagesArray = [
1+
2+
const names = ['Dan', 'John', 'Dmitriy', 'Endy', 'Keks', 'Html', 'Lebovsky', 'Artem', 'Yana', 'Svetlana'];
3+
const descriptionArray = ['Rocks', 'Blood and Thunder', 'Great Keksby', 'React', 'Html Academy', 'Hexlet', 'Big and ugly'];
4+
const messagesArray = [
135
'Всё отлично!',
146
'В целом всё неплохо. Но не всё.',
157
'Когда вы делаете фотографию, хорошо бы убирать палец из кадра.',
@@ -20,10 +12,7 @@ const MessagesArray = [
2012
];
2113

2214
export {
23-
Likes,
24-
CommentsCount,
25-
PHOTOS_COUNT,
26-
Names,
27-
DescriptionArray,
28-
MessagesArray
15+
names,
16+
descriptionArray,
17+
messagesArray
2918
};

‎js/effects.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { EFFECTS, EffectsSettings, DEFAULT_EFFECT } from './constants';
2+
3+
const effectsList = document.querySelector('.effects__list');
4+
const sliderFieldset = document.querySelector('.effect-level');
5+
const effectsSlider = document.querySelector('.effect-level__slider');
6+
const effectsSliderInput = document.querySelector('.effect-level__value');
7+
const imagePreviewWrapper = document.querySelector('.img-upload__preview');
8+
const imagePreview = imagePreviewWrapper.querySelector('img');
9+
10+
let currentEffect = DEFAULT_EFFECT;
11+
const isNoneEffect = () => currentEffect === EFFECTS.NONE;
12+
13+
const applyEffect = (value) => {
14+
if (isNoneEffect()) {
15+
imagePreview.style.filter = '';
16+
return;
17+
}
18+
const {style, units} = EffectsSettings[currentEffect];
19+
imagePreview.style.filter = `${style}(${value}${units})`;
20+
effectsSliderInput.value = value;
21+
};
22+
23+
const initSlider = () => {
24+
noUiSlider.create(effectsSlider, EffectsSettings[currentEffect].slider);
25+
effectsSlider.noUiSlider.on('update', () => {
26+
const value = effectsSlider.noUiSlider.get();
27+
applyEffect(value);
28+
});
29+
};
30+
31+
const setEffect = (effect) => {
32+
currentEffect = effect;
33+
if (isNoneEffect()) {
34+
sliderFieldset.classList.add('hidden');
35+
imagePreview.style.filter = '';
36+
return;
37+
}
38+
39+
sliderFieldset.classList.remove('hidden');
40+
effectsSlider.noUiSlider.updateOptions(EffectsSettings[effect].slider);
41+
};
42+
43+
const onEffectsChange = (evt) => {
44+
if (evt.target.classList.contains('effects__radio')) {
45+
setEffect(evt.target.value);
46+
}
47+
};
48+
49+
const initEffects = () => {
50+
initSlider();
51+
effectsList.addEventListener('change', onEffectsChange);
52+
};
53+
54+
const resetEffects = () => {
55+
setEffect(DEFAULT_EFFECT);
56+
};
57+
58+
export {
59+
initEffects,
60+
resetEffects
61+
};

‎js/fake-data.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
import {getRandomNumber} from './utils.js';
22
import {
3-
DescriptionArray,
4-
MessagesArray,
5-
Names,
6-
CommentsCount,
7-
Likes
3+
descriptionArray,
4+
messagesArray,
5+
names,
86
} from './data.js';
7+
import {Likes, CommentsCount, PHOTOS_COUNT} from './constants.js';
98

109
//Генерирует массив комментов
1110
const generateFakeCommentsArray = () => Array.from({length: getRandomNumber(CommentsCount.MIN, CommentsCount.MAX)}, (_, id) => ({
1211
id: id + 26,
1312
avatar: `img/avatar-${getRandomNumber(1, 6)}.svg`,
14-
message: MessagesArray[getRandomNumber(0, MessagesArray.length - 1)],
15-
name: Names[getRandomNumber(0, Names.length)],
13+
message: messagesArray[getRandomNumber(0, messagesArray.length - 1)],
14+
name: names[getRandomNumber(0, names.length)],
1615
}));
1716

1817
//Генерирует массив данных
19-
const generateFakeDataArray = (photosCount) => Array.from({length: photosCount}, (_, i) => ({
18+
const generateFakeDataArray = () => Array.from({length: PHOTOS_COUNT}, (_, i) => ({
2019
id: i + 1,
2120
url: `photos/${i + 1}.jpg`,
22-
description: DescriptionArray[getRandomNumber(0, DescriptionArray.length - 1)],
21+
description: descriptionArray[getRandomNumber(0, descriptionArray.length - 1)],
2322
likes: getRandomNumber(Likes.MIN, Likes.MAX),
2423
comments: generateFakeCommentsArray(),
2524
}));

‎js/form-validation.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,10 @@ const isHashtagsValid = (value) => {
2424
pristine.addValidator(hashtagsInput, isHashtagsValid, 'Макс. 5 хэштегов, без повторов, # + буквы/цифры');
2525
pristine.addValidator(commentInput, (value) => value.length <= 140, 'Макс. 140 символов');
2626

27-
uploadForm.addEventListener('submit', (evt) => {
28-
const isValid = pristine.validate();
29-
if (!isValid) {
30-
evt.preventDefault();
31-
}
32-
});
27+
const checkValidaty = () => pristine.validate();
3328

3429
const resetValidation = () => {
3530
pristine.reset();
3631
};
3732

38-
export {resetValidation};
33+
export {checkValidaty, resetValidation};

‎js/form.js‎

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

‎js/main.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import {} from './utils.js';
2-
import {PHOTOS_COUNT} from './data.js';
3-
import './form-validation.js';
41
import {generateFakeDataArray} from './fake-data.js';
52
import {onModalClose, onModalOpen} from './upload-modal.js';
6-
import {} from './functions.js';
73
import {renderPics} from './render-pics.js';
84

95
onModalOpen();
106
onModalClose();
11-
const data = generateFakeDataArray(PHOTOS_COUNT);
7+
const data = generateFakeDataArray();
128
renderPics(data);

‎js/scale.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { getNumberFromString } from './functions';
2+
import {SCALE_STEP, MIN_SCALE, MAX_SCALE} from './constants';
3+
4+
const buttonDecreaseScale = document.querySelector('.scale__control--smaller');
5+
const buttonIncreaseScale = document.querySelector('.scale__control--bigger');
6+
const imagePreviewWrapper = document.querySelector('.img-upload__preview');
7+
const imagePreview = imagePreviewWrapper.querySelector('img');
8+
const inputScale = document.querySelector('.scale__control--value');
9+
10+
11+
const changeScale = (step) => {
12+
const initialValue = getNumberFromString(inputScale.value);
13+
let newValue = initialValue + step;
14+
15+
if (newValue > MAX_SCALE) {
16+
newValue = MAX_SCALE;
17+
}
18+
if (newValue < MIN_SCALE) {
19+
newValue = MIN_SCALE;
20+
}
21+
22+
inputScale.value = `${newValue}%`;
23+
imagePreview.style.transform = `scale(${newValue / 100})`;
24+
};
25+
26+
const decreaseScale = () => changeScale(-SCALE_STEP);
27+
const increaseScale = () => changeScale(SCALE_STEP);
28+
29+
const addScaleListeners = () => {
30+
buttonDecreaseScale.addEventListener('click', decreaseScale);
31+
buttonIncreaseScale.addEventListener('click', increaseScale);
32+
};
33+
const removeScaleListeners = () => {
34+
buttonIncreaseScale.removeEventListener('click', increaseScale);
35+
buttonDecreaseScale.removeEventListener('click', decreaseScale);
36+
};
37+
38+
const resetScale = () => {
39+
inputScale.value = '100%';
40+
imagePreview.style.transform = 'scale(1)';
41+
};
42+
43+
export {
44+
addScaleListeners,
45+
removeScaleListeners,
46+
resetScale
47+
};

0 commit comments

Comments
 (0)