@@ -13,39 +13,30 @@ const MODIFIER_EMPTY_FALSE = 'empty_false';
1313 */
1414export function initFilterModifiers ( ) : void {
1515 for ( const form of getElements < HTMLFormElement > ( 'form' ) ) {
16- // Only process forms with modifier selects
1716 const modifierSelects = form . querySelectorAll < HTMLSelectElement > ( '.modifier-select' ) ;
1817 if ( modifierSelects . length === 0 ) continue ;
1918
20- // Initialize form state from URL parameters
2119 initializeFromURL ( form ) ;
2220
23- // Add change listeners to modifier dropdowns to handle isnull
2421 modifierSelects . forEach ( select => {
2522 select . addEventListener ( 'change' , ( ) => handleModifierChange ( select ) ) ;
26- // Trigger initial state
2723 handleModifierChange ( select ) ;
2824 } ) ;
2925
30- // Handle form submission - must use submit event for GET forms
26+ // Must use submit event for GET forms
3127 form . addEventListener ( 'submit' , e => {
3228 e . preventDefault ( ) ;
3329
34- // Build FormData to get all form values
3530 const formData = new FormData ( form ) ;
36-
37- // Transform field names
3831 handleFormDataTransform ( form , formData ) ;
3932
40- // Build URL with transformed parameters
4133 const params = new URLSearchParams ( ) ;
4234 for ( const [ key , value ] of formData . entries ( ) ) {
4335 if ( value && String ( value ) . trim ( ) ) {
4436 params . append ( key , String ( value ) ) ;
4537 }
4638 }
4739
48- // Navigate to new URL
4940 window . location . href = `${ form . action } ?${ params . toString ( ) } ` ;
5041 } ) ;
5142 }
@@ -69,11 +60,9 @@ function handleModifierChange(modifierSelect: HTMLSelectElement): void {
6960
7061 const modifier = modifierSelect . value ;
7162
72- // Disable and add placeholder for empty modifiers
7363 if ( modifier === MODIFIER_EMPTY_TRUE || modifier === MODIFIER_EMPTY_FALSE ) {
7464 valueInput . disabled = true ;
7565 valueInput . value = '' ;
76- // Get translatable placeholder from modifier dropdown's data attribute
7766 const placeholder = modifierSelect . dataset . emptyPlaceholder || '(automatically set)' ;
7867 valueInput . setAttribute ( 'placeholder' , placeholder ) ;
7968 } else {
@@ -90,7 +79,6 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi
9079
9180 for ( const group of modifierGroups ) {
9281 const modifierSelect = group . querySelector < HTMLSelectElement > ( '.modifier-select' ) ;
93- // Find input in the wrapper div (more specific selector)
9482 const wrapper = group . querySelector ( '.filter-value-container' ) ;
9583 if ( ! wrapper ) continue ;
9684
@@ -103,20 +91,17 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi
10391 const currentName = valueInput . name ;
10492 const modifier = modifierSelect . value ;
10593
106- // Handle empty special case
10794 if ( modifier === MODIFIER_EMPTY_TRUE || modifier === MODIFIER_EMPTY_FALSE ) {
10895 formData . delete ( currentName ) ;
10996 const boolValue = modifier === MODIFIER_EMPTY_TRUE ? 'true' : 'false' ;
11097 formData . set ( `${ currentName } __empty` , boolValue ) ;
11198 } else {
112- // Get all values (handles multi-select)
11399 const values = formData . getAll ( currentName ) ;
114100
115101 if ( values . length > 0 && values . some ( v => String ( v ) . trim ( ) ) ) {
116102 formData . delete ( currentName ) ;
117103 const newName = modifier === 'exact' ? currentName : `${ currentName } __${ modifier } ` ;
118104
119- // Set all values with the new name
120105 for ( const value of values ) {
121106 if ( String ( value ) . trim ( ) ) {
122107 formData . append ( newName , value ) ;
@@ -142,12 +127,10 @@ function handleFormDataTransform(form: HTMLFormElement, formData: FormData): voi
142127function initializeFromURL ( form : HTMLFormElement ) : void {
143128 const urlParams = new URLSearchParams ( window . location . search ) ;
144129
145- // Find all modifier groups
146130 const modifierGroups = form . querySelectorAll ( '.filter-modifier-group' ) ;
147131
148132 for ( const group of modifierGroups ) {
149133 const modifierSelect = group . querySelector < HTMLSelectElement > ( '.modifier-select' ) ;
150- // Find input in the wrapper div (more specific selector)
151134 const wrapper = group . querySelector ( '.filter-value-container' ) ;
152135 if ( ! wrapper ) continue ;
153136
@@ -157,7 +140,7 @@ function initializeFromURL(form: HTMLFormElement): void {
157140
158141 if ( ! modifierSelect || ! valueInput ) continue ;
159142
160- const baseFieldName = valueInput . name ; // e.g., "serial"
143+ const baseFieldName = valueInput . name ;
161144
162145 // Special handling for empty - check if field__empty exists in URL
163146 const emptyParam = `${ baseFieldName } __empty` ;
@@ -168,7 +151,6 @@ function initializeFromURL(form: HTMLFormElement): void {
168151 continue ; // Don't set value input for empty
169152 }
170153
171- // Check each possible lookup in URL
172154 for ( const option of modifierSelect . options ) {
173155 const lookup = option . value ;
174156
@@ -180,15 +162,12 @@ function initializeFromURL(form: HTMLFormElement): void {
180162 if ( urlParams . has ( paramName ) ) {
181163 modifierSelect . value = lookup ;
182164
183- // Handle multi-select vs single-value inputs
184165 if ( valueInput instanceof HTMLSelectElement && valueInput . multiple ) {
185- // For multi-select, set selected on matching options
186166 const values = urlParams . getAll ( paramName ) ;
187167 for ( const option of valueInput . options ) {
188168 option . selected = values . includes ( option . value ) ;
189169 }
190170 } else {
191- // For single-value inputs, set value directly
192171 valueInput . value = urlParams . get ( paramName ) || '' ;
193172 }
194173 break ;
0 commit comments