premium-mobile-menu.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.77

premium-addons-for-elementor / widgets / premium-mobile-menu.php

premium-addons-for-elementor / widgets Last commit date

premium-mobile-menu.php

1956 lines

1	<?php
2	/**
3	* Premium Mobile Menu.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11	use Elementor\Utils;
12	use Elementor\Icons_Manager;
13	use Elementor\Control_Media;
14	use Elementor\Repeater;
15	use Elementor\Controls_Manager;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Typography;
18	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
19	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
20	use Elementor\Group_Control_Box_Shadow;
21	use Elementor\Group_Control_Text_Shadow;
22
23	// PremiumAddons Classes.
24	use PremiumAddons\Admin\Includes\Admin_Helper;
25	use PremiumAddons\Includes\Helper_Functions;
26	use PremiumAddons\Includes\Controls\Premium_Post_Filter;
27	use PremiumAddons\Includes\Controls\Premium_Background;
28
29	if ( ! defined( 'ABSPATH' ) ) {
30	exit; // If this file is called directly, abort.
31	}
32
33	/**
34	* Class Premium_Mobile_Menu
35	*/
36	class Premium_Mobile_Menu extends Widget_Base {
37
38	/**
39	* Check if the icon draw is enabled.
40	*
41	* @since 4.9.26
42	* @access private
43	*
44	* @var bool
45	*/
46	private $is_draw_enabled = null;
47
48	/**
49	* Check Icon Draw Option.
50	*
51	* @since 4.9.26
52	* @access public
53	*/
54	public function check_icon_draw() {
55
56	if ( null === $this->is_draw_enabled ) {
57	$this->is_draw_enabled = Admin_Helper::check_svg_draw( 'premium-mobile-menu' );
58	}
59
60	return $this->is_draw_enabled;
61	}
62
63	/**
64	* Retrieve Widget Name.
65	*
66	* @since 1.0.0
67	* @access public
68	*/
69	public function get_name() {
70	return 'premium-mobile-menu';
71	}
72
73	/**
74	* Retrieve Widget Title.
75	*
76	* @since 1.0.0
77	* @access public
78	*/
79	public function get_title() {
80	return __( 'Mobile Menu', 'premium-addons-for-elementor' );
81	}
82
83	/**
84	* Retrieve Widget Icon.
85	*
86	* @since 1.0.0
87	* @access public
88	*
89	* @return string widget icon.
90	*/
91	public function get_icon() {
92	return 'pa-mobile-menu';
93	}
94
95	/**
96	* Retrieve Widget Keywords.
97	*
98	* @since 1.0.0
99	* @access public
100	*
101	* @return string Widget keywords.
102	*/
103	public function get_keywords() {
104	return array( 'pa', 'premium', 'premium mobile menu', 'nav', 'navigation', 'header' );
105	}
106
107	/**
108	* Retrieve Widget Categories.
109	*
110	* @since 1.5.1
111	* @access public
112	*
113	* @return array Widget categories.
114	*/
115	public function get_categories() {
116	return array( 'premium-elements' );
117	}
118
119	/**
120	* Retrieve Widget Dependent CSS.
121	*
122	* @since 1.0.0
123	* @access public
124	*
125	* @return array CSS style handles.
126	*/
127	public function get_style_depends() {
128	return array(
129	'pa-glass',
130	'font-awesome-5-all',
131	'pa-slick',
132	'premium-addons',
133	);
134	}
135
136	/**
137	* Retrieve Widget Dependent JS.
138	*
139	* @since 1.0.0
140	* @access public
141	*
142	* @return array JS script handles.
143	*/
144	public function get_script_depends() {
145
146	$is_edit = Helper_Functions::is_edit_mode();
147
148	$scripts = array();
149
150	if ( $is_edit ) {
151
152	$draw_scripts = $this->check_icon_draw() ? array( 'pa-tweenmax', 'pa-motionpath' ) : array();
153
154	$scripts = array_merge( $draw_scripts, array( 'pa-glass', 'lottie-js', 'pa-slick' ) );
155
156	} else {
157	$settings = $this->get_settings();
158
159	if ( ! empty( $settings['menu_items'] ) ) {
160	foreach ( $settings['menu_items'] as $item ) {
161	if ( 'yes' === $item['draw_svg'] ) {
162	$scripts[] = 'pa-tweenmax';
163	$scripts[] = 'pa-motionpath';
164	$draw_js = true;
165	}
166
167	if ( 'animation' === $item['icon_type'] ) {
168	$scripts[] = 'lottie-js';
169	$lottie_js = true;
170	}
171
172	if ( isset( $draw_js ) && isset( $lottie_js ) ) {
173	break;
174	}
175	}
176	}
177
178	if ( 'yes' === $settings['carousel'] ) {
179	$scripts[] = 'pa-slick';
180	}
181
182	if ( 'none' !== $settings['menu_lq_effect'] ) {
183	$scripts[] = 'pa-glass';
184	}
185	}
186
187	$scripts[] = 'premium-addons';
188
189	return $scripts;
190	}
191
192	/**
193	* Retrieve Widget Support URL.
194	*
195	* @access public
196	*
197	* @return string support URL.
198	*/
199	public function get_custom_help_url() {
200	return 'https://premiumaddons.com/support/';
201	}
202
203	public function has_widget_inner_wrapper(): bool {
204	return ! Helper_Functions::check_elementor_experiment( 'e_optimized_markup' );
205	}
206
207	/**
208	* Register Banner controls.
209	*
210	* @since 1.0.0
211	* @access protected
212	*/
213	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
214
215	$papro_activated = Helper_Functions::check_papro_version();
216
217	$draw_icon = $this->check_icon_draw();
218
219	$this->start_controls_section(
220	'menu_items_section',
221	array(
222	'label' => __( 'Menu Items', 'premium-addons-for-elementor' ),
223	)
224	);
225
226	$demo = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/elementor-mobile-menu-widget/', 'mobile-menu', 'wp-editor', 'demo' );
227	Helper_Functions::add_templates_controls( $this, 'mobile-menu', $demo );
228
229	$repeater = new Repeater();
230
231	$repeater->start_controls_tabs( 'item_controls_tabs' );
232
233	$repeater->start_controls_tab(
234	'item_controls_content_tab',
235	array(
236	'label' => __( 'Content', 'premium-addons-for-elementor' ),
237	)
238	);
239
240	$repeater->add_control(
241	'icon_type',
242	array(
243	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
244	'type' => Controls_Manager::SELECT,
245	'options' => array(
246	'none' => __( 'None', 'premium-addons-for-elementor' ),
247	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
248	'image' => __( 'Image', 'premium-addons-for-elementor' ),
249	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
250	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
251	),
252	'default' => 'icon',
253	'label_block' => true,
254	)
255	);
256
257	$repeater->add_control(
258	'icon',
259	array(
260	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
261	'type' => Controls_Manager::ICONS,
262	'default' => array(
263	'value' => 'fas fa-star',
264	'library' => 'fa-solid',
265	),
266	'condition' => array(
267	'icon_type' => 'icon',
268	),
269	'label_block' => true,
270	)
271	);
272
273	$repeater->add_control(
274	'custom_image',
275	array(
276	'label' => __( 'Custom Image', 'premium-addons-for-elementor' ),
277	'type' => Controls_Manager::MEDIA,
278	'dynamic' => array( 'active' => true ),
279	'default' => array(
280	'url' => Utils::get_placeholder_image_src(),
281	),
282	'condition' => array(
283	'icon_type' => 'image',
284	),
285	)
286	);
287
288	$repeater->add_control(
289	'custom_svg',
290	array(
291	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
292	'type' => Controls_Manager::TEXTAREA,
293	'description' => 'You can use these sites to create SVGs: <a href="https://danmarshall.github.io/google-font-to-svg-path/" target="_blank">Google Fonts</a> and <a href="https://boxy-svg.com/" target="_blank">Boxy SVG</a>',
294	'condition' => array(
295	'icon_type' => 'svg',
296	),
297	'ai' => array(
298	'active' => false,
299	),
300	)
301	);
302
303	$repeater->add_control(
304	'lottie_source',
305	array(
306	'label' => __( 'Source', 'premium-addons-for-elementor' ),
307	'type' => Controls_Manager::SELECT,
308	'options' => array(
309	'url' => __( 'External URL', 'premium-addons-for-elementor' ),
310	'file' => __( 'Media File', 'premium-addons-for-elementor' ),
311	),
312	'default' => 'url',
313	'condition' => array(
314	'icon_type' => 'animation',
315	),
316	)
317	);
318
319	$repeater->add_control(
320	'lottie_url',
321	array(
322	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
323	'type' => Controls_Manager::TEXT,
324	'dynamic' => array( 'active' => true ),
325	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
326	'label_block' => true,
327	'condition' => array(
328	'icon_type' => 'animation',
329	'lottie_source' => 'url',
330	),
331	)
332	);
333
334	$repeater->add_control(
335	'lottie_file',
336	array(
337	'label' => __( 'Upload JSON File', 'premium-addons-for-elementor' ),
338	'type' => Controls_Manager::MEDIA,
339	'media_type' => 'application/json',
340	'condition' => array(
341	'icon_type' => 'animation',
342	'lottie_source' => 'file',
343	),
344	)
345	);
346
347	$animation_conditions = array(
348	'relation' => 'or',
349	'terms' => array(
350	array(
351	'name' => 'icon_type',
352	'value' => 'animation',
353	),
354	array(
355	'terms' => array(
356	array(
357	'relation' => 'or',
358	'terms' => array(
359	array(
360	'name' => 'icon_type',
361	'value' => 'icon',
362	),
363	array(
364	'name' => 'icon_type',
365	'value' => 'svg',
366	),
367	),
368	),
369	array(
370	'name' => 'draw_svg',
371	'value' => 'yes',
372	),
373	),
374	),
375	),
376	);
377
378	$repeater->add_control(
379	'draw_svg',
380	array(
381	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
382	'type' => Controls_Manager::SWITCHER,
383	'description' => __( 'Enable this option to make the icon drawable. See ', 'premium-addons-for-elementor' ) . '<a href="https://www.youtube.com/watch?v=ZLr0bRe0RAY" target="_blank">tutorial</a>',
384	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
385	'condition' => array(
386	'icon_type' => array( 'icon', 'svg' ),
387	'icon[library]!' => 'svg',
388	),
389	)
390	);
391
392	if ( $draw_icon ) {
393
394	$repeater->add_control(
395	'stroke_width',
396	array(
397	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
398	'type' => Controls_Manager::SLIDER,
399	'range' => array(
400	'px' => array(
401	'min' => 0,
402	'max' => 50,
403	'step' => 0.1,
404	),
405	),
406	'condition' => array(
407	'icon_type' => array( 'icon', 'svg' ),
408	),
409	'selectors' => array(
410	'{{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) svg *' => 'stroke-width: {{SIZE}}',
411	),
412	)
413	);
414
415	$repeater->add_control(
416	'svg_sync',
417	array(
418	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
419	'type' => Controls_Manager::SWITCHER,
420	'condition' => array(
421	'icon_type' => 'svg',
422	'draw_svg' => 'yes',
423	),
424	)
425	);
426
427	$repeater->add_control(
428	'frames',
429	array(
430	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
431	'type' => Controls_Manager::NUMBER,
432	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
433	'default' => 5,
434	'min' => 1,
435	'max' => 100,
436	'condition' => array(
437	'icon_type' => array( 'icon', 'svg' ),
438	'draw_svg' => 'yes',
439	),
440	)
441	);
442
443	$repeater->add_control(
444	'svg_color',
445	array(
446	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
447	'type' => Controls_Manager::COLOR,
448	'global' => false,
449	'separator' => 'after',
450	'condition' => array(
451	'icon_type' => array( 'icon', 'svg' ),
452	'draw_svg' => 'yes',
453	),
454	)
455	);
456
457	} else {
458
459	Helper_Functions::get_draw_svg_notice(
460	$repeater,
461	'mobile',
462	array(
463	'icon_type' => array( 'icon', 'svg' ),
464	'icon[library]!' => 'svg',
465	)
466	);
467
468	}
469
470	$repeater->add_control(
471	'lottie_loop',
472	array(
473	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
474	'type' => Controls_Manager::SWITCHER,
475	'return_value' => 'true',
476	'default' => 'true',
477	'conditions' => $animation_conditions,
478	)
479	);
480
481	$repeater->add_control(
482	'lottie_reverse',
483	array(
484	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
485	'type' => Controls_Manager::SWITCHER,
486	'return_value' => 'true',
487	'conditions' => $animation_conditions,
488	)
489	);
490
491	if ( $draw_icon ) {
492	$repeater->add_control(
493	'start_point',
494	array(
495	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
496	'type' => Controls_Manager::SLIDER,
497	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
498	'default' => array(
499	'unit' => '%',
500	'size' => 0,
501	),
502	'condition' => array(
503	'icon_type' => array( 'icon', 'svg' ),
504	'draw_svg' => 'yes',
505	'lottie_reverse!' => 'true',
506	),
507	)
508	);
509
510	$repeater->add_control(
511	'end_point',
512	array(
513	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
514	'type' => Controls_Manager::SLIDER,
515	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
516	'default' => array(
517	'unit' => '%',
518	'size' => 0,
519	),
520	'condition' => array(
521	'icon_type' => array( 'icon', 'svg' ),
522	'draw_svg' => 'yes',
523	'lottie_reverse' => 'true',
524	),
525	)
526	);
527
528	$repeater->add_control(
529	'svg_hover',
530	array(
531	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
532	'type' => Controls_Manager::SWITCHER,
533	'return_value' => 'true',
534	'condition' => array(
535	'icon_type' => array( 'icon', 'svg' ),
536	'draw_svg' => 'yes',
537	),
538	)
539	);
540
541	$repeater->add_control(
542	'svg_yoyo',
543	array(
544	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
545	'type' => Controls_Manager::SWITCHER,
546	'condition' => array(
547	'icon_type' => array( 'icon', 'svg' ),
548	'draw_svg' => 'yes',
549	'lottie_loop' => 'true',
550	),
551	)
552	);
553	}
554
555	$repeater->add_control(
556	'menu_item_text_switcher',
557	array(
558	'label' => __( 'Title', 'premium-addons-for-elementor' ),
559	'type' => Controls_Manager::SWITCHER,
560	'separator' => 'before',
561	'default' => 'yes',
562	)
563	);
564
565	$repeater->add_control(
566	'menu_item_text',
567	array(
568	'label' => __( 'Item Title', 'premium-addons-for-elementor' ),
569	'type' => Controls_Manager::TEXT,
570	'condition' => array(
571	'menu_item_text_switcher' => 'yes',
572	),
573	)
574	);
575
576	$repeater->add_control(
577	'action',
578	array(
579	'label' => __( 'Action', 'premium-addons-for-elementor' ),
580	'type' => Controls_Manager::SELECT,
581	'options' => array(
582	'link' => __( 'Link', 'premium-addons-for-elementor' ),
583	'offcanvas' => apply_filters( 'pa_pro_label', __( 'Open Off-Canvas (Pro)', 'premium-addons-for-elementor' ) ),
584	),
585	'default' => 'link',
586	'separator' => 'before',
587	'label_block' => true,
588	)
589	);
590
591	$repeater->add_control(
592	'link_select',
593	array(
594	'label' => __( 'Link/URL', 'premium-addons-for-elementor' ),
595	'type' => Controls_Manager::SELECT,
596	'options' => array(
597	'url' => __( 'URL', 'premium-addons-for-elementor' ),
598	'existing_page' => __( 'Existing Page', 'premium-addons-for-elementor' ),
599	),
600	'default' => 'url',
601	'label_block' => true,
602	'condition' => array(
603	'action' => 'link',
604	),
605	)
606	);
607
608	$repeater->add_control(
609	'link',
610	array(
611	'label' => __( 'URL', 'premium-addons-for-elementor' ),
612	'type' => Controls_Manager::URL,
613	'dynamic' => array( 'active' => true ),
614	'placeholder' => 'https://premiumaddons.com/',
615	'label_block' => true,
616	'condition' => array(
617	'action' => 'link',
618	'link_select' => 'url',
619	),
620	)
621	);
622
623	$repeater->add_control(
624	'existing_page',
625	array(
626	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
627	'type' => Premium_Post_Filter::TYPE,
628	'label_block' => true,
629	'multiple' => false,
630	'source' => array( 'post', 'page' ),
631	'condition' => array(
632	'action' => 'link',
633	'link_select' => 'existing_page',
634	),
635	)
636	);
637
638	$repeater->add_control(
639	'home_page',
640	array(
641	'label' => __( 'Is Homepage', 'premium-addons-for-elementor' ),
642	'type' => Controls_Manager::SWITCHER,
643	'condition' => array(
644	'action' => 'link',
645	),
646	)
647	);
648
649	$repeater->add_control(
650	'offcanvas_id',
651	array(
652	'label' => __( 'Off-Canvas ID', 'premium-addons-for-elementor' ),
653	'type' => Controls_Manager::TEXT,
654	'description' => __( 'Add the same ID you added in Off-canvas widget -> Content tab -> Trigger', 'premium-addons-for-elementor' ),
655	'condition' => array(
656	'action' => 'offcanvas',
657	),
658	)
659	);
660
661	$repeater->add_control(
662	'show_badge',
663	array(
664	'label' => apply_filters( 'pa_pro_label', __( 'Badge (Pro)', 'premium-addons-for-elementor' ) ),
665	'type' => Controls_Manager::SWITCHER,
666	'separator' => 'before',
667	)
668	);
669
670	if ( ! $papro_activated ) {
671
672	$get_pro = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/pro', 'mobile-menu-widget', 'wp-editor', 'get-pro' );
673
674	$repeater->add_control(
675	'papro_notice',
676	array(
677	'type' => Controls_Manager::RAW_HTML,
678	'raw' => __( 'This option is available in Premium Addons Pro. ', 'premium-addons-for-elementor' ) . '<a href="' . esc_url( $get_pro ) . '" target="_blank">' . __( 'Upgrade now!', 'premium-addons-for-elementor' ) . '</a>',
679	'content_classes' => 'papro-upgrade-notice',
680	'conditions' => array(
681	'relation' => 'or',
682	'terms' => array(
683	array(
684	'name' => 'show_badge',
685	'value' => 'yes',
686	),
687	array(
688	'name' => 'action',
689	'value' => 'offcanvas',
690	),
691	),
692	),
693	)
694	);
695
696	} else {
697	do_action( 'pa_mobile_menu_badge_controls', $repeater );
698	}
699
700	$repeater->add_control(
701	'css_id',
702	array(
703	'label' => __( 'CSS ID', 'premium-addons-for-elementor' ),
704	'type' => Controls_Manager::TEXT,
705	'description' => __( 'Add a CSS ID for this item.', 'premium-addons-for-elementor' ),
706	'label_block' => true,
707	)
708	);
709
710	$repeater->end_controls_tab();
711
712	$repeater->start_controls_tab(
713	'item_controls_style_tab',
714	array(
715	'label' => __( 'Style', 'premium-addons-for-elementor' ),
716	)
717	);
718
719	$repeater->add_control(
720	'items_min_height',
721	array(
722	'label' => __( 'Minimum Height', 'premium-addons-for-elementor' ),
723	'type' => Controls_Manager::SLIDER,
724	'size_units' => array( 'px', 'em', 'custom' ),
725	'selectors' => array(
726	'{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__link' => 'min-height: {{SIZE}}{{UNIT}}',
727	),
728	)
729	);
730
731	$repeater->add_control(
732	'menu_text_color',
733	array(
734	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
735	'type' => Controls_Manager::COLOR,
736	'selectors' => array(
737	'{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__text span' => 'color: {{VALUE}};',
738	),
739	'condition' => array(
740	'menu_item_text_switcher' => 'yes',
741	'menu_item_text!' => '',
742	),
743	)
744	);
745
746	$repeater->add_control(
747	'item_icon_color',
748	array(
749	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
750	'type' => Controls_Manager::COLOR,
751	'selectors' => array(
752	'{{WRAPPER}} {{CURRENT_ITEM}} i' => 'color: {{VALUE}};',
753	'{{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) svg, {{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) svg *' => 'fill: {{VALUE}};',
754	),
755	'condition' => array(
756	'icon_type!' => array( 'none', 'image', 'animation' ),
757	),
758	)
759	);
760
761	$repeater->add_control(
762	'item_icon_hover_color',
763	array(
764	'label' => __( 'Icon Hover Color', 'premium-addons-for-elementor' ),
765	'type' => Controls_Manager::COLOR,
766	'selectors' => array(
767	'{{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item .premium-mobile-menu__link:hover i' => 'color: {{VALUE}};',
768	'{{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg, {{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg *' => 'fill: {{VALUE}};',
769	),
770	'condition' => array(
771	'icon_type!' => array( 'none', 'image', 'animation' ),
772	),
773	)
774	);
775
776	$repeater->add_control(
777	'item_icon_size',
778	array(
779	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
780	'type' => Controls_Manager::SLIDER,
781	'size_units' => array( 'px', 'em' ),
782	'selectors' => array(
783	'{{WRAPPER}} {{CURRENT_ITEM}} i' => 'font-size: {{SIZE}}{{UNIT}};',
784	'{{WRAPPER}} {{CURRENT_ITEM}} svg, {{WRAPPER}} {{CURRENT_ITEM}} img' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important',
785	),
786	'condition' => array(
787	'icon_type!' => 'none',
788	),
789	)
790	);
791
792	if ( $draw_icon ) {
793	$repeater->add_control(
794	'item_stroke_color',
795	array(
796	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
797	'type' => Controls_Manager::COLOR,
798	'default' => '#61CE70',
799	'selectors' => array(
800	'{{WRAPPER}} {{CURRENT_ITEM}}.premium-mobile-menu__item:not(.lottie-item) svg *' => 'stroke: {{VALUE}};',
801	),
802	'condition' => array(
803	'icon_type' => array( 'icon', 'svg' ),
804	),
805	)
806	);
807	}
808
809	$repeater->add_group_control(
810	Premium_Background::get_type(),
811	array(
812	'name' => 'item_background',
813	'types' => array( 'classic', 'gradient' ),
814	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner',
815	)
816	);
817
818	$repeater->add_group_control(
819	Group_Control_Border::get_type(),
820	array(
821	'name' => 'item_border',
822	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner',
823	)
824	);
825
826	$repeater->add_control(
827	'item_border_radius',
828	array(
829	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
830	'type' => Controls_Manager::SLIDER,
831	'size_units' => array( 'px', 'em', '%' ),
832	'selectors' => array(
833	'{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner' => 'border-radius: {{SIZE}}{{UNIT}} !important',
834	),
835	)
836	);
837
838	$repeater->add_group_control(
839	Group_Control_Box_Shadow::get_type(),
840	array(
841	'name' => 'item_box_shadow',
842	'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner',
843	)
844	);
845
846	do_action( 'pa_mobile_menu_badge_style', $repeater );
847
848	$repeater->add_responsive_control(
849	'item_margin',
850	array(
851	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
852	'type' => Controls_Manager::DIMENSIONS,
853	'size_units' => array( 'px', '%', 'em' ),
854	'selectors' => array(
855	'{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
856	),
857	)
858	);
859
860	$repeater->add_responsive_control(
861	'single_item_padding',
862	array(
863	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
864	'type' => Controls_Manager::DIMENSIONS,
865	'size_units' => array( 'px', '%', 'em' ),
866	'selectors' => array(
867	'{{WRAPPER}} {{CURRENT_ITEM}} .premium-mobile-menu__item-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
868	),
869	)
870	);
871
872	$repeater->end_controls_tab();
873
874	$repeater->end_controls_tabs();
875
876	$this->add_control(
877	'menu_items',
878	array(
879	'label' => __( 'Add Menu Items', 'premium-addons-for-elementor' ),
880	'type' => Controls_Manager::REPEATER,
881	'fields' => $repeater->get_controls(),
882	'default' => array(
883	array(
884	'icon' => array(
885	'value' => 'fas fa-home',
886	'library' => 'fa-solid',
887	),
888	),
889	array(
890	'icon' => array(
891	'value' => 'fas fa-search',
892	'library' => 'fa-solid',
893	),
894
895	),
896	array(
897	'icon' => array(
898	'value' => 'fas fa-plus-circle',
899	'library' => 'fa-solid',
900	),
901	),
902	array(
903	'icon' => array(
904	'value' => 'far fa-heart',
905	'library' => 'fa-regular',
906	),
907	),
908	array(
909	'icon' => array(
910	'value' => 'fas fa-shopping-cart',
911	'library' => 'fa-solid',
912	),
913	),
914	),
915	'title_field' => '{{{ menu_item_text }}}',
916	)
917	);
918
919	$this->end_controls_section();
920
921	$this->start_controls_section(
922	'display_options_section',
923	array(
924	'label' => __( 'Display Options', 'premium-addons-for-elementor' ),
925	'tab' => Controls_Manager::TAB_CONTENT,
926	)
927	);
928
929	$this->add_responsive_control(
930	'menu_direction',
931	array(
932	'label' => __( 'Menu Direction', 'premium-addons-for-elementor' ),
933	'type' => Controls_Manager::CHOOSE,
934	'options' => array(
935	'row' => array(
936	'title' => esc_html__( 'Row - horizontal', 'premium-addons-for-elementor' ),
937	'icon' => 'eicon-arrow-right',
938	),
939	'column' => array(
940	'title' => esc_html__( 'Column - vertical', 'premium-addons-for-elementor' ),
941	'icon' => 'eicon-arrow-down',
942	),
943	),
944	'render_type' => 'template',
945	'prefix_class' => 'premium-mobile-menu__dir-',
946	'default' => 'row',
947	)
948	);
949
950	$this->add_responsive_control(
951	'menu_display',
952	array(
953	'label' => __( 'Menu Position', 'premium-addons-for-elementor' ),
954	'type' => Controls_Manager::SELECT,
955	'options' => array(
956	'relative' => __( 'Relative', 'premium-addons-for-elementor' ),
957	'fixed' => __( 'Fixed', 'premium-addons-for-elementor' ),
958	),
959	'default' => 'relative',
960	'selectors' => array(
961	'{{WRAPPER}} .premium-mobile-menu__wrap' => 'position: {{VALUE}}',
962	),
963	'label_block' => true,
964	)
965	);
966
967	$this->add_responsive_control(
968	'menu_hpos',
969	array(
970	'label' => __( 'Horizontal Position', 'premium-addons-for-elementor' ),
971	'type' => Controls_Manager::CHOOSE,
972	'options' => array(
973	'left' => array(
974	'title' => __( 'Left', 'premium-addons-for-elementor' ),
975	'icon' => 'eicon-text-align-left',
976	),
977	'center' => array(
978	'title' => __( 'Center', 'premium-addons-for-elementor' ),
979	'icon' => 'eicon-text-align-center',
980	),
981	'right' => array(
982	'title' => __( 'Right', 'premium-addons-for-elementor' ),
983	'icon' => 'eicon-text-align-right',
984	),
985	'custom' => array(
986	'title' => __( 'Custom', 'premium-addons-for-elementor' ),
987	'icon' => 'eicon-cog',
988	),
989	),
990	'selectors_dictionary' => array(
991	'left' => 'left: 0; right: auto; transform: none;',
992	'center' => 'left: 50%; right: auto; transform: translateX(-50%);',
993	'right' => 'right: 0; left: auto; transform: none;',
994	'custom' => '',
995	),
996	'selectors' => array(
997	'{{WRAPPER}} .premium-mobile-menu__wrap' => '{{VALUE}}',
998	),
999	'toggle' => false,
1000	'default' => 'left',
1001	'condition' => array(
1002	'menu_display' => 'fixed',
1003	),
1004	)
1005	);
1006
1007	$this->add_responsive_control(
1008	'menu_custom_hpos',
1009	array(
1010	'label' => __( 'Horizontal Offset', 'premium-addons-for-elementor' ),
1011	'type' => Controls_Manager::SLIDER,
1012	'size_units' => array( 'px', '%' ),
1013	'range' => array(
1014	'px' => array(
1015	'min' => 0,
1016	'max' => 800,
1017	),
1018	),
1019	'default' => array(
1020	'size' => 0,
1021	'unit' => '%',
1022	),
1023	'selectors' => array(
1024	'{{WRAPPER}} .premium-mobile-menu__wrap' => 'left: {{SIZE}}{{UNIT}}',
1025	),
1026	'condition' => array(
1027	'menu_display' => 'fixed',
1028	'menu_hpos' => 'custom',
1029	),
1030	)
1031	);
1032
1033	$this->add_responsive_control(
1034	'menu_vpos',
1035	array(
1036	'label' => __( 'Vertical Position', 'premium-addons-for-elementor' ),
1037	'type' => Controls_Manager::CHOOSE,
1038	'options' => array(
1039	'top' => array(
1040	'title' => __( 'Top', 'premium-addons-for-elementor' ),
1041	'icon' => 'eicon-arrow-up',
1042	),
1043	'bottom' => array(
1044	'title' => __( 'Bottom', 'premium-addons-for-elementor' ),
1045	'icon' => 'eicon-arrow-down',
1046	),
1047	'custom' => array(
1048	'title' => __( 'Custom', 'premium-addons-for-elementor' ),
1049	'icon' => 'eicon-cog',
1050	),
1051	),
1052	'selectors_dictionary' => array(
1053	'top' => 'top: 0; bottom: auto;',
1054	'bottom' => 'bottom: 0; top: auto;',
1055	'custom' => 'top: auto; bottom: auto;',
1056	),
1057	'selectors' => array(
1058	'{{WRAPPER}} .premium-mobile-menu__wrap' => '{{VALUE}}',
1059	),
1060	'toggle' => false,
1061	'default' => 'bottom',
1062	'condition' => array(
1063	'menu_display' => 'fixed',
1064	),
1065	)
1066	);
1067
1068	$this->add_responsive_control(
1069	'menu_custom_vpos',
1070	array(
1071	'label' => __( 'Vertical Offset (%)', 'premium-addons-for-elementor' ),
1072	'type' => Controls_Manager::SLIDER,
1073	'default' => array(
1074	'size' => 0,
1075	'unit' => '%',
1076	),
1077	'selectors' => array(
1078	'{{WRAPPER}} .premium-mobile-menu__wrap' => 'bottom: {{SIZE}}{{UNIT}}',
1079	),
1080	'condition' => array(
1081	'menu_display' => 'fixed',
1082	'menu_vpos' => 'custom',
1083	),
1084	)
1085	);
1086
1087	$this->add_control(
1088	'zindex',
1089	array(
1090	'label' => __( 'Z-index', 'premium-addons-for-elementor' ),
1091	'type' => Controls_Manager::NUMBER,
1092	'default' => 99,
1093	'condition' => array(
1094	'menu_display' => 'fixed',
1095	),
1096	'selectors' => array(
1097	'{{WRAPPER}} .premium-mobile-menu__wrap' => 'z-index: {{VALUE}}',
1098	),
1099	)
1100	);
1101
1102	$this->add_responsive_control(
1103	'menu_width',
1104	array(
1105	'label' => __( 'Menu Width', 'premium-addons-for-elementor' ),
1106	'type' => Controls_Manager::SLIDER,
1107	'size_units' => array( 'px', '%', 'vw', 'custom' ),
1108	'separator' => 'before',
1109	'range' => array(
1110	'px' => array(
1111	'min' => 0,
1112	'max' => 1500,
1113	),
1114	),
1115	'selectors' => array(
1116	'{{WRAPPER}} .premium-mobile-menu__list' => 'width: {{SIZE}}{{UNIT}}',
1117	),
1118	)
1119	);
1120
1121	$this->add_responsive_control(
1122	'items_spacing',
1123	array(
1124	'label' => __( 'Items Spacing', 'premium-addons-for-elementor' ),
1125	'type' => Controls_Manager::SLIDER,
1126	'size_units' => array( 'px', 'em', 'custom' ),
1127	'selectors' => array(
1128	'{{WRAPPER}}.premium-mobile-menu__dir-row .premium-mobile-menu__list' => 'column-gap: {{SIZE}}{{UNIT}}',
1129	'{{WRAPPER}}.premium-mobile-menu__dir-column .premium-mobile-menu__list' => 'row-gap: {{SIZE}}{{UNIT}}',
1130	),
1131	)
1132	);
1133
1134	$this->add_responsive_control(
1135	'menu_align',
1136	array(
1137	'label' => __( 'Menu Alignment', 'premium-addons-for-elementor' ),
1138	'type' => Controls_Manager::CHOOSE,
1139	'options' => array(
1140	'flex-start' => array(
1141	'title' => __( 'Left', 'premium-addons-for-elementor' ),
1142	'icon' => 'eicon-text-align-left',
1143	),
1144	'center' => array(
1145	'title' => __( 'Center', 'premium-addons-for-elementor' ),
1146	'icon' => 'eicon-text-align-center',
1147	),
1148	'flex-end' => array(
1149	'title' => __( 'Right', 'premium-addons-for-elementor' ),
1150	'icon' => 'eicon-text-align-right',
1151	),
1152	),
1153	'default' => 'center',
1154	'selectors' => array(
1155	'{{WRAPPER}} .premium-mobile-menu__items-wrap' => 'justify-content: {{VALUE}};',
1156	),
1157	'condition' => array(
1158	'menu_display' => 'relative',
1159	),
1160	)
1161	);
1162
1163	$this->add_responsive_control(
1164	'item_display',
1165	array(
1166	'label' => __( 'Item Display', 'premium-addons-for-elementor' ),
1167	'type' => Controls_Manager::SELECT,
1168	'options' => array(
1169	'row' => __( 'Inline', 'premium-addons-for-elementor' ),
1170	'column' => __( 'Block', 'premium-addons-for-elementor' ),
1171	),
1172	'default' => 'column',
1173	'selectors' => array(
1174	'{{WRAPPER}} .premium-mobile-menu__link' => 'flex-direction: {{VALUE}}',
1175	),
1176	'label_block' => true,
1177	)
1178	);
1179
1180	$this->add_control(
1181	'active_item_indicator',
1182	array(
1183	'label' => apply_filters( 'pa_pro_label', __( 'Active Item Indicator (Pro)', 'premium-addons-for-elementor' ) ),
1184	'type' => Controls_Manager::SWITCHER,
1185	'separator' => 'before',
1186	'render_type' => $papro_activated ? 'ui' : 'template',
1187	'prefix_class' => 'premium-mobile-menu__indicator-',
1188	)
1189	);
1190
1191	$this->end_controls_section();
1192
1193	$this->start_controls_section(
1194	'carousel_section',
1195	array(
1196	'label' => apply_filters( 'pa_pro_label', __( 'Carousel (Pro)', 'premium-addons-for-elementor' ) ),
1197	'condition' => array(
1198	'menu_direction' => 'row',
1199	),
1200	)
1201	);
1202
1203	$this->add_control(
1204	'carousel',
1205	array(
1206	'label' => __( 'Enable Carousel', 'premium-addons-for-elementor' ),
1207	'type' => Controls_Manager::SWITCHER,
1208	'frontend_available' => true,
1209	)
1210	);
1211
1212	do_action( 'pa_mobile_menu_carousel_controls', $this );
1213
1214	$this->end_controls_section();
1215
1216	$this->start_controls_section(
1217	'section_pa_docs',
1218	array(
1219	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
1220	)
1221	);
1222
1223	$docs = array(
1224	'https://premiumaddons.com/docs/elementor-mobile-menu-widget-tutorial/' => __( 'Getting started »', 'premium-addons-for-elementor' ),
1225	'https://www.youtube.com/watch?v=OPSlk9YoIGI' => __( 'Check the video tutorial »', 'premium-addons-for-elementor' ),
1226	'https://premiumaddons.com/docs/how-to-open-off-canvas-content-using-elementor-menu-widget/' => __( 'Open Off Canvas menu using menu item »', 'premium-addons-for-elementor' ),
1227	);
1228
1229	$doc_index = 1;
1230	foreach ( $docs as $url => $title ) {
1231
1232	$doc_url = Helper_Functions::get_campaign_link( $url, 'mobile-menu-widget', 'wp-editor', 'get-support' );
1233
1234	$this->add_control(
1235	'doc_' . $doc_index,
1236	array(
1237	'type' => Controls_Manager::RAW_HTML,
1238	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title ),
1239	'content_classes' => 'editor-pa-doc',
1240	)
1241	);
1242
1243	++$doc_index;
1244
1245	}
1246
1247	Helper_Functions::register_element_feedback_controls( $this );
1248
1249	$this->end_controls_section();
1250
1251	Helper_Functions::register_papro_promotion_controls( $this, 'mobile-menu' );
1252
1253	$this->start_controls_section(
1254	'item_style',
1255	array(
1256	'label' => __( 'Menu Item', 'premium-addons-for-elementor' ),
1257	'tab' => Controls_Manager::TAB_STYLE,
1258	)
1259	);
1260
1261	$this->add_responsive_control(
1262	'items_min_height',
1263	array(
1264	'label' => __( 'Minimum Height', 'premium-addons-for-elementor' ),
1265	'type' => Controls_Manager::SLIDER,
1266	'size_units' => array( 'px', 'em', 'custom' ),
1267	'selectors' => array(
1268	'{{WRAPPER}} .premium-mobile-menu__link' => 'min-height: {{SIZE}}{{UNIT}}',
1269	),
1270	)
1271	);
1272
1273	$this->add_group_control(
1274	Premium_Background::get_type(),
1275	array(
1276	'name' => 'item_background',
1277	'types' => array( 'classic', 'gradient' ),
1278	'selector' => '{{WRAPPER}} .premium-mobile-menu__item-inner',
1279	)
1280	);
1281
1282	$this->add_control(
1283	'menu_lq_effect',
1284	array(
1285	'label' => __( 'Liquid Glass Effect', 'premium-addons-for-elementor' ),
1286	'type' => Controls_Manager::SELECT,
1287	'description' => sprintf(
1288	/* translators: 1: `<a>` opening tag, 2: `</a>` closing tag. */
1289	esc_html__( 'Important: Make sure this element has a semi-transparent background color to see the effect. See all presets from %1$shere%2$s.', 'premium-addons-for-elementor' ),
1290	'<a href="https://premiumaddons.com/liquid-glass/" target="_blank">',
1291	'</a>'
1292	),
1293	'options' => array(
1294	'none' => __( 'None', 'premium-addons-for-elementor' ),
1295	'glass1' => __( 'Preset 01', 'premium-addons-for-elementor' ),
1296	'glass2' => __( 'Preset 02', 'premium-addons-for-elementor' ),
1297	'glass3' => apply_filters( 'pa_pro_label', __( 'Preset 03 (Pro)', 'premium-addons-for-elementor' ) ),
1298	'glass4' => apply_filters( 'pa_pro_label', __( 'Preset 04 (Pro)', 'premium-addons-for-elementor' ) ),
1299	'glass5' => apply_filters( 'pa_pro_label', __( 'Preset 05 (Pro)', 'premium-addons-for-elementor' ) ),
1300	'glass6' => apply_filters( 'pa_pro_label', __( 'Preset 06 (Pro)', 'premium-addons-for-elementor' ) ),
1301	),
1302	'default' => 'none',
1303	'label_block' => true,
1304	)
1305	);
1306
1307	$this->add_group_control(
1308	Group_Control_Border::get_type(),
1309	array(
1310	'name' => 'item_border',
1311	'selector' => '{{WRAPPER}} .premium-mobile-menu__item-inner',
1312	)
1313	);
1314
1315	$this->add_control(
1316	'item_border_radius',
1317	array(
1318	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1319	'type' => Controls_Manager::SLIDER,
1320	'size_units' => array( 'px', 'em', '%' ),
1321	'selectors' => array(
1322	'{{WRAPPER}} .premium-mobile-menu__item-inner' => 'border-radius: {{SIZE}}{{UNIT}} !important',
1323	),
1324	)
1325	);
1326
1327	$this->add_group_control(
1328	Group_Control_Box_Shadow::get_type(),
1329	array(
1330	'name' => 'item_box_shadow',
1331	'selector' => '{{WRAPPER}} .premium-mobile-menu__item-inner',
1332	)
1333	);
1334
1335	$this->add_responsive_control(
1336	'item_padding',
1337	array(
1338	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1339	'type' => Controls_Manager::DIMENSIONS,
1340	'size_units' => array( 'px', '%', 'em' ),
1341	'selectors' => array(
1342	'{{WRAPPER}} .premium-mobile-menu__item-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1343	),
1344	)
1345	);
1346
1347	$this->end_controls_section();
1348
1349	$this->start_controls_section(
1350	'item_icon_style',
1351	array(
1352	'label' => __( 'Item Icon', 'premium-addons-for-elementor' ),
1353	'tab' => Controls_Manager::TAB_STYLE,
1354	)
1355	);
1356
1357	$this->add_control(
1358	'item_icon_color',
1359	array(
1360	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1361	'type' => Controls_Manager::COLOR,
1362	'selectors' => array(
1363	'{{WRAPPER}} .premium-mobile-menu__item i' => 'color: {{VALUE}};',
1364	' {{WRAPPER}} .premium-mobile-menu__item:not(.lottie-item) svg, {{WRAPPER}} .premium-mobile-menu__item:not(.lottie-item) svg *' => 'fill: {{VALUE}};',
1365	),
1366	)
1367	);
1368
1369	$this->add_control(
1370	'item_icon_hover_color',
1371	array(
1372	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
1373	'type' => Controls_Manager::COLOR,
1374	'selectors' => array(
1375	'{{WRAPPER}} .premium-mobile-menu__item .premium-mobile-menu__link:hover i' => 'color: {{VALUE}};',
1376	'{{WRAPPER}} .premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg, {{WRAPPER}} .premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg *' => 'fill: {{VALUE}};',
1377	),
1378	)
1379	);
1380
1381	$this->add_responsive_control(
1382	'item_icon_size',
1383	array(
1384	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
1385	'type' => Controls_Manager::SLIDER,
1386	'size_units' => array( 'px', 'em' ),
1387	'selectors' => array(
1388	'{{WRAPPER}} .premium-mobile-menu__item i' => 'font-size: {{SIZE}}{{UNIT}};',
1389	'{{WRAPPER}} .premium-mobile-menu__item svg, {{WRAPPER}} .premium-mobile-menu__item img' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important',
1390	),
1391	)
1392	);
1393
1394	if ( $draw_icon ) {
1395	$this->add_control(
1396	'item_stroke_color',
1397	array(
1398	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1399	'type' => Controls_Manager::COLOR,
1400	'default' => '#61CE70',
1401	'selectors' => array(
1402	'{{WRAPPER}} .premium-mobile-menu__item:not(.lottie-item) svg *' => 'stroke: {{VALUE}};',
1403	),
1404	)
1405	);
1406	}
1407
1408	$this->add_responsive_control(
1409	'icon_margin',
1410	array(
1411	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1412	'type' => Controls_Manager::DIMENSIONS,
1413	'size_units' => array( 'px', '%', 'em' ),
1414	'selectors' => array(
1415	'{{WRAPPER}} .premium-mobile-menu__icon-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1416	),
1417	)
1418	);
1419
1420	$this->end_controls_section();
1421
1422	$this->start_controls_section(
1423	'item_title_style',
1424	array(
1425	'label' => __( 'Item Title', 'premium-addons-for-elementor' ),
1426	'tab' => Controls_Manager::TAB_STYLE,
1427	)
1428	);
1429
1430	$this->add_control(
1431	'menu_text_color',
1432	array(
1433	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1434	'type' => Controls_Manager::COLOR,
1435	'selectors' => array(
1436	'{{WRAPPER}} .premium-mobile-menu__text span' => 'color: {{VALUE}};',
1437	),
1438	)
1439	);
1440
1441	$this->add_control(
1442	'menu_text_hover_color',
1443	array(
1444	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
1445	'type' => Controls_Manager::COLOR,
1446	'selectors' => array(
1447	'{{WRAPPER}} .premium-mobile-menu__link:hover .premium-mobile-menu__text span' => 'color: {{VALUE}};',
1448	),
1449	)
1450	);
1451
1452	$this->add_group_control(
1453	Group_Control_Typography::get_type(),
1454	array(
1455	'name' => 'menu_text_typography',
1456	'global' => array(
1457	'default' => Global_Typography::TYPOGRAPHY_TEXT,
1458	),
1459	'selector' => '{{WRAPPER}} .premium-mobile-menu__text span',
1460	)
1461	);
1462
1463	$this->add_group_control(
1464	Group_Control_Text_Shadow::get_type(),
1465	array(
1466	'name' => 'menu_text_shadow',
1467	'selector' => '{{WRAPPER}} .premium-mobile-menu__text span',
1468	)
1469	);
1470
1471	$this->end_controls_section();
1472
1473	do_action( 'pa_mobile_menu_badge_style_tab', $this );
1474
1475	$this->start_controls_section(
1476	'active_item_style',
1477	array(
1478	'label' => __( 'Active Menu Item', 'premium-addons-for-elementor' ),
1479	'tab' => Controls_Manager::TAB_STYLE,
1480	)
1481	);
1482
1483	$this->add_group_control(
1484	Premium_Background::get_type(),
1485	array(
1486	'name' => 'active_item_background',
1487	'types' => array( 'classic', 'gradient' ),
1488	'selector' => '{{WRAPPER}} .active-menu-item .premium-mobile-menu__item-inner',
1489	)
1490	);
1491
1492	$this->add_group_control(
1493	Group_Control_Border::get_type(),
1494	array(
1495	'name' => 'active_item_border',
1496	'selector' => '{{WRAPPER}} .active-menu-item .premium-mobile-menu__item-inner',
1497	)
1498	);
1499
1500	$this->add_control(
1501	'active_item_border_radius',
1502	array(
1503	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1504	'type' => Controls_Manager::SLIDER,
1505	'size_units' => array( 'px', 'em', '%' ),
1506	'selectors' => array(
1507	'{{WRAPPER}} .active-menu-item .premium-mobile-menu__item-inner' => 'border-radius: {{SIZE}}{{UNIT}} !important',
1508	),
1509	)
1510	);
1511
1512	$this->add_group_control(
1513	Group_Control_Box_Shadow::get_type(),
1514	array(
1515	'name' => 'active_item_box_shadow',
1516	'selector' => '{{WRAPPER}} .active-menu-item .premium-mobile-menu__item-inner',
1517	)
1518	);
1519
1520	$this->end_controls_section();
1521
1522	$this->start_controls_section(
1523	'active_item_icon_style',
1524	array(
1525	'label' => __( 'Active Item Icon', 'premium-addons-for-elementor' ),
1526	'tab' => Controls_Manager::TAB_STYLE,
1527	)
1528	);
1529
1530	$this->add_control(
1531	'active_item_icon_color',
1532	array(
1533	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1534	'type' => Controls_Manager::COLOR,
1535	'selectors' => array(
1536	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item i' => 'color: {{VALUE}};',
1537	' {{WRAPPER}} .active-menu-item.premium-mobile-menu__item:not(.lottie-item) svg, {{WRAPPER}} .active-menu-item.premium-mobile-menu__item:not(.lottie-item) svg *' => 'fill: {{VALUE}};',
1538	),
1539	)
1540	);
1541
1542	$this->add_control(
1543	'active_item_icon_hover_color',
1544	array(
1545	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
1546	'type' => Controls_Manager::COLOR,
1547	'selectors' => array(
1548	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item .premium-mobile-menu__link:hover i' => 'color: {{VALUE}};',
1549	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg, {{WRAPPER}} .active-menu-item.premium-mobile-menu__item:not(.lottie-item) .premium-mobile-menu__link:hover svg *' => 'fill: {{VALUE}};',
1550	),
1551	)
1552	);
1553
1554	$this->add_responsive_control(
1555	'active_item_icon_size',
1556	array(
1557	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
1558	'type' => Controls_Manager::SLIDER,
1559	'size_units' => array( 'px', 'em' ),
1560	'selectors' => array(
1561	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item i' => 'font-size: {{SIZE}}{{UNIT}};',
1562	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item svg, {{WRAPPER}} .active-menu-item.premium-mobile-menu__item img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
1563	),
1564	)
1565	);
1566
1567	if ( $draw_icon ) {
1568	$this->add_control(
1569	'active_item_stroke_color',
1570	array(
1571	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1572	'type' => Controls_Manager::COLOR,
1573	'default' => '#61CE70',
1574	'selectors' => array(
1575	'{{WRAPPER}} .active-menu-item.premium-mobile-menu__item:not(.lottie-item) svg *' => 'stroke: {{VALUE}};',
1576	),
1577	)
1578	);
1579	}
1580
1581	$this->end_controls_section();
1582
1583	$this->start_controls_section(
1584	'active_item_title_style',
1585	array(
1586	'label' => __( 'Active Item Title', 'premium-addons-for-elementor' ),
1587	'tab' => Controls_Manager::TAB_STYLE,
1588	)
1589	);
1590
1591	$this->add_control(
1592	'active_menu_text_color',
1593	array(
1594	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1595	'type' => Controls_Manager::COLOR,
1596	'selectors' => array(
1597	'{{WRAPPER}} .active-menu-item .premium-mobile-menu__text span' => 'color: {{VALUE}};',
1598	),
1599	)
1600	);
1601
1602	$this->add_control(
1603	'active_menu_text_hover_color',
1604	array(
1605	'label' => __( 'Hover Color', 'premium-addons-for-elementor' ),
1606	'type' => Controls_Manager::COLOR,
1607	'selectors' => array(
1608	'{{WRAPPER}} .active-menu-item .premium-mobile-menu__link:hover .premium-mobile-menu__text span' => 'color: {{VALUE}};',
1609	),
1610	)
1611	);
1612
1613	$this->add_group_control(
1614	Group_Control_Text_Shadow::get_type(),
1615	array(
1616	'name' => 'active_menu_text_shadow',
1617	'selector' => '{{WRAPPER}} .active-menu-item .premium-mobile-menu__text span',
1618	)
1619	);
1620
1621	$this->end_controls_section();
1622
1623	do_action( 'pa_mobile_menu_indicator_carousel_style', $this );
1624
1625	$this->start_controls_section(
1626	'items_container_style',
1627	array(
1628	'label' => __( 'Items Container', 'premium-addons-for-elementor' ),
1629	'tab' => Controls_Manager::TAB_STYLE,
1630	)
1631	);
1632
1633	$this->add_group_control(
1634	Premium_Background::get_type(),
1635	array(
1636	'name' => 'items_container_background',
1637	'types' => array( 'classic', 'gradient' ),
1638	'selector' => '{{WRAPPER}} .premium-mobile-menu__list',
1639	)
1640	);
1641
1642	$this->add_group_control(
1643	Group_Control_Border::get_type(),
1644	array(
1645	'name' => 'items_container_border',
1646	'selector' => '{{WRAPPER}} .premium-mobile-menu__list',
1647	)
1648	);
1649
1650	$this->add_control(
1651	'items_container_border_radius',
1652	array(
1653	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1654	'type' => Controls_Manager::DIMENSIONS,
1655	'size_units' => array( 'px', '%', 'em' ),
1656	'selectors' => array(
1657	'{{WRAPPER}} .premium-mobile-menu__list' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
1658	),
1659	)
1660	);
1661
1662	$this->add_group_control(
1663	Group_Control_Box_Shadow::get_type(),
1664	array(
1665	'name' => 'items_container_shadow',
1666	'selector' => '{{WRAPPER}} .premium-mobile-menu__list',
1667	)
1668	);
1669
1670	$this->add_responsive_control(
1671	'items_container_margin',
1672	array(
1673	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1674	'type' => Controls_Manager::DIMENSIONS,
1675	'size_units' => array( 'px', 'em', '%' ),
1676	'selectors' => array(
1677	'{{WRAPPER}} .premium-mobile-menu__list' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
1678	),
1679	)
1680	);
1681
1682	$this->add_responsive_control(
1683	'items_container_padding',
1684	array(
1685	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1686	'type' => Controls_Manager::DIMENSIONS,
1687	'size_units' => array( 'px', 'em', '%' ),
1688	'selectors' => array(
1689	'{{WRAPPER}} .premium-mobile-menu__list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
1690	),
1691	)
1692	);
1693
1694	$this->end_controls_section();
1695	}
1696
1697	/**
1698	* Render Banner widget output on the frontend.
1699	*
1700	* Written in PHP and used to generate the final HTML.
1701	*
1702	* @since 1.0.0
1703	* @access protected
1704	*/
1705	protected function render() {
1706
1707	$settings = $this->get_settings_for_display();
1708
1709	$papro_activated = Helper_Functions::check_papro_version();
1710
1711	if ( ! $papro_activated \|\| version_compare( PREMIUM_PRO_ADDONS_VERSION, '2.9.17', '<' ) ) {
1712
1713	if ( 'yes' === $settings['carousel'] \|\| 'yes' === $settings['active_item_indicator'] ) {
1714
1715	?>
1716	<div class="premium-error-notice">
1717	<?php
1718	$message = __( 'This option is available in <b>Premium Addons Pro</b>.', 'premium-addons-for-elementor' );
1719	echo wp_kses_post( $message );
1720	?>
1721	</div>
1722	<?php
1723	return false;
1724
1725	}
1726	}
1727
1728	$menu_items = $settings['menu_items'];
1729
1730	if ( ! is_array( $menu_items ) ) {
1731	return;
1732	}
1733
1734	$id = $this->get_id();
1735
1736	$is_edit_mode = \Elementor\Plugin::$instance->editor->is_edit_mode();
1737
1738	$current_page_url = isset( $_SERVER['REQUEST_URI'] ) ? sanitize_text_field( wp_unslash( $_SERVER['REQUEST_URI'] ) ) : '';
1739
1740	$is_home = is_front_page();
1741
1742	$this->add_render_attribute( 'wrap', 'class', 'premium-mobile-menu__wrap' );
1743
1744	$carousel = 'yes' === $settings['carousel'] ? true : false;
1745
1746	if ( $carousel ) {
1747
1748	$this->add_render_attribute(
1749	'wrap',
1750	array(
1751	'data-rtl' => is_rtl(),
1752	)
1753	);
1754
1755	}
1756
1757	$this->add_render_attribute( 'item_inner', 'class', 'premium-mobile-menu__item-inner' );
1758
1759	if ( 'none' !== $settings['menu_lq_effect'] ) {
1760	$this->add_render_attribute( 'item_inner', 'class', 'premium-con-lq__' . $settings['menu_lq_effect'] );
1761	}
1762
1763	?>
1764
1765	<div <?php $this->print_render_attribute_string( 'wrap' ); ?>>
1766	<div class="premium-mobile-menu__items-wrap">
1767
1768	<ul class="premium-mobile-menu__list">
1769	<?php
1770	foreach ( $menu_items as $index => $item ) {
1771
1772	if ( ! $papro_activated \|\| version_compare( PREMIUM_PRO_ADDONS_VERSION, '2.9.17', '<' ) ) {
1773
1774	if ( 'offcanvas' === $item['action'] \|\| 'yes' === $item['show_badge'] ) {
1775
1776	?>
1777	<div class="premium-error-notice">
1778	<?php
1779	$message = __( 'This option is available in <b>Premium Addons Pro</b>.', 'premium-addons-for-elementor' );
1780	echo wp_kses_post( $message );
1781	?>
1782	</div>
1783	<?php
1784	return false;
1785
1786	}
1787	}
1788
1789	$this->add_render_attribute(
1790	'menu-item-' . $index,
1791	array(
1792	'class' => array(
1793	'premium-mobile-menu__item',
1794	'elementor-repeater-item-' . $item['_id'],
1795	),
1796	)
1797	);
1798
1799	if ( ! empty( $item['css_id'] ) ) {
1800	$this->add_render_attribute( 'menu-item-' . $index, 'id', $item['css_id'] );
1801	}
1802
1803	$animation_key = 'icon_lottie_' . $index;
1804
1805	if ( 'icon' === $item['icon_type'] \|\| 'svg' === $item['icon_type'] ) {
1806
1807	$this->add_render_attribute( $animation_key, 'class', 'premium-drawable-icon' );
1808
1809	if ( 'yes' === $item['draw_svg'] ) {
1810
1811	$this->add_render_attribute(
1812	$animation_key,
1813	array(
1814	'class' => array( 'premium-svg-drawer', 'elementor-invisible' ),
1815	'data-svg-reverse' => $item['lottie_reverse'],
1816	'data-svg-loop' => $item['lottie_loop'],
1817	'data-svg-hover' => $item['svg_hover'],
1818	'data-svg-sync' => $item['svg_sync'],
1819	'data-svg-fill' => $item['svg_color'],
1820	'data-svg-frames' => $item['frames'],
1821	'data-svg-yoyo' => $item['svg_yoyo'],
1822	'data-svg-point' => $item['lottie_reverse'] ? $item['end_point']['size'] : $item['start_point']['size'],
1823	)
1824	);
1825
1826	} else {
1827	$this->add_render_attribute( $animation_key, 'class', 'premium-svg-nodraw' );
1828	}
1829	} elseif ( 'animation' === $item['icon_type'] ) {
1830
1831	$this->add_render_attribute( 'menu-item-' . $index, 'class', 'lottie-item' );
1832
1833	$this->add_render_attribute(
1834	$animation_key,
1835	array(
1836	'class' => 'premium-lottie-animation',
1837	'data-lottie-url' => 'url' === $item['lottie_source'] ? $item['lottie_url'] : $item['lottie_file']['url'],
1838	'data-lottie-loop' => $item['lottie_loop'],
1839	'data-lottie-reverse' => $item['lottie_reverse'],
1840	)
1841	);
1842	}
1843
1844	$item_link = $this->get_repeater_setting_key( 'link', 'menu_items', $index );
1845
1846	$this->add_render_attribute(
1847	$item_link,
1848	array(
1849	'class' => 'premium-mobile-menu__link',
1850	'aria-label' => 'yes' === $item['menu_item_text_switcher'] ? $item['menu_item_text'] : '',
1851	)
1852	);
1853
1854	if ( 'link' === $item['action'] ) {
1855	$link_url = ( 'url' === $item['link_select'] ) ? $item['link'] : get_permalink( $item['existing_page'] );
1856
1857	if ( 'url' === $item['link_select'] ) {
1858	$this->add_link_attributes( $item_link, $link_url );
1859
1860	$link = $link_url['url'];
1861
1862	$segments = explode( '/', $link );
1863	$target_link = end( $segments );
1864
1865	$this->add_render_attribute( 'menu-item-' . $index, 'data-target', esc_url( $target_link ) );
1866
1867	} else {
1868	$this->add_render_attribute( $item_link, 'href', $link_url );
1869
1870	$link = $link_url;
1871	}
1872
1873	if ( $is_edit_mode && 2 === $index ) {
1874	$this->add_render_attribute( 'menu-item-' . $index, 'class', 'active-menu-item' );
1875	} elseif ( false !== strpos( $link, $current_page_url ) && ! $is_home && false === strpos( $link, '#' ) ) {
1876	$this->add_render_attribute( 'menu-item-' . $index, 'class', 'active-menu-item' );
1877	} elseif ( 'yes' === $item['home_page'] && $is_home ) {
1878	$this->add_render_attribute( 'menu-item-' . $index, 'class', 'active-menu-item' );
1879	}
1880	} else {
1881	$this->add_render_attribute( 'menu-item-' . $index, 'id', $item['offcanvas_id'] );
1882	}
1883
1884	?>
1885	<li <?php $this->print_render_attribute_string( 'menu-item-' . $index ); ?> >
1886	<div <?php $this->print_render_attribute_string( 'item_inner' ); ?>>
1887
1888	<a <?php $this->print_render_attribute_string( $item_link ); ?>>
1889
1890	<?php if ( 'yes' === $item['show_badge'] && ! empty( $item['badge_title'] ) ) : ?>
1891	<div class="premium-mobile-menu__badge">
1892	<span><?php echo wp_kses_post( $item['badge_title'] ); ?></span>
1893	</div>
1894	<?php endif; ?>
1895
1896	<?php if ( 'none' !== $item['icon_type'] ) : ?>
1897	<div class="premium-mobile-menu__icon-wrap">
1898	<?php
1899
1900	if ( 'icon' === $item['icon_type'] ) {
1901	if ( 'yes' !== $item['draw_svg'] ) {
1902	echo '<div class="premium-drawable-icon">';
1903	Icons_Manager::render_icon(
1904	$item['icon'],
1905	array(
1906	'class' => array( 'premium-svg-nodraw' ),
1907	'aria-hidden' => 'true',
1908	)
1909	);
1910	echo '</div>';
1911	} else {
1912	?>
1913	<div <?php $this->print_render_attribute_string( $animation_key ); ?>>
1914	<?php echo Helper_Functions::get_svg_by_icon( $item['icon'] ); ?>
1915	</div>
1916	<?php
1917	}
1918	} elseif ( 'svg' === $item['icon_type'] ) {
1919	?>
1920	<div <?php $this->print_render_attribute_string( $animation_key ); ?>>
1921	<?php echo Helper_Functions::sanitize_svg( $item['custom_svg'] ); ?>
1922	</div>
1923	<?php
1924	} elseif ( 'image' === $item['icon_type'] ) {
1925	if ( ! empty( $item['custom_image']['url'] ) ) {
1926	$alt = Control_Media::get_image_alt( $item['custom_image'] );
1927	echo '<img src="' . esc_url( $item['custom_image']['url'] ) . '" alt="' . esc_attr( $alt ) . '">';
1928	}
1929	} else {
1930	echo '<div ' . wp_kses_post( $this->get_render_attribute_string( $animation_key ) ) . '></div>';
1931	}
1932
1933	?>
1934	</div>
1935	<?php endif; ?>
1936
1937	<?php if ( 'yes' === $item['menu_item_text_switcher'] && ! empty( $item['menu_item_text'] ) ) : ?>
1938	<div class="premium-mobile-menu__text">
1939	<span><?php echo wp_kses_post( $item['menu_item_text'] ); ?></span>
1940	</div>
1941	<?php endif; ?>
1942
1943	</a>
1944
1945	</div>
1946	</li>
1947
1948	<?php } ?>
1949	</ul>
1950	</div>
1951	</div>
1952
1953	<?php
1954	}
1955	}
1956