Skip to content

Commit 0ae0879

Browse files
keksobotkeksobot
authored
Merge pull request #2 from ilya-cherepanov/master
2 parents b735838 + 8f41530 commit 0ae0879

File tree

7 files changed

+114
-25
lines changed

7 files changed

+114
-25
lines changed

‎source/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
<div class="page__hero hero" data-test="hero">
5656
<div class="hero__container">
5757
<hgroup class="hero__page-heading">
58-
<h1 class="hero__page-title title">
58+
<h1 class="hero__page-title title title--alt-mobile">
5959
<span class="visually-hidden" lang="en">Cat Energy -</span>
6060
Функциональное питание для котов
6161
</h1>

‎source/scripts/index.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,81 @@ class Map {
9999
}
100100
}
101101

102+
class Slider {
103+
static KEY_DOWN_INCREMENT = 5;
104+
static DEFAULT_SLIDER_STATE = 50;
105+
106+
thumbElement = null;
107+
sliderElement = null;
108+
_currentState = 0;
109+
110+
constructor(sliderElement) {
111+
this.sliderElement = sliderElement;
112+
this.currentState = Slider.DEFAULT_SLIDER_STATE;
113+
114+
const thumb = this.sliderElement.querySelector('.slider__thumb');
115+
if (!thumb) {
116+
throw new Error('Couldn\'t find .slider__thumb element!');
117+
}
118+
this.thumbElement = thumb;
119+
this.thumbElement.addEventListener('pointerdown', this.onThumbDown);
120+
this.thumbElement.addEventListener('ondragstart', () => false);
121+
this.thumbElement.addEventListener('focus', this.onThumbFocus);
122+
}
123+
124+
get currentState() {
125+
return this._currentState;
126+
}
127+
128+
set currentState(newState) {
129+
this._currentState = Math.max(0, Math.min(newState, 100));
130+
this.sliderElement.style.setProperty('--slider-state', `${this._currentState}%`);
131+
}
132+
133+
onThumbDown = (evt) => {
134+
evt.preventDefault();
135+
this.thumbElement.setPointerCapture(evt.pointerId);
136+
this.thumbElement.addEventListener('pointerup', this.onThumbUp);
137+
this.thumbElement.addEventListener('pointermove', this.onThumbMove);
138+
};
139+
140+
onThumbUp = () => {
141+
this.thumbElement.removeEventListener('pointermove', this.onThumbMove);
142+
this.thumbElement.removeEventListener('pointerup', this.onThumbUp);
143+
};
144+
145+
onThumbMove = (evt) => {
146+
const sliderBoundingRect = this.sliderElement.getBoundingClientRect();
147+
const newPositionRatio = (evt.clientX - sliderBoundingRect.x) / sliderBoundingRect.width;
148+
this.currentState = newPositionRatio * 100;
149+
};
150+
151+
onThumbFocus = (evt) => {
152+
evt.preventDefault();
153+
document.addEventListener('keydown', this.onKeyDown);
154+
this.thumbElement.addEventListener('blur', this.onThumbBlur);
155+
};
156+
157+
onThumbBlur = () => {
158+
document.removeEventListener('keydown', this.onKeyDown);
159+
this.thumbElement.removeEventListener('blur', this.onThumbBlur);
160+
};
161+
162+
onKeyDown = (evt) => {
163+
if (evt.code === 'ArrowLeft') {
164+
this.currentState = this.currentState - Slider.KEY_DOWN_INCREMENT;
165+
} else if (evt.code === 'ArrowRight') {
166+
this.currentState = this.currentState + Slider.KEY_DOWN_INCREMENT;
167+
}
168+
};
169+
}
170+
102171
const navigationMenu = new NavigationMenu();
103172
navigationMenu.handleEvents();
104173

105174
new Map();
175+
176+
const slider = document.querySelector('.slider');
177+
if (slider) {
178+
new Slider(slider);
179+
}

‎source/styles/blocks/_contacts.scss‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,24 @@
5151
margin-block-start: clamp(0px, calc(-14.29px + 4.46vw), 20px);
5252
}
5353

