jetpack
/
jetpack_vendor
/
automattic
/
jetpack-forms
/
src
/
modules
/
slider-field
Last commit date
view.js
9 months ago
view.js
40 lines
| 1 | import { store, getContext } from '@wordpress/interactivity'; |
| 2 | import { computeSliderValuePosition } from '../../blocks/input-range/utils.js'; |
| 3 | |
| 4 | const NAMESPACE = 'jetpack/form'; |
| 5 | |
| 6 | /** |
| 7 | * Gets the min and max values from the context object. |
| 8 | * |
| 9 | * @param {object} context - The interactivity context for the current slider field. |
| 10 | * @return {{min: number, max: number}} The min and max values for the slider. |
| 11 | */ |
| 12 | function getSliderMinMax( context ) { |
| 13 | const min = typeof context.min !== 'undefined' ? Number( context.min ) : 0; |
| 14 | const max = typeof context.max !== 'undefined' ? Number( context.max ) : 100; |
| 15 | return { min, max }; |
| 16 | } |
| 17 | |
| 18 | store( NAMESPACE, { |
| 19 | state: { |
| 20 | get getSliderValue() { |
| 21 | const context = getContext(); |
| 22 | const { min } = getSliderMinMax( context ); |
| 23 | // Use context.default if fieldValue is not set |
| 24 | return context.fieldValue ?? context.default ?? min ?? 0; |
| 25 | }, |
| 26 | get getSliderPosition() { |
| 27 | const context = getContext(); |
| 28 | const { min, max } = getSliderMinMax( context ); |
| 29 | const value = context.fieldValue ?? context.default ?? min; |
| 30 | return computeSliderValuePosition( min, max, value ); |
| 31 | }, |
| 32 | }, |
| 33 | actions: { |
| 34 | onSliderChange( event ) { |
| 35 | const context = getContext(); |
| 36 | context.fieldValue = event.target.value; |
| 37 | }, |
| 38 | }, |
| 39 | } ); |
| 40 |