-
Notifications
You must be signed in to change notification settings - Fork 4k
/
view.js
73 lines (72 loc) · 2 KB
/
view.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/**
* WordPress dependencies
*/
import { store as wpStore } from '@wordpress/interactivity';
wpStore( {
selectors: {
core: {
search: {
ariaLabel: ( { context } ) => {
const { ariaLabelCollapsed, ariaLabelExpanded } =
context.core.search;
return context.core.search.isSearchInputVisible
? ariaLabelExpanded
: ariaLabelCollapsed;
},
ariaControls: ( { context } ) => {
return context.core.search.isSearchInputVisible
? null
: context.core.search.inputId;
},
type: ( { context } ) => {
return context.core.search.isSearchInputVisible
? 'submit'
: 'button';
},
tabindex: ( { context } ) => {
return context.core.search.isSearchInputVisible
? '0'
: '-1';
},
},
},
},
actions: {
core: {
search: {
openSearchInput: ( { context, event, ref } ) => {
if ( ! context.core.search.isSearchInputVisible ) {
event.preventDefault();
context.core.search.isSearchInputVisible = true;
ref.parentElement.querySelector( 'input' ).focus();
}
},
closeSearchInput: ( { context } ) => {
context.core.search.isSearchInputVisible = false;
},
handleSearchKeydown: ( store ) => {
const { actions, event, ref } = store;
// If Escape close the menu.
if ( event?.key === 'Escape' ) {
actions.core.search.closeSearchInput( store );
ref.querySelector( 'button' ).focus();
}
},
handleSearchFocusout: ( store ) => {
const { actions, event, ref } = store;
// If focus is outside search form, and in the document, close menu
// event.target === The element losing focus
// event.relatedTarget === The element receiving focus (if any)
// When focusout is outside the document,
// `window.document.activeElement` doesn't change.
if (
! ref.contains( event.relatedTarget ) &&
event.target !== window.document.activeElement
) {
actions.core.search.closeSearchInput( store );
}
},
},
},
},
} );