54+
.contacts__map {
55+
position: relative;
56+
min-block-size: 362px;
57+
}
58+
5459
.contacts__map-container {
55-
block-size: 362px;
60+
position: absolute;
61+
inset: 0;
62+
}
63+
64+
.contacts__map-image-container {
65+
position: absolute;
66+
inset: 0;
5667
}
5768

5869
.contacts__map-image {
5970
display: block;
6071
inline-size: 100%;
61-
block-size: 362px;
6272
object-fit: cover;
6373
}
6474

@@ -98,13 +108,8 @@
98108
text-align: end;
99109
}
100110

101-
.contacts__map-container {
102-
inline-size: 100%;
103-
block-size: 400px;
104-
}
105-
106-
.contacts__map-image {
107-
block-size: 400px;
111+
.contacts__map {
112+
min-block-size: 400px;
108113
}
109114

110115
.contacts__map-pin::before {
@@ -151,12 +156,4 @@
151156
position: absolute;
152157
inset: 0;
153158
}
154-
155-
.contacts__map-container {
156-
block-size: 100%;
157-
}
158-
159-
.contacts__map-image {
160-
block-size: 100%;
161-
}
162159
}

‎source/styles/blocks/_copyright.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
flex-wrap: wrap;
77
justify-content: space-between;
88
align-items: center;
9-
min-inline-size: 163px;
109

1110
@include mixins.primary-font(
1211
$font-size: 16px,

‎source/styles/blocks/_feature.scss‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,21 +85,21 @@
8585
content: "";
8686

8787
display: inline-block;
88-
inline-size: 59px;
88+
inline-size: 50px;
8989
block-size: 1em;
9090
transition: background 100ms;
9191

9292
background-image:
9393
linear-gradient(var(--clr-black, #{variables.$clr-black})),
9494
url("../../icons/stack.svg#triangle");
9595
background-repeat: no-repeat, no-repeat;
96-
background-size: 18px 2px, 7px 11px;
97-
background-position: 25px center, 43px center;
96+
background-size: 19px 2px, 7px 11px;
97+
background-position: 16px center, 34px center;
9898
}
9999

100100
&:is(:hover, :active)::after {
101101
background-size: 27px 2px, 7px 11px;
102-
background-position: 25px center, 51px center;
102+
background-position: 16px center, 42px center;
103103
}
104104

105105
&:active {
@@ -150,6 +150,18 @@
150150

151151
.feature__follow {
152152
margin-block-start: auto;
153+
154+
&::after {
155+
inline-size: 59px;
156+
157+
background-size: 18px 2px, 7px 11px;
158+
background-position: 25px center, 43px center;
159+
}
160+
161+
&:is(:hover, :active)::after {
162+
background-size: 27px 2px, 7px 11px;
163+
background-position: 25px center, 51px center;
164+
}
153165
}
154166
}
155167

‎source/styles/blocks/_page-footer.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
margin-block-end: 20px;
1818
}
1919

20+
.page-footer__copyright {
21+
min-inline-size: 163px;
22+
max-inline-size: 280px;
23+
margin-inline: auto;
24+
}
25+
2026
@media (min-width: #{variables.$tablet-width}) {
2127
.page-footer__end {
2228
display: grid;
@@ -40,6 +46,7 @@
4046

4147
.page-footer__copyright {
4248
justify-self: end;
49+
margin-inline: 0;
4350
}
4451
}
4552

‎source/styles/blocks/_title.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
line-height: clamp(36px, 8vw, 60px);
1010
}
1111

12-
.hero__page-title.title {
12+
.title--alt-mobile {
1313
color: var(--clr-white, #{variables.$clr-white});
1414
text-align: center;
1515
}
1616

1717
@media (min-width: variables.$tablet-width) {
18-
.hero__page-title.title {
18+
.title {
1919
color: var(--clr-black, #{variables.$clr-black});
2020
text-align: start;
2121
}

0 commit comments

Comments
 (0)