elementor / modules / atomic-widgets / elements / atomic-tabs / atomic-tab.php

atomic-tab.php in Elementor Website Builder – more than just a page builder 3.34.2, at modules/atomic-widgets/elements/atomic-tabs/atomic-tab.php

192 lines 5.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs;
3
4	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Element_Base;
5	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
6	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
7	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
8	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
9	use Elementor\Modules\AtomicWidgets\Styles\Style_States;
10	use Elementor\Modules\AtomicWidgets\Controls\Section;
11	use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
12	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Paragraph\Atomic_Paragraph;
13	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
14	use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type;
15	use Elementor\Modules\AtomicWidgets\Render_Context;
16	use Elementor\Modules\AtomicWidgets\PropTypes\Background_Prop_Type;
17
18	if ( ! defined( 'ABSPATH' ) ) {
19	exit; // Exit if accessed directly.
20	}
21
22	class Atomic_Tab extends Atomic_Element_Base {
23	const BASE_STYLE_KEY = 'base';
24
25	public static function get_type() {
26	return 'e-tab';
27	}
28
29	public static function get_element_type(): string {
30	return 'e-tab';
31	}
32
33	public function get_title() {
34	return esc_html__( 'Tab trigger', 'elementor' );
35	}
36
37	public function get_keywords() {
38	return [ 'ato', 'atom', 'atoms', 'atomic' ];
39	}
40
41	public function get_icon() {
42	return 'eicon-layout';
43	}
44
45	public function should_show_in_panel() {
46	return false;
47	}
48
49	protected static function define_props_schema(): array {
50	return [
51	'classes' => Classes_Prop_Type::make()
52	->default( [] ),
53	'attributes' => Attributes_Prop_Type::make(),
54	];
55	}
56
57	protected function define_atomic_controls(): array {
58	return [
59	Section::make()
60	->set_label( __( 'Settings', 'elementor' ) )
61	->set_id( 'settings' )
62	->set_items( [] ),
63	];
64	}
65
66	protected function define_atomic_style_states(): array {
67	$selected_state = Style_States::get_class_states_map()['selected'];
68
69	return [ $selected_state ];
70	}
71
72	protected function define_base_styles(): array {
73	$styles = [
74	'display' => String_Prop_Type::generate( 'block' ),
75	'cursor' => String_Prop_Type::generate( 'pointer' ),
76	'color' => Color_Prop_Type::generate( '#0C0D0E' ),
77	'border-style' => String_Prop_Type::generate( 'solid' ),
78	'border-color' => Color_Prop_Type::generate( '#E0E0E0' ),
79	'border-width' => Size_Prop_Type::generate( [
80	'size' => 2,
81	'unit' => 'px',
82	]),
83	'padding' => Size_Prop_Type::generate( [
84	'size' => 8,
85	'unit' => 'px',
86	]),
87	'width' => Size_Prop_Type::generate( [
88	'size' => 160,
89	'unit' => 'px',
90	]),
91	'background' => Background_Prop_Type::generate( [
92	'color' => Color_Prop_Type::generate( '#FFFFFF' ),
93	]),
94	];
95
96	$selected_styles = [
97	'outline-width' => Size_Prop_Type::generate( [
98	'size' => 0,
99	'unit' => 'px',
100	]),
101	'border-color' => Color_Prop_Type::generate( '#0C0D0E' ),
102	];
103
104	$hover_styles = [
105	'background' => Background_Prop_Type::generate( [
106	'color' => Color_Prop_Type::generate( '#E0E0E0' ),
107	]),
108	];
109
110	return [
111	static::BASE_STYLE_KEY => Style_Definition::make()
112	->add_variant(
113	Style_Variant::make()
114	->add_props( $styles )
115	)
116	->add_variant(
117	Style_Variant::make()
118	->set_state( Style_States::SELECTED )
119	->add_props( $selected_styles )
120	)
121	->add_variant(
122	Style_Variant::make()
123	->set_state( Style_States::FOCUS )
124	->add_props( $selected_styles )
125	)
126	->add_variant(
127	Style_Variant::make()
128	->set_state( Style_States::HOVER )
129	->add_props( $hover_styles )
130	),
131	];
132	}
133
134	protected function define_initial_attributes() {
135	return [
136	'role' => 'tab',
137	'tabindex' => '-1',
138	];
139	}
140
141	protected function define_default_html_tag() {
142	return 'button';
143	}
144
145	protected function define_default_children() {
146	return [
147	Atomic_Paragraph::generate()
148	->settings( [
149	'paragraph' => String_Prop_Type::generate( 'Tab' ),
150	'tag' => String_Prop_Type::generate( 'span' ),
151	] )
152	->build(),
153	];
154	}
155
156	protected function add_render_attributes() {
157	parent::add_render_attributes();
158	$settings = $this->get_atomic_settings();
159	$base_style_class = $this->get_base_styles_dictionary()[ static::BASE_STYLE_KEY ];
160	$initial_attributes = $this->define_initial_attributes();
161
162	$tabs_context = Render_Context::get( Atomic_Tabs::class );
163	$default_active_tab = $tabs_context['default-active-tab'];
164	$get_tab_index = $tabs_context['get-tab-index'];
165	$tabs_id = $tabs_context['tabs-id'];
166
167	$index = $get_tab_index( $this->get_id() );
168	$is_active = $default_active_tab === $index;
169
170	$attributes = [
171	'class' => [
172	'e-con',
173	'e-atomic-element',
174	$base_style_class,
175	...( $settings['classes'] ?? [] ),
176	],
177	'tabindex' => $is_active ? '0' : '-1',
178	'aria-selected' => $is_active ? 'true' : 'false',
179	'x-bind' => 'tab',
180	'x-ref' => $this->get_id(),
181	'id' => Atomic_Tabs::get_tab_id( $tabs_id, $index ),
182	'aria-controls' => Atomic_Tabs::get_tab_content_id( $tabs_id, $index ),
183	];
184
185	if ( ! empty( $settings['_cssid'] ) ) {
186	$attributes['id'] = esc_attr( $settings['_cssid'] );
187	}
188
189	$this->add_render_attribute( '_wrapper', array_merge( $initial_attributes, $attributes ) );
190	}
191	}
192