| 1 |
/** |
| 2 |
* WordPress dependencies. |
| 3 |
*/ |
| 4 |
import domReady from '@wordpress/dom-ready'; |
| 5 |
|
| 6 |
/** |
| 7 |
* Initialize. |
| 8 |
* |
| 9 |
* @returns {void} |
| 10 |
*/ |
| 11 |
const init = () => { |
| 12 |
/** |
| 13 |
* Update the value in the range input label. |
| 14 |
* |
| 15 |
* @param {Element} el Range input element. |
| 16 |
*/ |
| 17 |
const updateSliderValue = (el) => { |
| 18 |
el.labels[0].querySelector('.weighting-value').textContent = el.disabled ? '0' : el.value; |
| 19 |
}; |
| 20 |
|
| 21 |
/** |
| 22 |
* Handle range slider input. |
| 23 |
* |
| 24 |
* @param {Event} event Input event. |
| 25 |
*/ |
| 26 |
const onSliderInput = (event) => { |
| 27 |
updateSliderValue(event.currentTarget); |
| 28 |
}; |
| 29 |
|
| 30 |
/** |
| 31 |
* Handle checkbox change. |
| 32 |
* |
| 33 |
* @param {Event} event Change event. |
| 34 |
*/ |
| 35 |
const onCheckboxChange = (event) => { |
| 36 |
const el = event.currentTarget.closest('fieldset').querySelector('input[type="range"]'); |
| 37 |
|
| 38 |
el.disabled = !event.currentTarget.checked; |
| 39 |
|
| 40 |
updateSliderValue(el); |
| 41 |
}; |
| 42 |
|
| 43 |
/** |
| 44 |
* Bind events. |
| 45 |
*/ |
| 46 |
const sliders = document.querySelectorAll('.weighting-settings input[type=range]'); |
| 47 |
|
| 48 |
for (const slider of sliders) { |
| 49 |
slider.addEventListener('input', onSliderInput); |
| 50 |
} |
| 51 |
|
| 52 |
const checkboxes = document.querySelectorAll( |
| 53 |
'.weighting-settings .searchable input[type=checkbox]', |
| 54 |
); |
| 55 |
|
| 56 |
for (const checkbox of checkboxes) { |
| 57 |
checkbox.addEventListener('change', onCheckboxChange); |
| 58 |
} |
| 59 |
}; |
| 60 |
|
| 61 |
/** |
| 62 |
* Initialize. |
| 63 |
*/ |
| 64 |
domReady(init); |
| 65 |
|
