king-addons / includes / widgets / Off_Canvas_Content / Off_Canvas_Content.php

Off_Canvas_Content.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.83, at includes/widgets/Off_Canvas_Content/Off_Canvas_Content.php

702 lines 26.7 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use DOMDocument;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Icons_Manager;
11	use Elementor\Plugin;
12	use Elementor\Widget_Base;
13
14	/** @noinspection SpellCheckingInspection */
15	if (!defined('ABSPATH')) {
16	exit; // Exit if accessed directly.
17	}
18
19
20
21	class Off_Canvas_Content extends Widget_Base
22	{
23
24
25	public function get_name(): string
26	{
27	return 'king-addons-off-canvas-content';
28	}
29
30	public function get_title(): string
31	{
32	return esc_html__('Off-Canvas Content', 'king-addons');
33	}
34
35	public function get_icon(): string
36	{
37	/** @noinspection SpellCheckingInspection */
38	return 'king-addons-icon king-addons-off-canvas-content';
39	}
40
41	public function get_style_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-off-canvas-content-style'];
44	}
45
46	public function get_categories(): array
47	{
48	return ['king-addons'];
49	}
50
51	public function get_keywords(): array
52	{
53	return ['off', 'canvas', 'offcanvas', 'ofcavas', 'off-canvas', 'content', 'button', 'sidebar', 'side', 'bar',
54	'menu', 'popup', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link', 'left',
55	'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture',
56	'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page',
57	'kingaddons', 'king-addons', 'off canvas', 'pop up', 'popup', 'lightbox', 'box', 'modal', 'window', 'tab',
58	'appear', 'show', 'hide', 'center', 'up', 'frame', 'iframe', 'embed'];
59	}
60
61	public function get_custom_help_url()
62	{
63	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
64	}
65
66	protected function register_controls(): void
67	{
68	/** START TAB: CONTENT ===================== */
69	/** SECTION: General ===================== */
70	$this->start_controls_section(
71	'kng_off_canvas_section_general',
72	[
73	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
74	]
75	);
76
77	$this->add_control(
78	'kng_off_canvas_template',
79	[
80	'label' => esc_html__('Select Template', 'king-addons'),
81	'type' => 'king-addons-ajax-select2',
82	'options' => 'ajaxselect2/getElementorTemplates',
83	'label_block' => true,
84	]
85	);
86
87	$this->add_control(
88	'kng_off_canvas_box_position',
89	[
90	'label' => esc_html__('Box Position', 'king-addons'),
91	'type' => Controls_Manager::CHOOSE,
92	'default' => 'left',
93	'options' => [
94	'top' => [
95	'title' => esc_html__('Top', 'king-addons'),
96	'icon' => 'eicon-v-align-top',
97	],
98	'right' => [
99	'title' => esc_html__('Right', 'king-addons'),
100	'icon' => 'eicon-h-align-right',
101	],
102	'bottom' => [
103	'title' => esc_html__('Bottom', 'king-addons'),
104	'icon' => 'eicon-v-align-bottom',
105	],
106	'left' => [
107	'title' => esc_html__('Left', 'king-addons'),
108	'icon' => 'eicon-h-align-left',
109	],
110	],
111	]
112	);
113
114	$this->add_responsive_control(
115	'kng_off_canvas_box_max_width',
116	[
117	'label' => esc_html__('Maximum Width (px)', 'king-addons'),
118	'type' => Controls_Manager::NUMBER,
119	'min' => 0,
120	'step' => 1,
121	'default' => 300,
122	'selectors' => [
123	'.king-addons-off-canvas-{{ID}}' => 'max-width: {{VALUE}}px;',
124	],
125	'condition' => [
126	'kng_off_canvas_box_position' => ['left', 'right']
127	]
128	]
129	);
130
131	$this->add_control(
132	'kng_off_canvas_box_max_height_switcher',
133	[
134	'label' => esc_html__('Set the Maximum Height of Off-Canvas Content', 'king-addons'),
135	'type' => Controls_Manager::SWITCHER
136	]
137	);
138
139	$this->add_responsive_control(
140	'kng_off_canvas_box_max_height',
141	[
142	'label' => esc_html__('Maximum Height (px)', 'king-addons'),
143	'type' => Controls_Manager::NUMBER,
144	'min' => 0,
145	'step' => 1,
146	'default' => 300,
147	'selectors' => [
148	'.king-addons-off-canvas-{{ID}}' => 'max-height: {{VALUE}}px;',
149	],
150	'condition' => [
151	'kng_off_canvas_box_max_height_switcher!' => '',
152	'kng_off_canvas_box_position' => ['top', 'bottom']
153	]
154	]
155	);
156
157	$this->add_control(
158	'kng_off_canvas_btn_text',
159	[
160	'label' => esc_html__('Button Text', 'king-addons'),
161	'type' => Controls_Manager::TEXT,
162	'default' => esc_html__('Open Off-Canvas Content', 'king-addons'),
163	]
164	);
165
166	$this->add_control(
167	'kng_off_canvas_disable_btn',
168	[
169	'label' => esc_html__('Disable Button', 'king-addons'),
170	'type' => Controls_Manager::SWITCHER,
171	'description' => esc_html__('This is a useful feature if there is a need to set a custom element as the trigger instead of the default button.', 'king-addons'),
172	'separator' => 'before'
173	]
174	);
175
176	$this->add_control(
177	'kng_off_canvas_class',
178	[
179	'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
180	'description' => esc_html__('Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the off-canvas content will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode.', 'king-addons'),
181	'type' => Controls_Manager::TEXT,
182	'placeholder' => esc_html__('Type your class here', 'king-addons'),
183	'label_block' => true,
184	'ai' => [
185	'active' => false,
186	],
187	]
188	);
189
190	$this->end_controls_section();
191	/** END SECTION: General ===================== */
192	/** END TAB: CONTENT ===================== */
193
194	/** TAB: STYLE ===================== */
195	/** SECTION: Button ===================== */
196	$this->start_controls_section(
197	'kng_off_canvas_section_style_btn',
198	[
199	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
200	'tab' => Controls_Manager::TAB_STYLE,
201	]
202	);
203
204	$this->add_control(
205	'kng_off_canvas_btn_h_position',
206	[
207	'label' => esc_html__('Button Horizontal Position', 'king-addons'),
208	'type' => Controls_Manager::CHOOSE,
209	'default' => 'center',
210	'options' => [
211	'left' => [
212	'title' => esc_html__('Left', 'king-addons'),
213	'icon' => 'eicon-h-align-left',
214	],
215	'center' => [
216	'title' => esc_html__('Center', 'king-addons'),
217	'icon' => 'eicon-h-align-center',
218	],
219	'right' => [
220	'title' => esc_html__('Right', 'king-addons'),
221	'icon' => 'eicon-h-align-right',
222	],
223	],
224	'selectors' => [
225	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
226	],
227	]
228	);
229
230	$this->add_control(
231	'kng_off_canvas_btn_tabs_title',
232	[
233	'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
234	'type' => Controls_Manager::RAW_HTML,
235	'separator' => 'before'
236	]
237	);
238
239	$this->start_controls_tabs('kng_off_canvas_btn_tabs');
240
241	$this->start_controls_tab(
242	'kng_off_canvas_btn_tab_normal',
243	[
244	'label' => esc_html__('Normal', 'king-addons'),
245	]
246	);
247
248	$this->add_group_control(
249	Group_Control_Typography::get_type(),
250	[
251	'name' => 'kng_off_canvas_btn_typography',
252	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
253	]
254	);
255
256	$this->add_control(
257	'kng_off_canvas_btn_txt_color',
258	[
259	'label' => esc_html__('Text Color', 'king-addons'),
260	'type' => Controls_Manager::COLOR,
261	'default' => '#ffffff',
262	'selectors' => [
263	'{{WRAPPER}} .king-addons-off-canvas-button' => 'color: {{VALUE}}'
264	],
265	]
266	);
267
268	$this->add_control(
269	'kng_off_canvas_btn_bg_color',
270	[
271	'label' => esc_html__('Background Color', 'king-addons'),
272	'type' => Controls_Manager::COLOR,
273	'default' => '#574ff7',
274	'selectors' => [
275	'{{WRAPPER}} .king-addons-off-canvas-button' => 'background-color: {{VALUE}}',
276	],
277	]
278	);
279
280	$this->add_responsive_control(
281	'kng_off_canvas_btn_padding',
282	[
283	'label' => esc_html__('Padding', 'king-addons'),
284	'type' => Controls_Manager::DIMENSIONS,
285	'size_units' => ['px'],
286	'default' => [
287	'top' => 10,
288	'right' => 10,
289	'bottom' => 10,
290	'left' => 10,
291	],
292	'selectors' => [
293	'{{WRAPPER}} .king-addons-off-canvas-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
294	]
295	]
296	);
297
298	$this->add_group_control(
299	Group_Control_Box_Shadow::get_type(),
300	[
301	'name' => 'kng_off_canvas_btn_box_shadow',
302	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
303	]
304	);
305
306	$this->add_group_control(
307	Group_Control_Border::get_type(),
308	[
309	'name' => 'kng_off_canvas_btn_border',
310	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
311	'fields_options' => [
312	'border' => [
313	'default' => 'none',
314	],
315	],
316	]
317	);
318
319	$this->add_responsive_control(
320	'kng_off_canvas_btn_border_radius',
321	[
322	'label' => esc_html__('Border Radius', 'king-addons'),
323	'type' => Controls_Manager::DIMENSIONS,
324	'size_units' => ['px', '%'],
325	'default' => [
326	'top' => 0,
327	'right' => 0,
328	'bottom' => 0,
329	'left' => 0,
330	],
331	'selectors' => [
332	'{{WRAPPER}} .king-addons-off-canvas-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333	]
334	]
335	);
336
337	$this->end_controls_tab();
338
339	$this->start_controls_tab(
340	'kng_off_canvas_btn_tab_hover',
341	[
342	'label' => esc_html__('Hover', 'king-addons'),
343	]
344	);
345
346	$this->add_group_control(
347	Group_Control_Typography::get_type(),
348	[
349	'name' => 'kng_off_canvas_btn_typography_hover',
350	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
351	]
352	);
353
354	$this->add_control(
355	'kng_off_canvas_btn_txt_color_hover',
356	[
357	'label' => esc_html__('Text Color', 'king-addons'),
358	'type' => Controls_Manager::COLOR,
359	'selectors' => [
360	'{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'color: {{VALUE}}'
361	],
362	]
363	);
364
365	$this->add_control(
366	'kng_off_canvas_btn_bg_color_hover',
367	[
368	'label' => esc_html__('Background Color', 'king-addons'),
369	'type' => Controls_Manager::COLOR,
370	'selectors' => [
371	'{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'background-color: {{VALUE}}',
372	],
373	]
374	);
375
376	$this->add_responsive_control(
377	'kng_off_canvas_btn_padding_hover',
378	[
379	'label' => esc_html__('Padding', 'king-addons'),
380	'type' => Controls_Manager::DIMENSIONS,
381	'size_units' => ['px'],
382	'selectors' => [
383	'{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
384	]
385	]
386	);
387
388	$this->add_group_control(
389	Group_Control_Box_Shadow::get_type(),
390	[
391	'name' => 'kng_off_canvas_btn_box_shadow_hover',
392	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
393	]
394	);
395
396	$this->add_group_control(
397	Group_Control_Border::get_type(),
398	[
399	'name' => 'kng_off_canvas_btn_border_hover',
400	'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
401	]
402	);
403
404	$this->add_responsive_control(
405	'kng_off_canvas_btn_border_radius_hover',
406	[
407	'label' => esc_html__('Border Radius', 'king-addons'),
408	'type' => Controls_Manager::DIMENSIONS,
409	'size_units' => ['px', '%'],
410	'selectors' => [
411	'{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	]
413	]
414	);
415
416	$this->end_controls_tab();
417
418	$this->end_controls_tabs();
419
420	$this->end_controls_section();
421	/** END SECTION: Button ===================== */
422
423	/** SECTION: Off-Canvas box ===================== */
424	$this->start_controls_section(
425	'kng_off_canvas_section_style_off_canvas_box',
426	[
427	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Off-Canvas box', 'king-addons'),
428	'tab' => Controls_Manager::TAB_STYLE,
429	]
430	);
431
432	$this->add_control(
433	'kng_off_canvas_box_bg_color',
434	[
435	'label' => esc_html__('Background Color', 'king-addons'),
436	'type' => Controls_Manager::COLOR,
437	'default' => '#ffffff',
438	'selectors' => [
439	'.king-addons-off-canvas-{{ID}}' => 'background-color: {{VALUE}};',
440	],
441	]
442	);
443
444	$this->add_responsive_control(
445	'kkng_off_canvas_box_padding',
446	[
447	'label' => esc_html__('Padding', 'king-addons'),
448	'type' => Controls_Manager::DIMENSIONS,
449	'size_units' => ['px', '%'],
450	'default' => [
451	'top' => 10,
452	'right' => 10,
453	'bottom' => 10,
454	'left' => 10,
455	'unit' => 'px',
456	],
457	'selectors' => [
458	'.king-addons-off-canvas-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
459	]
460	]
461	);
462
463	$this->add_control(
464	'kng_off_canvas_box_z_index',
465	[
466	'label' => esc_html__('Z-Index of Off-Canvas box (optional)', 'king-addons'),
467	'description' => esc_html__('Note: The Off-Canvas box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Off-Canvas box will display properly over all elements on the live website. Please check it there.', 'king-addons'),
468	'type' => Controls_Manager::NUMBER,
469	'step' => 1,
470	'default' => 999999,
471	'separator' => 'before',
472	'selectors' => [
473	'.king-addons-off-canvas-{{ID}}' => 'z-index: {{VALUE}};',
474	'.king-addons-off-canvas-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
475	],
476	]
477	);
478
479	$this->end_controls_section();
480	/** END SECTION: Off-Canvas box ===================== */
481
482	/** SECTION: Close Button ===================== */
483	$this->start_controls_section(
484	'kng_off_canvas_section_style_close_btn',
485	[
486	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Close Button', 'king-addons'),
487	'tab' => Controls_Manager::TAB_STYLE,
488	]
489	);
490
491	$this->add_control(
492	'kng_off_canvas_close_btn_icon',
493	[
494	'label' => esc_html__('Select Icon', 'king-addons'),
495	'type' => Controls_Manager::ICONS,
496	'skin' => 'inline',
497	'label_block' => false,
498	'exclude_inline_options' => ['svg'],
499	'default' => [
500	'value' => 'fas fa-times',
501	'library' => 'fa-solid',
502	],
503	]
504	);
505
506	$this->add_control(
507	'kng_off_canvas_close_btn_color',
508	[
509	'label' => esc_html__('Color', 'king-addons'),
510	'type' => Controls_Manager::COLOR,
511	'default' => '#000000',
512	'selectors' => [
513	'.king-addons-off-canvas-close-button-{{ID}}' => 'color: {{VALUE}};',
514	],
515	]
516	);
517
518	$this->add_control(
519	'kng_off_canvas_close_btn_size',
520	[
521	'label' => esc_html__('Size (px)', 'king-addons'),
522	'type' => Controls_Manager::NUMBER,
523	'min' => 1,
524	'step' => 1,
525	'default' => 20,
526	'separator' => 'before',
527	'selectors' => [
528	'.king-addons-off-canvas-close-button-{{ID}}' => 'font-size: {{VALUE}}px;',
529	],
530	]
531	);
532
533	$this->end_controls_section();
534	/** END SECTION: Close Button ===================== */
535
536	/** SECTION: Overlay ===================== */
537	$this->start_controls_section(
538	'kng_off_canvas_overlay',
539	[
540	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
541	'tab' => Controls_Manager::TAB_STYLE,
542	]
543	);
544
545	$this->add_control(
546	'kng_off_canvas_overlay_color',
547	[
548	'label' => esc_html__('Overlay Background Color', 'king-addons'),
549	'type' => Controls_Manager::COLOR,
550	'default' => 'rgba(0, 0, 0, 0.5)',
551	'selectors' => [
552	'.king-addons-off-canvas-overlay-{{ID}}' => 'background-color: {{VALUE}};',
553	],
554	]
555	);
556
557	$this->end_controls_section();
558	/** END SECTION: Overlay ===================== */
559	/** END TAB: STYLE ===================== */
560	}
561
562	public function getOffCanvasTemplate($template_id): ?string
563	{
564	if (empty($template_id)) {
565	return null;
566	}
567
568	$type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
569	$has_css = 'internal' === get_option('elementor_css_print_method') \|\| '' !== $type;
570
571	return Plugin::instance()->frontend->get_builder_content_for_display($template_id, $has_css);
572	}
573
574	protected function render(): void
575	{
576	$settings = $this->get_settings_for_display();
577	$this_ID = $this->get_id();
578	$class_ID = 'king-addons-off-canvas-' . $this_ID;
579	$overlay_ID = 'king-addons-off-canvas-overlay-' . $this_ID;
580
581	$class_selector_js = esc_attr(wp_json_encode('.' . $class_ID));
582	$overlay_selector_js = esc_attr(wp_json_encode('.' . $overlay_ID));
583
584	if (!empty($settings['kng_off_canvas_template'])) {
585
586	echo '<div class="king-addons-off-canvas-overlay ' .
587	esc_attr($overlay_ID) . '" onclick="';
588	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.display = 'none'; document.body.style.pointerEvents = '';}, 300);";
589	echo '"></div>';
590
591	echo '<div class="king-addons-off-canvas ' .
592	esc_attr($class_ID) . ' king-addons-off-canvas-position-' .
593	esc_attr($settings['kng_off_canvas_box_position']) . ' king-addons-off-canvas-animation-slide"';
594	if (!Plugin::$instance->editor->is_edit_mode()) {
595	echo ' style="display: none;"';
596	}
597	echo '>';
598
599	if ('' != $settings['kng_off_canvas_close_btn_icon']['value']) {
600
601	echo '<div class="king-addons-off-canvas-close-button king-addons-off-canvas-close-button-' .
602	esc_attr($this_ID) . '" onclick="';
603	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.display = 'none'; document.body.style.pointerEvents = '';}, 300);";
604	echo '">';
605
606	Icons_Manager::render_icon($settings['kng_off_canvas_close_btn_icon']);
607	echo '</div>';
608	}
609
610	$html = $this->getOffCanvasTemplate(esc_html($settings['kng_off_canvas_template']));
611	$dom = new DOMDocument;
612	libxml_use_internal_errors(true); // Disable libxml errors
613	$dom->loadHTML($html);
614	libxml_clear_errors();
615
616	$tags = [];
617	$this->getTagsAndAttributes($dom->documentElement, $tags);
618
619	echo wp_kses($html, $tags);
620
621	echo '</div>';
622
623	if ('' == $settings['kng_off_canvas_disable_btn']) {
624
625	echo '<button class="king-addons-off-canvas-button king-addons-off-canvas-button-' .
626	esc_attr($this_ID) . '" onclick="';
627	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 300);";
628	echo '">' .
629	esc_html($settings['kng_off_canvas_btn_text']) . '</button>';
630
631	}
632	} else {
633	echo '<p>' . esc_html__('Please select a template', 'king-addons') . '</p>';
634	}
635
636	$inline_js_1 = "
637	document.addEventListener('DOMContentLoaded', function () {
638
639	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
640	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
641
642	// With no template picked the widget prints a placeholder instead of
643	// the panel markup, so these lookups come back empty. Bail out rather
644	// than throwing on insertBefore and losing the handlers below.
645	if (!offCanvas \|\| !overlay) {
646	return;
647	}
648
649	// Moves all off-canvases to right after the <body> opens
650	document.body.insertBefore(overlay, document.body.firstChild);
651	document.body.insertBefore(offCanvas, document.body.firstChild);
652
653	// Change display from none to block to prevent dancing of the off-canvas before the DOM content loaded
654	offCanvas.style.display = 'block';";
655
656	$inline_js_2 = "";
657	if ('' != $settings['kng_off_canvas_class']) {
658	$inline_js_2 = "
659	// Adds click listener for custom triggers that have the custom class
660	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_off_canvas_class']) . "');
661	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
662	offCanvas.classList.toggle('king-addons-off-canvas-active');
663	document.body.style.pointerEvents = 'none';
664	if (offCanvas.classList.contains('king-addons-off-canvas-active')) {
665	overlay.style.display = 'block';
666	setTimeout(function () {
667	overlay.style.opacity = '1';
668	}, 1);
669	}
670	setTimeout(function () {
671	document.body.style.pointerEvents = '';
672	}, 300);
673	}));
674	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
675	}
676
677	$inline_js_3 = "});";
678
679	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
680	wp_print_inline_script_tag($inline_js);
681	}
682
683	public function getTagsAndAttributes($node, &$tags): void
684	{
685	if ($node->nodeType == XML_ELEMENT_NODE) {
686	$tagName = $node->nodeName;
687	if (!isset($tags[$tagName])) {
688	$tags[$tagName] = [];
689	}
690
691	foreach ($node->attributes as $attr) {
692	if (!isset($tags[$tagName][$attr->nodeName])) {
693	$tags[$tagName][$attr->nodeName] = true;
694	}
695	}
696	}
697
698	foreach ($node->childNodes as $child) {
699	$this->getTagsAndAttributes($child, $tags);
700	}
701	}
702	}