diff --git a/index.js b/index.js
index 6db12bf..88b347b 100644
--- a/index.js
+++ b/index.js
@@ -1,106 +1,95 @@
-class IdmBasketHotspot {
-
- constructor({ selector, products }) {
- const container = document.querySelector(selector);
+class IdmQuantityPicker{
+ constructor({selector , min, max, ref}) {
+ const container = selector ? document.querySelector(selector) : ref;
if(!container){
- console.error("IdmBasketHotspotConstructor: container not found.")
+ console.error("IdmQuantityPicker: container not found.");
return;
}
- if(!products){
- console.error("IdmBasketHotspotConstructor: no products")
+ this.container=container;
+ const input = this.container.querySelector(".idm-quantity-picker__input");
+ if(!input){
+ console.error("IdmQuantityPicker: input not found");
+ return;
+ }
+ this.input = input;
+
+ if(typeof min === "undefined"){
+ min = this.input.min;
+ }else{
+ this.input.min=min;
+ }
+
+ if(typeof max === "undefined"){
+ max = this.input.max;
+ }else{
+ this.input.max=max;
+ }
+
+ const minusButton = this.container.querySelector(".idm-quantity-picker__button-minus");
+ const plusButton = this.container.querySelector(".idm-quantity-picker__button-plus");
+ if(!minusButton){
+ console.error("IdmQuantityPicker: minus button not found.");
+ return;
+ }
+ if(!plusButton){
+ console.error("IdmQuantityPicker: plus button not found.");
return;
}
- this.container = container;
- this.products = [...products];
-
+ this.minusButton = minusButton;
+ this.plusButton = plusButton;
+ this.min = min;
+ this.max = max;
+ this._value = Number.parseInt(input.value);
+
this.init();
}
-
- getCard(){
- return ` `;
+ updateButtons() {
+ if (!this.minusButton || !this.plusButton) return;
+
+ this.minusButton.classList.toggle("idm-quantity-picker__button--disabled", this._value <= this.min);
+ this.plusButton.classList.toggle("idm-quantity-picker__button--disabled", this._value >= this.max);
+
+ this.minusButton.disabled = this._value <= this.min;
+ this.plusButton.disabled = this._value >= this.max;
}
- getContent(){
- return `
-
-
- ${this.products.map(product => this.getCard(product)).join("")}
-
- `
+ updateInput(){
+ this.input.value = this._value;
+ this.updateButtons();
+ }
+
+ // unused
+ get value() {
+ return this._value;
+ }
+
+ set value(newValue) {
+ if (newValue < this.min || newValue > this.max)return;
+
+ this._value = newValue;
+ this.updateInput();
+ }
+
+ handlePlus(){
+ this.value++;
}
- render(){
- this.container.innerHTML = this.getContent();
+ handleMinus(){
+ this.value--;
}
initEvents(){
- const quantityPickers = this.container.querySelectorAll(".idm-quantity-picker");
- quantityPickers.forEach(picker => new IdmQuantityPicker({ref:picker}));
+ this.minusButton.addEventListener("click", () => this.handleMinus());
+ this.plusButton.addEventListener("click", () => this.handlePlus());
}
-
- init() {
- console.log("IdmBasketHotspot: init.");
- this.render();
+ init(){
+ console.log("IdmQuantityPicker: init.");
this.initEvents();
+ this.updateButtons();
}
}
\ No newline at end of file
-