Skip to content

Commit

Permalink
Merge pull request #5 from moevm/manucharova_stepper
Browse files Browse the repository at this point in the history 
UI element: stepper
  • Loading branch information
@necitboss
necitboss authored Nov 8, 2024
2 parents dd2b7bc + 8b4c213 commit fc8dff8
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 0 deletions.
58 changes: 58 additions & 0 deletions main/_front/src/html/stepper.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../scss/style.scss">
<script src="../js/stepper.js" defer></script>
</head>
<body>
<div class="section">
<div class="container">
<div>Минимальное значение везде 1. Максимальное значение задается в data-max</div>
<div>Минимальное значение: 1; максимальное: 10</div>
<div class="stepper" data-max="10">
<button class="stepper__minus">
<svg width="39.000000" height="39.000000" viewBox="0 0 39 39" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip25_442)">
<path id="path" d="M29.25 21.12L9.75 21.12C8.85 21.12 8.12 20.39 8.12 19.49C8.12 18.6 8.85 17.87 9.75 17.87L29.25 17.87C30.14 17.87 30.87 18.6 30.87 19.49C30.87 20.39 30.14 21.12 29.25 21.12Z" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</button>
<div class="stepper__value">1</div>

<button class="stepper__plus">
<svg width="39.000000" height="39.000000" viewBox="0 0 39 39" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip25_440)">
<path id="path" d="M19.5 30.87C18.6 30.87 17.87 30.14 17.87 29.24L17.87 21.12L9.75 21.12C8.85 21.12 8.12 20.39 8.12 19.49C8.12 18.6 8.85 17.87 9.75 17.87L17.87 17.87L17.87 9.74C17.87 8.85 18.6 8.12 19.5 8.12C20.39 8.12 21.12 8.85 21.12 9.74L21.12 17.87L29.25 17.87C30.14 17.87 30.87 18.6 30.87 19.49C30.87 20.39 30.14 21.12 29.25 21.12L21.12 21.12L21.12 29.24C21.12 30.14 20.39 30.87 19.5 30.87Z" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</button>
</div>
<div>Минимальное значение: 1; максимальное: 4</div>

<div class="stepper" data-max="4">
<button class="stepper__minus">
<svg width="39.000000" height="39.000000" viewBox="0 0 39 39" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip25_442)">
<path id="path" d="M29.25 21.12L9.75 21.12C8.85 21.12 8.12 20.39 8.12 19.49C8.12 18.6 8.85 17.87 9.75 17.87L29.25 17.87C30.14 17.87 30.87 18.6 30.87 19.49C30.87 20.39 30.14 21.12 29.25 21.12Z" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</button>
<div class="stepper__value">1</div>

<button class="stepper__plus">
<svg width="39.000000" height="39.000000" viewBox="0 0 39 39" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip25_440)">
<path id="path" d="M19.5 30.87C18.6 30.87 17.87 30.14 17.87 29.24L17.87 21.12L9.75 21.12C8.85 21.12 8.12 20.39 8.12 19.49C8.12 18.6 8.85 17.87 9.75 17.87L17.87 17.87L17.87 9.74C17.87 8.85 18.6 8.12 19.5 8.12C20.39 8.12 21.12 8.85 21.12 9.74L21.12 17.87L29.25 17.87C30.14 17.87 30.87 18.6 30.87 19.49C30.87 20.39 30.14 21.12 29.25 21.12L21.12 21.12L21.12 29.24C21.12 30.14 20.39 30.87 19.5 30.87Z" fill-opacity="1.000000" fill-rule="nonzero"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
58 changes: 58 additions & 0 deletions main/_front/src/js/stepper.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
const steppers = document.querySelectorAll('.stepper');
const checkMinDisabled = (element) => {
return Number(element.textContent) <= 1;
}
const checkMaxDisabled = (element, maxValue) => {
return Number(element.textContent) >= Number(maxValue);
}
const writeDataValue = (element, value) => {
element.dataset.value = value;
}

steppers.forEach(stepper => {


const minus_btn = stepper.querySelector('.stepper__minus');
const plus_btn = stepper.querySelector('.stepper__plus');
const value = stepper.querySelector('.stepper__value');
if (value.textContent) writeDataValue(stepper, value.textContent);

const max = stepper.dataset.max;

if (checkMinDisabled(value)){
minus_btn.disabled = true;
value.textContent = "1";
}
if (checkMaxDisabled(value, max)){
plus_btn.disabled = true;
value.textContent = max;
}

minus_btn.addEventListener('click', (e) => {
let count = Number(value.textContent);
if (count > 1) {
count--;
value.textContent = count;
plus_btn.disabled = false;
writeDataValue(stepper, value.textContent);
if (checkMinDisabled(value)){
minus_btn.disabled = true;
value.textContent = "1";
}
}
})

plus_btn.addEventListener('click', (e) => {
let count = Number(value.textContent);
if (count < max) {
count++;
value.textContent = count;
minus_btn.disabled = false;
writeDataValue(stepper, value.textContent);
if (checkMaxDisabled(value, max)){
plus_btn.disabled = true;
value.textContent = max;
}
}
})
})
52 changes: 52 additions & 0 deletions main/_front/src/scss/elems/_stepper.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@import "../vars";

.stepper {
display: inline-flex;
align-items: center;
border-radius: 8px;
overflow: hidden;
border: 2px solid $primary;
}

.stepper__minus, .stepper__plus {
background-color: $primary;
padding: 4px 6px;
width: 41px;
height: 36px;
transition: background-color .2s ease, opacity .2s ease;

& svg {
fill: #fff;
transition: fill .2s ease;
}
&:hover {
background-color: #fff;
& svg {
fill: $primary;
}
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: $primary;
& svg {
fill: #fff;
}
}
}

.stepper__minus {
border-right: 2px solid $primary;
}

.stepper__plus {
border-left: 2px solid $primary;
}


.stepper__value {
font-size: 22px;
width: 44px;
line-height: 36px;
text-align: center;
}

0 comments on commit fc8dff8

Please sign in to comment.