Polylang / trunk

Polylang vtrunk

polylang / js / build / language-switcher.js

language-switcher.js in Polylang trunk, at js/build/language-switcher.js

148 lines 3.3 KB

Raw Download Zip

1	/******/ "use strict";
2
3	;// ./js/src/frontend-dropdown.js
4	/**
5	* Allows to open/close the language switcher's submenus when the "dropdown" layout is used.
6	*/
7
8	class Dropdown {
9	/**
10	* Attaches events to the dropdown's elements.
11	*
12	* @param {HTMLElement} button The button that opens/closes the dropdown.
13	*/
14	constructor( button ) {
15	this.button = button;
16	this.closeOnClickOutsideBinded = this.closeOnClickOutside.bind( this );
17
18	button.setAttribute( 'aria-expanded', 'false' );
19
20	button.parentNode.addEventListener(
21	'mouseenter',
22	this.open.bind( this )
23	);
24	button.parentNode.addEventListener(
25	'mouseleave',
26	this.close.bind( this )
27	);
28	button.addEventListener( 'click', this.toggle.bind( this ) );
29	button.nextElementSibling.addEventListener(
30	'keydown',
31	this.closeOnListKeydown.bind( this )
32	);
33	button.nextElementSibling
34	.querySelector( 'li:last-child > a' )
35	.addEventListener( 'blur', this.closeOnLastLinkBlur.bind( this ) );
36	}
37
38	/**
39	* Opens the submenu.
40	*/
41	open() {
42	this.button.setAttribute( 'aria-expanded', 'true' );
43	document.addEventListener( 'click', this.closeOnClickOutsideBinded );
44	}
45
46	/**
47	* Closes the submenu.
48	*/
49	close() {
50	this.button.setAttribute( 'aria-expanded', 'false' );
51	document.removeEventListener( 'click', this.closeOnClickOutsideBinded );
52	}
53
54	/**
55	* Toggles the submenu.
56	*/
57	toggle() {
58	const expanded = this.button.getAttribute( 'aria-expanded' );
59	if ( 'true' === expanded ) {
60	this.close();
61	} else {
62	this.open();
63	}
64	}
65
66	/**
67	* Event callback that closes the submenu when pressing the Escape key while in the list.
68	*
69	* @param {Event} event The event.
70	*/
71	closeOnListKeydown( event ) {
72	if ( event.key === 'Escape' ) {
73	this.button.focus();
74	this.close();
75	}
76	}
77
78	/**
79	* Event callback that closes the submenu when the last link in the list looses focus (to a target outside the list).
80	*
81	* @param {Event} event The event.
82	*/
83	closeOnLastLinkBlur( event ) {
84	if ( ! this.button.parentNode.contains( event.relatedTarget ) ) {
85	this.close();
86	}
87	}
88
89	/**
90	* Event callback that closes the submenu when the user clicks outside the dropdown.
91	*
92	* @param {Event} event The event.
93	*/
94	closeOnClickOutside( event ) {
95	if ( ! this.button.parentNode.contains( event.target ) ) {
96	this.close();
97	}
98	}
99	}
100
101	;// ./js/src/language-switcher.js
102	/**
103	* Allows to open/close the language switcher's submenus on click when the "dropdown" layout is used.
104	*/
105
106
107
108	const pllSwitcher = {
109	/**
110	* Init.
111	*/
112	init: () => {
113	if ( document.readyState !== 'loading' ) {
114	pllSwitcher.ready();
115	} else {
116	document.addEventListener( 'DOMContentLoaded', pllSwitcher.ready );
117	}
118	},
119
120	/**
121	* Called when the DOM is ready. Attaches the events to the buttons.
122	*/
123	ready: () => {
124	// Dropdowns.
125	const buttons = document.getElementsByClassName( 'pll-submenu-toggle' );
126
127	for ( const button of buttons ) {
128	new Dropdown( button );
129	}
130
131	// Selects.
132	const selects = document.getElementsByClassName(
133	'pll-switcher-select'
134	);
135
136	for ( const select of selects ) {
137	select.addEventListener( 'change', ( event ) => {
138	if ( event.currentTarget.value ) {
139	window.location.href = event.currentTarget.value; // Already escaped in `WP_Syntex\Polylang\Switcher\Element\Select::get()`.
140	}
141	} );
142	}
143	},
144	};
145
146	pllSwitcher.init();
147
148