11import BEM from 'bem.js'
22import { Component } from '../abstract/component'
33
4- /** @type {string } The primary navibation block name. */
4+ /** @type {string } The primary navigation block name. */
55const BLOCK_PRIMARY_NAVIGATION = 'primary-navigation'
66
77/** @type {NodeList<HTMLElement> } The primary navigation block name. */
@@ -10,75 +10,85 @@ const PRIMARY_NAVIGATIONS = BEM.getBEMNodes(BLOCK_PRIMARY_NAVIGATION)
1010/** @type {string } The dismissed modifier state, overrides focus/hover. */
1111const MODIFIER_DISMISSED = 'dismissed'
1212
13+ /** Handler to bypass Safari bug */
14+ const navigationToggle = document . querySelectorAll (
15+ '.primary-navigation--toggle'
16+ )
17+
1318/**
1419 * Controls the primary navigation and dismissing it using the escape key.
1520 */
1621class PrimaryNavigation extends Component {
1722 /**
1823 * Binds events to callbacks.
1924 * Callbacks should trigger `setState` which in turn triggers `render`.
25+ * Focus is split to be handled in Safari
2026 */
2127 bindEvents ( ) {
22- this . node . addEventListener ( 'focus' , this . onFocus . bind ( this ) )
23- this . node . addEventListener ( 'mouseenter' , this . onHover . bind ( this ) )
28+ this . node . addEventListener ( 'click' , this . toggleDesktopNavOpen . bind ( this ) )
29+ this . node . addEventListener ( 'focusin' , this . onFocusIn . bind ( this ) )
30+ this . node . addEventListener ( 'focusout' , this . onFocusOut . bind ( this ) )
2431 window . addEventListener ( 'keyup' , this . onKeyUp . bind ( this ) )
2532 }
2633
2734 /**
28- * Gets called when `node` receives focus.
35+ * Gets called when `node` receives focus -in or -out events .
2936 * Clears the dismissed state, (prevents overriding focus/hover).
37+ * Focusin and Focusout are used instead of Focus for Safari
3038 */
31- onFocus ( ) {
39+ onFocusIn ( ) {
3240 this . setState ( { dismissed : false } )
41+ this . node . classList . add ( 'primary-navigation--open' )
42+ }
43+ onFocusOut ( ) {
44+ this . setState ( { dismissed : true } )
45+ this . node . blur ( )
46+ this . node . classList . remove ( 'primary-navigation--open' )
3347 }
3448
3549 /**
36- * Gets called when `node` receives focus .
37- * Clears the dismissed state, (prevents overriding focus/hover ).
50+ * Gets called when `node` is clicked .
51+ * Clears the dismissed state, (prevents overriding focus/toggle ).
3852 */
39- onHover ( ) {
53+ toggleDesktopNavOpen ( event ) {
54+ event . stopPropagation ( )
4055 this . setState ( { dismissed : false } )
56+ this . node . classList . add ( 'primary-navigation--open' )
4157 }
4258
4359 /**
4460 * Gets called when a key is released.
4561 * If key is escape key, explicitly dismiss the menu (overriding focus/hover).
46- * @param {KeyboardEvent } event
62+ // * @param {KeyboardEvent } event
4763 */
4864 onKeyUp ( event ) {
4965 if ( event . key === 'Escape' ) {
50- if ( this . getFocussedChild ( ) || this . getHoveredChild ( ) ) {
51- this . setState ( { dismissed : true } )
52- }
66+ this . setState ( { dismissed : true } )
67+ this . node . blur ( )
68+ this . node . classList . remove ( 'primary-navigation--open' )
69+ // Safari specific
70+ navigationToggle . forEach ( ( elem ) => {
71+ elem . blur ( )
72+ } )
5373 }
5474 }
5575
56- /**
57- * Returns the child node in focus (if any).
58- * @return {HTMLElement|null }
59- */
60- getFocussedChild ( ) {
61- return this . node . querySelector ( ':focus' ) || null
62- }
63-
64- /**
65- * Returns the hovered child node (if any).
66- * @return {HTMLElement|null }
67- */
68- getHoveredChild ( ) {
69- return this . node . querySelector ( ':hover' ) || null
70- }
71-
7276 /**
7377 * Persists state to DOM.
7478 * Rendering should be one-way traffic and not inspect any current values in DOM.
75- * @param {Object } state State to render.
79+ // * @param {Object } state State to render.
7680 */
7781 render ( state ) {
7882 BEM . toggleModifier ( this . node , MODIFIER_DISMISSED , state . dismissed )
7983
8084 if ( state . dismissed ) {
81- this . getFocussedChild ( ) . blur ( )
85+ this . node . blur ( )
86+ // Safari specific
87+ navigationToggle . forEach ( ( elem ) => {
88+ elem . blur ( )
89+ } )
90+
91+ return this . node . querySelector ( '.primary-navigation--toggle' )
8292 }
8393 }
8494}
0 commit comments