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.65, at includes/widgets/Popup/Popup.php

774 lines 28.5 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	$class_selector_js = esc_attr(wp_json_encode('.' . $class_ID));
661	$overlay_selector_js = esc_attr(wp_json_encode('.' . $overlay_ID));
662
663	if (!empty($settings['kng_popup_template'])) {
664
665	echo '<div class="king-addons-popup-overlay ' .
666	esc_attr($overlay_ID) . '" onclick="';
667	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-popup-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 = '';}, 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(" . $class_selector_js . ").classList.toggle('king-addons-popup-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 = '';}, 500);";
683	echo '">';
684
685	Icons_Manager::render_icon($settings['kng_popup_close_btn_icon']);
686	echo '</div>';
687	}
688
689	$html = $this->getOffCanvasTemplate(esc_html($settings['kng_popup_template']));
690	$dom = new DOMDocument;
691	libxml_use_internal_errors(true); // Disable libxml errors
692	$dom->loadHTML($html);
693	libxml_clear_errors();
694
695	$tags = [];
696	$this->getTagsAndAttributes($dom->documentElement, $tags);
697
698	echo wp_kses($html, $tags);
699
700	echo '</div>';
701
702	if ('' == $settings['kng_popup_disable_btn']) {
703
704	echo '<button class="king-addons-popup-button king-addons-popup-button-' .
705	esc_attr($this_ID) . '" onclick="';
706	echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-popup-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 = '';}, 500);";
707	echo '">' .
708	esc_html($settings['kng_popup_btn_text']) . '</button>';
709
710	}
711	} else {
712	echo '<p>' . esc_html__('Please select a template', 'king-addons') . '</p>';
713	}
714
715	$inline_js_1 = "
716	document.addEventListener('DOMContentLoaded', function () {
717
718	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
719	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
720
721	// Moves all Popupes to right after the <body> opens
722	document.body.insertBefore(overlay, document.body.firstChild);
723	document.body.insertBefore(offCanvas, document.body.firstChild);
724
725	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
726	offCanvas.style.display = 'block';";
727
728	$inline_js_2 = "";
729	if ('' != $settings['kng_popup_class']) {
730	$inline_js_2 = "
731	// Adds click listener for custom triggers that have the custom class
732	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_popup_class']) . "');
733	customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
734	offCanvas.classList.toggle('king-addons-popup-active');
735	document.body.style.pointerEvents = 'none';
736	if (offCanvas.classList.contains('king-addons-popup-active')) {
737	overlay.style.display = 'block';
738	setTimeout(function () {
739	overlay.style.opacity = '1';
740	}, 1);
741	}
742	setTimeout(function () {
743	document.body.style.pointerEvents = '';
744	}, 500);
745	}));
746	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
747	}
748
749	$inline_js_3 = "});";
750
751	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
752	wp_print_inline_script_tag($inline_js);
753	}
754
755	public function getTagsAndAttributes($node, &$tags): void
756	{
757	if ($node->nodeType == XML_ELEMENT_NODE) {
758	$tagName = $node->nodeName;
759	if (!isset($tags[$tagName])) {
760	$tags[$tagName] = [];
761	}
762
763	foreach ($node->attributes as $attr) {
764	if (!isset($tags[$tagName][$attr->nodeName])) {
765	$tags[$tagName][$attr->nodeName] = true;
766	}
767	}
768	}
769
770	foreach ($node->childNodes as $child) {
771	$this->getTagsAndAttributes($child, $tags);
772	}
773	}
774	}