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

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

779 lines 28.4 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:[email protected]?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}};',
592	],
593	]
594	);
595
596	$this->add_control(
597	'kng_popup_close_btn_size',
598	[
599	'label' => esc_html__('Size (px)', 'king-addons'),
600	'type' => Controls_Manager::NUMBER,
601	'min' => 1,
602	'step' => 1,
603	'default' => 20,
604	'separator' => 'before',
605	'selectors' => [
606	'.king-addons-popup-close-button-{{ID}}' => 'font-size: {{VALUE}}px;',
607	],
608	]
609	);
610
611	$this->end_controls_section();
612	/** END SECTION: Close Button ===================== */
613
614	/** SECTION: Overlay ===================== */
615	$this->start_controls_section(
616	'kng_popup_overlay',
617	[
618	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
619	'tab' => Controls_Manager::TAB_STYLE,
620	]
621	);
622
623	$this->add_control(
624	'kng_popup_overlay_color',
625	[
626	'label' => esc_html__('Overlay Background Color', 'king-addons'),
627	'type' => Controls_Manager::COLOR,
628	'default' => 'rgba(0, 0, 0, 0.5)',
629	'selectors' => [
630	'.king-addons-popup-overlay-{{ID}}' => 'background-color: {{VALUE}};',
631	],
632	]
633	);
634
635	$this->end_controls_section();
636	/** END SECTION: Overlay ===================== */
637	/** END TAB: STYLE ===================== */
638	}
639
640	public function getOffCanvasTemplate($template_id): ?string
641	{
642	if (empty($template_id)) {
643	return null;
644	}
645
646	$type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
647	$has_css = 'internal' === get_option('elementor_css_print_method') \|\| '' !== $type;
648
649	return Plugin::instance()->frontend->get_builder_content_for_display($template_id, $has_css);
650	}
651
652	protected function render(): void
653	{
654	$settings = $this->get_settings_for_display();
655	$this_ID = $this->get_id();
656	$class_ID = 'king-addons-popup-' . $this_ID;
657	$overlay_ID = 'king-addons-popup-overlay-' . $this_ID;
658
659	if (!empty($settings['kng_popup_template'])) {
660
661	echo '<div class="king-addons-popup-overlay ' .
662	esc_attr($overlay_ID) . '" onclick="';
663	echo "document.querySelector('." .
664	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
665	esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
666	esc_attr($overlay_ID) . "').style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
667	echo '"></div>';
668
669	echo '<div class="king-addons-popup ' .
670	esc_attr($class_ID) . ' king-addons-popup-position-' .
671	esc_attr($settings['kng_popup_box_position']) . ' king-addons-popup-animation-slide"';
672	if (!Plugin::$instance->editor->is_edit_mode()) {
673	echo ' style="display: none;"';
674	}
675	echo '>';
676
677	if ('' != $settings['kng_popup_close_btn_icon']['value']) {
678
679	echo '<div class="king-addons-popup-close-button king-addons-popup-close-button-' .
680	esc_attr($this_ID) . '" onclick="';
681	echo "document.querySelector('." .
682	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
683	esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
684	esc_attr($overlay_ID) . "').style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
685	echo '">';
686
687	Icons_Manager::render_icon($settings['kng_popup_close_btn_icon']);
688	echo '</div>';
689	}
690
691	$html = $this->getOffCanvasTemplate(esc_html($settings['kng_popup_template']));
692	$dom = new DOMDocument;
693	libxml_use_internal_errors(true); // Disable libxml errors
694	$dom->loadHTML($html);
695	libxml_clear_errors();
696
697	$tags = [];
698	$this->getTagsAndAttributes($dom->documentElement, $tags);
699
700	echo wp_kses($html, $tags);
701
702	echo '</div>';
703
704	if ('' == $settings['kng_popup_disable_btn']) {
705
706	echo '<button class="king-addons-popup-button king-addons-popup-button-' .
707	esc_attr($this_ID) . '" onclick="';
708	echo "document.querySelector('." .
709	esc_attr($class_ID) . "').classList.toggle('king-addons-popup-active'); document.querySelector('." .
710	esc_attr($overlay_ID) . "').style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
711	esc_attr($overlay_ID) . "').style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
712	echo '">' .
713	esc_html($settings['kng_popup_btn_text']) . '</button>';
714
715	}
716	} else {
717	echo '<p>' . esc_html__('Please select a template', 'king-addons') . '</p>';
718	}
719
720	$inline_js_1 = "
721	document.addEventListener('DOMContentLoaded', function () {
722
723	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
724	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
725
726	// Moves all Popupes to right after the <body> opens
727	document.body.insertBefore(overlay, document.body.firstChild);
728	document.body.insertBefore(offCanvas, document.body.firstChild);
729
730	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
731	offCanvas.style.display = 'block';";
732
733	$inline_js_2 = "";
734	if ('' != $settings['kng_popup_class']) {
735	$inline_js_2 = "
736	// Adds click listener for custom triggers that have the custom class
737	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_popup_class']) . "');
738	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
739	offCanvas.classList.toggle('king-addons-popup-active');
740	document.body.style.pointerEvents = 'none';
741	if (offCanvas.classList.contains('king-addons-popup-active')) {
742	overlay.style.display = 'block';
743	setTimeout(function () {
744	overlay.style.opacity = '1';
745	}, 1);
746	}
747	setTimeout(function () {
748	document.body.style.pointerEvents = '';
749	}, 500);
750	}));
751	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
752	}
753
754	$inline_js_3 = "});";
755
756	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
757	wp_print_inline_script_tag($inline_js);
758	}
759
760	public function getTagsAndAttributes($node, &$tags): void
761	{
762	if ($node->nodeType == XML_ELEMENT_NODE) {
763	$tagName = $node->nodeName;
764	if (!isset($tags[$tagName])) {
765	$tags[$tagName] = [];
766	}
767
768	foreach ($node->attributes as $attr) {
769	if (!isset($tags[$tagName][$attr->nodeName])) {
770	$tags[$tagName][$attr->nodeName] = true;
771	}
772	}
773	}
774
775	foreach ($node->childNodes as $child) {
776	$this->getTagsAndAttributes($child, $tags);
777	}
778	}
779	}