Merge pull request #26 from moevm/bogdanov_stepper

update stepper
moevm · Dec 11, 2024 · aacb52d · aacb52d
2 parents 9c52912 + d74f936
commit aacb52d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/main/_front/src/html/elems/stepper.html b/main/_front/src/html/elems/stepper.html
@@ -14,7 +14,7 @@
     <div class="container">
         <div>Минимальное значение везде 1. Максимальное значение задается в data-max</div>
         <div>Минимальное значение: 1; максимальное: 10</div>
-        <div class="stepper" data-max="10">
+        <div class="stepper" data-max="10" id="type">
             <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)">
@@ -53,6 +53,7 @@
             </button>
         </div>
     </div>
+    <button class="btn" style="margin-top: 20px; margin-left: 300px; margin-bottom: 30px;" id="change_parameter">Изменить параметр</button>
 </div>
 </body>
 </html>
diff --git a/main/_front/src/js/elems/stepper.js b/main/_front/src/js/elems/stepper.js
@@ -55,4 +55,32 @@ steppers.forEach(stepper => {
             }
         }
     })
-})
+})
+
+const stepperChange = (item, value) => {
+    const minus_btn = item.querySelector('.stepper__minus');
+    const plus_btn = item.querySelector('.stepper__plus');
+    const stepper_value = item.querySelector('.stepper__value');
+
+    const max = item.dataset.max;
+    stepper_value.textContent = value;
+
+    if (checkMinDisabled(stepper_value)){
+        minus_btn.disabled = true;
+        stepper_value.textContent = "1";
+    }else {
+        minus_btn.disabled = false;
+    }
+    if (checkMaxDisabled(stepper_value, max)){
+        plus_btn.disabled = true;
+        stepper_value.textContent = max;
+    }else {
+        plus_btn.disabled = false;
+    }
+}
+
+const change_parameter = document.querySelector("#change_parameter");
+console.log(change_parameter);
+change_parameter.addEventListener("click", (e) => {
+    stepperChange(document.querySelector("#type"), 10);
+})