ultimate-store-kit / modules / mobile-menu / widgets / mobile-menu.php

mobile-menu.php in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 3.0.8, at modules/mobile-menu/widgets/mobile-menu.php

982 lines 27.3 KB

Raw Download Zip

1	<?php
2
3	namespace UltimateStoreKit\Modules\MobileMenu\Widgets;
4
5	use UltimateStoreKit\Base\Module_Base;
6	use Elementor\Group_Control_Css_Filter;
7	use Elementor\Repeater;
8	use Elementor\Controls_Manager;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Group_Control_Text_Shadow;
13	use Elementor\Group_Control_Background;
14	use Elementor\Group_Control_Border;
15	use Elementor\Icons_Manager;
16	use Elementor\Utils;
17
18	// use UltimateStoreKit\traits\Global_Widget_Controls;
19	// use UltimateStoreKit\traits\Global_Widget_Template;
20
21	if (! defined('ABSPATH')) {
22	exit;
23	} // Exit if accessed directly
24
25	class Mobile_Menu extends Module_Base {
26	// use Global_Widget_Controls;
27	// use Global_Widget_Template;
28
29	public function get_name() {
30	return 'usk-mobile-menu';
31	}
32
33	public function get_title() {
34	return esc_html__('Mobile Menu', 'ultimate-store-kit');
35	}
36
37	public function get_icon() {
38	return 'usk-widget-icon usk-icon-mobile-menu';
39	}
40
41	public function get_categories() {
42	return ['ultimate-store-kit'];
43	}
44
45	public function get_keywords() {
46	return [ 'icon', 'mobile', 'menu', 'nav', 'navbar' ];
47	}
48
49	public function get_style_depends() {
50	if ($this->usk_is_edit_mode()) {
51	return ['usk-all-styles'];
52	} else {
53	return ['usk-mobile-menu'];
54	}
55	}
56
57	public function get_script_depends() {
58	if ($this->usk_is_edit_mode()) {
59	return ['popper', 'tippyjs', 'usk-site'];
60	} else {
61	return ['popper', 'tippyjs', 'usk-mobile-menu'];
62	}
63	}
64
65	public function has_widget_inner_wrapper(): bool {
66	return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
67	}
68
69	protected function is_dynamic_content(): bool {
70	return false;
71	}
72
73	protected function register_controls() {
74
75	$this->start_controls_section(
76	'ep_section_menu',
77	[
78	'label' => __( 'Menu Items', 'ultimate-store-kit' ),
79	'tab' => Controls_Manager::TAB_CONTENT,
80	]
81	);
82
83	$this->add_control(
84	'menu_style',
85	[
86	'label' => __( 'Menu Style', 'ultimate-store-kit' ),
87	'type' => Controls_Manager::SELECT,
88	'default' => 'style-1',
89	'options' => [
90	'style-1' => __( 'Default', 'ultimate-store-kit' ),
91	'style-2' => __( 'Border', 'ultimate-store-kit' ),
92	'style-3' => __( 'Tooltip', 'ultimate-store-kit' ),
93	'style-4' => __( 'Circle with Tooltip', 'ultimate-store-kit' ),
94	],
95	]
96	);
97
98	$repeater = new Repeater();
99
100	$repeater->add_control(
101	'menu_icon',
102	[
103	'label' => __( 'Icon', 'ultimate-store-kit' ),
104	'type' => Controls_Manager::ICONS,
105	'label_block' => false,
106	'skin' => 'inline',
107
108	]
109	);
110
111	$repeater->add_control(
112	'menu_text',
113	[
114	'label' => __( 'Menu Text', 'ultimate-store-kit' ),
115	'type' => Controls_Manager::TEXT,
116	'dynamic' => [ 'active' => true ],
117	]
118	);
119
120	$repeater->add_control(
121	'link',
122	[
123	'label' => __( 'Link', 'ultimate-store-kit' ),
124	'type' => Controls_Manager::URL,
125	'dynamic' => [
126	'active' => true,
127	],
128	'default' => [ 'url' => '' ],
129	'description' => __( 'Add your section id WITH the # key. e.g: #my-id also you can add internal/external URL', 'ultimate-store-kit' ),
130	'label_block' => true,
131	'placeholder' => __( 'https://your-link.com', 'ultimate-store-kit' ),
132	]
133	);
134
135	$this->add_control(
136	'menu_items',
137	[
138	'show_label' => false,
139	'type' => Controls_Manager::REPEATER,
140	'fields' => $repeater->get_controls(),
141	'default' => [
142	[
143	'menu_text' => __( 'Home', 'ultimate-store-kit' ),
144	'menu_icon' => [ 'value' => 'fas fa-home', 'library' => 'fa-solid' ],
145	],
146	[
147	'menu_text' => __( 'Cart', 'ultimate-store-kit' ),
148	'menu_icon' => [ 'value' => 'fas fa-shopping-cart', 'library' => 'fa-solid' ],
149	],
150	[
151	'menu_text' => __( 'Account', 'ultimate-store-kit' ),
152	'menu_icon' => [ 'value' => 'fas fa-user', 'library' => 'fa-solid' ],
153	],
154	],
155	'title_field' => '{{{ elementor.helpers.renderIcon( this, menu_icon, {}, "i", "panel" ) \|\| \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ menu_text }}}',
156	]
157	);
158
159	$this->end_controls_section();
160
161	$this->start_controls_section(
162	'section_tooltip_settings',
163	[
164	'label' => __( 'Tooltip Settings', 'ultimate-store-kit' ),
165	'condition' => [
166	'menu_style' => [ 'style-3', 'style-4' ],
167	],
168	]
169	);
170
171	$this->add_control(
172	'menu_tooltip',
173	[
174	'label' => __( 'Tooltip', 'ultimate-store-kit' ),
175	'type' => Controls_Manager::SWITCHER,
176	'default' => 'yes',
177	'render_type' => 'template',
178	'frontend_available' => true,
179	]
180	);
181
182	$this->add_control(
183	'menu_tooltip_placement',
184	[
185	'label' => esc_html__( 'Placement', 'ultimate-store-kit' ),
186	'type' => Controls_Manager::SELECT,
187	'default' => 'top',
188	'options' => [
189	'top-start' => esc_html__( 'Top Left', 'ultimate-store-kit' ),
190	'top' => esc_html__( 'Top', 'ultimate-store-kit' ),
191	'top-end' => esc_html__( 'Top Right', 'ultimate-store-kit' ),
192	'bottom-start' => esc_html__( 'Bottom Left', 'ultimate-store-kit' ),
193	'bottom' => esc_html__( 'Bottom', 'ultimate-store-kit' ),
194	'bottom-end' => esc_html__( 'Bottom Right', 'ultimate-store-kit' ),
195	'left' => esc_html__( 'Left', 'ultimate-store-kit' ),
196	'right' => esc_html__( 'Right', 'ultimate-store-kit' ),
197	],
198	'condition' => [
199	'menu_tooltip' => 'yes',
200	],
201	'separator' => 'before',
202	]
203	);
204
205	$this->add_control(
206	'menu_tooltip_animation',
207	[
208	'label' => esc_html__( 'Animation', 'ultimate-store-kit' ),
209	'type' => Controls_Manager::SELECT,
210	'default' => 'shift-toward',
211	'options' => [
212	'shift-away' => esc_html__( 'Shift-Away', 'ultimate-store-kit' ),
213	'shift-toward' => esc_html__( 'Shift-Toward', 'ultimate-store-kit' ),
214	'fade' => esc_html__( 'Fade', 'ultimate-store-kit' ),
215	'scale' => esc_html__( 'Scale', 'ultimate-store-kit' ),
216	'perspective' => esc_html__( 'Perspective', 'ultimate-store-kit' ),
217	],
218	'condition' => [
219	'menu_tooltip' => 'yes',
220	],
221	]
222	);
223
224	$this->add_control(
225	'menu_tooltip_x_offset',
226	[
227	'label' => esc_html__( 'X Offset', 'ultimate-store-kit' ),
228	'type' => Controls_Manager::SLIDER,
229	'default' => [
230	'size' => 0,
231	],
232	'condition' => [
233	'menu_tooltip' => 'yes',
234	],
235	]
236	);
237
238	$this->add_control(
239	'menu_tooltip_y_offset',
240	[
241	'label' => esc_html__( 'Y Offset', 'ultimate-store-kit' ),
242	'type' => Controls_Manager::SLIDER,
243	'default' => [
244	'size' => 0,
245	],
246	'condition' => [
247	'menu_tooltip' => 'yes',
248	],
249	]
250	);
251
252	$this->add_control(
253	'menu_tooltip_arrow',
254	[
255	'label' => esc_html__( 'Arrow', 'ultimate-store-kit' ),
256	'type' => Controls_Manager::SWITCHER,
257	'condition' => [
258	'menu_tooltip' => 'yes',
259	],
260	]
261	);
262
263	$this->add_control(
264	'menu_tooltip_trigger',
265	[
266	'label' => __( 'Trigger on Click', 'ultimate-store-kit' ),
267	'description' => __( 'Don\'t set yes when you set lightbox image with marker.', 'ultimate-store-kit' ),
268	'type' => Controls_Manager::SWITCHER,
269	'condition' => [
270	'menu_tooltip' => 'yes',
271	],
272	]
273	);
274
275	$this->end_controls_section();
276
277	//Style
278	$this->start_controls_section(
279	'ep_section_style_menu',
280	[
281	'label' => __( 'Menu Items', 'ultimate-store-kit' ),
282	'tab' => Controls_Manager::TAB_STYLE,
283	]
284	);
285
286	$this->start_controls_tabs( 'tabs_item_style' );
287
288	$this->start_controls_tab(
289	'tab_item_normal',
290	[
291	'label' => esc_html__( 'Normal', 'ultimate-store-kit' ),
292	]
293	);
294
295	$this->add_group_control(
296	Group_Control_Background::get_type(),
297	[
298	'name' => 'item_background',
299	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link',
300	]
301	);
302
303	$this->add_control(
304	'item_border_type',
305	[
306	'label' => esc_html_x( 'Border Type', 'Border Control', 'ultimate-store-kit' ),
307	'type' => Controls_Manager::SELECT,
308	'options' => [
309	'' => esc_html__( 'Default', 'ultimate-store-kit' ),
310	'none' => esc_html__( 'None', 'ultimate-store-kit' ),
311	'solid' => esc_html_x( 'Solid', 'Border Control', 'ultimate-store-kit' ),
312	'double' => esc_html_x( 'Double', 'Border Control', 'ultimate-store-kit' ),
313	'dotted' => esc_html_x( 'Dotted', 'Border Control', 'ultimate-store-kit' ),
314	'dashed' => esc_html_x( 'Dashed', 'Border Control', 'ultimate-store-kit' ),
315	'groove' => esc_html_x( 'Groove', 'Border Control', 'ultimate-store-kit' ),
316	],
317	'selectors' => [
318	'{{SELECTOR}} .usk-mobile-menu-wrap .usk-mobile-menu-link' => 'border-style: {{VALUE}};',
319	],
320	'separator' => 'before',
321	'condition' => [
322	'menu_style' => 'style-2',
323	],
324	]
325	);
326
327	$this->add_responsive_control(
328	'item_border_width',
329	[
330	'label' => __( 'Border Width', 'ultimate-store-kit' ),
331	'type' => Controls_Manager::SLIDER,
332	'selectors' => [
333	'{{WRAPPER}}' => '--usk-border-width: {{SIZE}}{{UNIT}};'
334	],
335	'condition' => [
336	'item_border_type!' => [ 'none' ],
337	'menu_style' => 'style-2',
338	],
339	]
340	);
341
342	$this->add_control(
343	'item_border_color',
344	[
345	'label' => __( 'Border Color', 'ultimate-store-kit' ),
346	'type' => Controls_Manager::COLOR,
347	'selectors' => [
348	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link' => 'border-color: {{SIZE}}{{UNIT}};'
349	],
350	'condition' => [
351	'item_border_type!' => [ 'none' ],
352	'menu_style' => 'style-2',
353	],
354	]
355	);
356
357	$this->add_responsive_control(
358	'item_border_radius',
359	[
360	'label' => esc_html__( 'Border Radius', 'ultimate-store-kit' ),
361	'type' => Controls_Manager::DIMENSIONS,
362	'size_units' => [ 'px', 'em', '%' ],
363	'selectors' => [
364	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
365	],
366	]
367	);
368
369	$this->add_responsive_control(
370	'item_padding',
371	[
372	'label' => esc_html__( 'Padding', 'ultimate-store-kit' ),
373	'type' => Controls_Manager::DIMENSIONS,
374	'size_units' => [ 'px', 'em', '%' ],
375	'selectors' => [
376	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
377	],
378	]
379	);
380	//margin
381	$this->add_responsive_control(
382	'item_margin',
383	[
384	'label' => esc_html__( 'Margin', 'ultimate-store-kit' ),
385	'type' => Controls_Manager::DIMENSIONS,
386	'size_units' => [ 'px', 'em', '%' ],
387	'selectors' => [
388	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
389	],
390	]
391	);
392
393
394	$this->add_group_control(
395	Group_Control_Box_Shadow::get_type(),
396	[
397	'name' => 'item_box_shadow',
398	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link',
399	]
400	);
401
402	$this->end_controls_tab();
403
404	$this->start_controls_tab(
405	'tab_item_hover',
406	[
407	'label' => esc_html__( 'Hover', 'ultimate-store-kit' ),
408	]
409	);
410
411	$this->add_group_control(
412	Group_Control_Background::get_type(),
413	[
414	'name' => 'item_hover_background',
415	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover',
416	]
417	);
418
419	$this->add_control(
420	'item_hover_border_color',
421	[
422	'label' => esc_html__( 'Border Color', 'ultimate-store-kit' ),
423	'type' => Controls_Manager::COLOR,
424	'condition' => [
425	'item_border_type!' => [ 'none' ],
426	'menu_style' => 'style-2',
427	],
428	'selectors' => [
429	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover' => 'border-color: {{VALUE}};',
430	],
431	]
432	);
433
434	$this->add_group_control(
435	Group_Control_Box_Shadow::get_type(),
436	[
437	'name' => 'item_hover_box_shadow',
438	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover',
439	]
440	);
441
442	$this->end_controls_tab();
443
444	$this->end_controls_tabs();
445
446	$this->end_controls_section();
447
448	$this->start_controls_section(
449	'ep_section_style_menu_icon',
450	[
451	'label' => __( 'Menu Icon', 'ultimate-store-kit' ),
452	'tab' => Controls_Manager::TAB_STYLE,
453	]
454	);
455
456	$this->start_controls_tabs( 'tabs_item_icon_style' );
457
458	$this->start_controls_tab(
459	'tab_item_icon_normal',
460	[
461	'label' => esc_html__( 'Normal', 'ultimate-store-kit' ),
462	]
463	);
464
465	$this->add_control(
466	'item_icon_color',
467	[
468	'label' => esc_html__( 'Color', 'ultimate-store-kit' ),
469	'type' => Controls_Manager::COLOR,
470	'selectors' => [
471	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu' => 'color: {{VALUE}};',
472	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu svg' => 'fill: {{VALUE}};',
473	],
474	]
475	);
476
477	$this->add_group_control(
478	Group_Control_Background::get_type(),
479	[
480	'name' => 'item_icon_background',
481	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu',
482	]
483	);
484
485	$this->add_group_control(
486	Group_Control_Border::get_type(),
487	[
488	'name' => 'item_icon_border',
489	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu',
490	'separator' => 'before',
491	]
492	);
493
494	$this->add_responsive_control(
495	'item_icon_border_radius',
496	[
497	'label' => esc_html__( 'Border Radius', 'ultimate-store-kit' ),
498	'type' => Controls_Manager::DIMENSIONS,
499	'size_units' => [ 'px', 'em', '%' ],
500	'selectors' => [
501	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
502	],
503	]
504	);
505
506	$this->add_responsive_control(
507	'item_icon_padding',
508	[
509	'label' => esc_html__( 'Padding', 'ultimate-store-kit' ),
510	'type' => Controls_Manager::DIMENSIONS,
511	'size_units' => [ 'px', 'em', '%' ],
512	'selectors' => [
513	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
514	],
515	]
516	);
517
518	$this->add_group_control(
519	Group_Control_Box_Shadow::get_type(),
520	[
521	'name' => 'item_icon_box_shadow',
522	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu',
523	]
524	);
525
526	$this->add_responsive_control(
527	'item_icon_size',
528	[
529	'label' => __( 'Size', 'ultimate-store-kit' ),
530	'type' => Controls_Manager::SLIDER,
531	'selectors' => [
532	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-mobile-menu' => 'font-size: {{SIZE}}{{UNIT}};',
533	],
534	]
535	);
536
537	$this->end_controls_tab();
538
539	$this->start_controls_tab(
540	'tab_item_icon_hover',
541	[
542	'label' => esc_html__( 'Hover', 'ultimate-store-kit' ),
543	]
544	);
545
546	$this->add_control(
547	'item_icon_hover_color',
548	[
549	'label' => esc_html__( 'Color', 'ultimate-store-kit' ),
550	'type' => Controls_Manager::COLOR,
551	'selectors' => [
552	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-mobile-menu' => 'color: {{VALUE}};',
553	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-mobile-menu svg' => 'fill: {{VALUE}};',
554	],
555	]
556	);
557
558	$this->add_group_control(
559	Group_Control_Background::get_type(),
560	[
561	'name' => 'item_icon_hover_background',
562	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-mobile-menu',
563	]
564	);
565
566	$this->add_control(
567	'item_icon_hover_border_color',
568	[
569	'label' => esc_html__( 'Border Color', 'ultimate-store-kit' ),
570	'type' => Controls_Manager::COLOR,
571	'condition' => [
572	'item_icon_border_border!' => [ 'none' ],
573	],
574	'selectors' => [
575	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-mobile-menu' => 'border-color: {{VALUE}};',
576	],
577	]
578	);
579
580	$this->add_group_control(
581	Group_Control_Box_Shadow::get_type(),
582	[
583	'name' => 'item_icon_hover_box_shadow',
584	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-mobile-menu',
585	]
586	);
587
588	$this->end_controls_tab();
589
590	$this->end_controls_tabs();
591
592	$this->end_controls_section();
593
594	$this->start_controls_section(
595	'ep_section_style_menu_text',
596	[
597	'label' => __( 'Menu Text', 'ultimate-store-kit' ),
598	'tab' => Controls_Manager::TAB_STYLE,
599	]
600	);
601
602	$this->start_controls_tabs( 'tabs_item_text_style' );
603
604	$this->start_controls_tab(
605	'tab_item_text_normal',
606	[
607	'label' => esc_html__( 'Normal', 'ultimate-store-kit' ),
608	]
609	);
610
611	$this->add_control(
612	'item_text_color',
613	[
614	'label' => esc_html__( 'Color', 'ultimate-store-kit' ),
615	'type' => Controls_Manager::COLOR,
616	'selectors' => [
617	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu' => 'color: {{VALUE}};',
618	],
619	]
620	);
621
622	$this->add_group_control(
623	Group_Control_Background::get_type(),
624	[
625	'name' => 'item_text_background',
626	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu',
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Border::get_type(),
632	[
633	'name' => 'item_text_border',
634	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu',
635	'separator' => 'before',
636	]
637	);
638
639	$this->add_responsive_control(
640	'item_text_border_radius',
641	[
642	'label' => esc_html__( 'Border Radius', 'ultimate-store-kit' ),
643	'type' => Controls_Manager::DIMENSIONS,
644	'size_units' => [ 'px', 'em', '%' ],
645	'selectors' => [
646	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
647	],
648	]
649	);
650
651	$this->add_responsive_control(
652	'item_text_padding',
653	[
654	'label' => esc_html__( 'Padding', 'ultimate-store-kit' ),
655	'type' => Controls_Manager::DIMENSIONS,
656	'size_units' => [ 'px', 'em', '%' ],
657	'selectors' => [
658	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
659	],
660	]
661	);
662
663	$this->add_responsive_control(
664	'item_text_margin',
665	[
666	'label' => esc_html__( 'Margin', 'ultimate-store-kit' ),
667	'type' => Controls_Manager::DIMENSIONS,
668	'size_units' => [ 'px', 'em', '%' ],
669	'selectors' => [
670	'{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
671	],
672	]
673	);
674
675	$this->add_group_control(
676	Group_Control_Box_Shadow::get_type(),
677	[
678	'name' => 'item_text_box_shadow',
679	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu',
680	]
681	);
682
683	//typography
684	$this->add_group_control(
685	Group_Control_Typography::get_type(),
686	[
687	'name' => 'item_text_typography',
688	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap span.usk-text-mobile-menu',
689	]
690	);
691
692	$this->end_controls_tab();
693
694	$this->start_controls_tab(
695	'tab_item_text_hover',
696	[
697	'label' => esc_html__( 'Hover', 'ultimate-store-kit' ),
698	]
699	);
700
701	$this->add_control(
702	'item_text_hover_color',
703	[
704	'label' => esc_html__( 'Color', 'ultimate-store-kit' ),
705	'type' => Controls_Manager::COLOR,
706	'selectors' => [
707	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-text-mobile-menu' => 'color: {{VALUE}};',
708	],
709	]
710	);
711
712	$this->add_group_control(
713	Group_Control_Background::get_type(),
714	[
715	'name' => 'item_text_hover_background',
716	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-text-mobile-menu',
717	]
718	);
719
720	$this->add_control(
721	'item_text_hover_border_color',
722	[
723	'label' => esc_html__( 'Border Color', 'ultimate-store-kit' ),
724	'type' => Controls_Manager::COLOR,
725	'condition' => [
726	'item_text_border_border!' => [ 'none' ],
727	],
728	'selectors' => [
729	'{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-text-mobile-menu' => 'border-color: {{VALUE}};',
730	],
731	]
732	);
733
734	$this->add_group_control(
735	Group_Control_Box_Shadow::get_type(),
736	[
737	'name' => 'item_text_hover_box_shadow',
738	'selector' => '{{WRAPPER}} .usk-mobile-menu-wrap .usk-mobile-menu-link:hover span.usk-text-mobile-menu',
739	]
740	);
741
742	$this->end_controls_tab();
743
744	$this->end_controls_tabs();
745
746	$this->end_controls_section();
747
748	//tooltip style
749	$this->start_controls_section(
750	'section_style_tooltip',
751	[
752	'label' => esc_html__( 'Tooltip', 'ultimate-store-kit' ),
753	'tab' => Controls_Manager::TAB_STYLE,
754	'condition' => [
755	'menu_style' => [ 'style-3', 'style-4' ],
756	'menu_tooltip' => 'yes',
757	],
758	]
759	);
760
761	$this->add_responsive_control(
762	'menu_tooltip_width',
763	[
764	'label' => esc_html__( 'Width', 'ultimate-store-kit' ),
765	'type' => Controls_Manager::SLIDER,
766	'size_units' => [
767	'px',
768	'em',
769	],
770	'range' => [
771	'px' => [
772	'min' => 50,
773	'max' => 500,
774	],
775	],
776	'selectors' => [
777	'.tippy-box[data-theme="usk-tippy-{{ID}}"]' => 'max-width: calc({{SIZE}}{{UNIT}} - 10px) !important;',
778	],
779	'render_type' => 'template',
780	]
781	);
782
783	$this->add_group_control(
784	Group_Control_Typography::get_type(),
785	[
786	'name' => 'menu_tooltip_typography',
787	'selector' => '.tippy-box[data-theme="usk-tippy-{{ID}}"]',
788	]
789	);
790
791	$this->add_control(
792	'menu_tooltip_title_color',
793	[
794	'label' => esc_html__( 'Title Color', 'ultimate-store-kit' ),
795	'type' => Controls_Manager::COLOR,
796	'selectors' => [
797	'.tippy-box[data-theme="usk-tippy-{{ID}}"] .usk-title' => 'color: {{VALUE}}',
798	],
799	]
800	);
801
802	$this->add_control(
803	'menu_tooltip_color',
804	[
805	'label' => esc_html__( 'Text Color', 'ultimate-store-kit' ),
806	'type' => Controls_Manager::COLOR,
807	'selectors' => [
808	'.tippy-box[data-theme="usk-tippy-{{ID}}"]' => 'color: {{VALUE}}',
809	],
810	]
811	);
812
813	$this->add_control(
814	'menu_tooltip_text_align',
815	[
816	'label' => esc_html__( 'Text Alignment', 'ultimate-store-kit' ),
817	'type' => Controls_Manager::CHOOSE,
818	'default' => 'center',
819	'options' => [
820	'left' => [
821	'title' => esc_html__( 'Left', 'ultimate-store-kit' ),
822	'icon' => 'eicon-text-align-left',
823	],
824	'center' => [
825	'title' => esc_html__( 'Center', 'ultimate-store-kit' ),
826	'icon' => 'eicon-text-align-center',
827	],
828	'right' => [
829	'title' => esc_html__( 'Right', 'ultimate-store-kit' ),
830	'icon' => 'eicon-text-align-right',
831	],
832	],
833	'selectors' => [
834	'.tippy-box[data-theme="usk-tippy-{{ID}}"]' => 'text-align: {{VALUE}};',
835	],
836	]
837	);
838
839	$this->add_group_control(
840	Group_Control_Background::get_type(),
841	[
842	'name' => 'menu_tooltip_background',
843	'selector' => '.tippy-box[data-theme="usk-tippy-{{ID}}"], .tippy-box[data-theme="usk-tippy-{{ID}}"] .tippy-backdrop',
844	]
845	);
846
847	$this->add_control(
848	'menu_tooltip_arrow_color',
849	[
850	'label' => esc_html__( 'Arrow Color', 'ultimate-store-kit' ),
851	'type' => Controls_Manager::COLOR,
852	'selectors' => [
853	'.tippy-box[data-theme="usk-tippy-{{ID}}"] .tippy-arrow' => 'color: {{VALUE}}',
854	],
855	]
856	);
857
858	$this->add_responsive_control(
859	'menu_tooltip_padding',
860	[
861	'label' => __( 'Padding', 'ultimate-store-kit' ),
862	'type' => Controls_Manager::DIMENSIONS,
863	'size_units' => [ 'px', '%' ],
864	'selectors' => [
865	'.tippy-box[data-theme="usk-tippy-{{ID}}"] .tippy-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
866	],
867	'render_type' => 'template',
868	]
869	);
870
871	$this->add_group_control(
872	Group_Control_Border::get_type(),
873	[
874	'name' => 'menu_tooltip_border',
875	'label' => esc_html__( 'Border', 'ultimate-store-kit' ),
876	'placeholder' => '1px',
877	'default' => '1px',
878	'selector' => '.tippy-box[data-theme="usk-tippy-{{ID}}"]',
879	]
880	);
881
882	$this->add_responsive_control(
883	'menu_tooltip_border_radius',
884	[
885	'label' => __( 'Border Radius', 'ultimate-store-kit' ),
886	'type' => Controls_Manager::DIMENSIONS,
887	'size_units' => [ 'px', '%' ],
888	'selectors' => [
889	'.tippy-box[data-theme="usk-tippy-{{ID}}"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
890	],
891	]
892	);
893
894	$this->add_group_control(
895	Group_Control_Box_Shadow::get_type(),
896	[
897	'name' => 'menu_tooltip_box_shadow',
898	'selector' => '.tippy-box[data-theme="usk-tippy-{{ID}}"]',
899	]
900	);
901
902	$this->end_controls_section();
903	}
904
905	protected function render() {
906	$settings = $this->get_settings_for_display();
907
908	$this->add_render_attribute( 'mobile-menu', 'class', 'usk-mobile-menu-wrap usk-mobile-menu-' . $settings['menu_style'] );
909
910	if ( empty( $settings['menu_items'] ) ) {
911	return;
912	}
913
914	?>
915
916	<div <?php $this->print_render_attribute_string( 'mobile-menu' ); ?>>
917	<ul>
918	<?php
919	foreach ( $settings['menu_items'] as $index => $item ) :
920	$repeater_key = 'menu_item' . $index;
921	$tag = 'div ';
922	$tooltip_content = '<span class="usk-title">' . $item['menu_text'] . '</span>';
923	$this->add_render_attribute( $repeater_key, 'class', 'usk-mobile-menu-link', true );
924	$this->add_render_attribute( $repeater_key, 'data-tippy-content', htmlspecialchars( $tooltip_content, ENT_QUOTES, 'UTF-8' ), true );
925
926	if ( $item['link']['url'] ) {
927	$tag = 'a ';
928	$this->add_render_attribute( $repeater_key, 'class', 'usk-mobile-menu-link', true );
929
930	$this->add_link_attributes( $repeater_key, $item['link'] );
931	}
932
933	if ( $item['menu_text'] and $settings['menu_tooltip'] ) {
934	// Tooltip settings
935	$this->add_render_attribute( $repeater_key, 'class', 'usk-tippy-tooltip' );
936	$this->add_render_attribute( $repeater_key, 'data-tippy', '', true );
937
938	if ( $settings['menu_tooltip_placement'] ) {
939	$this->add_render_attribute( $repeater_key, 'data-tippy-placement', $settings['menu_tooltip_placement'], true );
940	}
941
942	if ( $settings['menu_tooltip_animation'] ) {
943	$this->add_render_attribute( $repeater_key, 'data-tippy-animation', $settings['menu_tooltip_animation'], true );
944	}
945
946	if ( $settings['menu_tooltip_x_offset']['size'] or $settings['menu_tooltip_y_offset']['size'] ) {
947	$this->add_render_attribute( $repeater_key, 'data-tippy-offset', '[' . $settings['menu_tooltip_x_offset']['size'] . ',' . $settings['menu_tooltip_y_offset']['size'] . ']', true );
948	}
949
950	if ( 'yes' == $settings['menu_tooltip_arrow'] ) {
951	$this->add_render_attribute( $repeater_key, 'data-tippy-arrow', 'true', true );
952	} else {
953	$this->add_render_attribute( $repeater_key, 'data-tippy-arrow', 'false', true );
954	}
955
956	if ( 'yes' == $settings['menu_tooltip_trigger'] ) {
957	$this->add_render_attribute( $repeater_key, 'data-tippy-trigger', 'click', true );
958	}
959	}
960
961	?>
962	<li class="usk-mobile-menu-list">
963	<<?php echo esc_attr( $tag ) . ' '; ?> <?php $this->print_render_attribute_string( $repeater_key ); ?>>
964
965	<?php if ( ! empty( $item['menu_icon']['value'] ) ) : ?>
966	<span class="usk-mobile-menu">
967	<?php Icons_Manager::render_icon( $item['menu_icon'], [ 'aria-hidden' => 'true' ] ); ?>
968	</span>
969	<?php endif; ?>
970
971	<span class="usk-text-mobile-menu"><?php echo wp_kses_post( $item['menu_text'] ); ?></span>
972
973	</<?php echo esc_attr( $tag ); ?>>
974	</li>
975	<?php endforeach; ?>
976	</ul>
977	</div>
978
979	<?php
980	}
981	}
982