modern-button.php — Shortcodes and extra features for Phlox theme 2.5.7

auxin-elements / includes / elementor / widgets / modern-button.php

auxin-elements / includes / elementor / widgets Last commit date

modern-button.php

764 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Icons_Manager;
9	use Elementor\Scheme_Typography;
10	use Elementor\Group_Control_Background;
11	use Elementor\Group_Control_Box_Shadow;
12	use Elementor\Group_Control_Text_Shadow;
13
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly.
17	}
18
19	/**
20	* Elementor 'ModernButton' widget.
21	*
22	* Elementor widget that displays an 'ModernButton' with lightbox.
23	*
24	* @since 1.0.0
25	*/
26	class ModernButton extends Widget_Base {
27
28	/**
29	* Get widget name.
30	*
31	* Retrieve 'ModernButton' widget name.
32	*
33	* @since 1.0.0
34	* @access public
35	*
36	* @return string Widget name.
37	*/
38	public function get_name() {
39	return 'aux_modern_button';
40	}
41
42	/**
43	* Get widget title.
44	*
45	* Retrieve 'ModernButton' widget title.
46	*
47	* @since 1.0.0
48	* @access public
49	*
50	* @return string Widget title.
51	*/
52	public function get_title() {
53	return __('Modern Button', 'auxin-elements' );
54	}
55
56	/**
57	* Get widget icon.
58	*
59	* Retrieve 'ModernButton' widget icon.
60	*
61	* @since 1.0.0
62	* @access public
63	*
64	* @return string Widget icon.
65	*/
66	public function get_icon() {
67	return 'eicon-button auxin-badge';
68	}
69
70	/**
71	* Get widget categories.
72	*
73	* Retrieve 'ModernButton' widget icon.
74	*
75	* @since 1.0.0
76	* @access public
77	*
78	* @return string Widget icon.
79	*/
80	public function get_categories() {
81	return [ 'auxin-core' ];
82	}
83
84	/**
85	* Register 'ModernButton' widget controls.
86	*
87	* Adds different input fields to allow the user to change and customize the widget settings.
88	*
89	* @since 1.0.0
90	* @access protected
91	*/
92	protected function _register_controls() {
93
94	/-----------------------------------------------------------------------------------/
95	/* Button
96	/-----------------------------------------------------------------------------------/
97
98	$this->start_controls_section(
99	'button_section',
100	[
101	'label' => __('Button', 'auxin-elements' ),
102	]
103	);
104
105	$this->add_control(
106	'label',
107	[
108	'label' => __('Label','auxin-elements' ),
109	'type' => Controls_Manager::TEXT,
110	'default' => __('Click Here','auxin-elements' ),
111	]
112	);
113
114	$this->add_control(
115	'link',
116	[
117	'label' => __('Link','auxin-elements' ),
118	'type' => Controls_Manager::URL,
119	'placeholder' => 'https://your-link.com',
120	'show_external' => true,
121	'dynamic' => [
122	'active' => true
123	]
124	]
125	);
126
127	$this->add_responsive_control(
128	'btn_align',
129	[
130	'label' => __( 'Alignment', 'auxin-elements' ),
131	'type' => Controls_Manager::CHOOSE,
132	'options' => [
133	'left' => [
134	'title' => __( 'Left', 'auxin-elements' ),
135	'icon' => 'eicon-text-align-left',
136	],
137	'center' => [
138	'title' => __( 'Center', 'auxin-elements' ),
139	'icon' => 'eicon-text-align-center',
140	],
141	'right' => [
142	'title' => __( 'Right', 'auxin-elements' ),
143	'icon' => 'eicon-text-align-right',
144	],
145	'justify' => [
146	'title' => __( 'Justified', 'auxin-elements' ),
147	'icon' => 'eicon-text-align-justify',
148	],
149	],
150	'default' => 'left',
151	]
152	);
153
154	$this->add_control(
155	'icon_divider',
156	[
157	'label' => __( 'Icon', 'auxin-elements' ),
158	'type' => Controls_Manager::HEADING,
159	'separator' => 'before'
160	]
161	);
162
163	$this->add_control(
164	'icon_display',
165	[
166	'label' => __( 'Display Icon', 'auxin-elements' ),
167	'type' => Controls_Manager::SWITCHER,
168	'label_on' => __( 'On', 'auxin-elements' ),
169	'label_off' => __( 'Off', 'auxin-elements' ),
170	'return_value' => 'yes',
171	'default' => 'no',
172	'separator' => 'before'
173	]
174	);
175
176	$this->add_control(
177	'icon',
178	[
179	'type' => Controls_Manager::ICONS,
180	'default' => [
181	'value' => 'auxicon-arrow-down',
182	'library' => 'auxicon'
183	],
184	'condition' => [
185	'icon_display' => 'yes'
186	],
187	]
188	);
189
190	$this->end_controls_section();
191
192	/-----------------------------------------------------------------------------------/
193	/* Button Style Section
194	/-----------------------------------------------------------------------------------/
195
196	$this->start_controls_section(
197	'section_style_btn',
198	[
199	'label' => __('Button', 'auxin-elements' ),
200	'tab' => Controls_Manager::TAB_STYLE,
201	]
202	);
203
204	$this->add_control(
205	'btn_type',
206	[
207	'label' => __('Type', 'auxin-elements'),
208	'type' => Controls_Manager::SELECT,
209	'default' => 'default',
210	'options' => [
211	'default' => __('Default', 'auxin-elements' ),
212	'outline' => __('Outline' , 'auxin-elements' ),
213	]
214	]
215	);
216
217	$this->add_control(
218	'btn_shape',
219	[
220	'label' => __('Shape', 'auxin-elements'),
221	'type' => Controls_Manager::SELECT,
222	'default' => 'normal',
223	'options' => [
224	'normal' => __('Normal', 'auxin-elements' ),
225	'round' => __('Round' , 'auxin-elements' ),
226	'curve' => __('Curve' , 'auxin-elements' ),
227	]
228	]
229	);
230
231	$this->add_control(
232	'btn_size',
233	[
234	'label' => __('Size', 'auxin-elements'),
235	'type' => Controls_Manager::SELECT,
236	'default' => 'md',
237	'options' => [
238	'xl' => __('Exlarge', 'auxin-elements' ),
239	'lg' => __('Large' , 'auxin-elements' ),
240	'md' => __('Medium' , 'auxin-elements' ),
241	'sm' => __('Small' , 'auxin-elements' ),
242	'xs' => __('Tiny' , 'auxin-elements' )
243	]
244	]
245	);
246
247	$this->add_control(
248	'btn_skin',
249	[
250	'label' => __('Skin', 'auxin-elements'),
251	'label_block' => false,
252	'type' => 'aux-visual-select',
253	'default' => 'black',
254	'options' =>[
255	'black' => [
256	'label' => __('black', 'auxin-elements'),
257	'css_class' => 'aux-color-selector aux-button aux-visual-selector-black'
258	],
259	'white' => [
260	'label' => __('White', 'auxin-elements'),
261	'css_class' => 'aux-color-selector aux-button aux-visual-selector-white'
262	],
263	'info' => [
264	'label' => __('Ball Blue', 'auxin-elements'),
265	'css_class' => 'aux-color-selector aux-button aux-visual-selector-ball-blue'
266	],
267	'warning' => [
268	'label' => __('Mikado Yellow', 'auxin-elements'),
269	'css_class' => 'aux-color-selector aux-button aux-visual-selector-mikado-yellow'
270	],
271	'caution' => [
272	'label' => __('Carmine Pink', 'auxin-elements'),
273	'css_class' => 'aux-color-selector aux-button aux-visual-selector-carmine-pink'
274	]
275	]
276	]
277	);
278
279	$this->start_controls_tabs( 'btn_styles' );
280
281	$this->start_controls_tab(
282	'btn_normal',
283	[
284	'label' => __( 'Normal' , 'auxin-elements' )
285	]
286	);
287
288	$this->add_group_control(
289	Group_Control_Background::get_type(),
290	[
291	'name' => 'btn_bg_normal',
292	'label' => __( 'Background', 'auxin-elements' ),
293	'types' => [ 'classic', 'gradient' ],
294	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:before, {{WRAPPER}} .aux-modern-button .aux-overlay:before'
295	]
296	);
297
298	$this->add_group_control(
299	Group_Control_Box_Shadow::get_type(),
300	[
301	'name' => 'btn_box_shadow_normal',
302	'selector' => '{{WRAPPER}} .aux-modern-button'
303	]
304	);
305
306	$this->add_responsive_control(
307	'btn_padding_normal',
308	[
309	'label' => __( 'Padding', 'auxin-elements' ),
310	'type' => Controls_Manager::DIMENSIONS,
311	'size_units' => [ 'px', '%' ],
312	'selectors' => [
313	'{{WRAPPER}} .aux-modern-button' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
314	]
315	]
316	);
317
318	$this->add_responsive_control(
319	'btn_border_radius_normal',
320	[
321	'label' => __( 'Border Radius', 'auxin-elements' ),
322	'type' => Controls_Manager::DIMENSIONS,
323	'size_units' => [ 'px', 'em', '%' ],
324	'allowed_dimensions' => 'all',
325	'separator' => 'before',
326	'selectors' => [
327	'{{WRAPPER}} .aux-modern-button' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
328	],
329	]
330	);
331
332	$this->end_controls_tab();
333
334	$this->start_controls_tab(
335	'button_hover',
336	[
337	'label' => __( 'Hover' , 'auxin-elements' )
338	]
339	);
340
341	$this->add_group_control(
342	Group_Control_Background::get_type(),
343	[
344	'name' => 'btn_bg_hover',
345	'label' => __( 'Background', 'auxin-elements' ),
346	'types' => [ 'classic', 'gradient' ],
347	'selector' => '{{WRAPPER}} .aux-modern-button.aux-modern-button-outline .aux-overlay:after, {{WRAPPER}} .aux-modern-button .aux-overlay:after'
348	]
349	);
350
351	$this->add_group_control(
352	Group_Control_Box_Shadow::get_type(),
353	[
354	'name' => 'btn_box_shadow_hover',
355	'selector' => '{{WRAPPER}} .aux-modern-button:hover'
356	]
357	);
358
359	$this->add_responsive_control(
360	'btn_padding_hover',
361	[
362	'label' => __( 'Padding', 'auxin-elements' ),
363	'type' => Controls_Manager::DIMENSIONS,
364	'size_units' => [ 'px', '%' ],
365	'selectors' => [
366	'{{WRAPPER}} .aux-modern-button:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
367	]
368	]
369	);
370
371	$this->add_responsive_control(
372	'btn_border_radius_hover',
373	[
374	'label' => __( 'Border Radius', 'auxin-elements' ),
375	'type' => Controls_Manager::DIMENSIONS,
376	'size_units' => [ 'px', 'em', '%' ],
377	'allowed_dimensions' => 'all',
378	'separator' => 'before',
379	'selectors' => [
380	'{{WRAPPER}} .aux-modern-button:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
381	],
382	]
383	);
384
385	$this->end_controls_tab();
386
387	$this->end_controls_tabs();
388
389	$this->end_controls_section();
390
391	/-----------------------------------------------------------------------------------/
392	/* Text Style Section
393	/-----------------------------------------------------------------------------------/
394
395	$this->start_controls_section(
396	'section_style_text',
397	[
398	'label' => __('Text', 'auxin-elements' ),
399	'tab' => Controls_Manager::TAB_STYLE
400	]
401	);
402
403
404	$this->start_controls_tabs( 'text_styles' );
405
406	$this->start_controls_tab(
407	'text_normal',
408	[
409	'label' => __( 'Normal' , 'auxin-elements' )
410	]
411	);
412
413	$this->add_group_control(
414	Group_Control_Typography::get_type(),
415	[
416	'name' => 'text_normal_typo',
417	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
418	'selector' => '{{WRAPPER}} .aux-text'
419	]
420	);
421
422	$this->add_control(
423	'text_normal_color',
424	[
425	'label' => __( 'Color', 'auxin-elements' ),
426	'type' => Controls_Manager::COLOR,
427	'selectors' => [
428	'{{WRAPPER}} .aux-text' => 'color: {{VALUE}};'
429	]
430	]
431
432	);
433
434	$this->add_group_control(
435	Group_Control_Text_Shadow::get_type(),
436	[
437	'name' => 'text_normal_text_shadow',
438	'label' => __( 'Text Shadow', 'auxin-elements' ),
439	'selector' => '{{WRAPPER}} .aux-text'
440	]
441	);
442
443	$this->end_controls_tab();
444
445	$this->start_controls_tab(
446	'text_hover',
447	[
448	'label' => __( 'Hover' , 'auxin-elements' )
449	]
450	);
451
452	$this->add_group_control(
453	Group_Control_Typography::get_type(),
454	[
455	'name' => 'text_hover_typo',
456	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
457	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
458	]
459	);
460
461	$this->add_control(
462	'text_hover_color',
463	[
464	'label' => __( 'Color', 'auxin-elements' ),
465	'type' => Controls_Manager::COLOR,
466	'selectors' => [
467	'{{WRAPPER}} .aux-modern-button:hover .aux-text' => 'color:{{VALUE}};'
468	]
469	]
470	);
471
472	$this->add_group_control(
473	Group_Control_Text_Shadow::get_type(),
474	[
475	'name' => 'text_hover_text_shadow',
476	'label' => __( 'Text Shadow', 'auxin-elements' ),
477	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-text'
478	]
479	);
480
481	$this->end_controls_tab();
482
483	$this->end_controls_tabs();
484
485	$this->end_controls_section();
486
487	/-----------------------------------------------------------------------------------/
488	/* Button Style Section
489	/-----------------------------------------------------------------------------------/
490
491	$this->start_controls_section(
492	'section_style_icon',
493	[
494	'label' => __('Icon', 'auxin-elements' ),
495	'tab' => Controls_Manager::TAB_STYLE,
496	'condition' => [
497	'icon_display' => 'yes'
498	]
499	]
500	);
501
502	$this->add_control(
503	'icon_align',
504	[
505	'label' => __('Alignment', 'auxin-elements'),
506	'type' => Controls_Manager::SELECT,
507	'default' => 'left',
508	'options' => [
509	'top' => __('Over', 'auxin-elements' ),
510	'bottom' => __('Below', 'auxin-elements' ),
511	'left' => __('Left', 'auxin-elements' ),
512	'right' => __('Right', 'auxin-elements' ),
513	]
514	]
515	);
516
517	$this->start_controls_tabs( 'icon_styles' );
518
519	$this->start_controls_tab(
520	'icon_normal',
521	[
522	'label' => __( 'Normal' , 'auxin-elements' )
523	]
524	);
525
526	$this->add_responsive_control(
527	'icon_normal_size',
528	[
529	'label' => __( 'Size', 'auxin-elements' ),
530	'type' => Controls_Manager::SLIDER,
531	'size_units' => [ 'px', '%' ],
532	'range' => [
533	'px' => [
534	'min' => 10,
535	'max' => 512,
536	'step' => 2,
537	],
538	'%' => [
539	'min' => 0,
540	'max' => 100,
541	],
542	],
543	'selectors' => [
544	'{{WRAPPER}} .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
545	]
546	]
547	);
548
549	$this->add_control(
550	'icon_normal_color',
551	[
552	'label' => __( 'Color', 'auxin-elements' ),
553	'type' => Controls_Manager::COLOR,
554	'selectors' => [
555	'{{WRAPPER}} .aux-icon' => 'color: {{VALUE}};',
556	]
557	]
558	);
559
560	$this->add_group_control(
561	Group_Control_Background::get_type(),
562	[
563	'name' => 'icon_normal_bg',
564	'label' => __( 'Background', 'auxin-elements' ),
565	'types' => [ 'classic', 'gradient' ],
566	'selector' => '{{WRAPPER}} .aux-icon:before',
567	]
568	);
569
570	$this->add_group_control(
571	Group_Control_Box_Shadow::get_type(),
572	[
573	'name' => 'icon_normal_box_shadow',
574	'selector' => '{{WRAPPER}} .aux-icon'
575	]
576	);
577
578	$this->add_responsive_control(
579	'icon_normal_margin',
580	[
581	'label' => __( 'Margin', 'auxin-elements' ),
582	'type' => Controls_Manager::DIMENSIONS,
583	'size_units' => [ 'px', '%' ],
584	'selectors' => [
585	'{{WRAPPER}} .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
586	]
587	]
588	);
589
590	$this->add_responsive_control(
591	'icon_normal_padding',
592	[
593	'label' => __( 'Padding', 'auxin-elements' ),
594	'type' => Controls_Manager::DIMENSIONS,
595	'size_units' => [ 'px', '%' ],
596	'selectors' => [
597	'{{WRAPPER}} .aux-icon' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
598	]
599	]
600	);
601
602	$this->add_responsive_control(
603	'icon_normal_border_radius',
604	[
605	'label' => __( 'Border Radius', 'auxin-elements' ),
606	'type' => Controls_Manager::DIMENSIONS,
607	'size_units' => [ 'px', 'em', '%' ],
608	'allowed_dimensions' => 'all',
609	'separator' => 'before',
610	'selectors' => [
611	'{{WRAPPER}} .aux-icon' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
612	],
613	]
614	);
615
616	$this->end_controls_tab();
617
618	$this->start_controls_tab(
619	'icon_hover',
620	[
621	'label' => __( 'Hover' , 'auxin-elements' )
622	]
623	);
624
625	$this->add_responsive_control(
626	'icon_hover_size',
627	[
628	'label' => __( 'Size', 'auxin-elements' ),
629	'type' => Controls_Manager::SLIDER,
630	'size_units' => [ 'px', '%' ],
631	'range' => [
632	'px' => [
633	'min' => 10,
634	'max' => 512,
635	'step' => 2,
636	],
637	'%' => [
638	'min' => 0,
639	'max' => 100,
640	],
641	],
642	'selectors' => [
643	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'font-size: {{SIZE}}{{UNIT}};',
644	]
645	]
646	);
647
648	$this->add_control(
649	'icon_hover_color',
650	[
651	'label' => __( 'Color', 'auxin-elements' ),
652	'type' => Controls_Manager::COLOR,
653	'selectors' => [
654	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'color: {{VALUE}};',
655	]
656	]
657	);
658
659	$this->add_group_control(
660	Group_Control_Background::get_type(),
661	[
662	'name' => 'icon_hover_bg',
663	'label' => __( 'Background', 'auxin-elements' ),
664	'types' => [ 'classic', 'gradient' ],
665	'selector' => '{{WRAPPER}} .aux-icon:after',
666	]
667	);
668
669	$this->add_group_control(
670	Group_Control_Box_Shadow::get_type(),
671	[
672	'name' => 'icon_hover_box_shadow',
673	'selector' => '{{WRAPPER}} .aux-modern-button:hover .aux-button'
674	]
675	);
676
677	$this->add_responsive_control(
678	'icon_hover_margin',
679	[
680	'label' => __( 'Margin', 'auxin-elements' ),
681	'type' => Controls_Manager::DIMENSIONS,
682	'size_units' => [ 'px', '%' ],
683	'selectors' => [
684	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
685	]
686	]
687	);
688
689	$this->add_responsive_control(
690	'icon_hover_padding',
691	[
692	'label' => __( 'Padding', 'auxin-elements' ),
693	'type' => Controls_Manager::DIMENSIONS,
694	'size_units' => [ 'px', '%' ],
695	'selectors' => [
696	'{{WRAPPER}} .aux-modern-button:hover .aux-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
697	]
698	]
699	);
700
701	$this->add_responsive_control(
702	'icon_hover_border_radius',
703	[
704	'label' => __( 'Border Radius', 'auxin-elements' ),
705	'type' => Controls_Manager::DIMENSIONS,
706	'size_units' => [ 'px', 'em', '%' ],
707	'allowed_dimensions' => 'all',
708	'separator' => 'before',
709	'selectors' => [
710	'{{WRAPPER}} .aux-icon:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
711	],
712	]
713	);
714
715	$this->end_controls_tab();
716
717	$this->end_controls_tabs();
718
719	$this->end_controls_section();
720	}
721
722	/**
723	* Render image box widget output on the frontend.
724	*
725	* Written in PHP and used to generate the final HTML.
726	*
727	* @since 1.0.0
728	* @access protected
729	*/
730	protected function render() {
731
732	$settings = $this->get_settings_for_display();
733
734	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-wrapper' );
735	$this->add_render_attribute( 'wrapper', 'class', 'aux-modern-button-align-' . $settings['btn_align'] );
736
737	$this->add_render_attribute( 'button', 'class', 'aux-modern-button' );
738	$this->add_render_attribute( 'button', 'class', 'aux-' . $settings['btn_skin'] );
739	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_size'] );
740	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_shape'] );
741	$this->add_render_attribute( 'button', 'class', 'aux-modern-button-' . $settings['btn_type'] );
742	$this->add_render_attribute( 'button', 'class', 'aux-icon-' . $settings['icon_align'] );
743
744	if ( ! empty( $settings['link']['url'] ) ) {
745	$this->add_link_attributes( 'button', $settings['link'] );
746	}
747
748	?>
749	<div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?> >
750	<a <?php echo $this->get_render_attribute_string( 'button' ); ?>>
751	<div class="aux-overlay"></div>
752	<?php if ( $settings['icon_display'] ) { ;?>
753	<div class="aux-icon ">
754	<?php Icons_Manager::render_icon( $settings['icon'], [ 'aria-hidden' => 'true' ] );?>
755	</div>
756	<?php };?>
757	<div class="aux-text"><?php echo esc_html( $settings['label'] ); ?></div>
758	</a>
759	</div>
760
761	<?php
762	}
763
764	}