Skip to content

Commit c6d6a0a

Browse files
author
Keks
committed
✔️ Сборка #12 
1 parent 90d76c6 commit c6d6a0a

File tree

4 files changed

+168
-146
lines changed

4 files changed

+168
-146
lines changed

‎12/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,9 @@ <h2 class="data-error__title">Не удалось загрузить данны
235235
</section>
236236
</template>
237237

238-
<script src="./js/functions.js"></script>
239-
<script type="module" src="./js/main.js"></script>
240238
<script src="./vendor/pristine/pristine.min.js"></script>
241239
<script src="./vendor/nouislider/nouislider.js"></script>
240+
<script src="./js/functions.js"></script>
241+
<script type="module" src="./js/main.js"></script>
242242
</body>
243243
</html>

‎12/js/effects.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const DEFAULT_MAX_VALUE = 100;
2+
const DEFAULT_STEP = 1;
3+
const DEFAULT_MAX_RANGE = 100;
4+
const DEFAULT_MIN_RANGE = 0;
5+
const MIN_STEP = 0.1;
6+
const CHROME_MAX_RANGE = 1;
7+
const SEPIA_MAX_RANGE = 1;
8+
const PHOBOS_MAX_RANGE = 3;
9+
const HEAT_MIN_RANGE = 1;
10+
const HEAT_MAX_RANGE = 3;
11+
const NONE = 'none';
12+
const EffectConfig = {
13+
chrome: {
14+
range: { min: DEFAULT_MIN_RANGE, max: CHROME_MAX_RANGE },
15+
start: 1,
16+
step: MIN_STEP,
17+
initialValue: 1
18+
},
19+
sepia: {
20+
range: { min: DEFAULT_MIN_RANGE, max: SEPIA_MAX_RANGE },
21+
start: 1,
22+
step: MIN_STEP,
23+
initialValue: 1
24+
},
25+
marvin: {
26+
range: { min: DEFAULT_MIN_RANGE, max: DEFAULT_MAX_RANGE },
27+
start: DEFAULT_MAX_VALUE,
28+
step: DEFAULT_STEP,
29+
initialValue: DEFAULT_MAX_VALUE
30+
},
31+
phobos: {
32+
range: { min: DEFAULT_MIN_RANGE, max: PHOBOS_MAX_RANGE },
33+
start: PHOBOS_MAX_RANGE,
34+
step: MIN_STEP,
35+
initialValue: PHOBOS_MAX_RANGE
36+
},
37+
heat: {
38+
range: { min: HEAT_MIN_RANGE, max: HEAT_MAX_RANGE },
39+
start: HEAT_MAX_RANGE,
40+
step: MIN_STEP,
41+
initialValue: HEAT_MAX_RANGE
42+
},
43+
none: {
44+
range: { min: DEFAULT_MIN_RANGE, max: DEFAULT_MAX_RANGE },
45+
start: DEFAULT_MAX_VALUE,
46+
step: DEFAULT_STEP,
47+
initialValue: DEFAULT_MAX_VALUE
48+
}
49+
};
50+
const imgUploadSlider = document.querySelector('.effect-level__slider');
51+
const imgUploadValue = document.querySelector('.effect-level__value');
52+
const effectsList = document.querySelector('.effects__list');
53+
const imgPreview = document.querySelector('.img-upload__preview img');
54+
const effectLevelElement = document.querySelector('.effect-level');
55+
const defaultConfig = EffectConfig.none;
56+
57+
let currentEffect = NONE;
58+
59+
const resetSlider = () => {
60+
imgUploadValue.value = DEFAULT_MAX_VALUE;
61+
effectLevelElement.style.display = NONE;
62+
imgPreview.style.filter = NONE;
63+
64+
noUiSlider.create(imgUploadSlider, {
65+
range: defaultConfig.range,
66+
start: defaultConfig.start,
67+
connect: 'lower',
68+
step: defaultConfig.step
69+
});
70+
};
71+
72+
resetSlider();
73+
74+
export const applyEffect = (effect, value) => {
75+
switch(effect) {
76+
case 'chrome':
77+
imgPreview.style.filter = `grayscale(${value})`;
78+
break;
79+
80+
case 'sepia':
81+
imgPreview.style.filter = `sepia(${value})`;
82+
break;
83+
84+
case 'marvin':
85+
imgPreview.style.filter = `invert(${value}%)`;
86+
break;
87+
88+
case 'phobos':
89+
imgPreview.style.filter = `blur(${value}px)`;
90+
break;
91+
92+
case 'heat':
93+
imgPreview.style.filter = `brightness(${value})`;
94+
break;
95+
96+
case 'none':
97+
default:
98+
imgPreview.style.filter = NONE;
99+
effectLevelElement.style.display = NONE;
100+
}
101+
};
102+
103+
imgUploadSlider.noUiSlider.on('update', () => {
104+
const value = imgUploadSlider.noUiSlider.get();
105+
applyEffect(currentEffect, value);
106+
});
107+
108+
effectsList.addEventListener('change', (evt) => {
109+
if(evt.target.type === 'radio'){
110+
currentEffect = evt.target.value;
111+
const config = EffectConfig[currentEffect] ?? EffectConfig.none;
112+
effectLevelElement.style.display = 'block';
113+
114+
imgUploadSlider.noUiSlider.updateOptions({
115+
range: config.range,
116+
start: config.start,
117+
step: config.step,
118+
});
119+
120+
applyEffect(currentEffect, config.initialValue);
121+
}
122+
});

