← All changes | includes/widgets/Popup/Popup.php +781 -0 51.1.2 → 51.1.86 View file →

		@@ -1,0 +1,781 @@
	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}}; 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	+ // With no template picked the widget prints a placeholder instead of
	722	+ // the panel markup, so these lookups come back empty. Bail out rather
	723	+ // than throwing on insertBefore and losing the handlers below.
	724	+ if (!offCanvas || !overlay) {
	725	+ return;
	726	+ }
	727	+
	728	+ // Moves all Popupes to right after the <body> opens
	729	+ document.body.insertBefore(overlay, document.body.firstChild);
	730	+ document.body.insertBefore(offCanvas, document.body.firstChild);
	731	+
	732	+ // Change display from none to block to prevent dancing of the Popup before the DOM content loaded
	733	+ offCanvas.style.display = 'block';";
	734	+
	735	+ $inline_js_2 = "";
	736	+ if ('' != $settings['kng_popup_class']) {
	737	+ $inline_js_2 = "
	738	+ // Adds click listener for custom triggers that have the custom class
	739	+ const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_popup_class']) . "');
	740	+ customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
	741	+ offCanvas.classList.toggle('king-addons-popup-active');
	742	+ document.body.style.pointerEvents = 'none';
	743	+ if (offCanvas.classList.contains('king-addons-popup-active')) {
	744	+ overlay.style.display = 'block';
	745	+ setTimeout(function () {
	746	+ overlay.style.opacity = '1';
	747	+ }, 1);
	748	+ }
	749	+ setTimeout(function () {
	750	+ document.body.style.pointerEvents = '';
	751	+ }, 500);
	752	+ }));
	753	+ customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
	754	+ }
	755	+
	756	+ $inline_js_3 = "});";
	757	+
	758	+ $inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
	759	+ wp_print_inline_script_tag($inline_js);
	760	+ }
	761	+
	762	+ public function getTagsAndAttributes($node, &$tags): void
	763	+ {
	764	+ if ($node->nodeType == XML_ELEMENT_NODE) {
	765	+ $tagName = $node->nodeName;
	766	+ if (!isset($tags[$tagName])) {
	767	+ $tags[$tagName] = [];
	768	+ }
	769	+
	770	+ foreach ($node->attributes as $attr) {
	771	+ if (!isset($tags[$tagName][$attr->nodeName])) {
	772	+ $tags[$tagName][$attr->nodeName] = true;
	773	+ }
	774	+ }
	775	+ }
	776	+
	777	+ foreach ($node->childNodes as $child) {
	778	+ $this->getTagsAndAttributes($child, $tags);
	779	+ }
	780	+ }
	781	+}