heading-modern.php at 2.17.13 · Shortcodes and extra features for Phlox theme

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

heading-modern.php

1,261 lines 43.2 KB

Raw Download Zip

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\Group_Control_Text_Stroke;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Text_Shadow;
12	use Elementor\Group_Control_Background;
13
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly.
17	}
18
19	/**
20	* Elementor 'ModernHeading' widget.
21	*
22	* Elementor widget that displays an 'ModernHeading' with lightbox.
23	*
24	* @since 1.0.0
25	*/
26	class ModernHeading extends Widget_Base {
27
28	/**
29	* Get widget name.
30	*
31	* Retrieve 'ModernHeading' 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_heading';
40	}
41
42	/**
43	* Get widget title.
44	*
45	* Retrieve 'ModernHeading' 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 Heading', 'auxin-elements' );
54	}
55
56	public function has_widget_inner_wrapper(): bool {
57	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
58	}
59
60
61	/**
62	* Get widget icon.
63	*
64	* Retrieve 'ModernHeading' widget icon.
65	*
66	* @since 1.0.0
67	* @access public
68	*
69	* @return string Widget icon.
70	*/
71	public function get_icon() {
72	return 'eicon-heading auxin-badge';
73	}
74
75	/**
76	* Get widget categories.
77	*
78	* Retrieve 'ModernHeading' widget icon.
79	*
80	* @since 1.0.0
81	* @access public
82	*
83	* @return string Widget icon.
84	*/
85	public function get_categories() {
86	return array( 'auxin-core' );
87	}
88
89	/**
90	* Register 'ModernHeading' widget controls.
91	*
92	* Adds different input fields to allow the user to change and customize the widget settings.
93	*
94	* @since 1.0.0
95	* @access protected
96	*/
97	protected function register_controls() {
98
99	/-----------------------------------------------------------------------------------/
100	/* Content TAB
101	/-----------------------------------------------------------------------------------/
102
103	$this->start_controls_section(
104	'title_section',
105	array(
106	'label' => __('Heading', 'auxin-elements' ),
107	)
108	);
109
110	$this->add_control(
111	'title',
112	array(
113	'label' => __( 'Title', 'auxin-elements' ),
114	'type' => Controls_Manager::TEXTAREA,
115	'dynamic' => array(
116	'active' => true
117	),
118	'default' => __( 'Add your heading text here ..', 'auxin-elements' ),
119	'label_block' => true
120	)
121	);
122
123	$this->add_control(
124	'link',
125	array(
126	'label' => __('Link','auxin-elements' ),
127	'type' => Controls_Manager::URL,
128	'placeholder' => 'http://your-link.com',
129	'show_external' => true,
130	'label_block' => true,
131	'dynamic' => array(
132	'active' => true
133	)
134	)
135	);
136
137	$this->add_control(
138	'title_tag',
139	array(
140	'label' => __( 'HTML Tag', 'auxin-elements' ),
141	'type' => Controls_Manager::SELECT,
142	'options' => array(
143	'h1' => 'H1',
144	'h2' => 'H2',
145	'h3' => 'H3',
146	'h4' => 'H4',
147	'h5' => 'H5',
148	'h6' => 'H6',
149	'div' => 'div',
150	'span' => 'span',
151	'p' => 'p'
152	),
153	'default' => 'h2',
154	)
155	);
156
157	$this->add_responsive_control(
158	'alignment',
159	array(
160	'label' => __('Alignment', 'auxin-elements'),
161	'type' => Controls_Manager::CHOOSE,
162	'default' => '',
163	'options' => array(
164	'left' => array(
165	'title' => __( 'Left', 'auxin-elements' ),
166	'icon' => 'eicon-text-align-left',
167	),
168	'center' => array(
169	'title' => __( 'Center', 'auxin-elements' ),
170	'icon' => 'eicon-text-align-center',
171	),
172	'right' => array(
173	'title' => __( 'Right', 'auxin-elements' ),
174	'icon' => 'eicon-text-align-right',
175	)
176	),
177	'selectors_dictionary' => [
178	'left' => '',
179	'center' => 'text-align:center;margin-left:auto !important;margin-right:auto !important;',
180	'right' => 'text-align:right;margin-left:auto !important;'
181	],
182	'selectors' => [
183	'{{WRAPPER}} .aux-widget-inner > *' => '{{VALUE}}'
184	]
185	)
186	);
187
188	/* Divider
189	/-------------------------------------/
190
191	$this->add_control(
192	'divider',
193	array(
194	'label' => __( 'Display Divider', 'auxin-elements' ),
195	'type' => Controls_Manager::SWITCHER,
196	'label_on' => __( 'On', 'auxin-elements' ),
197	'label_off' => __( 'Off', 'auxin-elements' ),
198	'return_value' => 'yes',
199	'default' => 'yes',
200	'separator' => 'before'
201	)
202	);
203
204	$this->add_control(
205	'divider_position',
206	array(
207	'label' => __( 'Divider Position', 'auxin-elements' ),
208	'type' => Controls_Manager::SELECT,
209	'options' => array(
210	'before' => __( 'Before Heading', 'auxin-elements' ),
211	'between' => __( 'Between Headings', 'auxin-elements' ),
212	'after' => __( 'After Headings', 'auxin-elements' )
213	),
214	'default' => 'after',
215	'condition' => array(
216	'divider' => 'yes'
217	)
218	)
219	);
220
221	$this->end_controls_section();
222
223
224	/* Secondary heading
225	/-------------------------------------/
226
227	$this->start_controls_section(
228	'title_secondary_section',
229	array(
230	'label' => __('Secondary Heading', 'auxin-elements' ),
231	)
232	);
233
234	$this->add_control(
235	'title_secondary_before',
236	array(
237	'label' => __( 'Before Text', 'auxin-elements' ),
238	'type' => Controls_Manager::TEXT,
239	'dynamic' => array(
240	'active' => true
241	),
242	'default' => '',
243	'label_block' => true
244	)
245	);
246
247	$this->add_control(
248	'title_secondary_highlight',
249	array(
250	'label' => __( 'Highlighted Text', 'auxin-elements' ),
251	'type' => Controls_Manager::TEXT,
252	'dynamic' => array(
253	'active' => true
254	),
255	'default' => '',
256	'label_block' => true
257	)
258	);
259
260	$this->add_control(
261	'title_secondary_after',
262	array(
263	'label' => __( 'After Text', 'auxin-elements' ),
264	'type' => Controls_Manager::TEXT,
265	'dynamic' => array(
266	'active' => true
267	),
268	'default' => '',
269	'label_block' => true
270	)
271	);
272
273	$this->add_control(
274	'link_secondary',
275	array(
276	'label' => __('Link','auxin-elements' ),
277	'type' => Controls_Manager::URL,
278	'placeholder' => 'http://your-link.com',
279	'show_external' => true,
280	'label_block' => true,
281	'dynamic' => array(
282	'active' => true
283	)
284	)
285	);
286
287	$this->add_control(
288	'title_tag_secondary',
289	array(
290	'label' => __( 'HTML Tag', 'auxin-elements' ),
291	'type' => Controls_Manager::SELECT,
292	'options' => array(
293	'h1' => 'H1',
294	'h2' => 'H2',
295	'h3' => 'H3',
296	'h4' => 'H4',
297	'h5' => 'H5',
298	'h6' => 'H6',
299	'div' => 'div',
300	'span' => 'span',
301	'p' => 'p'
302	),
303	'default' => 'h3'
304	)
305	);
306
307	$this->end_controls_section();
308
309	/* Description
310	/-------------------------------------/
311
312	$this->start_controls_section(
313	'description_primary_section',
314	array(
315	'label' => __('Description', 'auxin-elements' ),
316	)
317	);
318
319	$this->add_control(
320	'description',
321	array(
322	'label' => __( 'Description', 'auxin-elements' ),
323	'type' => Controls_Manager::WYSIWYG,
324	'dynamic' => array(
325	'active' => true
326	),
327	'label_block' => true,
328	'separator' => 'before'
329	)
330	);
331
332	$this->end_controls_section();
333
334
335	/-----------------------------------------------------------------------------------/
336	/* Style TAB
337	/-----------------------------------------------------------------------------------/
338
339	/* Title Section
340	/-------------------------------------/
341
342	$this->start_controls_section(
343	'title_style_section',
344	array(
345	'label' => __( 'Heading', 'auxin-elements' ),
346	'tab' => Controls_Manager::TAB_STYLE,
347	'condition' => ['title!' => '']
348	)
349	);
350
351	$this->add_group_control(
352	Group_Control_Typography::get_type(),
353	array(
354	'name' => 'title_typography',
355	'global' => [
356	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
357	],
358	'selector' => '{{WRAPPER}} .aux-modern-heading-primary'
359	)
360	);
361
362	if ( class_exists( 'Elementor\Group_Control_Text_Stroke' ) ) {
363	$this->add_group_control(
364	Group_Control_Text_Stroke::get_type(),
365	[
366	'name' => 'title_stroke',
367	'selector' => '{{WRAPPER}} .aux-modern-heading-primary'
368	]
369	);
370	}
371
372	$this->start_controls_tabs( 'title_tabs' );
373
374	$this->start_controls_tab(
375	'title_tab_normal_state',
376	[
377	'label' => __( 'Normal', 'auxin-elements' ),
378	]
379	);
380
381	$this->add_responsive_control(
382	'title_color',
383	array(
384	'label' => __( 'Color', 'auxin-elements' ),
385	'type' => Controls_Manager::COLOR,
386	'selectors' => array(
387	'{{WRAPPER}} .aux-modern-heading-primary' => 'color: {{VALUE}};'
388	)
389	)
390	);
391
392	$this->add_group_control(
393	Group_Control_Text_Shadow::get_type(),
394	[
395	'name' => 'title_text_shadow',
396	'label' => __( 'Text Shadow', 'auxin-elements' ),
397	'selector' => '{{WRAPPER}} .aux-modern-heading-primary'
398	]
399	);
400
401	$this->add_group_control(
402	Group_Control_Background::get_type(),
403	[
404	'name' => 'title_background',
405	'selector' => '{{WRAPPER}} .aux-modern-heading-primary',
406	'types' => [ 'classic', 'gradient']
407	]
408	);
409
410	$this->end_controls_tab();
411
412	$this->start_controls_tab(
413	'title_tab_hover_state',
414	[
415	'label' => __( 'Hover', 'auxin-elements' ),
416	]
417	);
418
419	$this->add_responsive_control(
420	'title_hover_color',
421	array(
422	'label' => __( 'Color', 'auxin-elements' ),
423	'type' => Controls_Manager::COLOR,
424	'selectors' => array(
425	'{{WRAPPER}} .aux-modern-heading-primary:hover' => 'color: {{VALUE}};',
426	),
427	)
428	);
429
430	$this->add_group_control(
431	Group_Control_Text_Shadow::get_type(),
432	[
433	'name' => 'title_hover_text_shadow',
434	'label' => __( 'Text Shadow', 'auxin-elements' ),
435	'selector' => '{{WRAPPER}} .aux-modern-heading-primary:hover'
436	]
437	);
438
439	$this->add_group_control(
440	Group_Control_Background::get_type(),
441	[
442	'name' => 'title_hover_background',
443	'selector' => '{{WRAPPER}} .aux-modern-heading-primary:hover',
444	'types' => [ 'classic', 'gradient']
445	]
446	);
447
448	$this->end_controls_tab();
449
450	$this->end_controls_tabs();
451
452	$this->add_responsive_control(
453	'title_margin',
454	[
455	'label' => __( 'Margin', 'auxin-elements' ),
456	'type' => Controls_Manager::DIMENSIONS,
457	'size_units' => [ 'px', 'em', '%' ],
458	'selectors' => [
459	'{{WRAPPER}} .aux-modern-heading-primary' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
460	],
461	'separator' => 'before'
462	]
463	);
464
465	$this->add_responsive_control(
466	'title_padding',
467	[
468	'label' => __( 'Padding', 'auxin-elements' ),
469	'type' => Controls_Manager::DIMENSIONS,
470	'size_units' => [ 'px', 'em', '%' ],
471	'selectors' => [
472	'{{WRAPPER}} .aux-modern-heading-primary' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
473	]
474	]
475	);
476
477	$this->add_responsive_control(
478	'title_border_radius',
479	[
480	'label' => __( 'Border radius', 'auxin-elements' ),
481	'type' => Controls_Manager::DIMENSIONS,
482	'size_units' => [ 'px', 'em', '%' ],
483	'allowed_dimensions' => 'all',
484	'selectors' => [
485	'{{WRAPPER}} .aux-modern-heading-primary' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
486	]
487	]
488	);
489
490	$this->add_responsive_control(
491	'title_width',
492	array(
493	'label' => __('Max Width','auxin-elements' ),
494	'type' => Controls_Manager::SLIDER,
495	'size_units' => array('px', 'em','%'),
496	'range' => array(
497	'%' => array(
498	'min' => 1,
499	'max' => 100,
500	'step' => 1
501	),
502	'em' => array(
503	'min' => 1,
504	'max' => 100,
505	'step' => 1
506	),
507	'px' => array(
508	'min' => 1,
509	'max' => 1600,
510	'step' => 1
511	)
512	),
513	'selectors' => array(
514	'{{WRAPPER}} .aux-modern-heading-primary' => 'max-width:{{SIZE}}{{UNIT}};'
515	)
516	)
517	);
518
519	$this->end_controls_section();
520
521	/* Secondary title Section
522	/-------------------------------------/
523
524	$this->start_controls_section(
525	'title2_style_heading',
526	[
527	'label' => __( 'Secondary Heading', 'auxin-elements' ),
528	'tab' => Controls_Manager::TAB_STYLE,
529
530	'conditions' =>
531	[
532	'relation' => 'or',
533	'terms' => [
534	[
535	'name' => 'title_secondary_before',
536	'operator' => '!==',
537	'value' => '',
538	], [
539	'name' => 'title_secondary_after',
540	'operator' => '!==',
541	'value' => '',
542	]
543	]
544	]
545	]
546	);
547
548	$this->add_group_control(
549	Group_Control_Typography::get_type(),
550	array(
551	'name' => 'title2_typography',
552	'global' => [
553	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
554	],
555	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary'
556	)
557	);
558
559	$this->start_controls_tabs( 'title2_tabs' );
560
561	$this->start_controls_tab(
562	'title2_tab_normal_state',
563	[
564	'label' => __( 'Normal', 'auxin-elements' ),
565	]
566	);
567
568	$this->add_responsive_control(
569	'title2_color',
570	array(
571	'label' => __( 'Color', 'auxin-elements' ),
572	'type' => Controls_Manager::COLOR,
573	'selectors' => array(
574	'{{WRAPPER}} .aux-modern-heading-secondary' => 'color: {{VALUE}};'
575	)
576	)
577	);
578
579	$this->add_group_control(
580	Group_Control_Text_Shadow::get_type(),
581	[
582	'name' => 'title2_text_shadow',
583	'label' => __( 'Text Shadow', 'auxin-elements' ),
584	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary'
585	]
586	);
587
588	$this->add_group_control(
589	Group_Control_Background::get_type(),
590	[
591	'name' => 'title2_background',
592	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary',
593	'types' => [ 'classic', 'gradient']
594	]
595	);
596
597	$this->end_controls_tab();
598
599	$this->start_controls_tab(
600	'title2_tab_hover_state',
601	[
602	'label' => __( 'Hover', 'auxin-elements' ),
603	]
604	);
605
606	$this->add_responsive_control(
607	'title2_hover_color',
608	array(
609	'label' => __( 'Color', 'auxin-elements' ),
610	'type' => Controls_Manager::COLOR,
611	'selectors' => array(
612	'{{WRAPPER}} .aux-modern-heading-secondary:hover' => 'color: {{VALUE}};',
613	),
614	)
615	);
616
617	$this->add_group_control(
618	Group_Control_Text_Shadow::get_type(),
619	[
620	'name' => 'title2_hover_text_shadow',
621	'label' => __( 'Text Shadow', 'auxin-elements' ),
622	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary:hover'
623	]
624	);
625
626	$this->add_group_control(
627	Group_Control_Background::get_type(),
628	[
629	'name' => 'title2_hover_background',
630	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary:hover',
631	'types' => [ 'classic', 'gradient']
632	]
633	);
634
635	$this->end_controls_tab();
636
637	$this->end_controls_tabs();
638
639	$this->add_responsive_control(
640	'title2_margin',
641	[
642	'label' => __( 'Margin', 'auxin-elements' ),
643	'type' => Controls_Manager::DIMENSIONS,
644	'size_units' => [ 'px', 'em', '%' ],
645	'selectors' => [
646	'{{WRAPPER}} .aux-modern-heading-secondary' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
647	],
648	'separator' => 'before'
649	]
650	);
651
652	$this->add_responsive_control(
653	'title2_padding',
654	[
655	'label' => __( 'Padding', 'auxin-elements' ),
656	'type' => Controls_Manager::DIMENSIONS,
657	'size_units' => [ 'px', 'em', '%' ],
658	'selectors' => [
659	'{{WRAPPER}} .aux-modern-heading-secondary' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
660	]
661	]
662	);
663
664	$this->add_responsive_control(
665	'title2_border_radius',
666	[
667	'label' => __( 'Border radius', 'auxin-elements' ),
668	'type' => Controls_Manager::DIMENSIONS,
669	'size_units' => [ 'px', 'em', '%' ],
670	'allowed_dimensions' => 'all',
671	'selectors' => [
672	'{{WRAPPER}} .aux-modern-heading-secondary' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
673	]
674	]
675	);
676
677	$this->add_responsive_control(
678	'title2_width',
679	array(
680	'label' => __('Max Width','auxin-elements' ),
681	'type' => Controls_Manager::SLIDER,
682	'size_units' => array('px', 'em','%'),
683	'range' => array(
684	'%' => array(
685	'min' => 1,
686	'max' => 100,
687	'step' => 1
688	),
689	'em' => array(
690	'min' => 1,
691	'max' => 100,
692	'step' => 1
693	),
694	'px' => array(
695	'min' => 1,
696	'max' => 1600,
697	'step' => 1
698	)
699	),
700	'selectors' => array(
701	'{{WRAPPER}} .aux-modern-heading-secondary' => 'max-width:{{SIZE}}{{UNIT}};'
702	)
703	)
704	);
705
706	$this->end_controls_section();
707
708
709	/* Secondary Highlighted Style
710	/-------------------------------------/
711
712	$this->start_controls_section(
713	'title2_highlighted_style_heading',
714	[
715	'label' => __( 'Secondary Heading - Highlighted', 'auxin-elements' ),
716	'tab' => Controls_Manager::TAB_STYLE,
717	'condition' => [ 'title_secondary_highlight!' => '' ]
718	]
719	);
720
721	$this->add_group_control(
722	Group_Control_Typography::get_type(),
723	array(
724	'name' => 'title2_highlighted_typography',
725	'global' => [
726	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
727	],
728	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight'
729	)
730	);
731
732	$this->start_controls_tabs( 'title2_highlighted_tabs' );
733
734	$this->start_controls_tab(
735	'title2_highlighted_tab_normal_state',
736	[
737	'label' => __( 'Normal', 'auxin-elements' ),
738	]
739	);
740
741	$this->add_responsive_control(
742	'title2_highlighted_color',
743	array(
744	'label' => __( 'Color', 'auxin-elements' ),
745	'type' => Controls_Manager::COLOR,
746	'selectors' => array(
747	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight' => 'color: {{VALUE}};'
748	)
749	)
750	);
751
752	$this->add_group_control(
753	Group_Control_Text_Shadow::get_type(),
754	[
755	'name' => 'title2_highlighted_text_shadow',
756	'label' => __( 'Text Shadow', 'auxin-elements' ),
757	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight'
758	]
759	);
760
761	$this->add_group_control(
762	Group_Control_Background::get_type(),
763	[
764	'name' => 'title2_highlighted_background',
765	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight',
766	'types' => [ 'classic', 'gradient']
767	]
768	);
769
770	$this->end_controls_tab();
771
772	$this->start_controls_tab(
773	'title2_highlighted_tab_hover_state',
774	[
775	'label' => __( 'Hover', 'auxin-elements' ),
776	]
777	);
778
779	$this->add_responsive_control(
780	'title2_highlighted_hover_color',
781	array(
782	'label' => __( 'Color', 'auxin-elements' ),
783	'type' => Controls_Manager::COLOR,
784	'selectors' => array(
785	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight:hover' => 'color: {{VALUE}};',
786	),
787	)
788	);
789
790	$this->add_group_control(
791	Group_Control_Text_Shadow::get_type(),
792	[
793	'name' => 'title2_highlighted_hover_text_shadow',
794	'label' => __( 'Text Shadow', 'auxin-elements' ),
795	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight:hover'
796	]
797	);
798
799	$this->add_group_control(
800	Group_Control_Background::get_type(),
801	[
802	'name' => 'title2_highlighted_hover_background',
803	'selector' => '{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight:hover',
804	'types' => [ 'classic', 'gradient']
805	]
806	);
807
808	$this->end_controls_tab();
809
810	$this->end_controls_tabs();
811
812	$this->add_responsive_control(
813	'title2_highlighted_margin',
814	[
815	'label' => __( 'Margin', 'auxin-elements' ),
816	'type' => Controls_Manager::DIMENSIONS,
817	'size_units' => [ 'px', 'em', '%' ],
818	'selectors' => [
819	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
820	],
821	'separator' => 'before'
822	]
823	);
824
825	$this->add_responsive_control(
826	'title2_highlighted_padding',
827	[
828	'label' => __( 'Padding', 'auxin-elements' ),
829	'type' => Controls_Manager::DIMENSIONS,
830	'size_units' => [ 'px', 'em', '%' ],
831	'selectors' => [
832	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
833	]
834	]
835	);
836
837	$this->add_responsive_control(
838	'title2_highlighted_border_radius',
839	[
840	'label' => __( 'Border radius', 'auxin-elements' ),
841	'type' => Controls_Manager::DIMENSIONS,
842	'size_units' => [ 'px', 'em', '%' ],
843	'allowed_dimensions' => 'all',
844	'selectors' => [
845	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
846	]
847	]
848	);
849
850	$this->add_responsive_control(
851	'title2_highlighted_width',
852	array(
853	'label' => __('Max Width','auxin-elements' ),
854	'type' => Controls_Manager::SLIDER,
855	'size_units' => array('px', 'em','%'),
856	'range' => array(
857	'%' => array(
858	'min' => 1,
859	'max' => 100,
860	'step' => 1
861	),
862	'em' => array(
863	'min' => 1,
864	'max' => 100,
865	'step' => 1
866	),
867	'px' => array(
868	'min' => 1,
869	'max' => 1600,
870	'step' => 1
871	)
872	),
873	'selectors' => array(
874	'{{WRAPPER}} .aux-modern-heading-secondary .aux-head-highlight' => 'max-width:{{SIZE}}{{UNIT}};'
875	)
876	)
877	);
878
879	$this->end_controls_section();
880
881	/* Divider Section
882	/-------------------------------------/
883
884	$this->start_controls_section(
885	'divider_style_section',
886	[
887	'label' => __( 'Divider', 'auxin-elements' ),
888	'tab' => Controls_Manager::TAB_STYLE,
889	'condition' => [
890	'divider' => 'yes'
891	]
892	]
893	);
894
895	$this->add_responsive_control(
896	'divider_weight',
897	array(
898	'label' => __( 'Weight', 'auxin-elements' ),
899	'type' => Controls_Manager::SLIDER,
900	'size_units' => array( 'px' ),
901	'range' => array(
902	'px' => array(
903	'max' => 10
904	)
905	),
906	'selectors' => array(
907	'{{WRAPPER}} .aux-modern-heading-divider' => 'height: {{SIZE}}{{UNIT}};'
908	)
909	)
910	);
911
912	$this->add_responsive_control(
913	'divider_width',
914	array(
915	'label' => __( 'Width', 'auxin-elements' ),
916	'type' => Controls_Manager::SLIDER,
917	'size_units' => array( 'px', '%' ),
918	'range' => array(
919	'px' => array(
920	'min' => 1,
921	'max' => 1200
922	),
923	'%' => array(
924	'min' => 1,
925	'max' => 100
926	)
927	),
928	'selectors' => array(
929	'{{WRAPPER}} .aux-modern-heading-divider' => 'width: {{SIZE}}{{UNIT}};'
930	)
931	)
932	);
933
934	$this->add_responsive_control(
935	'divider_margin',
936	array(
937	'label' => __( 'Margin', 'auxin-elements' ),
938	'type' => Controls_Manager::DIMENSIONS,
939	'size_units' => array( 'px', 'em' ),
940	'allowed_dimensions' => 'all',
941	'selectors' => array(
942	'{{WRAPPER}} .aux-modern-heading-divider' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
943	)
944	)
945	);
946
947	$this->add_responsive_control(
948	'divider_color',
949	array(
950	'label' => __( 'Color', 'auxin-elements' ),
951	'type' => Controls_Manager::COLOR,
952	'selectors' => array(
953	'{{WRAPPER}} .aux-modern-heading-divider' => 'background-color: {{VALUE}};'
954	)
955	)
956	);
957
958	$this->add_group_control(
959	Group_Control_Box_Shadow::get_type(),
960	array(
961	'name' => 'divider_shadow',
962	'selector' => '{{WRAPPER}} .aux-modern-heading-divider',
963	'separator' => 'before'
964	)
965	);
966
967	$this->add_group_control(
968	Group_Control_Background::get_type(),
969	array(
970	'name' => 'divider_backgoundcolor',
971	'label' => __( 'Background', 'auxin-elements' ),
972	'selector' => '{{WRAPPER}} .aux-modern-heading-divider'
973	)
974	);
975
976	$this->end_controls_section();
977
978	/* Description Section
979	/-------------------------------------/
980
981	$this->start_controls_section(
982	'description_style_section',
983	array(
984	'label' => __( 'Description', 'auxin-elements' ),
985	'tab' => Controls_Manager::TAB_STYLE,
986	'condition' => [ 'description!' => '' ]
987	)
988	);
989
990	$this->add_responsive_control(
991	'description_color',
992	array(
993	'label' => __( 'Color', 'auxin-elements' ),
994	'type' => Controls_Manager::COLOR,
995	'selectors' => array(
996	'{{WRAPPER}} .aux-modern-heading-description' => 'color: {{VALUE}};'
997	)
998	)
999	);
1000
1001	$this->add_group_control(
1002	Group_Control_Typography::get_type(),
1003	array(
1004	'name' => 'description_typography',
1005	'global' => [
1006	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1007	],
1008	'selector' => '{{WRAPPER}} .aux-modern-heading-description'
1009	)
1010	);
1011
1012	$this->add_responsive_control(
1013	'description_margin',
1014	array(
1015	'label' => __( 'Margin', 'auxin-elements' ),
1016	'type' => Controls_Manager::DIMENSIONS,
1017	'size_units' => array( 'px', 'em' ),
1018	'allowed_dimensions' => 'all',
1019	'selectors' => array(
1020	'{{WRAPPER}} .aux-modern-heading-description' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1021	)
1022	)
1023	);
1024
1025	$this->add_responsive_control(
1026	'description_width',
1027	array(
1028	'label' => __('Max Width','auxin-elements' ),
1029	'type' => Controls_Manager::SLIDER,
1030	'size_units' => array('px', 'em','%'),
1031	'range' => array(
1032	'%' => array(
1033	'min' => 1,
1034	'max' => 100,
1035	'step' => 1
1036	),
1037	'em' => array(
1038	'min' => 1,
1039	'max' => 100,
1040	'step' => 1
1041	),
1042	'px' => array(
1043	'min' => 1,
1044	'max' => 1600,
1045	'step' => 1
1046	)
1047	),
1048	'selectors' => array(
1049	'{{WRAPPER}} .aux-modern-heading-description' => 'max-width:{{SIZE}}{{UNIT}};'
1050	)
1051	)
1052	);
1053
1054	$this->end_controls_section();
1055
1056	/* Wrapper Section
1057	/-------------------------------------/
1058
1059	$this->start_controls_section(
1060	'wrapper_style_section',
1061	array(
1062	'label' => __( 'Wrapper', 'auxin-elements' ),
1063	'tab' => Controls_Manager::TAB_STYLE
1064	)
1065	);
1066
1067	$this->add_responsive_control(
1068	'width',
1069	array(
1070	'label' => __('Width','auxin-elements' ),
1071	'type' => Controls_Manager::SLIDER,
1072	'size_units' => array('px', 'em','%', 'vw'),
1073	'range' => array(
1074	'%' => array(
1075	'min' => 1,
1076	'max' => 100,
1077	'step' => 1
1078	),
1079	'em' => array(
1080	'min' => 1,
1081	'max' => 100,
1082	'step' => 1
1083	),
1084	'px' => array(
1085	'min' => 1,
1086	'max' => 1600,
1087	'step' => 1
1088	)
1089	),
1090	'selectors' => array(
1091	'{{WRAPPER}} .aux-widget-modern-heading .aux-widget-inner' => 'width:{{SIZE}}{{UNIT}};'
1092	)
1093	)
1094	);
1095
1096	$this->add_responsive_control(
1097	'height',
1098	array(
1099	'label' => __('Height','auxin-elements' ),
1100	'type' => Controls_Manager::SLIDER,
1101	'size_units' => array('px', 'em', '%', 'vh'),
1102	'range' => array(
1103	'%' => array(
1104	'min' => 1,
1105	'max' => 100,
1106	'step' => 1
1107	),
1108	'em' => array(
1109	'min' => 1,
1110	'max' => 100,
1111	'step' => 1
1112	),
1113	'px' => array(
1114	'min' => 1,
1115	'max' => 1600,
1116	'step' => 1
1117	)
1118
1119	),
1120	'selectors' => array(
1121	'{{WRAPPER}} .aux-widget-modern-heading .aux-widget-inner' => 'height:{{SIZE}}{{UNIT}};'
1122	)
1123	)
1124	);
1125
1126	$this->add_responsive_control(
1127	'wrapper_margin',
1128	array(
1129	'label' => __( 'Margin', 'auxin-elements' ),
1130	'type' => Controls_Manager::DIMENSIONS,
1131	'size_units' => array( 'px', 'em'),
1132	'allowed_dimensions' => 'all',
1133	'selectors' => array(
1134	'{{WRAPPER}} .aux-widget-modern-heading .aux-widget-inner' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1135	)
1136	)
1137	);
1138
1139	$this->add_responsive_control(
1140	'wrapper_padding',
1141	array(
1142	'label' => __( 'Padding', 'auxin-elements' ),
1143	'type' => Controls_Manager::DIMENSIONS,
1144	'size_units' => array( 'px', 'em', '%'),
1145	'allowed_dimensions' => 'all',
1146	'selectors' => array(
1147	'{{WRAPPER}} .aux-widget-modern-heading .aux-widget-inner' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1148	)
1149	)
1150	);
1151
1152	$this->end_controls_section();
1153	}
1154
1155	/**
1156	* Render 'ModernHeading' widget output on the frontend.
1157	*
1158	* Written in PHP and used to generate the final HTML.
1159	*
1160	* @since 1.0.0
1161	* @access protected
1162	*/
1163	protected function render() {
1164
1165	$settings = $this->get_settings_for_display();
1166
1167	$divider_markup = auxin_is_true( $settings['divider'] ) ? '<div class="aux-modern-heading-divider"></div>' : '';
1168
1169	echo '<section class="aux-widget-modern-heading">
1170	<div class="aux-widget-inner">';
1171
1172	// Maybe print divider before
1173	if( empty( $settings['divider_position'] ) \|\| 'before' == $settings['divider_position'] ){
1174	echo wp_kses_post( $divider_markup );
1175	}
1176
1177	// Print Primary Heading
1178	if( ! empty( $settings['link']['url'] ) ){
1179
1180	// Make Link attributes
1181	$this->add_render_attribute( 'link-primary', 'href', esc_url( $settings['link']['url'] ) );
1182	$this->add_render_attribute( 'link-primary', 'class', 'aux-modern-heading-primary-link' );
1183	if ( $settings['link']['is_external'] ) {
1184	$this->add_render_attribute( 'link-primary', 'target', '_blank' );
1185	}
1186	if ( $settings['link']['nofollow'] ) {
1187	$this->add_render_attribute( 'link-primary', 'rel', 'nofollow' );
1188	}
1189
1190	printf( '<a %1$s><%2$s class="aux-modern-heading-primary">%3$s</%2$s></a>',
1191	$this->get_render_attribute_string( 'link-primary' ),
1192	tag_escape( $settings['title_tag'] ),
1193	wp_kses_post( $settings['title'] )
1194	);
1195
1196	} else {
1197	printf( '<%1$s class="aux-modern-heading-primary">%2$s</%1$s>',
1198	tag_escape( $settings['title_tag'] ),
1199	wp_kses_post( $settings['title'] )
1200	);
1201	}
1202
1203	// Maybe print divider between
1204	if( 'between' == $settings['divider_position'] ){
1205	echo wp_kses_post( $divider_markup );
1206	}
1207
1208	// Print Secondary Heading
1209	$before_heading = $settings['title_secondary_before'] ? '' . '<span class="aux-head-before">' . wp_kses_post( $settings['title_secondary_before'] ) . '</span>' : '';
1210	$highlight_heading = $settings['title_secondary_highlight'] ? '' . '<span class="aux-head-highlight">' . wp_kses_post( $settings['title_secondary_highlight'] ) . '</span>' : '';
1211	$after_heading = $settings['title_secondary_after' ] ? '' . '<span class="aux-head-after">' . wp_kses_post( $settings['title_secondary_after' ] ) . '</span>' : '';
1212
1213	if( $before_heading \|\| $highlight_heading \|\| $after_heading ){
1214
1215	if( ! empty( $settings['link_secondary']['url'] ) ){
1216
1217	// Make Link attributes
1218	$this->add_render_attribute( 'link-secondary', 'href', esc_url( $settings['link_secondary']['url'] ) );
1219	$this->add_render_attribute( 'link-secondary', 'class', 'aux-modern-heading-secondary-link' );
1220	if ( $settings['link_secondary']['is_external'] ) {
1221	$this->add_render_attribute( 'link-secondary', 'target', '_blank' );
1222	}
1223	if ( $settings['link_secondary']['nofollow'] ) {
1224	$this->add_render_attribute( 'link-secondary', 'rel', 'nofollow' );
1225	}
1226
1227	printf( '<a %1$s><%2$s class="aux-modern-heading-secondary">%3$s%4$s%5$s</%2$s></a>',
1228	$this->get_render_attribute_string( 'link-secondary' ),
1229	tag_escape( $settings['title_tag_secondary'] ),
1230	wp_kses_post( $before_heading ),
1231	wp_kses_post( $highlight_heading ),
1232	wp_kses_post( $after_heading )
1233	);
1234	} else {
1235	printf( '<%1$s class="aux-modern-heading-secondary">%2$s%3$s%4$s</%1$s>',
1236	tag_escape( $settings['title_tag_secondary'] ),
1237	wp_kses_post( $before_heading ),
1238	wp_kses_post( $highlight_heading ),
1239	wp_kses_post( $after_heading )
1240	);
1241	}
1242
1243	}
1244
1245	// Maybe Print divider after
1246	if( 'after' == $settings['divider_position'] ){
1247	echo wp_kses_post( $divider_markup );
1248	}
1249
1250	if( ! empty( $settings['description'] ) ){
1251	printf( '<div class="aux-modern-heading-description">%s</div>',
1252	wp_kses_post( $settings['description'] )
1253	);
1254	}
1255
1256	echo '</div>
1257	</section>';
1258	}
1259
1260	}
1261