‎12/js/upload-picture.js‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
import {isEscapeKey} from './utils.js';
2+
import {applyEffect} from './effects.js';
23

4+
const ScaleDirection = {
5+
SMALLER: 'smaller',
6+
BIGGER: 'bigger'
7+
};
8+
const SCALE_FACTOR = 0.01;
9+
const MAX_SCALE = 100;
10+
const MIN_SCALE = 25;
11+
const SCALE_STEP = 25;
12+
const DEFAULT_SCALE = 'scale(1)';
313
const imgUploadForm = document.querySelector('.img-upload__form');
414
const imgUploadInput = imgUploadForm.querySelector('.img-upload__input');
515
const imgUploadOverlay = imgUploadForm.querySelector('.img-upload__overlay');
@@ -18,22 +28,18 @@ const isInputFocused = () => {
1828
return activeElement === descriptionInput || activeElement === imgHashtags;
1929
};
2030

21-
const onUploadCancelClick = () => {
31+
const onCloseImageEditor = () => {
2232
imgUploadOverlay.classList.add('hidden');
2333
document.body.classList.remove('modal-open');
2434

2535
imgUploadInput.value = '';
2636
document.removeEventListener('keydown', onDocumentKeydown);
27-
imgUploadPreview.style.transform = 'scale(1)';
28-
};
37+
imgUploadPreview.style.transform = DEFAULT_SCALE;
2938

30-
const onOverlayOpen = () => {
31-
imgUploadOverlay.classList.remove('hidden');
32-
document.body.classList.add('modal-open');
33-
document.addEventListener('keydown', onDocumentKeydown);
39+
applyEffect('none');
3440
};
3541

36-
imgUploadInput.addEventListener('change', () =>{
42+
const applyUploadedImage = () => {
3743
const file = imgUploadInput.files[0];
3844
if(file) {
3945
const tempUrl = URL.createObjectURL(file);
@@ -42,29 +48,45 @@ imgUploadInput.addEventListener('change', () =>{
4248
imgPreviewEffect.style.backgroundImage = `url(${tempUrl})`;
4349
});
4450
}
45-
onOverlayOpen();
46-
});
51+
};
52+
53+
const onOpenImageEditor = () => {
54+
imgUploadOverlay.classList.remove('hidden');
55+
document.body.classList.add('modal-open');
56+
document.addEventListener('keydown', onDocumentKeydown);
57+
58+
applyUploadedImage();
59+
};
4760

48-
imgUploadCancel.addEventListener('click', onUploadCancelClick);
61+
imgUploadInput.addEventListener('change', onOpenImageEditor);
62+
63+
imgUploadCancel.addEventListener('click', onCloseImageEditor);
4964

5065
function onDocumentKeydown (evt) {
5166
if (isEscapeKey(evt.key) && !isInputFocused()) {
5267
evt.preventDefault();
53-
onUploadCancelClick();
68+
onCloseImageEditor();
5469
}
5570
}
5671

57-
const smallerPhoto = () => {
72+
const scalePhoto = (direction) => {
5873
const currentValue = parseInt(scaleValue.value, 10);
59-
scaleValue.value = `${currentValue - 25}%`;
60-
imgUploadPreview.style.transform = `scale(${(currentValue - 25) * 0.01})`;
61-
};
74+
let newValue = currentValue;
6275

63-
const biggerPhoto = () => {
64-
const currentValue = parseInt(scaleValue.value, 10);
65-
scaleValue.value = `${currentValue + 25}%`;
66-
imgUploadPreview.style.transform = `scale(${(currentValue + 25) * 0.01})`;
76+
if (direction === ScaleDirection.SMALLER) {
77+
newValue = Math.max(MIN_SCALE, currentValue - SCALE_STEP);
78+
} else if (direction === ScaleDirection.BIGGER) {
79+
newValue = Math.min(MAX_SCALE, currentValue + SCALE_STEP);
80+
} else {
81+
throw new Error(`Неизвестное масштабирование: ${direction}`);
82+
}
83+
84+
scaleValue.value = `${newValue}%`;
85+
imgUploadPreview.style.transform = `scale(${newValue * SCALE_FACTOR})`;
6786
};
6887

69-
scaleSmallerButton.addEventListener('click', smallerPhoto);
70-
scaleBiggerButton.addEventListener('click', biggerPhoto);
88+
const onSmallerClick = () => scalePhoto(ScaleDirection.SMALLER);
89+
const onBiggerClick = () => scalePhoto(ScaleDirection.BIGGER);
90+
91+
scaleSmallerButton.addEventListener('click', onSmallerClick);
92+
scaleBiggerButton.addEventListener('click', onBiggerClick);

‎12/vendor/nouislider/nouislider.js‎

Lines changed: 0 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -2253,125 +2253,3 @@
22532253
Object.defineProperty(exports, '__esModule', { value: true });
22542254

22552255
}));
2256-
2257-
const imgUploadSlider = document.querySelector('.effect-level__slider');
2258-
const imgUploadValue = document.querySelector('.effect-level__value');
2259-
const effectsList = document.querySelector('.effects__list');
2260-
const imgPreview = document.querySelector('.img-upload__preview img');
2261-
2262-
imgUploadValue.value = 80;
2263-
document.querySelector('.effect-level').style.display = 'none';
2264-
2265-
noUiSlider.create(imgUploadSlider, {
2266-
range: {
2267-
min:0,
2268-
max:100,
2269-
},
2270-
start:100,
2271-
connect:'lower',
2272-
step:1,
2273-
});
2274-
2275-
let currentEffect = 'none';
2276-
2277-
imgUploadSlider.noUiSlider.on('update', () => {
2278-
const value = imgUploadSlider.noUiSlider.get()
2279-
applyEffect(currentEffect, value);
2280-
});
2281-
2282-
2283-
function applyEffect(effect, value) {
2284-
switch(effect) {
2285-
case 'chrome':
2286-
imgPreview.style.filter = `grayscale(${value})`;
2287-
document.querySelector('.effect-level').style.display = 'block';
2288-
break;
2289-
2290-
case 'none':
2291-
imgPreview.style.filter = 'none';
2292-
break;
2293-
2294-
case 'sepia':
2295-
imgPreview.style.filter = `sepia(${value})`;
2296-
document.querySelector('.effect-level').style.display = 'block';
2297-
break;
2298-
2299-
case 'marvin':
2300-
imgPreview.style.filter = `invert(${value}%)`;
2301-
document.querySelector('.effect-level').style.display = 'block';
2302-
break;
2303-
2304-
case 'phobos':
2305-
imgPreview.style.filter = `blur(${value}px)`;
2306-
document.querySelector('.effect-level').style.display = 'block';
2307-
break;
2308-
2309-
case 'heat':
2310-
imgPreview.style.filter = `brightness(${value})`;
2311-
document.querySelector('.effect-level').style.display = 'block';
2312-
break;
2313-
2314-
default:
2315-
imgPreview.style.filter = 'none';
2316-
}
2317-
}
2318-
2319-
effectsList.addEventListener('change', (evt) => {
2320-
if(evt.target.type === 'radio'){
2321-
currentEffect = evt.target.value;
2322-
if(currentEffect === 'chrome'){
2323-
imgUploadSlider.noUiSlider.updateOptions({
2324-
range: {
2325-
min: 0,
2326-
max: 1
2327-
},
2328-
start: 1,
2329-
step: 0.1
2330-
})
2331-
applyEffect(currentEffect, 1);
2332-
}else if(currentEffect === 'none') {
2333-
imgPreview.style.filter = 'none';
2334-
document.querySelector('.effect-level').style.display = 'none';
2335-
}else if(currentEffect === 'sepia'){
2336-
imgUploadSlider.noUiSlider.updateOptions({
2337-
range: {
2338-
min: 0,
2339-
max: 1
2340-
},
2341-
start: 1,
2342-
step: 0.1
2343-
})
2344-
applyEffect(currentEffect, 1);
2345-
}else if(currentEffect === 'marvin'){
2346-
imgUploadSlider.noUiSlider.updateOptions({
2347-
range: {
2348-
min: 0,
2349-
max: 100
2350-
},
2351-
start: 100,
2352-
step: 1
2353-
})
2354-
applyEffect(currentEffect, 100);
2355-
}else if(currentEffect === 'phobos'){
2356-
imgUploadSlider.noUiSlider.updateOptions({
2357-
range: {
2358-
min: 0,
2359-
max: 3
2360-
},
2361-
start: 3,
2362-
step: 0.1
2363-
})
2364-
applyEffect(currentEffect, 3);
2365-
}else if(currentEffect === 'heat'){
2366-
imgUploadSlider.noUiSlider.updateOptions({
2367-
range: {
2368-
min: 1,
2369-
max: 3
2370-
},
2371-
start: 3,
2372-
step: 0.1
2373-
})
2374-
applyEffect(currentEffect, 3);
2375-
}
2376-
}
2377-
})

0 commit comments

Comments
 (0)