diff --git a/index.js b/index.js new file mode 100644 index 0000000..a61691a --- /dev/null +++ b/index.js @@ -0,0 +1,73 @@ +class IdmQuantityPicker{ + constructor({selector , min = 1, max = 99}) { + const container = document.querySelector(selector); + if(!container){ + console.error("IdmQuantityPicker: container not found."); + return; + } + + const input = this.container.querySelector(".idm-quantity-picker__input"); + if(!input){ + console.error("IdmQuantityPicker: input not found"); + return; + } + + this.container=container; + this.input = input; + 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(){ + console.log("minus"); + 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(); + } +} \ No newline at end of file