95 lines
2.3 KiB
JavaScript
95 lines
2.3 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 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.minusButton = minusButton;
|
|
this.plusButton = plusButton;
|
|
this.min = min;
|
|
this.max = max;
|
|
this._value = Number.parseInt(input.value);
|
|
|
|
this.init();
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
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++;
|
|
|
|
}
|
|
|
|
handleMinus(){
|
|
this.value--;
|
|
}
|
|
|
|
initEvents(){
|
|
this.minusButton.addEventListener("click", () => this.handleMinus());
|
|
this.plusButton.addEventListener("click", () => this.handlePlus());
|
|
}
|
|
|
|
init(){
|
|
console.log("IdmQuantityPicker: init.");
|
|
this.initEvents();
|
|
this.updateButtons();
|
|
}
|
|
} |