83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
class IdmQuantityPicker{
|
|
constructor({selector , min, max, ref}) {
|
|
const container = selector ? document.querySelector(selector) : ref;
|
|
if(!container){
|
|
console.error("IdmQuantityPicker: container not found.");
|
|
return;
|
|
}
|
|
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 min === "undefined"){
|
|
max = this.input.max;
|
|
}else{
|
|
this.input.max=max;
|
|
}
|
|
|
|
this.min = min;
|
|
this.max = max;
|
|
this._value = Number.parseInt(input.value);
|
|
|
|
this.init();
|
|
}
|
|
|
|
|
|
updateInput(){
|
|
this.input.value = this._value;
|
|
}
|
|
|
|
// 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++;
|
|
|
|
}
|
|
|
|
handleMinus(){
|
|
this.value--;
|
|
}
|
|
|
|
initEvents(){
|
|
const minusButton = this.container.querySelector(".idm-quantity-picker__minus");
|
|
const plusButton = this.container.querySelector(".idm-quantity-picker__plus");
|
|
|
|
if(!minusButton){
|
|
console.error("IdmQuantityPicker: minus button not found.");
|
|
return;
|
|
}
|
|
|
|
if(!plusButton){
|
|
console.error("IdmQuantityPicker: plus button not found.");
|
|
return;
|
|
}
|
|
|
|
minusButton.addEventListener("click", () => this.handleMinus());
|
|
plusButton.addEventListener("click", () => this.handlePlus());
|
|
}
|
|
|
|
init(){
|
|
console.log("IdmQuantityPicker: init.");
|
|
this.initEvents();
|
|
}
|
|
} |