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

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

780 lines 28.6 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 Popup extends Widget_Base
22	{
23
24
25	public function get_name(): string
26	{
27	return 'king-addons-popup';
28	}
29
30	public function get_title(): string
31	{
32	return esc_html__('Popup & Lightbox Modal', 'king-addons');
33	}
34
35	public function get_icon(): string
36	{
37	/** @noinspection SpellCheckingInspection */
38	return 'king-addons-icon king-addons-popup';
39	}
40
41	public function get_style_depends(): array
42	{
43	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-popup-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', 'center',
57	'kingaddons', 'king-addons', 'off canvas', 'pop up', 'popup', 'lightbox', 'box', 'modal', 'window', 'tab',
58	'appear', 'show', 'hide', '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_popup_section_general',
72	[
73	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
74	]
75	);
76
77	$this->add_control(
78	'kng_popup_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_popup_box_position',
89	[
90	'label' => esc_html__('Box Animation Direction', 'king-addons'),
91	'type' => Controls_Manager::CHOOSE,
92	'default' => 'bottom',
93	'options' => [
94	'top' => [
95	'title' => esc_html__('Top', 'king-addons'),
96	'icon' => 'eicon-v-align-bottom',
97	],
98	'right' => [
99	'title' => esc_html__('Right', 'king-addons'),
100	'icon' => 'eicon-h-align-left',
101	],
102	'bottom' => [
103	'title' => esc_html__('Bottom', 'king-addons'),
104	'icon' => 'eicon-v-align-top',
105	],
106	'left' => [
107	'title' => esc_html__('Left', 'king-addons'),
108	'icon' => 'eicon-h-align-right',
109	],
110	],
111	]
112	);
113
114	$this->add_control(
115	'kng_popup_btn_text',
116	[
117	'label' => esc_html__('Button Text', 'king-addons'),
118	'type' => Controls_Manager::TEXT,
119	'default' => esc_html__('Open Popup', 'king-addons'),
120	]
121	);
122
123	$this->add_control(
124	'kng_popup_box_width_switcher',
125	[
126	'label' => esc_html__('Set Width of popup box', 'king-addons'),
127	'type' => Controls_Manager::SWITCHER,
128	'separator' => 'before',
129	'default' => 'yes'
130	]
131	);
132
133	$this->add_responsive_control(
134	'kng_popup_box_width',
135	[
136	'label' => esc_html__('Width (%)', 'king-addons'),
137	'type' => Controls_Manager::NUMBER,
138	'min' => 0,
139	'max' => 100,
140	'step' => 1,
141	'default' => 100,
142	'selectors' => [
143	'.king-addons-popup-{{ID}}' => 'width: {{VALUE}}% !important;',
144	],
145	'condition' => [
146	'kng_popup_box_width_switcher!' => '',
147	]
148	]
149	);
150
151	$this->add_control(
152	'kng_popup_box_max_width_switcher',
153	[
154	'label' => esc_html__('Set Maximum Width of popup box', 'king-addons'),
155	'type' => Controls_Manager::SWITCHER,
156	'separator' => 'before',
157	'default' => 'yes'
158	]
159	);
160
161	$this->add_responsive_control(
162	'kng_popup_box_max_width',
163	[
164	'label' => esc_html__('Maximum Width (px)', 'king-addons'),
165	'type' => Controls_Manager::NUMBER,
166	'min' => 0,
167	'step' => 1,
168	'default' => 855,
169	'selectors' => [
170	'.king-addons-popup-{{ID}}' => 'max-width: {{VALUE}}px !important;',
171	],
172	'condition' => [
173	'kng_popup_box_max_width_switcher!' => '',
174	]
175	]
176	);
177
178	$this->add_control(
179	'kng_popup_box_max_height_switcher',
180	[
181	'label' => esc_html__('Set Maximum Height of popup box', 'king-addons'),
182	'type' => Controls_Manager::SWITCHER,
183	'default' => 'yes'
184	]
185	);
186
187	$this->add_responsive_control(
188	'kng_popup_box_max_height',
189	[
190	'label' => esc_html__('Maximum Height (px)', 'king-addons'),
191	'type' => Controls_Manager::NUMBER,
192	'min' => 0,
193	'step' => 1,
194	'default' => 385,
195	'selectors' => [
196	'.king-addons-popup-{{ID}}' => 'max-height: {{VALUE}}px !important;',
197	],
198	'condition' => [
199	'kng_popup_box_max_height_switcher!' => '',
200	]
201	]
202	);
203
204	$this->add_control(
205	'kng_popup_disable_btn',
206	[
207	'label' => esc_html__('Disable Button', 'king-addons'),
208	'type' => Controls_Manager::SWITCHER,
209	'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'),
210	'separator' => 'before'
211	]
212	);
213
214	$this->add_control(
215	'kng_popup_class',
216	[
217	'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
218	'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 Popup & Lightbox Modal 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'),
219	'type' => Controls_Manager::TEXT,
220	'placeholder' => esc_html__('Type your class here', 'king-addons'),
221	'label_block' => true,
222	'ai' => [
223	'active' => false,
224	],
225	]
226	);
227
228	$this->end_controls_section();
229	/** END SECTION: General ===================== */
230	/** END TAB: CONTENT ===================== */
231
232	/** TAB: STYLE ===================== */
233	/** SECTION: Button ===================== */
234	$this->start_controls_section(
235	'kng_popup_section_style_btn',
236	[
237	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
238	'tab' => Controls_Manager::TAB_STYLE,
239	]
240	);
241
242	$this->add_control(
243	'kng_popup_btn_h_position',
244	[
245	'label' => esc_html__('Button Horizontal Position', 'king-addons'),
246	'type' => Controls_Manager::CHOOSE,
247	'default' => 'center',
248	'options' => [
249	'left' => [
250	'title' => esc_html__('Left', 'king-addons'),
251	'icon' => 'eicon-h-align-left',
252	],
253	'center' => [
254	'title' => esc_html__('Center', 'king-addons'),
255	'icon' => 'eicon-h-align-center',
256	],
257	'right' => [
258	'title' => esc_html__('Right', 'king-addons'),
259	'icon' => 'eicon-h-align-right',
260	],
261	],
262	'selectors' => [
263	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
264	],
265	]
266	);
267
268	$this->add_control(
269	'kng_popup_btn_tabs_title',
270	[
271	'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
272	'type' => Controls_Manager::RAW_HTML,
273	'separator' => 'before'
274	]
275	);
276
277	$this->start_controls_tabs('kng_popup_btn_tabs');
278
279	$this->start_controls_tab(
280	'kng_popup_btn_tab_normal',
281	[
282	'label' => esc_html__('Normal', 'king-addons'),
283	]
284	);
285
286	$this->add_group_control(
287	Group_Control_Typography::get_type(),
288	[
289	'name' => 'kng_popup_btn_typography',
290	'selector' => '{{WRAPPER}} .king-addons-popup-button',
291	]
292	);
293
294	$this->add_control(
295	'kng_popup_btn_txt_color',
296	[
297	'label' => esc_html__('Text Color', 'king-addons'),
298	'type' => Controls_Manager::COLOR,
299	'default' => '#ffffff',
300	'selectors' => [
301	'{{WRAPPER}} .king-addons-popup-button' => 'color: {{VALUE}}'
302	],
303	]
304	);
305
306	$this->add_control(
307	'kng_popup_btn_bg_color',
308	[
309	'label' => esc_html__('Background Color', 'king-addons'),
310	'type' => Controls_Manager::COLOR,
311	'default' => '#574ff7',
312	'selectors' => [
313	'{{WRAPPER}} .king-addons-popup-button' => 'background-color: {{VALUE}}',
314	],
315	]
316	);
317
318	$this->add_responsive_control(
319	'kng_popup_btn_padding',
320	[
321	'label' => esc_html__('Padding', 'king-addons'),
322	'type' => Controls_Manager::DIMENSIONS,
323	'size_units' => ['px'],
324	'default' => [
325	'top' => 10,
326	'right' => 10,
327	'bottom' => 10,
328	'left' => 10,
329	],
330	'selectors' => [
331	'{{WRAPPER}} .king-addons-popup-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
332	]
333	]
334	);
335
336	$this->add_group_control(
337	Group_Control_Box_Shadow::get_type(),
338	[
339	'name' => 'kng_popup_btn_box_shadow',
340	'selector' => '{{WRAPPER}} .king-addons-popup-button',
341	]
342	);
343
344	$this->add_group_control(
345	Group_Control_Border::get_type(),
346	[
347	'name' => 'kng_popup_btn_border',
348	'selector' => '{{WRAPPER}} .king-addons-popup-button',
349	'fields_options' => [
350	'border' => [
351	'default' => 'none',
352	],
353	],
354	]
355	);
356
357	$this->add_responsive_control(
358	'kng_popup_btn_border_radius',
359	[
360	'label' => esc_html__('Border Radius', 'king-addons'),
361	'type' => Controls_Manager::DIMENSIONS,
362	'size_units' => ['px', '%'],
363	'default' => [
364	'top' => 0,
365	'right' => 0,
366	'bottom' => 0,
367	'left' => 0,
368	],
369	'selectors' => [
370	'{{WRAPPER}} .king-addons-popup-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
371	]
372	]
373	);
374
375	$this->end_controls_tab();
376
377	$this->start_controls_tab(
378	'kng_popup_btn_tab_hover',
379	[
380	'label' => esc_html__('Hover', 'king-addons'),
381	]
382	);
383
384	$this->add_group_control(
385	Group_Control_Typography::get_type(),
386	[
387	'name' => 'kng_popup_btn_typography_hover',
388	'selector' => '{{WRAPPER}} .king-addons-popup-button:hover',
389	]
390	);
391
392	$this->add_control(
393	'kng_popup_btn_txt_color_hover',
394	[
395	'label' => esc_html__('Text Color', 'king-addons'),
396	'type' => Controls_Manager::COLOR,
397	'selectors' => [
398	'{{WRAPPER}} .king-addons-popup-button:hover' => 'color: {{VALUE}}'
399	],
400	]
401	);
402
403	$this->add_control(
404	'kng_popup_btn_bg_color_hover',
405	[
406	'label' => esc_html__('Background Color', 'king-addons'),
407	'type' => Controls_Manager::COLOR,
408	'selectors' => [
409	'{{WRAPPER}} .king-addons-popup-button:hover' => 'background-color: {{VALUE}}',
410	],
411	]
412	);
413
414	$this->add_responsive_control(
415	'kng_popup_btn_padding_hover',
416	[
417	'label' => esc_html__('Padding', 'king-addons'),
418	'type' => Controls_Manager::DIMENSIONS,
419	'size_units' => ['px'],
420	'selectors' => [
421	'{{WRAPPER}} .king-addons-popup-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
422	]
423	]
424	);
425
426	$this->add_group_control(
427	Group_Control_Box_Shadow::get_type(),
428	[
429	'name' => 'kng_popup_btn_box_shadow_hover',
430	'selector' => '{{WRAPPER}} .king-addons-popup-button:hover',
431	]
432	);
433
434	$this->add_group_control(
435	Group_Control_Border::get_type(),
436	[
437	'name' => 'kng_popup_btn_border_hover',
438	'selector' => '{{WRAPPER}} .king-addons-popup-button:hover',
439	]
440	);
441
442	$this->add_responsive_control(
443	'kng_popup_btn_border_radius_hover',
444	[
445	'label' => esc_html__('Border Radius', 'king-addons'),
446	'type' => Controls_Manager::DIMENSIONS,
447	'size_units' => ['px', '%'],
448	'selectors' => [
449	'{{WRAPPER}} .king-addons-popup-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
450	]
451	]
452	);
453
454	$this->end_controls_tab();
455
456	$this->end_controls_tabs();
457
458	$this->end_controls_section();
459	/** END SECTION: Button ===================== */
460
461	/** SECTION: Popup box ===================== */
462	$this->start_controls_section(
463	'kng_popup_section_style_off_canvas_box',
464	[
465	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Popup box', 'king-addons'),
466	'tab' => Controls_Manager::TAB_STYLE,
467	]
468	);
469
470	$this->add_control(
471	'kng_popup_box_bg_color',
472	[
473	'label' => esc_html__('Background Color', 'king-addons'),
474	'type' => Controls_Manager::COLOR,
475	'default' => '#ffffff',
476	'selectors' => [
477	'.king-addons-popup-{{ID}}' => 'background-color: {{VALUE}};',
478	],
479	]
480	);
481
482	$this->add_responsive_control(
483	'kkng_popup_box_padding',
484	[
485	'label' => esc_html__('Padding', 'king-addons'),
486	'type' => Controls_Manager::DIMENSIONS,
487	'size_units' => ['px', '%'],
488	'default' => [
489	'top' => 10,
490	'right' => 10,
491	'bottom' => 10,
492	'left' => 10,
493	'unit' => 'px',
494	],
495	'selectors' => [
496	'.king-addons-popup-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
497	]
498	]
499	);
500
501	$this->add_group_control(
502	Group_Control_Box_Shadow::get_type(),
503	[
504	'name' => 'kng_popup_box_box_shadow',
505	'selector' => '.king-addons-popup-{{ID}}',
506	]
507	);
508
509	$this->add_group_control(
510	Group_Control_Border::get_type(),
511	[
512	'name' => 'kng_popup_box_border',
513	'selector' => '.king-addons-popup-{{ID}}',
514	'fields_options' => [
515	'border' => [
516	'default' => 'none',
517	],
518	],
519	]
520	);
521
522	$this->add_responsive_control(
523	'kng_popup_box_border_radius',
524	[
525	'label' => esc_html__('Border Radius', 'king-addons'),
526	'type' => Controls_Manager::DIMENSIONS,
527	'size_units' => ['px', '%'],
528	'default' => [
529	'top' => 5,
530	'right' => 5,
531	'bottom' => 5,
532	'left' => 5,
533	'unit' => 'px',
534	],
535	'selectors' => [
536	'.king-addons-popup-{{ID}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
537	]
538	]
539	);
540
541	$this->add_control(
542	'kng_popup_box_z_index',
543	[
544	'label' => esc_html__('Z-Index of Popup box (optional)', 'king-addons'),
545	'description' => esc_html__('Note: The Popup box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Popup box will display properly over all elements on the live website. Please check it there.', 'king-addons'),
546	'type' => Controls_Manager::NUMBER,
547	'step' => 1,
548	'default' => 999999,
549	'separator' => 'before',
550	'selectors' => [
551	'.king-addons-popup-{{ID}}' => 'z-index: {{VALUE}};',
552	'.king-addons-popup-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
553	],
554	]
555	);
556
557	$this->end_controls_section();
558	/** END SECTION: Popup box ===================== */
559
560	/** SECTION: Close Button ===================== */
561	$this->start_controls_section(
562	'kng_popup_section_style_close_btn',
563	[
564	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Close Button', 'king-addons'),
565	'tab' => Controls_Manager::TAB_STYLE,
566	]
567	);
568
569	$this->add_control(
570	'kng_popup_close_btn_icon',
571	[
572	'label' => esc_html__('Select Icon', 'king-addons'),
573	'type' => Controls_Manager::ICONS,
574	'skin' => 'inline',
575	'label_block' => false,
576	'exclude_inline_options' => ['svg'],
577	'default' => [
578	'value' => 'fas fa-times',
579	'library' => 'fa-solid',
580	],
581	]
582	);
583
584	$this->add_control(
585	'kng_popup_close_btn_color',
586	[
587	'label' => esc_html__('Color', 'king-addons'),
588	'type' => Controls_Manager::COLOR,
589	'default' => '#000000',
590	'selectors' => [
591	'.king-addons-popup-close-button-{{ID}}' => 'color: {{VALUE}}; fill: {{VALUE}};',
592	'.king-addons-popup-close-button-{{ID}} svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
593	],
594	]
595	);
596
597	$this->add_control(
598	'kng_popup_close_btn_size',
599	[
600	'label' => esc_html__('Size (px)', 'king-addons'),
601	'type' => Controls_Manager::NUMBER,
602	'min' => 1,
603	'step' => 1,
604	'default' => 20,
605	'separator' => 'before',
606	'selectors' => [
607	'.king-addons-popup-close-button-{{ID}}' => 'font-size: {{VALUE}}px; width: {{VALUE}}px; height: {{VALUE}}px;',
608	],
609	]
610	);
611
612	$this->end_controls_section();
613	/** END SECTION: Close Button ===================== */
614
615	/** SECTION: Overlay ===================== */
616	$this->start_controls_section(
617	'kng_popup_overlay',
618	[
619	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
620	'tab' => Controls_Manager::TAB_STYLE,
621	]
622	);
623
624	$this->add_control(
625	'kng_popup_overlay_color',
626	[
627	'label' => esc_html__('Overlay Background Color', 'king-addons'),
628	'type' => Controls_Manager::COLOR,
629	'default' => 'rgba(0, 0, 0, 0.5)',
630	'selectors' => [
631	'.king-addons-popup-overlay-{{ID}}' => 'background-color: {{VALUE}};',
632	],
633	]
634	);
635
636	$this->end_controls_section();
637	/** END SECTION: Overlay ===================== */
638	/** END TAB: STYLE ===================== */
639	}
640
641	public function getOffCanvasTemplate($template_id): ?string
642	{
643	if (empty($template_id)) {
644	return null;
645	}
646
647	$type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
648	$has_css = 'internal' === get_option('elementor_css_print_method') \|\| '' !== $type;
649
650	return Plugin::instance()->frontend->get_builder_content_for_display($template_id, $has_css);
651	}
652
653	protected function render(): void
654	{
655	$settings = $this->get_settings_for_display();
656	$this_ID = $this->get_id();
657	$class_ID = 'king-addons-popup-' . $this_ID;
658	$overlay_ID = 'king-addons-popup-overlay-' . $this_ID;
659
660	if (!empty($settings['kng_popup_template'])) {
661
662	echo '<div class="king-addons-popup-overlay ' .
663	esc_attr($overlay_ID) . '" onclick="';
664	echo "document.querySelector('." .
665	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
666	esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
667	esc_attr($overlay_ID) . "').style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
668	echo '"></div>';
669
670	echo '<div class="king-addons-popup ' .
671	esc_attr($class_ID) . ' king-addons-popup-position-' .
672	esc_attr($settings['kng_popup_box_position']) . ' king-addons-popup-animation-slide"';
673	if (!Plugin::$instance->editor->is_edit_mode()) {
674	echo ' style="display: none;"';
675	}
676	echo '>';
677
678	if ('' != $settings['kng_popup_close_btn_icon']['value']) {
679
680	echo '<div class="king-addons-popup-close-button king-addons-popup-close-button-' .
681	esc_attr($this_ID) . '" onclick="';
682	echo "document.querySelector('." .
683	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
684	esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
685	esc_attr($overlay_ID) . "').style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
686	echo '">';
687
688	Icons_Manager::render_icon($settings['kng_popup_close_btn_icon']);
689	echo '</div>';
690	}
691
692	$html = $this->getOffCanvasTemplate(esc_html($settings['kng_popup_template']));
693	$dom = new DOMDocument;
694	libxml_use_internal_errors(true); // Disable libxml errors
695	$dom->loadHTML($html);
696	libxml_clear_errors();
697
698	$tags = [];
699	$this->getTagsAndAttributes($dom->documentElement, $tags);
700
701	echo wp_kses($html, $tags);
702
703	echo '</div>';
704
705	if ('' == $settings['kng_popup_disable_btn']) {
706
707	echo '<button class="king-addons-popup-button king-addons-popup-button-' .
708	esc_attr($this_ID) . '" onclick="';
709	echo "document.querySelector('." .
710	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
711	esc_attr($overlay_ID) . "').style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
712	esc_attr($overlay_ID) . "').style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
713	echo '">' .
714	esc_html($settings['kng_popup_btn_text']) . '</button>';
715
716	}
717	} else {
718	echo '<p>' . esc_html__('Please select a template', 'king-addons') . '</p>';
719	}
720
721	$inline_js_1 = "
722	document.addEventListener('DOMContentLoaded', function () {
723
724	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
725	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
726
727	// Moves all Popupes to right after the <body> opens
728	document.body.insertBefore(overlay, document.body.firstChild);
729	document.body.insertBefore(offCanvas, document.body.firstChild);
730
731	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
732	offCanvas.style.display = 'block';";
733
734	$inline_js_2 = "";
735	if ('' != $settings['kng_popup_class']) {
736	$inline_js_2 = "
737	// Adds click listener for custom triggers that have the custom class
738	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_popup_class']) . "');
739	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
740	offCanvas.classList.toggle('king-addons-popup-active');
741	document.body.style.pointerEvents = 'none';
742	if (offCanvas.classList.contains('king-addons-popup-active')) {
743	overlay.style.display = 'block';
744	setTimeout(function () {
745	overlay.style.opacity = '1';
746	}, 1);
747	}
748	setTimeout(function () {
749	document.body.style.pointerEvents = '';
750	}, 500);
751	}));
752	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
753	}
754
755	$inline_js_3 = "});";
756
757	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
758	wp_print_inline_script_tag($inline_js);
759	}
760
761	public function getTagsAndAttributes($node, &$tags): void
762	{
763	if ($node->nodeType == XML_ELEMENT_NODE) {
764	$tagName = $node->nodeName;
765	if (!isset($tags[$tagName])) {
766	$tags[$tagName] = [];
767	}
768
769	foreach ($node->attributes as $attr) {
770	if (!isset($tags[$tagName][$attr->nodeName])) {
771	$tags[$tagName][$attr->nodeName] = true;
772	}
773	}
774	}
775
776	foreach ($node->childNodes as $child) {
777	$this->getTagsAndAttributes($child, $tags);
778	}
779	}
780	}