89 lines
2.3 KiB
Markdown
89 lines
2.3 KiB
Markdown
# 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:
|
||
|
||
```html
|
||
<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
|
||
|
||
```javascript
|
||
const picker = new IdmQuantityPicker({
|
||
selector: ".idm-quantity-picker",
|
||
min: 1,
|
||
max: 20
|
||
});
|
||
```
|
||
|
||
### Inicjalizacja przez referencję do elementu
|
||
|
||
```javascript
|
||
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
|
||
|
||
```html
|
||
<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.
|