IdmQuantityPicker

IdmQuantityPicker to lekka klasa JavaScript umożliwiająca stworzenie prostego komponentu do wybierania ilości (quantity picker) z przyciskami + i -, obsługująca minimalne i maksymalne wartości.

Funkcje

• Obsługuje minimalną (min) i maksymalną (max) wartość.
• Automatycznie blokuje przyciski, gdy osiągnięto limit.
• Synchronizuje wartość w polu input z przyciskami.
• Łatwa integracja z istniejącym HTML-em.

Struktura HTML

Twój komponent powinien wyglądać mniej więcej tak:

<div class="idm-quantity-picker">
  <button class="idm-quantity-picker__button-minus">-</button>
  <input type="number" class="idm-quantity-picker__input" value="1" min="1" max="10">
  <button class="idm-quantity-picker__button-plus">+</button>
</div>

Uwaga: Klasy w HTML są wymagane, aby skrypt mógł odnaleźć elementy.

Użycie

Inicjalizacja przez selektor CSS

const picker = new IdmQuantityPicker({
  selector: ".idm-quantity-picker",
  min: 1,
  max: 20
});

Inicjalizacja przez referencję do elementu

const container = document.querySelector("#my-picker");
const picker = new IdmQuantityPicker({
  ref: container,
  min: 1,
  max: 50
});

API

Właściwości

• value – obecna wartość (getter i setter)
• min – minimalna wartość
• max – maksymalna wartość

Metody

• handlePlus() – zwiększa wartość o 1
• handleMinus() – zmniejsza wartość o 1
• updateButtons() – aktualizuje stan przycisków
• updateInput() – aktualizuje wartość w polu input

Przykład działania

<div id="example-picker" class="idm-quantity-picker">
  <button class="idm-quantity-picker__button-minus">-</button>
  <input type="number" class="idm-quantity-picker__input" value="1" min="1" max="5">
  <button class="idm-quantity-picker__button-plus">+</button>
</div>

<script src="IdmQuantityPicker.js"></script>
<script>
  const examplePicker = new IdmQuantityPicker({
    ref: document.querySelector('#example-picker'),
    min: 1,
    max: 5
  });

</script>

Uwagi

SIGMA

• Jeśli nie podasz min lub max, zostaną użyte wartości z atrybutów input.
• Przyciski zostaną automatycznie zablokowane, gdy osiągnięty zostanie limit minimalny lub maksymalny.
• Skrypt loguje błędy, jeśli nie znajdzie wymaganych elementów w kontenerze.