Elementor Website Builder – more than just a page builder / 3.26.1

Elementor Website Builder – more than just a page builder v3.26.1

elementor / assets / js / nested-title-keyboard-handler.451fba615fad42703872.bundle.js

nested-title-keyboard-handler.451fba615fad42703872.bundle.js in Elementor Website Builder – more than just a page builder 3.26.1, at assets/js/nested-title-keyboard-handler.451fba615fad42703872.bundle.js

206 lines 7.5 KB

Raw Download Zip

1	/! elementor - v3.26.0 - 19-12-2024 /
2	"use strict";
3	(self["webpackChunkelementor"] = self["webpackChunkelementor"] \|\| []).push([["nested-title-keyboard-handler"],{
4
5	/***/ "../assets/dev/js/frontend/handlers/accessibility/nested-title-keyboard-handler.js":
6	/!***************************************************************************************!\
7	!* ../assets/dev/js/frontend/handlers/accessibility/nested-title-keyboard-handler.js *!
8	\*****************************************************************************************/
9	/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
10
11
12
13	var _interopRequireDefault = __webpack_require__(/! @babel/runtime/helpers/interopRequireDefault / "../node_modules/@babel/runtime/helpers/interopRequireDefault.js");
14	Object.defineProperty(exports, "__esModule", ({
15	value: true
16	}));
17	exports["default"] = void 0;
18	__webpack_require__(/! core-js/modules/es.array.includes.js / "../node_modules/core-js/modules/es.array.includes.js");
19	var _base = _interopRequireDefault(__webpack_require__(/! ../base / "../assets/dev/js/frontend/handlers/base.js"));
20	class NestedTitleKeyboardHandler extends _base.default {
21	__construct(settings) {
22	super.__construct(settings);
23	this.directionNext = 'next';
24	this.directionPrevious = 'previous';
25	this.focusableElementSelector = 'audio, button, canvas, details, iframe, input, select, summary, textarea, video, [accesskey], [contenteditable], [href], [tabindex]:not([tabindex="-1"])';
26	}
27	getWidgetNumber() {
28	return this.$element.find('> .elementor-widget-container > .e-n-tabs, > .e-n-tabs').attr('data-widget-number');
29	}
30	getDefaultSettings() {
31	return {
32	selectors: {
33	itemTitle: `[id*="e-n-tab-title-${this.getWidgetNumber()}"]`,
34	itemContainer: `[id*="e-n-tab-content-${this.getWidgetNumber()}"]`
35	},
36	ariaAttributes: {
37	titleStateAttribute: 'aria-selected',
38	activeTitleSelector: '[aria-selected="true"]'
39	},
40	datasets: {
41	titleIndex: 'data-tab-index'
42	},
43	keyDirection: {
44	ArrowLeft: elementorFrontendConfig.is_rtl ? this.directionNext : this.directionPrevious,
45	ArrowUp: this.directionPrevious,
46	ArrowRight: elementorFrontendConfig.is_rtl ? this.directionPrevious : this.directionNext,
47	ArrowDown: this.directionNext
48	}
49	};
50	}
51	getDefaultElements() {
52	const selectors = this.getSettings('selectors');
53	return {
54	$itemTitles: this.findElement(selectors.itemTitle),
55	$itemContainers: this.findElement(selectors.itemContainer),
56	$focusableContainerElements: this.getFocusableElements(this.findElement(selectors.itemContainer))
57	};
58	}
59	getFocusableElements($elements) {
60	return $elements.find(this.focusableElementSelector).not('[disabled], [inert]');
61	}
62	getKeyDirectionValue(event) {
63	const direction = this.getSettings('keyDirection')[event.key];
64	return this.directionNext === direction ? 1 : -1;
65	}
66
67	/**
68	* @param {HTMLElement} itemTitleElement
69	*
70	* @return {string}
71	*/
72	getTitleIndex(itemTitleElement) {
73	const {
74	titleIndex: indexAttribute
75	} = this.getSettings('datasets');
76	return itemTitleElement.getAttribute(indexAttribute);
77	}
78
79	/**
80	* @param {string\|number} titleIndex
81	*
82	* @return {string}
83	*/
84	getTitleFilterSelector(titleIndex) {
85	const {
86	titleIndex: indexAttribute
87	} = this.getSettings('datasets');
88	return `[${indexAttribute}="${titleIndex}"]`;
89	}
90	getActiveTitleElement() {
91	const activeTitleFilter = this.getSettings('ariaAttributes').activeTitleSelector;
92	return this.elements.$itemTitles.filter(activeTitleFilter);
93	}
94	onInit() {
95	super.onInit(...arguments);
96	}
97	bindEvents() {
98	this.elements.$itemTitles.on(this.getTitleEvents());
99	this.elements.$focusableContainerElements.on(this.getContentElementEvents());
100	}
101	unbindEvents() {
102	this.elements.$itemTitles.off(this.getTitleEvents());
103	this.elements.$focusableContainerElements.children().off(this.getContentElementEvents());
104	}
105	getTitleEvents() {
106	return {
107	keydown: this.handleTitleKeyboardNavigation.bind(this)
108	};
109	}
110	getContentElementEvents() {
111	return {
112	keydown: this.handleContentElementKeyboardNavigation.bind(this)
113	};
114	}
115	isDirectionKey(event) {
116	const directionKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
117	return directionKeys.includes(event.key);
118	}
119	isActivationKey(event) {
120	const activationKeys = ['Enter', ' '];
121	return activationKeys.includes(event.key);
122	}
123	handleTitleKeyboardNavigation(event) {
124	if (this.isDirectionKey(event)) {
125	event.preventDefault();
126	const currentTitleIndex = parseInt(this.getTitleIndex(event.currentTarget)) \|\| 1,
127	numberOfTitles = this.elements.$itemTitles.length,
128	titleIndexUpdated = this.getTitleIndexFocusUpdated(event, currentTitleIndex, numberOfTitles);
129	this.changeTitleFocus(titleIndexUpdated);
130	event.stopPropagation();
131	} else if (this.isActivationKey(event)) {
132	event.preventDefault();
133	if (this.handeTitleLinkEnterOrSpaceEvent(event)) {
134	return;
135	}
136	const titleIndex = this.getTitleIndex(event.currentTarget);
137	elementorFrontend.elements.$window.trigger('elementor/nested-elements/activate-by-keyboard', {
138	widgetId: this.getID(),
139	titleIndex
140	});
141	} else if ('Escape' === event.key) {
142	this.handleTitleEscapeKeyEvents(event);
143	}
144	}
145	handeTitleLinkEnterOrSpaceEvent(event) {
146	const isLinkElement = 'a' === event?.currentTarget?.tagName?.toLowerCase();
147	if (!elementorFrontend.isEditMode() && isLinkElement) {
148	event?.currentTarget?.click();
149	event.stopPropagation();
150	}
151	return isLinkElement;
152	}
153	getTitleIndexFocusUpdated(event, currentTitleIndex, numberOfTitles) {
154	let titleIndexUpdated = 0;
155	switch (event.key) {
156	case 'Home':
157	titleIndexUpdated = 1;
158	break;
159	case 'End':
160	titleIndexUpdated = numberOfTitles;
161	break;
162	default:
163	const directionValue = this.getKeyDirectionValue(event),
164	isEndReached = numberOfTitles < currentTitleIndex + directionValue,
165	isStartReached = 0 === currentTitleIndex + directionValue;
166	if (isEndReached) {
167	titleIndexUpdated = 1;
168	} else if (isStartReached) {
169	titleIndexUpdated = numberOfTitles;
170	} else {
171	titleIndexUpdated = currentTitleIndex + directionValue;
172	}
173	}
174	return titleIndexUpdated;
175	}
176	changeTitleFocus(titleIndexUpdated) {
177	const $newTitle = this.elements.$itemTitles.filter(this.getTitleFilterSelector(titleIndexUpdated));
178	this.setTitleTabindex(titleIndexUpdated);
179	$newTitle.trigger('focus');
180	}
181	setTitleTabindex(titleIndex) {
182	this.elements.$itemTitles.attr('tabindex', '-1');
183	const $newTitle = this.elements.$itemTitles.filter(this.getTitleFilterSelector(titleIndex));
184	$newTitle.attr('tabindex', '0');
185	}
186	handleTitleEscapeKeyEvents() {}
187	handleContentElementKeyboardNavigation(event) {
188	if ('Tab' === event.key && !event.shiftKey) {
189	this.handleContentElementTabEvents(event);
190	} else if ('Escape' === event.key) {
191	event.preventDefault();
192	event.stopPropagation();
193	this.handleContentElementEscapeEvents(event);
194	}
195	}
196	handleContentElementEscapeEvents() {
197	this.getActiveTitleElement().trigger('focus');
198	}
199	handleContentElementTabEvents() {}
200	}
201	exports["default"] = NestedTitleKeyboardHandler;
202
203	/***/ })
204
205	}]);
206	//# sourceMappingURL=nested-title-keyboard-handler.451fba615fad42703872.bundle.js.map