68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
/**
|
|
* Count input with increment (+) and decrement (-) buttons
|
|
*/
|
|
|
|
export default (() => {
|
|
const countInputs = document.querySelectorAll('.count-input')
|
|
|
|
if (countInputs.length === 0) return
|
|
|
|
const handleIncrement = (event) => {
|
|
const input = event.currentTarget.parentNode.querySelector('.form-control')
|
|
const maxValue = parseInt(input.getAttribute('max')) || Infinity
|
|
|
|
if (input.value < maxValue) {
|
|
input.value++
|
|
updateButtonStates(input)
|
|
}
|
|
}
|
|
|
|
const handleDecrement = (event) => {
|
|
const input = event.currentTarget.parentNode.querySelector('.form-control')
|
|
const minValue = parseInt(input.getAttribute('min')) || 0
|
|
|
|
if (input.value > minValue) {
|
|
input.value--
|
|
updateButtonStates(input)
|
|
}
|
|
}
|
|
|
|
const updateButtonStates = (input) => {
|
|
const decrementBtn = input.parentNode.querySelector('[data-decrement]')
|
|
const incrementBtn = input.parentNode.querySelector('[data-increment]')
|
|
const minValue = parseInt(input.getAttribute('min')) || 0
|
|
const maxValue = parseInt(input.getAttribute('max')) || Infinity
|
|
|
|
decrementBtn.disabled = input.value <= minValue
|
|
incrementBtn.disabled = input.value >= maxValue
|
|
|
|
const parent = input.closest('.count-input')
|
|
if (!parent.classList.contains('count-input-collapsible')) return
|
|
|
|
const inputValue = incrementBtn.querySelector('[data-count-input-value]')
|
|
|
|
if (input.value > 0) {
|
|
parent.classList.remove('collapsed')
|
|
if (inputValue) {
|
|
inputValue.textContent = input.value
|
|
}
|
|
} else {
|
|
parent.classList.add('collapsed')
|
|
if (inputValue) {
|
|
inputValue.textContent = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
countInputs.forEach((component) => {
|
|
const incrementBtn = component.querySelector('[data-increment]')
|
|
const decrementBtn = component.querySelector('[data-decrement]')
|
|
const input = component.querySelector('.form-control')
|
|
|
|
incrementBtn.addEventListener('click', handleIncrement)
|
|
decrementBtn.addEventListener('click', handleDecrement)
|
|
|
|
updateButtonStates(input)
|
|
})
|
|
})()
|